@koobiq/components 19.8.0 → 20.0.0

package/fesm2022/koobiq-components-navbar.mjs

@@ -1,31 +1,29 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { Directive, inject, booleanAttribute, Input, ContentChild, ChangeDetectorRef, Optional, ChangeDetectionStrategy, ViewEncapsulation, Component, DestroyRef, forwardRef, ContentChildren, contentChildren, effect, InjectionToken, NgZone, afterNextRender, NgModule } from '@angular/core';
+import { Directive, inject, ElementRef, ChangeDetectorRef, NgZone, contentChild, booleanAttribute, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, input, DestroyRef, forwardRef, ContentChildren, contentChildren, effect, InjectionToken, afterNextRender, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { kbqInjectNativeElement, KBQ_WINDOW, PopUpTriggers, PopUpPlacements, ruRULocaleData, KBQ_LOCALE_SERVICE } from '@koobiq/components/core';
-import * as i2$1 from '@koobiq/components/tooltip';
+import { kbqInjectNativeElement, KBQ_WINDOW, PopUpTriggers, PopUpPlacements, DOWN_ARROW, RIGHT_ARROW, FocusKeyManager, isVerticalMovement, isHorizontalMovement, TAB, LEFT_ARROW, ruRULocaleData, KBQ_LOCALE_SERVICE, UP_ARROW, NUMPAD_DIVIDE, SLASH, SPACE, ENTER } from '@koobiq/components/core';
+import * as i2 from '@koobiq/components/tooltip';
 import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
 import * as i1 from '@angular/cdk/a11y';
-import { CdkMonitorFocus, A11yModule } from '@angular/cdk/a11y';
+import { FocusMonitor, CdkMonitorFocus, A11yModule } from '@angular/cdk/a11y';
 import { Platform, PlatformModule } from '@angular/cdk/platform';
-import { DOWN_ARROW, RIGHT_ARROW, isVerticalMovement, isHorizontalMovement, TAB, LEFT_ARROW, UP_ARROW, NUMPAD_DIVIDE, SLASH, SPACE, ENTER } from '@koobiq/cdk/keycodes';
 import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
-import * as i2 from '@koobiq/components/dropdown';
+import { KbqDropdownTrigger, KBQ_DROPDOWN_HOST } from '@koobiq/components/dropdown';
 import { KbqFormField } from '@koobiq/components/form-field';
 import * as i3 from '@koobiq/components/icon';
 import { KbqIcon, KbqIconModule } from '@koobiq/components/icon';
 import { Subject, merge } from 'rxjs';
 import { take, startWith, debounceTime } from 'rxjs/operators';
-import { FocusKeyManager } from '@koobiq/cdk/a11y';
 
 class KbqNavbarLogo {
     constructor() {
         this.hovered = new Subject();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarLogo, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqNavbarLogo, isStandalone: true, selector: "kbq-navbar-logo, [kbq-navbar-logo]", host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" }, classAttribute: "kbq-navbar-logo" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarLogo, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqNavbarLogo, isStandalone: true, selector: "kbq-navbar-logo, [kbq-navbar-logo]", host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" }, classAttribute: "kbq-navbar-logo" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarLogo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarLogo, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-logo, [kbq-navbar-logo]',
@@ -37,10 +35,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 class KbqNavbarBento {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarBento, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqNavbarBento, isStandalone: true, selector: "kbq-navbar-item[bento], [kbq-navbar-item][bento]", host: { classAttribute: "kbq-navbar-bento" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarBento, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqNavbarBento, isStandalone: true, selector: "kbq-navbar-item[bento], [kbq-navbar-item][bento]", host: { classAttribute: "kbq-navbar-bento" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarBento, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarBento, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-item[bento], [kbq-navbar-item][bento]',
@@ -75,10 +73,10 @@ class KbqNavbarTitle {
     ngAfterViewInit() {
         this.outerElementWidth = this.getOuterElementWidth();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqNavbarTitle, isStandalone: true, selector: "kbq-navbar-title, [kbq-navbar-title]", host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" }, properties: { "class.kbq-navbar-title_small": "isTextOverflown" }, classAttribute: "kbq-navbar-title" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqNavbarTitle, isStandalone: true, selector: "kbq-navbar-title, [kbq-navbar-title]", host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" }, properties: { "class.kbq-navbar-title_small": "isTextOverflown" }, classAttribute: "kbq-navbar-title" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-title, [kbq-navbar-title]',
@@ -91,10 +89,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 class KbqNavbarDivider {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqNavbarDivider, isStandalone: true, selector: "kbq-navbar-divider", host: { classAttribute: "kbq-navbar-divider" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqNavbarDivider, isStandalone: true, selector: "kbq-navbar-divider", host: { classAttribute: "kbq-navbar-divider" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarDivider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarDivider, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-divider',
@@ -104,8 +102,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 class KbqNavbarFocusableItem {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.focusMonitor = inject(FocusMonitor);
+        this.ngZone = inject(NgZone);
+        this.title = contentChild(KbqNavbarTitle, ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.button = contentChild(KbqButton, ...(ngDevMode ? [{ debugName: "button" }] : []));
+        this.formField = contentChild(KbqFormField, ...(ngDevMode ? [{ debugName: "formField" }] : []));
+        this.onFocus = new Subject();
+        this.onBlur = new Subject();
+        this._hasFocus = false;
+        this._disabled = false;
+    }
     get nestedElement() {
-        return this.button || this.formField;
+        return this.button() || this.formField();
     }
     get tooltip() {
         return this._tooltip;
@@ -117,6 +128,8 @@ class KbqNavbarFocusableItem {
         this._hasFocus = value;
     }
     /** Whether the item is disabled. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return this._disabled;
     }
@@ -129,22 +142,13 @@ class KbqNavbarFocusableItem {
     get tabIndex() {
         return -1;
     }
-    constructor(elementRef, changeDetector, focusMonitor, ngZone) {
-        this.elementRef = elementRef;
-        this.changeDetector = changeDetector;
-        this.focusMonitor = focusMonitor;
-        this.ngZone = ngZone;
-        this.onFocus = new Subject();
-        this.onBlur = new Subject();
-        this._hasFocus = false;
-        this._disabled = false;
-    }
     ngAfterViewInit() {
         this.focusMonitor.monitor(this.elementRef);
     }
     ngAfterContentInit() {
-        if (this.button) {
-            this.button.tabIndex = -1;
+        const button = this.button();
+        if (button) {
+            button.tabIndex = -1;
         }
     }
     ngOnDestroy() {
@@ -171,7 +175,13 @@ class KbqNavbarFocusableItem {
         }
         if (this.nestedElement) {
             if (origin === 'keyboard') {
-                this.nestedElement.focusViaKeyboard();
+                // KbqButton tracks focus via FocusMonitor; KbqFormField just delegates to control.focus.
+                if ('focusViaKeyboard' in this.nestedElement) {
+                    this.nestedElement.focusViaKeyboard();
+                }
+                else {
+                    this.nestedElement.focus();
+                }
             }
             this.changeDetector.markForCheck();
             return;
@@ -193,7 +203,7 @@ class KbqNavbarFocusableItem {
             this.ngZone.run(() => {
                 this._hasFocus = false;
                 this.tooltip?.hide();
-                if (this.button?.hasFocus) {
+                if (this.button()?.hasFocus) {
                     return;
                 }
                 this.onBlur.next({ item: this });
@@ -201,12 +211,12 @@ class KbqNavbarFocusableItem {
         });
     }
     getLabel() {
-        return this.title?.text || '';
+        return this.title()?.text || '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarFocusableItem, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: KbqNavbarFocusableItem, isStandalone: true, selector: "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "focus": "onFocusHandler()", "blur": "blur()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "class.kbq-navbar-item_has-nested": "!!nestedElement", "class.kbq-disabled": "disabled" }, classAttribute: "kbq-navbar-focusable-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true }, { propertyName: "formField", first: true, predicate: KbqFormField, descendants: true }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarFocusableItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.25", type: KbqNavbarFocusableItem, isStandalone: true, selector: "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "focus": "onFocusHandler()", "blur": "blur()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "class.kbq-navbar-item_has-nested": "!!nestedElement", "class.kbq-disabled": "disabled" }, classAttribute: "kbq-navbar-focusable-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true, isSignal: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true, isSignal: true }, { propertyName: "formField", first: true, predicate: KbqFormField, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarFocusableItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarFocusableItem, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle',
@@ -220,16 +230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '(blur)': 'blur()'
                     }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }, { type: i0.NgZone }], propDecorators: { title: [{
-                type: ContentChild,
-                args: [KbqNavbarTitle]
-            }], button: [{
-                type: ContentChild,
-                args: [KbqButton]
-            }], formField: [{
-                type: ContentChild,
-                args: [KbqFormField]
-            }], disabled: [{
+        }], propDecorators: { title: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqNavbarTitle), { isSignal: true }] }], button: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqButton), { isSignal: true }] }], formField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqFormField), { isSignal: true }] }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }] } });
@@ -242,6 +243,7 @@ class KbqNavbarRectangleElement {
         this.state = new Subject();
         this._horizontal = false;
         this._vertical = true;
+        this.button = contentChild(KbqButtonCssStyler, ...(ngDevMode ? [{ debugName: "button" }] : []));
     }
     get horizontal() {
         return this._horizontal;
@@ -278,10 +280,10 @@ class KbqNavbarRectangleElement {
         const { width, marginLeft, marginRight } = this.window.getComputedStyle(this.nativeElement);
         return [width, marginLeft, marginRight].reduce((acc, item) => acc + parseInt(item), 0);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarRectangleElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqNavbarRectangleElement, isStandalone: true, selector: "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-divider, kbq-navbar-brand, [kbq-navbar-brand]", host: { properties: { "class.kbq-vertical": "vertical", "class.kbq-horizontal": "horizontal", "class.kbq-expanded": "vertical && !collapsed", "class.kbq-collapsed": "vertical && collapsed" } }, queries: [{ propertyName: "button", first: true, predicate: KbqButtonCssStyler, descendants: true }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarRectangleElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.25", type: KbqNavbarRectangleElement, isStandalone: true, selector: "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-divider, kbq-navbar-brand, [kbq-navbar-brand]", host: { properties: { "class.kbq-vertical": "vertical", "class.kbq-horizontal": "horizontal", "class.kbq-expanded": "vertical && !collapsed", "class.kbq-collapsed": "vertical && collapsed" } }, queries: [{ propertyName: "button", first: true, predicate: KbqButtonCssStyler, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarRectangleElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarRectangleElement, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-item, [kbq-navbar-item], kbq-navbar-divider, kbq-navbar-brand, [kbq-navbar-brand]',
@@ -292,11 +294,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[class.kbq-collapsed]': 'vertical && collapsed'
                     }
                 }]
-        }], propDecorators: { button: [{
-                type: ContentChild,
-                args: [KbqButtonCssStyler]
-            }] } });
+        }], propDecorators: { button: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqButtonCssStyler), { isSignal: true }] }] } });
 class KbqNavbarItem extends KbqTooltipTrigger {
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get collapsedText() {
         return this._collapsedText;
     }
@@ -304,6 +305,8 @@ class KbqNavbarItem extends KbqTooltipTrigger {
         this._collapsedText = value;
         this.updateTooltip();
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get trigger() {
         return this._trigger;
     }
@@ -324,9 +327,11 @@ class KbqNavbarItem extends KbqTooltipTrigger {
         return this._collapsed ?? this.rectangleElement.collapsed;
     }
     get croppedText() {
-        const croppedTitleText = this.title?.isOverflown ? this.titleText : '';
+        const croppedTitleText = this.title()?.isOverflown ? this.titleText : '';
         return `${croppedTitleText}`;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get collapsable() {
         return this._collapsable;
     }
@@ -334,7 +339,7 @@ class KbqNavbarItem extends KbqTooltipTrigger {
         this._collapsable = coerceBooleanProperty(value);
     }
     get titleText() {
-        return this._collapsedText || this.title?.text || null;
+        return this._collapsedText || this.title()?.text || null;
     }
     get disabled() {
         if (this._disabled !== undefined) {
@@ -355,15 +360,17 @@ class KbqNavbarItem extends KbqTooltipTrigger {
         return this.hasDropDownTrigger && this.rectangleElement.horizontal && !this.isCollapsed;
     }
     get hasCroppedText() {
-        return !!this.title?.isOverflown;
+        return !!this.title()?.isOverflown;
     }
-    constructor(rectangleElement, navbarFocusableItem, changeDetectorRef, dropdownTrigger, bento) {
+    constructor() {
         super();
-        this.rectangleElement = rectangleElement;
-        this.navbarFocusableItem = navbarFocusableItem;
-        this.changeDetectorRef = changeDetectorRef;
-        this.dropdownTrigger = dropdownTrigger;
-        this.bento = bento;
+        this.rectangleElement = inject(KbqNavbarRectangleElement);
+        this.navbarFocusableItem = inject(KbqNavbarFocusableItem);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.dropdownTrigger = inject(KbqDropdownTrigger, { optional: true });
+        this.bento = inject(KbqNavbarBento, { optional: true });
+        this.title = contentChild(KbqNavbarTitle, ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.icon = contentChild(KbqIcon, ...(ngDevMode ? [{ debugName: "icon" }] : []));
         this._collapsed = false;
         this._collapsable = true;
         if (this.hasDropDownTrigger) {
@@ -386,7 +393,6 @@ class KbqNavbarItem extends KbqTooltipTrigger {
     updateDropdown() {
         if (!this.dropdownTrigger?.dropdown)
             return;
-        this.dropdownTrigger.demoteOverlay = false;
         if (this.rectangleElement.vertical) {
             this.dropdownTrigger.dropdown.overlapTriggerX = false;
             this.dropdownTrigger.dropdown.overlapTriggerY = true;
@@ -408,7 +414,7 @@ class KbqNavbarItem extends KbqTooltipTrigger {
         this.changeDetectorRef.markForCheck();
     }
     getTitleWidth() {
-        return this.title.outerElementWidth;
+        return this.title()?.outerElementWidth ?? 0;
     }
     onKeyDown($event) {
         if (!this.hasDropDownTrigger) {
@@ -422,30 +428,20 @@ class KbqNavbarItem extends KbqTooltipTrigger {
             $event.preventDefault();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarItem, deps: [{ token: KbqNavbarRectangleElement }, { token: KbqNavbarFocusableItem }, { token: i0.ChangeDetectorRef }, { token: i2.KbqDropdownTrigger, optional: true }, { token: KbqNavbarBento, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqNavbarItem, isStandalone: true, selector: "kbq-navbar-item, [kbq-navbar-item]", inputs: { collapsedText: "collapsedText", trigger: ["kbqTrigger", "trigger"], collapsable: "collapsable" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.kbq-navbar-item_collapsed": "isCollapsed", "class.kbq-navbar-item_with-title": "!!title" }, classAttribute: "kbq-navbar-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }, { propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], exportAs: ["kbqNavbarItem"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[kbq-icon]\" />\n\n@if (title) {\n    <div class=\"kbq-navbar-item__container\">\n        <div class=\"kbq-navbar-item__title\">\n            <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\" />\n        </div>\n        @if (showVerticalDropDownAngle) {\n            <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"kbq-chevron-right_16\" color=\"contrast\"></i>\n        }\n        @if (showHorizontalDropDownAngle) {\n            <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"kbq-chevron-down-s_16\" color=\"contrast\"></i>\n        }\n    </div>\n}\n\n<ng-content />\n", dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqNavbarItem, isStandalone: true, selector: "kbq-navbar-item, [kbq-navbar-item]", inputs: { collapsedText: "collapsedText", trigger: ["kbqTrigger", "trigger"], collapsable: "collapsable" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.kbq-navbar-item_collapsed": "isCollapsed", "class.kbq-navbar-item_with-title": "!!title()" }, classAttribute: "kbq-navbar-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true, isSignal: true }, { propertyName: "icon", first: true, predicate: KbqIcon, descendants: true, isSignal: true }], exportAs: ["kbqNavbarItem"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[kbq-icon]\" />\n\n@if (title()) {\n    <div class=\"kbq-navbar-item__container\">\n        <div class=\"kbq-navbar-item__title\">\n            <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\" />\n        </div>\n        @if (showVerticalDropDownAngle) {\n            <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"kbq-chevron-right_16\" color=\"contrast\"></i>\n        }\n        @if (showHorizontalDropDownAngle) {\n            <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"kbq-chevron-down-s_16\" color=\"contrast\"></i>\n        }\n    </div>\n}\n\n<ng-content />\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: KbqNavbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarItem, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-navbar-item, [kbq-navbar-item]', imports: [
                         KbqIcon
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqNavbarItem', host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-navbar-item',
                         '[class.kbq-navbar-item_collapsed]': 'isCollapsed',
-                        '[class.kbq-navbar-item_with-title]': '!!title',
+                        '[class.kbq-navbar-item_with-title]': '!!title()',
                         '(keydown)': 'onKeyDown($event)'
-                    }, template: "<ng-content select=\"[kbq-icon]\" />\n\n@if (title) {\n    <div class=\"kbq-navbar-item__container\">\n        <div class=\"kbq-navbar-item__title\">\n            <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\" />\n        </div>\n        @if (showVerticalDropDownAngle) {\n            <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"kbq-chevron-right_16\" color=\"contrast\"></i>\n        }\n        @if (showHorizontalDropDownAngle) {\n            <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"kbq-chevron-down-s_16\" color=\"contrast\"></i>\n        }\n    </div>\n}\n\n<ng-content />\n" }]
-        }], ctorParameters: () => [{ type: KbqNavbarRectangleElement }, { type: KbqNavbarFocusableItem }, { type: i0.ChangeDetectorRef }, { type: i2.KbqDropdownTrigger, decorators: [{
-                    type: Optional
-                }] }, { type: KbqNavbarBento, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { title: [{
-                type: ContentChild,
-                args: [KbqNavbarTitle]
-            }], icon: [{
-                type: ContentChild,
-                args: [KbqIcon]
-            }], collapsedText: [{
+                    }, exportAs: 'kbqNavbarItem', template: "<ng-content select=\"[kbq-icon]\" />\n\n@if (title()) {\n    <div class=\"kbq-navbar-item__container\">\n        <div class=\"kbq-navbar-item__title\">\n            <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\" />\n        </div>\n        @if (showVerticalDropDownAngle) {\n            <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"kbq-chevron-right_16\" color=\"contrast\"></i>\n        }\n        @if (showHorizontalDropDownAngle) {\n            <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"kbq-chevron-down-s_16\" color=\"contrast\"></i>\n        }\n    </div>\n}\n\n<ng-content />\n" }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqNavbarTitle), { isSignal: true }] }], icon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqIcon), { isSignal: true }] }], collapsedText: [{
                 type: Input
             }], trigger: [{
                 type: Input,
@@ -456,6 +452,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 
 class KbqNavbarBrand extends KbqTooltipTrigger {
     /** text that will be displayed in the tooltip. By default, the text is taken from kbq-navbar-title. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get collapsedText() {
         return this._collapsedText;
     }
@@ -468,16 +466,16 @@ class KbqNavbarBrand extends KbqTooltipTrigger {
     }
     /** @docs-private */
     get croppedText() {
-        const croppedTitleText = this.title?.isOverflown ? this.titleText : '';
+        const croppedTitleText = this.title()?.isOverflown ? this.titleText : '';
         return `${croppedTitleText}`;
     }
     /** @docs-private */
     get hasCroppedText() {
-        return !!this.title?.isOverflown;
+        return !!this.title()?.isOverflown;
     }
     /** @docs-private */
     get titleText() {
-        return this.collapsedText || this.title?.text || null;
+        return this.collapsedText || this.title()?.text || null;
     }
     /** @docs-private */
     get disabled() {
@@ -509,8 +507,10 @@ class KbqNavbarBrand extends KbqTooltipTrigger {
         this.rectangleElement = inject(KbqNavbarRectangleElement);
         /** @docs-private */
         this.navbarFocusableItem = inject(KbqNavbarFocusableItem);
+        /** @docs-private */
+        this.title = contentChild(KbqNavbarTitle, ...(ngDevMode ? [{ debugName: "title" }] : []));
         /** alternative display of the brand name in two lines */
-        this.longTitle = false;
+        this.longTitle = input(false, ...(ngDevMode ? [{ debugName: "longTitle" }] : []));
         this._collapsed = false;
         this.rectangleElement.state.pipe(takeUntilDestroyed()).subscribe(() => {
             this.collapsed = this.rectangleElement.collapsed;
@@ -537,30 +537,35 @@ class KbqNavbarBrand extends KbqTooltipTrigger {
         }
         this.changeDetectorRef.markForCheck();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqNavbarBrand, isStandalone: true, selector: "kbq-navbar-brand, [kbq-navbar-brand]", inputs: { longTitle: "longTitle", collapsedText: "collapsedText" }, host: { properties: { "class.kbq-navbar-brand_long-title": "longTitle", "class.kbq-navbar-brand_link": "isLink" }, classAttribute: "kbq-navbar-brand" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }], exportAs: ["kbqNavbarBrand"], usesInheritance: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqNavbarBrand, isStandalone: true, selector: "kbq-navbar-brand, [kbq-navbar-brand]", inputs: { longTitle: { classPropertyName: "longTitle", publicName: "longTitle", isSignal: true, isRequired: false, transformFunction: null }, collapsedText: { classPropertyName: "collapsedText", publicName: "collapsedText", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-navbar-brand_long-title": "longTitle()", "class.kbq-navbar-brand_link": "isLink" }, classAttribute: "kbq-navbar-brand" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true, isSignal: true }], exportAs: ["kbqNavbarBrand"], usesInheritance: true, ngImport: i0, template: `
         <ng-content />
     `, isInline: true, styles: ["button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:var(--kbq-size-s)}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xxs);align-items:center;gap:var(--kbq-size-s)}.kbq-navbar-brand.kbq-horizontal:after{top:var(--kbq-size-xxs);right:var(--kbq-size-xxs);bottom:var(--kbq-size-xxs);left:0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical{flex-direction:row;align-items:center;padding:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical:after{top:var(--kbq-size-s);right:var(--kbq-size-s);bottom:var(--kbq-size-s);left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none!important}.kbq-navbar-brand.kbq-vertical.kbq-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.kbq-navbar-brand:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-brand .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-brand>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link{cursor:pointer}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:after{display:block;box-shadow:inset 0 0 0 2px var(--kbq-states-line-focus-theme)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-selected-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-vertical:hover .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover .kbq-navbar-logo{z-index:1}.kbq-navbar-brand.kbq-navbar-focusable-item{outline:none}.kbq-navbar-brand .kbq-navbar-title{font-size:var(--kbq-typography-navbar-title-font-size);font-style:var(--kbq-typography-navbar-title-font-style);font-weight:var(--kbq-typography-navbar-title-font-weight);line-height:var(--kbq-typography-navbar-title-line-height);font-family:var(--kbq-typography-navbar-title-font-family);text-transform:var(--kbq-typography-navbar-title-text-transform);font-feature-settings:var(--kbq-typography-navbar-title-font-feature-settings);letter-spacing:var(--kbq-typography-navbar-title-letter-spacing)}.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title{font-size:var(--kbq-typography-text-normal-strong-font-size);font-style:var(--kbq-typography-text-normal-strong-font-style);font-weight:var(--kbq-typography-text-normal-strong-font-weight);line-height:var(--kbq-typography-text-normal-strong-line-height);font-family:var(--kbq-typography-text-normal-strong-font-family);text-transform:var(--kbq-typography-text-normal-strong-text-transform);font-feature-settings:var(--kbq-typography-text-normal-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-strong-letter-spacing)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarBrand, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarBrand, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-navbar-brand, [kbq-navbar-brand]', exportAs: 'kbqNavbarBrand', template: `
+            args: [{ selector: 'kbq-navbar-brand, [kbq-navbar-brand]', template: `
         <ng-content />
     `, host: {
                         class: 'kbq-navbar-brand',
-                        '[class.kbq-navbar-brand_long-title]': 'longTitle',
+                        '[class.kbq-navbar-brand_long-title]': 'longTitle()',
                         '[class.kbq-navbar-brand_link]': 'isLink'
-                    }, styles: ["button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:var(--kbq-size-s)}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xxs);align-items:center;gap:var(--kbq-size-s)}.kbq-navbar-brand.kbq-horizontal:after{top:var(--kbq-size-xxs);right:var(--kbq-size-xxs);bottom:var(--kbq-size-xxs);left:0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical{flex-direction:row;align-items:center;padding:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical:after{top:var(--kbq-size-s);right:var(--kbq-size-s);bottom:var(--kbq-size-s);left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none!important}.kbq-navbar-brand.kbq-vertical.kbq-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.kbq-navbar-brand:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-brand .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-brand>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link{cursor:pointer}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:after{display:block;box-shadow:inset 0 0 0 2px var(--kbq-states-line-focus-theme)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-selected-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-vertical:hover .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover .kbq-navbar-logo{z-index:1}.kbq-navbar-brand.kbq-navbar-focusable-item{outline:none}.kbq-navbar-brand .kbq-navbar-title{font-size:var(--kbq-typography-navbar-title-font-size);font-style:var(--kbq-typography-navbar-title-font-style);font-weight:var(--kbq-typography-navbar-title-font-weight);line-height:var(--kbq-typography-navbar-title-line-height);font-family:var(--kbq-typography-navbar-title-font-family);text-transform:var(--kbq-typography-navbar-title-text-transform);font-feature-settings:var(--kbq-typography-navbar-title-font-feature-settings);letter-spacing:var(--kbq-typography-navbar-title-letter-spacing)}.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title{font-size:var(--kbq-typography-text-normal-strong-font-size);font-style:var(--kbq-typography-text-normal-strong-font-style);font-weight:var(--kbq-typography-text-normal-strong-font-weight);line-height:var(--kbq-typography-text-normal-strong-line-height);font-family:var(--kbq-typography-text-normal-strong-font-family);text-transform:var(--kbq-typography-text-normal-strong-text-transform);font-feature-settings:var(--kbq-typography-text-normal-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-strong-letter-spacing)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{
-                type: ContentChild,
-                args: [KbqNavbarTitle]
-            }], longTitle: [{
-                type: Input
-            }], collapsedText: [{
+                    }, exportAs: 'kbqNavbarBrand', styles: ["button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:var(--kbq-size-s)}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xxs);align-items:center;gap:var(--kbq-size-s)}.kbq-navbar-brand.kbq-horizontal:after{top:var(--kbq-size-xxs);right:var(--kbq-size-xxs);bottom:var(--kbq-size-xxs);left:0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical{flex-direction:row;align-items:center;padding:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical:after{top:var(--kbq-size-s);right:var(--kbq-size-s);bottom:var(--kbq-size-s);left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none!important}.kbq-navbar-brand.kbq-vertical.kbq-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.kbq-navbar-brand:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-brand .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-brand>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link{cursor:pointer}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:after{display:block;box-shadow:inset 0 0 0 2px var(--kbq-states-line-focus-theme)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-selected-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-vertical:hover .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover .kbq-navbar-logo{z-index:1}.kbq-navbar-brand.kbq-navbar-focusable-item{outline:none}.kbq-navbar-brand .kbq-navbar-title{font-size:var(--kbq-typography-navbar-title-font-size);font-style:var(--kbq-typography-navbar-title-font-style);font-weight:var(--kbq-typography-navbar-title-font-weight);line-height:var(--kbq-typography-navbar-title-line-height);font-family:var(--kbq-typography-navbar-title-font-family);text-transform:var(--kbq-typography-navbar-title-text-transform);font-feature-settings:var(--kbq-typography-navbar-title-font-feature-settings);letter-spacing:var(--kbq-typography-navbar-title-letter-spacing)}.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title{font-size:var(--kbq-typography-text-normal-strong-font-size);font-style:var(--kbq-typography-text-normal-strong-font-style);font-weight:var(--kbq-typography-text-normal-strong-font-weight);line-height:var(--kbq-typography-text-normal-strong-line-height);font-family:var(--kbq-typography-text-normal-strong-font-family);text-transform:var(--kbq-typography-text-normal-strong-text-transform);font-feature-settings:var(--kbq-typography-text-normal-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-strong-letter-spacing)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqNavbarTitle), { isSignal: true }] }], longTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "longTitle", required: false }] }], collapsedText: [{
                 type: Input
             }] } });
 
 class KbqFocusableComponent {
+    constructor() {
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.elementRef = inject(ElementRef);
+        this.focusMonitor = inject(FocusMonitor);
+        this._tabIndex = 0;
+        this.lastFocusOrigin = null;
+        this.destroyRef = inject(DestroyRef);
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get tabIndex() {
         return this._tabIndex;
     }
@@ -573,14 +578,6 @@ class KbqFocusableComponent {
     get optionBlurChanges() {
         return merge(...this.focusableItems.map((option) => option.onBlur));
     }
-    constructor(changeDetectorRef, elementRef, focusMonitor) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.elementRef = elementRef;
-        this.focusMonitor = focusMonitor;
-        this._tabIndex = 0;
-        this.lastFocusOrigin = null;
-        this.destroyRef = inject(DestroyRef);
-    }
     ngAfterContentInit() {
         this.keyManager = new FocusKeyManager(this.focusableItems).withTypeAhead();
         this.keyManager.tabOut.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
@@ -654,22 +651,22 @@ class KbqFocusableComponent {
     hasFocusedItem() {
         return this.focusableItems.some((item) => item.hasFocus);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFocusableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqFocusableComponent, isStandalone: true, inputs: { tabIndex: "tabIndex" }, queries: [{ propertyName: "focusableItems", predicate: i0.forwardRef(() => KbqNavbarFocusableItem), descendants: true }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFocusableComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqFocusableComponent, isStandalone: true, inputs: { tabIndex: "tabIndex" }, queries: [{ propertyName: "focusableItems", predicate: i0.forwardRef(() => KbqNavbarFocusableItem), descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFocusableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFocusableComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.FocusMonitor }], propDecorators: { focusableItems: [{
+        }], propDecorators: { focusableItems: [{
                 type: ContentChildren,
                 args: [forwardRef(() => KbqNavbarFocusableItem), { descendants: true }]
             }], tabIndex: [{
                 type: Input
             }] } });
 class KbqNavbarContainer {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqNavbarContainer, isStandalone: true, selector: "kbq-navbar-container", host: { classAttribute: "kbq-navbar-container" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqNavbarContainer, isStandalone: true, selector: "kbq-navbar-container", host: { classAttribute: "kbq-navbar-container" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarContainer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-container',
@@ -690,17 +687,17 @@ class KbqNavbar extends KbqFocusableComponent {
         return this.rectangleElements().reduce((acc, item) => acc + item.getOuterElementWidth(), 0);
     }
     get collapsableItems() {
-        return this.navbarItems
-            .toArray()
-            .filter((item) => item.icon && item.title && item.collapsable)
+        return this.navbarItems()
+            .filter((item) => item.icon() && item.title() && item.collapsable)
             .reverse();
     }
-    constructor(elementRef, changeDetectorRef, focusMonitor) {
-        super(changeDetectorRef, elementRef, focusMonitor);
-        this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
-        this.focusMonitor = focusMonitor;
-        this.rectangleElements = contentChildren(forwardRef(() => KbqNavbarRectangleElement), { descendants: true });
+    constructor() {
+        const elementRef = inject(ElementRef);
+        const changeDetectorRef = inject(ChangeDetectorRef);
+        const focusMonitor = inject(FocusMonitor);
+        super();
+        this.rectangleElements = contentChildren(forwardRef(() => KbqNavbarRectangleElement), ...(ngDevMode ? [{ debugName: "rectangleElements", descendants: true }] : [{ descendants: true }]));
+        this.navbarItems = contentChildren(forwardRef(() => KbqNavbarItem), ...(ngDevMode ? [{ debugName: "navbarItems", descendants: true }] : [{ descendants: true }]));
         this.resizeStream = new Subject();
         this.resizeDebounceInterval = 100;
         this.updateExpandedStateForItems = () => {
@@ -716,6 +713,9 @@ class KbqNavbar extends KbqFocusableComponent {
         this.setItemsState = (rectangleElements) => {
             Promise.resolve().then(() => rectangleElements.forEach((item) => (item.horizontal = true)));
         };
+        this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
+        this.focusMonitor = focusMonitor;
         this.resizeSubscription = this.resizeStream
             .pipe(debounceTime(this.resizeDebounceInterval), takeUntilDestroyed())
             .subscribe(this.updateExpandedStateForItems);
@@ -787,16 +787,20 @@ class KbqNavbar extends KbqFocusableComponent {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.21", type: KbqNavbar, isStandalone: true, selector: "kbq-navbar", host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)", "window:resize": "resizeStream.next($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "kbq-navbar" }, queries: [{ propertyName: "rectangleElements", predicate: i0.forwardRef(() => KbqNavbarRectangleElement), descendants: true, isSignal: true }, { propertyName: "navbarItems", predicate: i0.forwardRef(() => KbqNavbarItem), descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqNavbar, isStandalone: true, selector: "kbq-navbar", host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)", "window:resize": "resizeStream.next($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "kbq-navbar" }, providers: [
+            { provide: KBQ_DROPDOWN_HOST, useExisting: KbqNavbar }
+        ], queries: [{ propertyName: "rectangleElements", predicate: i0.forwardRef(() => KbqNavbarRectangleElement), descendants: true, isSignal: true }, { propertyName: "navbarItems", predicate: i0.forwardRef(() => KbqNavbarItem), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-content select="[kbq-navbar-container], kbq-navbar-container" />
     `, isInline: true, styles: ["button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-navbar{z-index:1000;display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar .kbq-navbar-container+.kbq-navbar-container{margin-left:var(--kbq-size-xxl)}.kbq-navbar{background-color:var(--kbq-navbar-background)}.kbq-vertical-navbar .kbq-vertical-navbar__container{background-color:var(--kbq-navbar-vertical-background);border-right:1px solid var(--kbq-navbar-border)}.kbq-navbar-item{cursor:pointer}.kbq-navbar-item:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-item .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-item>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-item:hover:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled) .kbq-navbar-title,.kbq-navbar-item:hover:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled)>.kbq-icon.kbq-empty,.kbq-navbar-item:hover:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused:after{display:block;box-shadow:inset 0 0 0 2px var(--kbq-states-line-focus-theme)}.kbq-navbar-item:active:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-item.kbq-active:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-selected-content-background)}.kbq-navbar-item:active:not(.kbq-disabled) .kbq-navbar-title,.kbq-navbar-item.kbq-active:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-item:active:not(.kbq-disabled)>.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-left)!important}.kbq-navbar-item.kbq-navbar-focusable-item{outline:none}.kbq-navbar-item.kbq-disabled:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-disabled-content-background)}.kbq-navbar-item.kbq-disabled .kbq-navbar-title{color:var(--kbq-navbar-item-states-disabled-content-text)}.kbq-navbar-item.kbq-disabled>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-disabled-content-icon-left)!important}.kbq-navbar-item.kbq-disabled{pointer-events:none;cursor:default}.kbq-navbar-divider{background:var(--kbq-line-contrast-less)}.kbq-navbar-title{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n", ".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-navbar-item.kbq-vertical{height:41px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical{padding-right:var(--kbq-size-xl);padding-left:var(--kbq-size-xl)}.kbq-navbar-item.kbq-vertical:after{top:0;right:var(--kbq-size-s);bottom:1px;left:var(--kbq-size-s)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento{display:flex;justify-content:start;align-items:center;height:var(--kbq-size-5xl);padding-top:var(--kbq-size-s)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento:after{top:var(--kbq-size-s);bottom:0}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento+.kbq-navbar-brand.kbq-vertical{padding:var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento+.kbq-navbar-brand.kbq-vertical:after{top:0}.kbq-navbar-item.kbq-vertical.kbq-expanded{align-items:center;gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento .kbq-navbar-item__title{margin-left:-8px;opacity:0}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:hover .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.cdk-keyboard-focused .kbq-navbar-item__title{margin-left:0;opacity:1;transition:opacity .15s ease-out,margin-left .15s ease-out}.kbq-navbar-item.kbq-vertical.kbq-collapsed{width:var(--kbq-size-6xl);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:calc(-1 * var(--kbq-size-3xs));right:var(--kbq-size-xs)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center}button.kbq-navbar-item.kbq-vertical{width:100%}.kbq-navbar-item.kbq-horizontal{position:relative;flex-direction:row;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:var(--kbq-size-3xl);min-width:var(--kbq-size-3xl);margin:var(--kbq-size-s);justify-content:center}.kbq-navbar-item.kbq-horizontal:before{top:calc(-1 * var(--kbq-size-s));left:calc(-1 * var(--kbq-size-s));right:calc(-1 * var(--kbq-size-s));bottom:calc(-1 * var(--kbq-size-s))}.kbq-navbar-item.kbq-horizontal:after{inset:0}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){margin-left:0;margin-right:0;padding-right:var(--kbq-size-m);padding-left:var(--kbq-size-m)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):before{left:0;right:0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{align-self:center;padding-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{justify-content:center;margin-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:before{right:calc(-1 * var(--kbq-size-xxs))}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding:var(--kbq-size-s)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{position:absolute;z-index:1;top:-2px;right:-2px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested:before{left:calc(-1 * var(--kbq-size-m));right:calc(-1 * var(--kbq-size-m))}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-item .kbq-icon{min-width:var(--kbq-size-l);min-height:var(--kbq-size-l)}.kbq-navbar-item .kbq-button-icon{position:absolute;padding-left:var(--kbq-size-xs);padding-right:var(--kbq-size-xs);top:50%;transform:translateY(-50%)}.kbq-navbar-item:before{position:absolute;content:\"\"}.kbq-navbar-item:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-title{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", "button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:var(--kbq-size-s)}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xxs);align-items:center;gap:var(--kbq-size-s)}.kbq-navbar-brand.kbq-horizontal:after{top:var(--kbq-size-xxs);right:var(--kbq-size-xxs);bottom:var(--kbq-size-xxs);left:0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical{flex-direction:row;align-items:center;padding:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical:after{top:var(--kbq-size-s);right:var(--kbq-size-s);bottom:var(--kbq-size-s);left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none!important}.kbq-navbar-brand.kbq-vertical.kbq-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.kbq-navbar-brand:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-brand .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-brand>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link{cursor:pointer}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:after{display:block;box-shadow:inset 0 0 0 2px var(--kbq-states-line-focus-theme)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-selected-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-vertical:hover .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover .kbq-navbar-logo{z-index:1}.kbq-navbar-brand.kbq-navbar-focusable-item{outline:none}.kbq-navbar-brand .kbq-navbar-title{font-size:var(--kbq-typography-navbar-title-font-size);font-style:var(--kbq-typography-navbar-title-font-style);font-weight:var(--kbq-typography-navbar-title-font-weight);line-height:var(--kbq-typography-navbar-title-line-height);font-family:var(--kbq-typography-navbar-title-font-family);text-transform:var(--kbq-typography-navbar-title-text-transform);font-feature-settings:var(--kbq-typography-navbar-title-font-feature-settings);letter-spacing:var(--kbq-typography-navbar-title-letter-spacing)}.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title{font-size:var(--kbq-typography-text-normal-strong-font-size);font-style:var(--kbq-typography-text-normal-strong-font-style);font-weight:var(--kbq-typography-text-normal-strong-font-weight);line-height:var(--kbq-typography-text-normal-strong-line-height);font-family:var(--kbq-typography-text-normal-strong-font-family);text-transform:var(--kbq-typography-text-normal-strong-text-transform);font-feature-settings:var(--kbq-typography-text-normal-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-strong-letter-spacing)}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:var(--kbq-size-xs) var(--kbq-size-l)}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}\n", ".kbq-navbar,.kbq-vertical-navbar{--kbq-navbar-item-size-content-border-radius: var(--kbq-size-border-radius);--kbq-navbar-background: var(--kbq-background-bg);--kbq-navbar-vertical-background: var(--kbq-background-bg-tertiary);--kbq-navbar-border: var(--kbq-line-contrast-less);--kbq-navbar-item-default-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-default-content-background: transparent;--kbq-navbar-item-default-content-icon-left: var(--kbq-icon-contrast);--kbq-navbar-item-default-content-icon-right: var(--kbq-icon-contrast);--kbq-navbar-item-states-hover-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-hover-content-background: var(--kbq-states-background-transparent-hover);--kbq-navbar-item-states-hover-content-icon-left: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-hover-content-icon-right: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-selected-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-selected-content-background: var(--kbq-states-background-transparent-active);--kbq-navbar-item-states-selected-content-icon-left: var(--kbq-states-icon-contrast-active);--kbq-navbar-item-states-selected-content-icon-right: var(--kbq-states-icon-contrast-active);--kbq-navbar-item-states-selected-hover-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-selected-hover-content-background: var(--kbq-states-background-transparent-hover);--kbq-navbar-item-states-selected-hover-content-icon-left: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-selected-hover-content-icon-right: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-disabled-content-text: var(--kbq-states-foreground-disabled);--kbq-navbar-item-states-disabled-content-background: transparent;--kbq-navbar-item-states-disabled-content-icon-left: var(--kbq-states-icon-disabled);--kbq-navbar-item-states-disabled-content-icon-right: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbar, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-navbar', template: `
         <ng-content select="[kbq-navbar-container], kbq-navbar-container" />
-    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+    `, providers: [
+                        { provide: KBQ_DROPDOWN_HOST, useExisting: KbqNavbar }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-navbar',
                         '[attr.tabindex]': 'tabIndex',
                         '(focus)': 'focus()',
@@ -804,10 +808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '(keydown)': 'onKeyDown($event)',
                         '(window:resize)': 'resizeStream.next($event)'
                     }, styles: ["button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-navbar{z-index:1000;display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar .kbq-navbar-container+.kbq-navbar-container{margin-left:var(--kbq-size-xxl)}.kbq-navbar{background-color:var(--kbq-navbar-background)}.kbq-vertical-navbar .kbq-vertical-navbar__container{background-color:var(--kbq-navbar-vertical-background);border-right:1px solid var(--kbq-navbar-border)}.kbq-navbar-item{cursor:pointer}.kbq-navbar-item:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-item .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-item>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-item:hover:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled) .kbq-navbar-title,.kbq-navbar-item:hover:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled)>.kbq-icon.kbq-empty,.kbq-navbar-item:hover:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused:after{display:block;box-shadow:inset 0 0 0 2px var(--kbq-states-line-focus-theme)}.kbq-navbar-item:active:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-item.kbq-active:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-selected-content-background)}.kbq-navbar-item:active:not(.kbq-disabled) .kbq-navbar-title,.kbq-navbar-item.kbq-active:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-item:active:not(.kbq-disabled)>.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-left)!important}.kbq-navbar-item.kbq-navbar-focusable-item{outline:none}.kbq-navbar-item.kbq-disabled:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-disabled-content-background)}.kbq-navbar-item.kbq-disabled .kbq-navbar-title{color:var(--kbq-navbar-item-states-disabled-content-text)}.kbq-navbar-item.kbq-disabled>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-disabled-content-icon-left)!important}.kbq-navbar-item.kbq-disabled{pointer-events:none;cursor:default}.kbq-navbar-divider{background:var(--kbq-line-contrast-less)}.kbq-navbar-title{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n", ".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-navbar-item.kbq-vertical{height:41px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical{padding-right:var(--kbq-size-xl);padding-left:var(--kbq-size-xl)}.kbq-navbar-item.kbq-vertical:after{top:0;right:var(--kbq-size-s);bottom:1px;left:var(--kbq-size-s)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento{display:flex;justify-content:start;align-items:center;height:var(--kbq-size-5xl);padding-top:var(--kbq-size-s)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento:after{top:var(--kbq-size-s);bottom:0}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento+.kbq-navbar-brand.kbq-vertical{padding:var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento+.kbq-navbar-brand.kbq-vertical:after{top:0}.kbq-navbar-item.kbq-vertical.kbq-expanded{align-items:center;gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento .kbq-navbar-item__title{margin-left:-8px;opacity:0}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:hover .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.cdk-keyboard-focused .kbq-navbar-item__title{margin-left:0;opacity:1;transition:opacity .15s ease-out,margin-left .15s ease-out}.kbq-navbar-item.kbq-vertical.kbq-collapsed{width:var(--kbq-size-6xl);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:calc(-1 * var(--kbq-size-3xs));right:var(--kbq-size-xs)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center}button.kbq-navbar-item.kbq-vertical{width:100%}.kbq-navbar-item.kbq-horizontal{position:relative;flex-direction:row;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:var(--kbq-size-3xl);min-width:var(--kbq-size-3xl);margin:var(--kbq-size-s);justify-content:center}.kbq-navbar-item.kbq-horizontal:before{top:calc(-1 * var(--kbq-size-s));left:calc(-1 * var(--kbq-size-s));right:calc(-1 * var(--kbq-size-s));bottom:calc(-1 * var(--kbq-size-s))}.kbq-navbar-item.kbq-horizontal:after{inset:0}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){margin-left:0;margin-right:0;padding-right:var(--kbq-size-m);padding-left:var(--kbq-size-m)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):before{left:0;right:0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{align-self:center;padding-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{justify-content:center;margin-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:before{right:calc(-1 * var(--kbq-size-xxs))}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding:var(--kbq-size-s)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{position:absolute;z-index:1;top:-2px;right:-2px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested:before{left:calc(-1 * var(--kbq-size-m));right:calc(-1 * var(--kbq-size-m))}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-item .kbq-icon{min-width:var(--kbq-size-l);min-height:var(--kbq-size-l)}.kbq-navbar-item .kbq-button-icon{position:absolute;padding-left:var(--kbq-size-xs);padding-right:var(--kbq-size-xs);top:50%;transform:translateY(-50%)}.kbq-navbar-item:before{position:absolute;content:\"\"}.kbq-navbar-item:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-title{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", "button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:var(--kbq-size-s)}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xxs);align-items:center;gap:var(--kbq-size-s)}.kbq-navbar-brand.kbq-horizontal:after{top:var(--kbq-size-xxs);right:var(--kbq-size-xxs);bottom:var(--kbq-size-xxs);left:0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical{flex-direction:row;align-items:center;padding:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical:after{top:var(--kbq-size-s);right:var(--kbq-size-s);bottom:var(--kbq-size-s);left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none!important}.kbq-navbar-brand.kbq-vertical.kbq-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.kbq-navbar-brand:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-brand .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-brand>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link{cursor:pointer}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:after{display:block;box-shadow:inset 0 0 0 2px var(--kbq-states-line-focus-theme)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-selected-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-vertical:hover .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover .kbq-navbar-logo{z-index:1}.kbq-navbar-brand.kbq-navbar-focusable-item{outline:none}.kbq-navbar-brand .kbq-navbar-title{font-size:var(--kbq-typography-navbar-title-font-size);font-style:var(--kbq-typography-navbar-title-font-style);font-weight:var(--kbq-typography-navbar-title-font-weight);line-height:var(--kbq-typography-navbar-title-line-height);font-family:var(--kbq-typography-navbar-title-font-family);text-transform:var(--kbq-typography-navbar-title-text-transform);font-feature-settings:var(--kbq-typography-navbar-title-font-feature-settings);letter-spacing:var(--kbq-typography-navbar-title-letter-spacing)}.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title{font-size:var(--kbq-typography-text-normal-strong-font-size);font-style:var(--kbq-typography-text-normal-strong-font-style);font-weight:var(--kbq-typography-text-normal-strong-font-weight);line-height:var(--kbq-typography-text-normal-strong-line-height);font-family:var(--kbq-typography-text-normal-strong-font-family);text-transform:var(--kbq-typography-text-normal-strong-text-transform);font-feature-settings:var(--kbq-typography-text-normal-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-strong-letter-spacing)}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:var(--kbq-size-xs) var(--kbq-size-l)}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}\n", ".kbq-navbar,.kbq-vertical-navbar{--kbq-navbar-item-size-content-border-radius: var(--kbq-size-border-radius);--kbq-navbar-background: var(--kbq-background-bg);--kbq-navbar-vertical-background: var(--kbq-background-bg-tertiary);--kbq-navbar-border: var(--kbq-line-contrast-less);--kbq-navbar-item-default-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-default-content-background: transparent;--kbq-navbar-item-default-content-icon-left: var(--kbq-icon-contrast);--kbq-navbar-item-default-content-icon-right: var(--kbq-icon-contrast);--kbq-navbar-item-states-hover-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-hover-content-background: var(--kbq-states-background-transparent-hover);--kbq-navbar-item-states-hover-content-icon-left: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-hover-content-icon-right: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-selected-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-selected-content-background: var(--kbq-states-background-transparent-active);--kbq-navbar-item-states-selected-content-icon-left: var(--kbq-states-icon-contrast-active);--kbq-navbar-item-states-selected-content-icon-right: var(--kbq-states-icon-contrast-active);--kbq-navbar-item-states-selected-hover-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-selected-hover-content-background: var(--kbq-states-background-transparent-hover);--kbq-navbar-item-states-selected-hover-content-icon-left: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-selected-hover-content-icon-right: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-disabled-content-text: var(--kbq-states-foreground-disabled);--kbq-navbar-item-states-disabled-content-background: transparent;--kbq-navbar-item-states-disabled-content-icon-left: var(--kbq-states-icon-disabled);--kbq-navbar-item-states-disabled-content-icon-right: var(--kbq-states-icon-disabled)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }], propDecorators: { navbarItems: [{
-                type: ContentChildren,
-                args: [forwardRef(() => KbqNavbarItem), { descendants: true }]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { rectangleElements: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqNavbarRectangleElement), { ...{ descendants: true }, isSignal: true }] }], navbarItems: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqNavbarItem), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /** default configuration of navbar */
 /** @docs-private */
@@ -816,6 +817,8 @@ const KBQ_VERTICAL_NAVBAR_DEFAULT_CONFIGURATION = ruRULocaleData.navbar;
 /** @docs-private */
 const KBQ_VERTICAL_NAVBAR_CONFIGURATION = new InjectionToken('KbqVerticalNavbarConfiguration');
 class KbqVerticalNavbar extends KbqFocusableComponent {
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get expanded() {
         return this._expanded;
     }
@@ -823,18 +826,20 @@ class KbqVerticalNavbar extends KbqFocusableComponent {
         this._expanded = coerceBooleanProperty(value);
         this.updateExpandedStateForItems();
     }
-    constructor(elementRef, changeDetectorRef, focusMonitor) {
-        super(changeDetectorRef, elementRef, focusMonitor);
-        this.elementRef = elementRef;
+    constructor() {
+        const elementRef = inject(ElementRef);
+        super();
         /** @docs-private */
         this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
         this.externalConfiguration = inject(KBQ_VERTICAL_NAVBAR_CONFIGURATION, { optional: true });
-        this.rectangleElements = contentChildren(forwardRef(() => KbqNavbarRectangleElement), { descendants: true });
+        this.rectangleElements = contentChildren(forwardRef(() => KbqNavbarRectangleElement), ...(ngDevMode ? [{ debugName: "rectangleElements", descendants: true }] : [{ descendants: true }]));
+        this.items = contentChildren(forwardRef(() => KbqNavbarItem), ...(ngDevMode ? [{ debugName: "items", descendants: true }] : [{ descendants: true }]));
+        this.bento = contentChild(forwardRef(() => KbqNavbarBento), ...(ngDevMode ? [{ debugName: "bento" }] : []));
         this.animationDone = new Subject();
-        this.openOver = false;
+        this.openOver = input(false, ...(ngDevMode ? [{ debugName: "openOver" }] : []));
         this._expanded = false;
         this.updateExpandedStateForItems = () => this.rectangleElements().forEach(this.updateItemExpandedState);
-        this.updateTooltipForItems = () => this.items.forEach((item) => item.updateTooltip());
+        this.updateTooltipForItems = () => this.items().forEach((item) => item.updateTooltip());
         this.setItemsVerticalStateAndUpdateExpandedState = (rectangleElements) => rectangleElements.forEach(this.setItemVerticalStateAndUpdateExpandedState);
         this.setItemVerticalStateAndUpdateExpandedState = (item) => {
             queueMicrotask(() => this.setItemVerticalState(item));
@@ -845,12 +850,13 @@ class KbqVerticalNavbar extends KbqFocusableComponent {
         };
         this.updateItemExpandedState = (item) => {
             item.collapsed = !this.expanded;
-            setTimeout(() => item.button?.updateClassModifierForIcons());
+            setTimeout(() => item.button()?.updateClassModifierForIcons());
         };
         this.updateLocaleParams = () => {
             this.configuration = this.externalConfiguration || this.localeService?.getParams('navbar');
             this.changeDetectorRef.markForCheck();
         };
+        this.elementRef = elementRef;
         this.animationDone.pipe(takeUntilDestroyed()).subscribe(this.updateTooltipForItems);
         effect(() => this.setItemsVerticalStateAndUpdateExpandedState(this.rectangleElements()));
         this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
@@ -890,39 +896,31 @@ class KbqVerticalNavbar extends KbqFocusableComponent {
     initDefaultParams() {
         this.configuration = KBQ_VERTICAL_NAVBAR_DEFAULT_CONFIGURATION;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqVerticalNavbar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.21", type: KbqVerticalNavbar, isStandalone: true, selector: "kbq-vertical-navbar", inputs: { openOver: "openOver", expanded: "expanded" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)" }, properties: { "class.kbq-vertical-navbar_open-over": "openOver", "attr.tabindex": "tabIndex", "attr.cdkMonitorSubtreeFocus": "true" }, classAttribute: "kbq-vertical-navbar" }, queries: [{ propertyName: "rectangleElements", predicate: i0.forwardRef(() => KbqNavbarRectangleElement), descendants: true, isSignal: true }, { propertyName: "bento", first: true, predicate: i0.forwardRef(() => KbqNavbarBento), descendants: true }, { propertyName: "items", predicate: i0.forwardRef(() => KbqNavbarItem), descendants: true }], exportAs: ["KbqVerticalNavbar"], usesInheritance: true, hostDirectives: [{ directive: i1.CdkMonitorFocus }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqVerticalNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqVerticalNavbar, isStandalone: true, selector: "kbq-vertical-navbar", inputs: { openOver: { classPropertyName: "openOver", publicName: "openOver", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)" }, properties: { "class.kbq-vertical-navbar_open-over": "openOver()", "attr.tabindex": "tabIndex", "attr.cdkMonitorSubtreeFocus": "true" }, classAttribute: "kbq-vertical-navbar" }, queries: [{ propertyName: "rectangleElements", predicate: i0.forwardRef(() => KbqNavbarRectangleElement), descendants: true, isSignal: true }, { propertyName: "items", predicate: i0.forwardRef(() => KbqNavbarItem), descendants: true, isSignal: true }, { propertyName: "bento", first: true, predicate: i0.forwardRef(() => KbqNavbarBento), descendants: true, isSignal: true }], exportAs: ["KbqVerticalNavbar"], usesInheritance: true, hostDirectives: [{ directive: i1.CdkMonitorFocus }], ngImport: i0, template: `
         <div class="kbq-vertical-navbar__container" [class.kbq-collapsed]="!expanded" [class.kbq-expanded]="expanded">
             <ng-content select="[kbq-navbar-container], kbq-navbar-container" />
             <ng-content select="[kbq-navbar-toggle], kbq-navbar-toggle" />
         </div>
     `, isInline: true, styles: ["button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-vertical-navbar{display:flex;flex-shrink:0;position:relative;min-width:var(--kbq-size-6xl);height:100%}.kbq-vertical-navbar:not(:hover,.kbq-hovered,.cdk-keyboard-focused) .kbq-navbar-toggle{display:none}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-navbar-container+.kbq-navbar-container{padding-top:var(--kbq-size-xxl);padding-bottom:var(--kbq-size-s)}.kbq-vertical-navbar .kbq-vertical-navbar__container{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:var(--kbq-size-6xl)}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:240px}.kbq-vertical-navbar.kbq-vertical-navbar_open-over .kbq-vertical-navbar__container{position:absolute;z-index:998}.kbq-navbar{background-color:var(--kbq-navbar-background)}.kbq-vertical-navbar .kbq-vertical-navbar__container{background-color:var(--kbq-navbar-vertical-background);border-right:1px solid var(--kbq-navbar-border)}.kbq-navbar-item{cursor:pointer}.kbq-navbar-item:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-item .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-item>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-item:hover:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled) .kbq-navbar-title,.kbq-navbar-item:hover:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled)>.kbq-icon.kbq-empty,.kbq-navbar-item:hover:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused:after{display:block;box-shadow:inset 0 0 0 2px var(--kbq-states-line-focus-theme)}.kbq-navbar-item:active:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-item.kbq-active:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-selected-content-background)}.kbq-navbar-item:active:not(.kbq-disabled) .kbq-navbar-title,.kbq-navbar-item.kbq-active:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-item:active:not(.kbq-disabled)>.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-left)!important}.kbq-navbar-item.kbq-navbar-focusable-item{outline:none}.kbq-navbar-item.kbq-disabled:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-disabled-content-background)}.kbq-navbar-item.kbq-disabled .kbq-navbar-title{color:var(--kbq-navbar-item-states-disabled-content-text)}.kbq-navbar-item.kbq-disabled>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-disabled-content-icon-left)!important}.kbq-navbar-item.kbq-disabled{pointer-events:none;cursor:default}.kbq-navbar-divider{background:var(--kbq-line-contrast-less)}.kbq-navbar-title{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n", ".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-navbar-item.kbq-vertical{height:41px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical{padding-right:var(--kbq-size-xl);padding-left:var(--kbq-size-xl)}.kbq-navbar-item.kbq-vertical:after{top:0;right:var(--kbq-size-s);bottom:1px;left:var(--kbq-size-s)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento{display:flex;justify-content:start;align-items:center;height:var(--kbq-size-5xl);padding-top:var(--kbq-size-s)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento:after{top:var(--kbq-size-s);bottom:0}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento+.kbq-navbar-brand.kbq-vertical{padding:var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento+.kbq-navbar-brand.kbq-vertical:after{top:0}.kbq-navbar-item.kbq-vertical.kbq-expanded{align-items:center;gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento .kbq-navbar-item__title{margin-left:-8px;opacity:0}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:hover .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.cdk-keyboard-focused .kbq-navbar-item__title{margin-left:0;opacity:1;transition:opacity .15s ease-out,margin-left .15s ease-out}.kbq-navbar-item.kbq-vertical.kbq-collapsed{width:var(--kbq-size-6xl);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:calc(-1 * var(--kbq-size-3xs));right:var(--kbq-size-xs)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center}button.kbq-navbar-item.kbq-vertical{width:100%}.kbq-navbar-item.kbq-horizontal{position:relative;flex-direction:row;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:var(--kbq-size-3xl);min-width:var(--kbq-size-3xl);margin:var(--kbq-size-s);justify-content:center}.kbq-navbar-item.kbq-horizontal:before{top:calc(-1 * var(--kbq-size-s));left:calc(-1 * var(--kbq-size-s));right:calc(-1 * var(--kbq-size-s));bottom:calc(-1 * var(--kbq-size-s))}.kbq-navbar-item.kbq-horizontal:after{inset:0}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){margin-left:0;margin-right:0;padding-right:var(--kbq-size-m);padding-left:var(--kbq-size-m)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):before{left:0;right:0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{align-self:center;padding-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{justify-content:center;margin-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:before{right:calc(-1 * var(--kbq-size-xxs))}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding:var(--kbq-size-s)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{position:absolute;z-index:1;top:-2px;right:-2px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested:before{left:calc(-1 * var(--kbq-size-m));right:calc(-1 * var(--kbq-size-m))}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-item .kbq-icon{min-width:var(--kbq-size-l);min-height:var(--kbq-size-l)}.kbq-navbar-item .kbq-button-icon{position:absolute;padding-left:var(--kbq-size-xs);padding-right:var(--kbq-size-xs);top:50%;transform:translateY(-50%)}.kbq-navbar-item:before{position:absolute;content:\"\"}.kbq-navbar-item:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-title{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", "button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:var(--kbq-size-s)}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xxs);align-items:center;gap:var(--kbq-size-s)}.kbq-navbar-brand.kbq-horizontal:after{top:var(--kbq-size-xxs);right:var(--kbq-size-xxs);bottom:var(--kbq-size-xxs);left:0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical{flex-direction:row;align-items:center;padding:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical:after{top:var(--kbq-size-s);right:var(--kbq-size-s);bottom:var(--kbq-size-s);left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none!important}.kbq-navbar-brand.kbq-vertical.kbq-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.kbq-navbar-brand:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-brand .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-brand>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link{cursor:pointer}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:after{display:block;box-shadow:inset 0 0 0 2px var(--kbq-states-line-focus-theme)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-selected-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-vertical:hover .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover .kbq-navbar-logo{z-index:1}.kbq-navbar-brand.kbq-navbar-focusable-item{outline:none}.kbq-navbar-brand .kbq-navbar-title{font-size:var(--kbq-typography-navbar-title-font-size);font-style:var(--kbq-typography-navbar-title-font-style);font-weight:var(--kbq-typography-navbar-title-font-weight);line-height:var(--kbq-typography-navbar-title-line-height);font-family:var(--kbq-typography-navbar-title-font-family);text-transform:var(--kbq-typography-navbar-title-text-transform);font-feature-settings:var(--kbq-typography-navbar-title-font-feature-settings);letter-spacing:var(--kbq-typography-navbar-title-letter-spacing)}.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title{font-size:var(--kbq-typography-text-normal-strong-font-size);font-style:var(--kbq-typography-text-normal-strong-font-style);font-weight:var(--kbq-typography-text-normal-strong-font-weight);line-height:var(--kbq-typography-text-normal-strong-line-height);font-family:var(--kbq-typography-text-normal-strong-font-family);text-transform:var(--kbq-typography-text-normal-strong-text-transform);font-feature-settings:var(--kbq-typography-text-normal-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-strong-letter-spacing)}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:var(--kbq-size-xs) var(--kbq-size-l)}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}\n", ".kbq-navbar,.kbq-vertical-navbar{--kbq-navbar-item-size-content-border-radius: var(--kbq-size-border-radius);--kbq-navbar-background: var(--kbq-background-bg);--kbq-navbar-vertical-background: var(--kbq-background-bg-tertiary);--kbq-navbar-border: var(--kbq-line-contrast-less);--kbq-navbar-item-default-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-default-content-background: transparent;--kbq-navbar-item-default-content-icon-left: var(--kbq-icon-contrast);--kbq-navbar-item-default-content-icon-right: var(--kbq-icon-contrast);--kbq-navbar-item-states-hover-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-hover-content-background: var(--kbq-states-background-transparent-hover);--kbq-navbar-item-states-hover-content-icon-left: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-hover-content-icon-right: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-selected-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-selected-content-background: var(--kbq-states-background-transparent-active);--kbq-navbar-item-states-selected-content-icon-left: var(--kbq-states-icon-contrast-active);--kbq-navbar-item-states-selected-content-icon-right: var(--kbq-states-icon-contrast-active);--kbq-navbar-item-states-selected-hover-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-selected-hover-content-background: var(--kbq-states-background-transparent-hover);--kbq-navbar-item-states-selected-hover-content-icon-left: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-selected-hover-content-icon-right: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-disabled-content-text: var(--kbq-states-foreground-disabled);--kbq-navbar-item-states-disabled-content-background: transparent;--kbq-navbar-item-states-disabled-content-icon-left: var(--kbq-states-icon-disabled);--kbq-navbar-item-states-disabled-content-icon-right: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqVerticalNavbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqVerticalNavbar, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-vertical-navbar', template: `
         <div class="kbq-vertical-navbar__container" [class.kbq-collapsed]="!expanded" [class.kbq-expanded]="expanded">
             <ng-content select="[kbq-navbar-container], kbq-navbar-container" />
             <ng-content select="[kbq-navbar-toggle], kbq-navbar-toggle" />
         </div>
-    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'KbqVerticalNavbar', host: {
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-vertical-navbar',
-                        '[class.kbq-vertical-navbar_open-over]': 'openOver',
+                        '[class.kbq-vertical-navbar_open-over]': 'openOver()',
                         '[attr.tabindex]': 'tabIndex',
                         '[attr.cdkMonitorSubtreeFocus]': 'true',
                         '(focus)': 'focus()',
                         '(blur)': 'blur()',
                         '(keydown)': 'onKeyDown($event)'
-                    }, hostDirectives: [CdkMonitorFocus], styles: ["button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-vertical-navbar{display:flex;flex-shrink:0;position:relative;min-width:var(--kbq-size-6xl);height:100%}.kbq-vertical-navbar:not(:hover,.kbq-hovered,.cdk-keyboard-focused) .kbq-navbar-toggle{display:none}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-navbar-container+.kbq-navbar-container{padding-top:var(--kbq-size-xxl);padding-bottom:var(--kbq-size-s)}.kbq-vertical-navbar .kbq-vertical-navbar__container{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:var(--kbq-size-6xl)}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:240px}.kbq-vertical-navbar.kbq-vertical-navbar_open-over .kbq-vertical-navbar__container{position:absolute;z-index:998}.kbq-navbar{background-color:var(--kbq-navbar-background)}.kbq-vertical-navbar .kbq-vertical-navbar__container{background-color:var(--kbq-navbar-vertical-background);border-right:1px solid var(--kbq-navbar-border)}.kbq-navbar-item{cursor:pointer}.kbq-navbar-item:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-item .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-item>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-item:hover:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled) .kbq-navbar-title,.kbq-navbar-item:hover:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled)>.kbq-icon.kbq-empty,.kbq-navbar-item:hover:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused:after{display:block;box-shadow:inset 0 0 0 2px var(--kbq-states-line-focus-theme)}.kbq-navbar-item:active:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-item.kbq-active:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-selected-content-background)}.kbq-navbar-item:active:not(.kbq-disabled) .kbq-navbar-title,.kbq-navbar-item.kbq-active:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-item:active:not(.kbq-disabled)>.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-left)!important}.kbq-navbar-item.kbq-navbar-focusable-item{outline:none}.kbq-navbar-item.kbq-disabled:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-disabled-content-background)}.kbq-navbar-item.kbq-disabled .kbq-navbar-title{color:var(--kbq-navbar-item-states-disabled-content-text)}.kbq-navbar-item.kbq-disabled>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-disabled-content-icon-left)!important}.kbq-navbar-item.kbq-disabled{pointer-events:none;cursor:default}.kbq-navbar-divider{background:var(--kbq-line-contrast-less)}.kbq-navbar-title{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n", ".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-navbar-item.kbq-vertical{height:41px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical{padding-right:var(--kbq-size-xl);padding-left:var(--kbq-size-xl)}.kbq-navbar-item.kbq-vertical:after{top:0;right:var(--kbq-size-s);bottom:1px;left:var(--kbq-size-s)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento{display:flex;justify-content:start;align-items:center;height:var(--kbq-size-5xl);padding-top:var(--kbq-size-s)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento:after{top:var(--kbq-size-s);bottom:0}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento+.kbq-navbar-brand.kbq-vertical{padding:var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento+.kbq-navbar-brand.kbq-vertical:after{top:0}.kbq-navbar-item.kbq-vertical.kbq-expanded{align-items:center;gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento .kbq-navbar-item__title{margin-left:-8px;opacity:0}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:hover .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.cdk-keyboard-focused .kbq-navbar-item__title{margin-left:0;opacity:1;transition:opacity .15s ease-out,margin-left .15s ease-out}.kbq-navbar-item.kbq-vertical.kbq-collapsed{width:var(--kbq-size-6xl);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:calc(-1 * var(--kbq-size-3xs));right:var(--kbq-size-xs)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center}button.kbq-navbar-item.kbq-vertical{width:100%}.kbq-navbar-item.kbq-horizontal{position:relative;flex-direction:row;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:var(--kbq-size-3xl);min-width:var(--kbq-size-3xl);margin:var(--kbq-size-s);justify-content:center}.kbq-navbar-item.kbq-horizontal:before{top:calc(-1 * var(--kbq-size-s));left:calc(-1 * var(--kbq-size-s));right:calc(-1 * var(--kbq-size-s));bottom:calc(-1 * var(--kbq-size-s))}.kbq-navbar-item.kbq-horizontal:after{inset:0}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){margin-left:0;margin-right:0;padding-right:var(--kbq-size-m);padding-left:var(--kbq-size-m)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):before{left:0;right:0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{align-self:center;padding-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{justify-content:center;margin-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:before{right:calc(-1 * var(--kbq-size-xxs))}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding:var(--kbq-size-s)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{position:absolute;z-index:1;top:-2px;right:-2px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested:before{left:calc(-1 * var(--kbq-size-m));right:calc(-1 * var(--kbq-size-m))}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-item .kbq-icon{min-width:var(--kbq-size-l);min-height:var(--kbq-size-l)}.kbq-navbar-item .kbq-button-icon{position:absolute;padding-left:var(--kbq-size-xs);padding-right:var(--kbq-size-xs);top:50%;transform:translateY(-50%)}.kbq-navbar-item:before{position:absolute;content:\"\"}.kbq-navbar-item:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-title{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", "button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:var(--kbq-size-s)}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xxs);align-items:center;gap:var(--kbq-size-s)}.kbq-navbar-brand.kbq-horizontal:after{top:var(--kbq-size-xxs);right:var(--kbq-size-xxs);bottom:var(--kbq-size-xxs);left:0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical{flex-direction:row;align-items:center;padding:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical:after{top:var(--kbq-size-s);right:var(--kbq-size-s);bottom:var(--kbq-size-s);left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none!important}.kbq-navbar-brand.kbq-vertical.kbq-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.kbq-navbar-brand:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-brand .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-brand>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link{cursor:pointer}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:after{display:block;box-shadow:inset 0 0 0 2px var(--kbq-states-line-focus-theme)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-selected-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-vertical:hover .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover .kbq-navbar-logo{z-index:1}.kbq-navbar-brand.kbq-navbar-focusable-item{outline:none}.kbq-navbar-brand .kbq-navbar-title{font-size:var(--kbq-typography-navbar-title-font-size);font-style:var(--kbq-typography-navbar-title-font-style);font-weight:var(--kbq-typography-navbar-title-font-weight);line-height:var(--kbq-typography-navbar-title-line-height);font-family:var(--kbq-typography-navbar-title-font-family);text-transform:var(--kbq-typography-navbar-title-text-transform);font-feature-settings:var(--kbq-typography-navbar-title-font-feature-settings);letter-spacing:var(--kbq-typography-navbar-title-letter-spacing)}.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title{font-size:var(--kbq-typography-text-normal-strong-font-size);font-style:var(--kbq-typography-text-normal-strong-font-style);font-weight:var(--kbq-typography-text-normal-strong-font-weight);line-height:var(--kbq-typography-text-normal-strong-line-height);font-family:var(--kbq-typography-text-normal-strong-font-family);text-transform:var(--kbq-typography-text-normal-strong-text-transform);font-feature-settings:var(--kbq-typography-text-normal-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-strong-letter-spacing)}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:var(--kbq-size-xs) var(--kbq-size-l)}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}\n", ".kbq-navbar,.kbq-vertical-navbar{--kbq-navbar-item-size-content-border-radius: var(--kbq-size-border-radius);--kbq-navbar-background: var(--kbq-background-bg);--kbq-navbar-vertical-background: var(--kbq-background-bg-tertiary);--kbq-navbar-border: var(--kbq-line-contrast-less);--kbq-navbar-item-default-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-default-content-background: transparent;--kbq-navbar-item-default-content-icon-left: var(--kbq-icon-contrast);--kbq-navbar-item-default-content-icon-right: var(--kbq-icon-contrast);--kbq-navbar-item-states-hover-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-hover-content-background: var(--kbq-states-background-transparent-hover);--kbq-navbar-item-states-hover-content-icon-left: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-hover-content-icon-right: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-selected-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-selected-content-background: var(--kbq-states-background-transparent-active);--kbq-navbar-item-states-selected-content-icon-left: var(--kbq-states-icon-contrast-active);--kbq-navbar-item-states-selected-content-icon-right: var(--kbq-states-icon-contrast-active);--kbq-navbar-item-states-selected-hover-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-selected-hover-content-background: var(--kbq-states-background-transparent-hover);--kbq-navbar-item-states-selected-hover-content-icon-left: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-selected-hover-content-icon-right: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-disabled-content-text: var(--kbq-states-foreground-disabled);--kbq-navbar-item-states-disabled-content-background: transparent;--kbq-navbar-item-states-disabled-content-icon-left: var(--kbq-states-icon-disabled);--kbq-navbar-item-states-disabled-content-icon-right: var(--kbq-states-icon-disabled)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }], propDecorators: { items: [{
-                type: ContentChildren,
-                args: [forwardRef(() => KbqNavbarItem), { descendants: true }]
-            }], bento: [{
-                type: ContentChild,
-                args: [forwardRef(() => KbqNavbarBento)]
-            }], openOver: [{
-                type: Input
-            }], expanded: [{
+                    }, hostDirectives: [CdkMonitorFocus], exportAs: 'KbqVerticalNavbar', styles: ["button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-vertical-navbar{display:flex;flex-shrink:0;position:relative;min-width:var(--kbq-size-6xl);height:100%}.kbq-vertical-navbar:not(:hover,.kbq-hovered,.cdk-keyboard-focused) .kbq-navbar-toggle{display:none}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-navbar-container+.kbq-navbar-container{padding-top:var(--kbq-size-xxl);padding-bottom:var(--kbq-size-s)}.kbq-vertical-navbar .kbq-vertical-navbar__container{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:var(--kbq-size-6xl)}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:240px}.kbq-vertical-navbar.kbq-vertical-navbar_open-over .kbq-vertical-navbar__container{position:absolute;z-index:998}.kbq-navbar{background-color:var(--kbq-navbar-background)}.kbq-vertical-navbar .kbq-vertical-navbar__container{background-color:var(--kbq-navbar-vertical-background);border-right:1px solid var(--kbq-navbar-border)}.kbq-navbar-item{cursor:pointer}.kbq-navbar-item:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-item .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-item>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-item:hover:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled) .kbq-navbar-title,.kbq-navbar-item:hover:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled)>.kbq-icon.kbq-empty,.kbq-navbar-item:hover:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused:after{display:block;box-shadow:inset 0 0 0 2px var(--kbq-states-line-focus-theme)}.kbq-navbar-item:active:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-item.kbq-active:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-selected-content-background)}.kbq-navbar-item:active:not(.kbq-disabled) .kbq-navbar-title,.kbq-navbar-item.kbq-active:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-item:active:not(.kbq-disabled)>.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-left)!important}.kbq-navbar-item.kbq-navbar-focusable-item{outline:none}.kbq-navbar-item.kbq-disabled:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-disabled-content-background)}.kbq-navbar-item.kbq-disabled .kbq-navbar-title{color:var(--kbq-navbar-item-states-disabled-content-text)}.kbq-navbar-item.kbq-disabled>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-disabled-content-icon-left)!important}.kbq-navbar-item.kbq-disabled{pointer-events:none;cursor:default}.kbq-navbar-divider{background:var(--kbq-line-contrast-less)}.kbq-navbar-title{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n", ".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-navbar-item.kbq-vertical{height:41px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical{padding-right:var(--kbq-size-xl);padding-left:var(--kbq-size-xl)}.kbq-navbar-item.kbq-vertical:after{top:0;right:var(--kbq-size-s);bottom:1px;left:var(--kbq-size-s)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento{display:flex;justify-content:start;align-items:center;height:var(--kbq-size-5xl);padding-top:var(--kbq-size-s)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento:after{top:var(--kbq-size-s);bottom:0}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento+.kbq-navbar-brand.kbq-vertical{padding:var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-navbar-bento+.kbq-navbar-brand.kbq-vertical:after{top:0}.kbq-navbar-item.kbq-vertical.kbq-expanded{align-items:center;gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento .kbq-navbar-item__title{margin-left:-8px;opacity:0}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:hover .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.cdk-keyboard-focused .kbq-navbar-item__title{margin-left:0;opacity:1;transition:opacity .15s ease-out,margin-left .15s ease-out}.kbq-navbar-item.kbq-vertical.kbq-collapsed{width:var(--kbq-size-6xl);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:calc(-1 * var(--kbq-size-3xs));right:var(--kbq-size-xs)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center}button.kbq-navbar-item.kbq-vertical{width:100%}.kbq-navbar-item.kbq-horizontal{position:relative;flex-direction:row;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:var(--kbq-size-3xl);min-width:var(--kbq-size-3xl);margin:var(--kbq-size-s);justify-content:center}.kbq-navbar-item.kbq-horizontal:before{top:calc(-1 * var(--kbq-size-s));left:calc(-1 * var(--kbq-size-s));right:calc(-1 * var(--kbq-size-s));bottom:calc(-1 * var(--kbq-size-s))}.kbq-navbar-item.kbq-horizontal:after{inset:0}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){margin-left:0;margin-right:0;padding-right:var(--kbq-size-m);padding-left:var(--kbq-size-m)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):before{left:0;right:0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{align-self:center;padding-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{justify-content:center;margin-right:var(--kbq-size-xxs)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:before{right:calc(-1 * var(--kbq-size-xxs))}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding:var(--kbq-size-s)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{position:absolute;z-index:1;top:-2px;right:-2px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested:before{left:calc(-1 * var(--kbq-size-m));right:calc(-1 * var(--kbq-size-m))}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-item .kbq-icon{min-width:var(--kbq-size-l);min-height:var(--kbq-size-l)}.kbq-navbar-item .kbq-button-icon{position:absolute;padding-left:var(--kbq-size-xs);padding-right:var(--kbq-size-xs);top:50%;transform:translateY(-50%)}.kbq-navbar-item:before{position:absolute;content:\"\"}.kbq-navbar-item:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-title{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", "button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:var(--kbq-size-s)}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xxs);align-items:center;gap:var(--kbq-size-s)}.kbq-navbar-brand.kbq-horizontal:after{top:var(--kbq-size-xxs);right:var(--kbq-size-xxs);bottom:var(--kbq-size-xxs);left:0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical{flex-direction:row;align-items:center;padding:var(--kbq-size-m)}.kbq-navbar-brand.kbq-vertical:after{top:var(--kbq-size-s);right:var(--kbq-size-s);bottom:var(--kbq-size-s);left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-left:var(--kbq-size-s)}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none!important}.kbq-navbar-brand.kbq-vertical.kbq-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.kbq-navbar-brand:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-brand .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-brand>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link{cursor:pointer}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:after{display:block;box-shadow:inset 0 0 0 2px var(--kbq-states-line-focus-theme)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-selected-content-background)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-left)!important}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-vertical:hover .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover .kbq-navbar-logo{z-index:1}.kbq-navbar-brand.kbq-navbar-focusable-item{outline:none}.kbq-navbar-brand .kbq-navbar-title{font-size:var(--kbq-typography-navbar-title-font-size);font-style:var(--kbq-typography-navbar-title-font-style);font-weight:var(--kbq-typography-navbar-title-font-weight);line-height:var(--kbq-typography-navbar-title-line-height);font-family:var(--kbq-typography-navbar-title-font-family);text-transform:var(--kbq-typography-navbar-title-text-transform);font-feature-settings:var(--kbq-typography-navbar-title-font-feature-settings);letter-spacing:var(--kbq-typography-navbar-title-letter-spacing)}.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title{font-size:var(--kbq-typography-text-normal-strong-font-size);font-style:var(--kbq-typography-text-normal-strong-font-style);font-weight:var(--kbq-typography-text-normal-strong-font-weight);line-height:var(--kbq-typography-text-normal-strong-line-height);font-family:var(--kbq-typography-text-normal-strong-font-family);text-transform:var(--kbq-typography-text-normal-strong-text-transform);font-feature-settings:var(--kbq-typography-text-normal-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-strong-letter-spacing)}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:var(--kbq-size-xs) var(--kbq-size-l)}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}\n", ".kbq-navbar,.kbq-vertical-navbar{--kbq-navbar-item-size-content-border-radius: var(--kbq-size-border-radius);--kbq-navbar-background: var(--kbq-background-bg);--kbq-navbar-vertical-background: var(--kbq-background-bg-tertiary);--kbq-navbar-border: var(--kbq-line-contrast-less);--kbq-navbar-item-default-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-default-content-background: transparent;--kbq-navbar-item-default-content-icon-left: var(--kbq-icon-contrast);--kbq-navbar-item-default-content-icon-right: var(--kbq-icon-contrast);--kbq-navbar-item-states-hover-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-hover-content-background: var(--kbq-states-background-transparent-hover);--kbq-navbar-item-states-hover-content-icon-left: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-hover-content-icon-right: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-selected-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-selected-content-background: var(--kbq-states-background-transparent-active);--kbq-navbar-item-states-selected-content-icon-left: var(--kbq-states-icon-contrast-active);--kbq-navbar-item-states-selected-content-icon-right: var(--kbq-states-icon-contrast-active);--kbq-navbar-item-states-selected-hover-content-text: var(--kbq-foreground-contrast);--kbq-navbar-item-states-selected-hover-content-background: var(--kbq-states-background-transparent-hover);--kbq-navbar-item-states-selected-hover-content-icon-left: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-selected-hover-content-icon-right: var(--kbq-states-icon-contrast-hover);--kbq-navbar-item-states-disabled-content-text: var(--kbq-states-foreground-disabled);--kbq-navbar-item-states-disabled-content-background: transparent;--kbq-navbar-item-states-disabled-content-icon-left: var(--kbq-states-icon-disabled);--kbq-navbar-item-states-disabled-content-icon-right: var(--kbq-states-icon-disabled)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { rectangleElements: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqNavbarRectangleElement), { ...{ descendants: true }, isSignal: true }] }], items: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqNavbarItem), { ...{ descendants: true }, isSignal: true }] }], bento: [{ type: i0.ContentChild, args: [forwardRef(() => KbqNavbarBento), { isSignal: true }] }], openOver: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOver", required: false }] }], expanded: [{
                 type: Input
             }] } });
 
@@ -969,8 +967,8 @@ class KbqNavbarToggle {
         this.tooltip.hide();
         this.changeDetectorRef.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqNavbarToggle, isStandalone: true, selector: "kbq-navbar-toggle, [kbq-navbar-toggle]", host: { listeners: { "keydown": "keydownHandler($event)", "click": "toggle()" }, properties: { "class.kbq-collapsed": "!navbar.expanded", "class.kbq-expanded": "navbar.expanded" }, classAttribute: "kbq-navbar-toggle kbq-vertical" }, hostDirectives: [{ directive: i1.CdkMonitorFocus }, { directive: i2$1.KbqTooltipTrigger }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: KbqNavbarToggle, isStandalone: true, selector: "kbq-navbar-toggle, [kbq-navbar-toggle]", host: { listeners: { "keydown": "keydownHandler($event)", "click": "toggle()" }, properties: { "class.kbq-collapsed": "!navbar.expanded", "class.kbq-expanded": "navbar.expanded" }, classAttribute: "kbq-navbar-toggle kbq-vertical" }, hostDirectives: [{ directive: i1.CdkMonitorFocus }, { directive: i2.KbqTooltipTrigger }], ngImport: i0, template: `
         <span class="kbq-navbar-toggle__circle">
             <ng-content select="[kbq-icon]">
                 <i
@@ -982,7 +980,7 @@ class KbqNavbarToggle {
         </span>
     `, isInline: true, styles: [".kbq-navbar-toggle{position:absolute;top:var(--kbq-size-3xl);right:calc(-1 * var(--kbq-size-l));z-index:1001;display:flex;justify-content:center;align-items:center;padding:var(--kbq-size-3xs);border-width:0;cursor:pointer}.kbq-navbar-toggle .kbq-navbar-toggle__circle{display:flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:50%}.kbq-navbar-toggle{outline:none;border-color:transparent;background:transparent}.kbq-navbar-toggle .kbq-navbar-toggle__circle{background:var(--kbq-background-card);box-shadow:0 3px 8px 0 var(--kbq-shadow-ambient),0 2px 8px 0 var(--kbq-shadow-key),0 0 0 1px var(--kbq-shadow-outline)}.kbq-navbar-toggle .kbq-icon{color:var(--kbq-icon-contrast-fade)}.kbq-navbar-toggle:hover .kbq-icon,.kbq-navbar-toggle:active .kbq-icon,.kbq-navbar-toggle.kbq-hover .kbq-icon,.kbq-navbar-toggle.kbq-active .kbq-icon{color:var(--kbq-states-icon-contrast-hover)}.kbq-navbar-toggle.cdk-keyboard-focused .kbq-navbar-toggle__circle{box-shadow:0 0 0 2px var(--kbq-states-line-focus-theme)}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.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: KbqNavbarToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarToggle, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-navbar-toggle, [kbq-navbar-toggle]', imports: [
                         KbqIconModule
@@ -996,7 +994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 ></i>
             </ng-content>
         </span>
-    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-navbar-toggle kbq-vertical',
                         '[class.kbq-collapsed]': '!navbar.expanded',
                         '[class.kbq-expanded]': 'navbar.expanded',
@@ -1006,8 +1004,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         }], ctorParameters: () => [] });
 
 class KbqNavbarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarModule, imports: [A11yModule,
             PlatformModule,
             KbqIconModule,
             KbqToolTipModule,
@@ -1034,14 +1032,14 @@ class KbqNavbarModule {
             KbqNavbarFocusableItem,
             KbqNavbarRectangleElement,
             KbqNavbarBento] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarModule, imports: [A11yModule,
             PlatformModule,
             KbqIconModule,
             KbqToolTipModule,
             KbqNavbarItem,
             KbqNavbarToggle] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNavbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNavbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [