@koobiq/components 18.34.0 → 18.36.0

package/fesm2022/koobiq-components-navbar.mjs

@@ -4,11 +4,11 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Platform, PlatformModule } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, Directive, ContentChildren, forwardRef, Input, contentChildren, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, ElementRef, Optional, booleanAttribute, NgModule } from '@angular/core';
+import { inject, DestroyRef, Directive, ContentChildren, forwardRef, Input, contentChildren, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, Optional, booleanAttribute, ChangeDetectorRef, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { isVerticalMovement, isHorizontalMovement, TAB, RIGHT_ARROW, LEFT_ARROW, DOWN_ARROW, UP_ARROW, NUMPAD_DIVIDE, SLASH, SPACE, ENTER } from '@koobiq/cdk/keycodes';
 import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
-import { KBQ_WINDOW, PopUpTriggers, PopUpPlacements } from '@koobiq/components/core';
+import { kbqInjectNativeElement, KBQ_WINDOW, PopUpTriggers, PopUpPlacements } from '@koobiq/components/core';
 import * as i3 from '@koobiq/components/dropdown';
 import { KbqFormField } from '@koobiq/components/form-field';
 import * as i5 from '@koobiq/components/icon';
@@ -106,10 +106,10 @@ class KbqFocusableComponent {
     hasFocusedItem() {
         return this.focusableItems.some((item) => item.hasFocus);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: KbqFocusableComponent, 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: "18.2.14", 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: "18.2.14", type: KbqFocusableComponent, inputs: { tabIndex: "tabIndex" }, queries: [{ propertyName: "focusableItems", predicate: i0.forwardRef(() => KbqNavbarFocusableItem), descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqFocusableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqFocusableComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.FocusMonitor }], propDecorators: { focusableItems: [{
                 type: ContentChildren,
@@ -118,10 +118,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 class KbqNavbarContainer {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqNavbarContainer, selector: "kbq-navbar-container", host: { classAttribute: "kbq-navbar-container" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqNavbarContainer, selector: "kbq-navbar-container", host: { classAttribute: "kbq-navbar-container" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarContainer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-container',
@@ -234,12 +234,12 @@ class KbqNavbar extends KbqFocusableComponent {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: KbqNavbar, 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: "18.2.14", 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: "18.2.14", type: KbqNavbar, 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: `
         <ng-content select="[kbq-navbar-container], kbq-navbar-container" />
     `, isInline: true, styles: ["button.kbq-navbar-item,button.kbq-navbar-brand,button.kbq-navbar-toggle{background:transparent;border:none}.kbq-navbar{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,.kbq-vertical-navbar .kbq-vertical-navbar__container{background-color:var(--kbq-navbar-background)}.kbq-vertical-navbar .kbq-vertical-navbar__container{border-right:1px solid var(--kbq-navbar-border)}.kbq-navbar-item,.kbq-navbar-brand,.kbq-navbar-toggle{cursor:pointer}.kbq-navbar-item:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-item .kbq-navbar-title,.kbq-navbar-brand .kbq-navbar-title,.kbq-navbar-toggle .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-item>.kbq-icon.kbq-empty,.kbq-navbar-brand>.kbq-icon.kbq-empty,.kbq-navbar-toggle>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-item .kbq-navbar-item__arrow-icon,.kbq-navbar-brand .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-default-content-icon-right)!important}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-states-hover-content-icon-right)!important}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused,.kbq-navbar-brand.cdk-focused.cdk-keyboard-focused,.kbq-navbar-toggle.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused:after,.kbq-navbar-brand.cdk-focused.cdk-keyboard-focused:after,.kbq-navbar-toggle.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,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle.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-item:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-toggle.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-item:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-toggle.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-item:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-states-selected-content-icon-right)!important}.kbq-navbar-item.kbq-navbar-focusable-item,.kbq-navbar-brand.kbq-navbar-focusable-item,.kbq-navbar-toggle.kbq-navbar-focusable-item{outline:none}.kbq-navbar-item.kbq-disabled,.kbq-navbar-brand.kbq-disabled,.kbq-navbar-toggle.kbq-disabled{pointer-events:none;cursor:default}.kbq-navbar-item.kbq-disabled:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-disabled:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle.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,.kbq-navbar-brand.kbq-disabled .kbq-navbar-title,.kbq-navbar-toggle.kbq-disabled .kbq-navbar-title{color:var(--kbq-navbar-item-states-disabled-content-text)}.kbq-navbar-item.kbq-disabled>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-disabled>.kbq-icon.kbq-empty,.kbq-navbar-toggle.kbq-disabled>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-disabled-content-icon-left)!important}.kbq-navbar-item.kbq-disabled .kbq-navbar-item__arrow-icon,.kbq-navbar-brand.kbq-disabled .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle.kbq-disabled .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-states-disabled-content-icon-right)!important}.kbq-navbar-brand.kbq-vertical:hover .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-horizontal:hover .kbq-navbar-logo{z-index:1}.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)}.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)}\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 .kbq-navbar-item__container{gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-expanded{height:var(--kbq-size-5xl);align-items:center;padding-right:var(--kbq-size-xl);padding-left:var(--kbq-size-xl);gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-expanded:after{top:var(--kbq-size-xxs);right:var(--kbq-size-s);bottom:var(--kbq-size-xxs);left:var(--kbq-size-s)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento{position:absolute;display:flex;justify-content:center;align-items:center;top:var(--kbq-size-xxs);right:var(--kbq-size-xxs);z-index:1;padding:var(--kbq-size-s);height:var(--kbq-size-5xl);width:var(--kbq-size-5xl)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:after{top:var(--kbq-size-s);right:var(--kbq-size-s);bottom:var(--kbq-size-s);left:var(--kbq-size-s)}.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-collapsed{height:var(--kbq-size-5xl);width:var(--kbq-size-5xl);padding:var(--kbq-size-l);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed:after{top:var(--kbq-size-s);right:var(--kbq-size-s);bottom:var(--kbq-size-s);left:var(--kbq-size-s)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:var(--kbq-size-xs);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}.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", ".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 .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-top:var(--kbq-size-xxs);padding-bottom:var(--kbq-size-xxs);height:var(--kbq-size-3xl);padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-brand.kbq-vertical.kbq-expanded{position:relative;height:var(--kbq-size-4xl);width:var(--kbq-size-4xl);margin:var(--kbq-size-l) var(--kbq-size-l) var(--kbq-size-4xl);flex-direction:column}.kbq-navbar-brand.kbq-vertical.kbq-expanded:after{inset:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-logo{min-height:var(--kbq-size-4xl);justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{position:absolute;left:var(--kbq-size-xxs);top:var(--kbq-size-4xl);max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed{height:var(--kbq-size-5xl);width:var(--kbq-size-5xl);justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-collapsed:after{top:var(--kbq-size-xxs);right:var(--kbq-size-xxs);bottom:var(--kbq-size-xxs);left:var(--kbq-size-xxs)}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:var(--kbq-size-s) 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-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: "18.2.13", ngImport: i0, type: KbqNavbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbar, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-navbar', template: `
         <ng-content select="[kbq-navbar-container], kbq-navbar-container" />
@@ -317,15 +317,15 @@ class KbqVerticalNavbar extends KbqFocusableComponent {
             this.keyManager.onKeydown(event);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: KbqVerticalNavbar, 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" }, 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, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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: "18.2.14", type: KbqVerticalNavbar, 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" }, 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, 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,button.kbq-navbar-toggle{background:transparent;border:none}.kbq-vertical-navbar{min-width:48px;height:100%}.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)}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;height:100%}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:var(--kbq-size-5xl)}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:240px}.kbq-vertical-navbar.kbq-vertical-navbar_open-over{position:relative}.kbq-vertical-navbar.kbq-vertical-navbar_open-over .kbq-vertical-navbar__container{position:absolute;z-index:998}.kbq-navbar,.kbq-vertical-navbar .kbq-vertical-navbar__container{background-color:var(--kbq-navbar-background)}.kbq-vertical-navbar .kbq-vertical-navbar__container{border-right:1px solid var(--kbq-navbar-border)}.kbq-navbar-item,.kbq-navbar-brand,.kbq-navbar-toggle{cursor:pointer}.kbq-navbar-item:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-item .kbq-navbar-title,.kbq-navbar-brand .kbq-navbar-title,.kbq-navbar-toggle .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-item>.kbq-icon.kbq-empty,.kbq-navbar-brand>.kbq-icon.kbq-empty,.kbq-navbar-toggle>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-item .kbq-navbar-item__arrow-icon,.kbq-navbar-brand .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-default-content-icon-right)!important}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-states-hover-content-icon-right)!important}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused,.kbq-navbar-brand.cdk-focused.cdk-keyboard-focused,.kbq-navbar-toggle.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused:after,.kbq-navbar-brand.cdk-focused.cdk-keyboard-focused:after,.kbq-navbar-toggle.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,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle.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-item:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-toggle.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-item:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-toggle.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-item:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-states-selected-content-icon-right)!important}.kbq-navbar-item.kbq-navbar-focusable-item,.kbq-navbar-brand.kbq-navbar-focusable-item,.kbq-navbar-toggle.kbq-navbar-focusable-item{outline:none}.kbq-navbar-item.kbq-disabled,.kbq-navbar-brand.kbq-disabled,.kbq-navbar-toggle.kbq-disabled{pointer-events:none;cursor:default}.kbq-navbar-item.kbq-disabled:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-disabled:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle.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,.kbq-navbar-brand.kbq-disabled .kbq-navbar-title,.kbq-navbar-toggle.kbq-disabled .kbq-navbar-title{color:var(--kbq-navbar-item-states-disabled-content-text)}.kbq-navbar-item.kbq-disabled>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-disabled>.kbq-icon.kbq-empty,.kbq-navbar-toggle.kbq-disabled>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-disabled-content-icon-left)!important}.kbq-navbar-item.kbq-disabled .kbq-navbar-item__arrow-icon,.kbq-navbar-brand.kbq-disabled .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle.kbq-disabled .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-states-disabled-content-icon-right)!important}.kbq-navbar-brand.kbq-vertical:hover .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-horizontal:hover .kbq-navbar-logo{z-index:1}.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)}.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)}\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 .kbq-navbar-item__container{gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-expanded{height:var(--kbq-size-5xl);align-items:center;padding-right:var(--kbq-size-xl);padding-left:var(--kbq-size-xl);gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical.kbq-expanded:after{top:var(--kbq-size-xxs);right:var(--kbq-size-s);bottom:var(--kbq-size-xxs);left:var(--kbq-size-s)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento{position:absolute;display:flex;justify-content:center;align-items:center;top:var(--kbq-size-xxs);right:var(--kbq-size-xxs);z-index:1;padding:var(--kbq-size-s);height:var(--kbq-size-5xl);width:var(--kbq-size-5xl)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:after{top:var(--kbq-size-s);right:var(--kbq-size-s);bottom:var(--kbq-size-s);left:var(--kbq-size-s)}.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-collapsed{height:var(--kbq-size-5xl);width:var(--kbq-size-5xl);padding:var(--kbq-size-l);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed:after{top:var(--kbq-size-s);right:var(--kbq-size-s);bottom:var(--kbq-size-s);left:var(--kbq-size-s)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:var(--kbq-size-xs);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}.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", ".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 .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-top:var(--kbq-size-xxs);padding-bottom:var(--kbq-size-xxs);height:var(--kbq-size-3xl);padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-brand.kbq-vertical.kbq-expanded{position:relative;height:var(--kbq-size-4xl);width:var(--kbq-size-4xl);margin:var(--kbq-size-l) var(--kbq-size-l) var(--kbq-size-4xl);flex-direction:column}.kbq-navbar-brand.kbq-vertical.kbq-expanded:after{inset:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-logo{min-height:var(--kbq-size-4xl);justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{position:absolute;left:var(--kbq-size-xxs);top:var(--kbq-size-4xl);max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed{height:var(--kbq-size-5xl);width:var(--kbq-size-5xl);justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-collapsed:after{top:var(--kbq-size-xxs);right:var(--kbq-size-xxs);bottom:var(--kbq-size-xxs);left:var(--kbq-size-xxs)}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:var(--kbq-size-s) 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-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: "18.2.13", ngImport: i0, type: KbqVerticalNavbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqVerticalNavbar, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-vertical-navbar', exportAs: 'KbqVerticalNavbar', template: `
         <div class="kbq-vertical-navbar__container" [class.kbq-collapsed]="!expanded" [class.kbq-expanded]="expanded">
@@ -356,10 +356,10 @@ class KbqNavbarLogo {
     constructor() {
         this.hovered = new Subject();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarLogo, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqNavbarLogo, 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: "18.2.14", ngImport: i0, type: KbqNavbarLogo, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqNavbarLogo, 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: "18.2.13", ngImport: i0, type: KbqNavbarLogo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarLogo, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-logo, [kbq-navbar-logo]',
@@ -371,10 +371,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 class KbqNavbarBento {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarBento, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqNavbarBento, 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: "18.2.14", ngImport: i0, type: KbqNavbarBento, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqNavbarBento, selector: "kbq-navbar-item[bento], [kbq-navbar-item][bento]", host: { classAttribute: "kbq-navbar-bento" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarBento, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarBento, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-item[bento], [kbq-navbar-item][bento]',
@@ -386,13 +386,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class KbqNavbarTitle {
     constructor() {
         this.isBrowser = inject(Platform).isBrowser;
-        this.nativeElement = inject(ElementRef).nativeElement;
+        this.nativeElement = kbqInjectNativeElement();
         this.window = inject(KBQ_WINDOW);
         this.hovered = new Subject();
         this.isTextOverflown = false;
     }
     get text() {
-        return this.nativeElement.textContent;
+        return this.nativeElement.textContent || '';
     }
     get isOverflown() {
         return this.nativeElement.scrollWidth > this.nativeElement.clientWidth;
@@ -409,10 +409,10 @@ class KbqNavbarTitle {
     ngAfterViewInit() {
         this.outerElementWidth = this.getOuterElementWidth();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqNavbarTitle, 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: "18.2.14", ngImport: i0, type: KbqNavbarTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqNavbarTitle, 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: "18.2.13", ngImport: i0, type: KbqNavbarTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-title, [kbq-navbar-title]',
@@ -441,12 +441,12 @@ class KbqNavbarBrand {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.title?.checkTextOverflown());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarBrand, deps: [{ token: KbqVerticalNavbar, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KbqNavbarBrand, selector: "kbq-navbar-brand, [kbq-navbar-brand]", host: { properties: { "class.kbq-hovered": "hovered" }, classAttribute: "kbq-navbar-brand" }, queries: [{ propertyName: "logo", first: true, predicate: KbqNavbarLogo, descendants: true }, { propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }], exportAs: ["kbqNavbarBrand"], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarBrand, deps: [{ token: KbqVerticalNavbar, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: KbqNavbarBrand, selector: "kbq-navbar-brand, [kbq-navbar-brand]", host: { properties: { "class.kbq-hovered": "hovered" }, classAttribute: "kbq-navbar-brand" }, queries: [{ propertyName: "logo", first: true, predicate: KbqNavbarLogo, descendants: true }, { propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }], exportAs: ["kbqNavbarBrand"], ngImport: i0, template: `
         <ng-content />
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarBrand, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarBrand, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-navbar-brand, [kbq-navbar-brand]',
@@ -469,10 +469,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: [KbqNavbarTitle]
             }] } });
 class KbqNavbarDivider {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqNavbarDivider, selector: "kbq-navbar-divider", host: { classAttribute: "kbq-navbar-divider" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqNavbarDivider, selector: "kbq-navbar-divider", host: { classAttribute: "kbq-navbar-divider" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarDivider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarDivider, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-divider',
@@ -577,10 +577,10 @@ class KbqNavbarFocusableItem {
     getLabel() {
         return this.title?.text || '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: KbqNavbarFocusableItem, 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: "18.2.14", 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: "18.2.14", type: KbqNavbarFocusableItem, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarFocusableItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarFocusableItem, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle',
@@ -610,23 +610,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class KbqNavbarRectangleElement {
     constructor() {
         this.isBrowser = inject(Platform).isBrowser;
-        this.nativeElement = inject(ElementRef).nativeElement;
+        this.nativeElement = kbqInjectNativeElement();
         this.window = inject(KBQ_WINDOW);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
         this.state = new Subject();
+        this._horizontal = false;
+        this._vertical = true;
     }
     get horizontal() {
         return this._horizontal;
     }
     set horizontal(value) {
+        if (this._horizontal === value)
+            return;
         this._horizontal = value;
+        this._vertical = !value;
         this.state.next();
+        this.changeDetectorRef.markForCheck();
     }
     get vertical() {
         return this._vertical;
     }
     set vertical(value) {
+        if (this._vertical === value)
+            return;
         this._vertical = value;
+        this._horizontal = !value;
         this.state.next();
+        this.changeDetectorRef.markForCheck();
     }
     get collapsed() {
         return this._collapsed;
@@ -641,10 +652,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: "18.2.13", ngImport: i0, type: KbqNavbarRectangleElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqNavbarRectangleElement, 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: "18.2.14", ngImport: i0, type: KbqNavbarRectangleElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqNavbarRectangleElement, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarRectangleElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarRectangleElement, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-item, [kbq-navbar-item], kbq-navbar-divider, kbq-navbar-brand, [kbq-navbar-brand]',
@@ -768,10 +779,10 @@ class KbqNavbarItem extends KbqTooltipTrigger {
             $event.preventDefault();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarItem, deps: [{ token: KbqNavbarRectangleElement }, { token: KbqNavbarFocusableItem }, { token: i0.ChangeDetectorRef }, { token: i3.KbqDropdownTrigger, optional: true }, { token: KbqNavbarBento, optional: true }, { token: i4.KbqTooltipTrigger, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KbqNavbarItem, 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 kbq-icon=\"kbq-chevron-right_16\" class=\"kbq-navbar-item__arrow-icon\"></i>\n        }\n        @if (showHorizontalDropDownAngle) {\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-navbar-item__arrow-icon\"></i>\n        }\n    </div>\n}\n\n<ng-content />\n", dependencies: [{ kind: "component", type: i5.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: "18.2.14", ngImport: i0, type: KbqNavbarItem, deps: [{ token: KbqNavbarRectangleElement }, { token: KbqNavbarFocusableItem }, { token: i0.ChangeDetectorRef }, { token: i3.KbqDropdownTrigger, optional: true }, { token: KbqNavbarBento, optional: true }, { token: i4.KbqTooltipTrigger, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqNavbarItem, 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 kbq-icon=\"kbq-chevron-right_16\" class=\"kbq-navbar-item__arrow-icon\"></i>\n        }\n        @if (showHorizontalDropDownAngle) {\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-navbar-item__arrow-icon\"></i>\n        }\n    </div>\n}\n\n<ng-content />\n", dependencies: [{ kind: "component", type: i5.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarItem, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-navbar-item, [kbq-navbar-item]', exportAs: 'kbqNavbarItem', host: {
                         class: 'kbq-navbar-item',
@@ -840,18 +851,18 @@ class KbqNavbarToggle extends KbqTooltipTrigger {
             $event.stopPropagation();
             $event.preventDefault();
         }
-        super.handleKeydown($event);
+        super.keydownHandler($event);
     }
     ngOnDestroy() {
         this.window.removeEventListener('keydown', this.windowToggleHandler);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarToggle, deps: [{ token: KbqVerticalNavbar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KbqNavbarToggle, selector: "kbq-navbar-toggle", inputs: { content: ["kbqCollapsedTooltip", "content"] }, host: { listeners: { "keydown": "onKeydown($event)", "click": "toggle()", "touchend": "handleTouchend()" }, properties: { "class.kbq-tooltip_open": "isOpen", "class.kbq-collapsed": "!navbar.expanded", "class.kbq-expanded": "navbar.expanded" }, classAttribute: "kbq-navbar-item kbq-navbar-toggle kbq-vertical" }, queries: [{ propertyName: "customIcon", first: true, predicate: KbqIcon, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarToggle, deps: [{ token: KbqVerticalNavbar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqNavbarToggle, selector: "kbq-navbar-toggle", inputs: { content: ["kbqCollapsedTooltip", "content"] }, host: { listeners: { "keydown": "onKeydown($event)", "click": "toggle()", "touchend": "touchendHandler()" }, properties: { "class.kbq-tooltip_open": "isOpen", "class.kbq-collapsed": "!navbar.expanded", "class.kbq-expanded": "navbar.expanded" }, classAttribute: "kbq-navbar-item kbq-navbar-toggle kbq-vertical" }, queries: [{ propertyName: "customIcon", first: true, predicate: KbqIcon, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         @if (!customIcon) {
             <i
                 kbq-icon
-                [class.kbq-chevron-left_16]="navbar.expanded"
-                [class.kbq-chevron-right_16]="!navbar.expanded"
+                [class.kbq-bars-arrow-left_16]="navbar.expanded"
+                [class.kbq-bars-arrow-right_16]="!navbar.expanded"
             ></i>
         }
 
@@ -864,14 +875,14 @@ class KbqNavbarToggle extends KbqTooltipTrigger {
         }
     `, isInline: true, styles: ["button.kbq-navbar-item,button.kbq-navbar-brand,button.kbq-navbar-toggle{background:transparent;border:none}.kbq-navbar{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,.kbq-vertical-navbar .kbq-vertical-navbar__container{background-color:var(--kbq-navbar-background)}.kbq-vertical-navbar .kbq-vertical-navbar__container{border-right:1px solid var(--kbq-navbar-border)}.kbq-navbar-item,.kbq-navbar-brand,.kbq-navbar-toggle{cursor:pointer}.kbq-navbar-item:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-item .kbq-navbar-title,.kbq-navbar-brand .kbq-navbar-title,.kbq-navbar-toggle .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-item>.kbq-icon.kbq-empty,.kbq-navbar-brand>.kbq-icon.kbq-empty,.kbq-navbar-toggle>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-item .kbq-navbar-item__arrow-icon,.kbq-navbar-brand .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-default-content-icon-right)!important}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-states-hover-content-icon-right)!important}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused,.kbq-navbar-brand.cdk-focused.cdk-keyboard-focused,.kbq-navbar-toggle.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused:after,.kbq-navbar-brand.cdk-focused.cdk-keyboard-focused:after,.kbq-navbar-toggle.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,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle.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-item:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-toggle.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-item:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-toggle.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-item:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-states-selected-content-icon-right)!important}.kbq-navbar-item.kbq-navbar-focusable-item,.kbq-navbar-brand.kbq-navbar-focusable-item,.kbq-navbar-toggle.kbq-navbar-focusable-item{outline:none}.kbq-navbar-item.kbq-disabled,.kbq-navbar-brand.kbq-disabled,.kbq-navbar-toggle.kbq-disabled{pointer-events:none;cursor:default}.kbq-navbar-item.kbq-disabled:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-disabled:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle.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,.kbq-navbar-brand.kbq-disabled .kbq-navbar-title,.kbq-navbar-toggle.kbq-disabled .kbq-navbar-title{color:var(--kbq-navbar-item-states-disabled-content-text)}.kbq-navbar-item.kbq-disabled>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-disabled>.kbq-icon.kbq-empty,.kbq-navbar-toggle.kbq-disabled>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-disabled-content-icon-left)!important}.kbq-navbar-item.kbq-disabled .kbq-navbar-item__arrow-icon,.kbq-navbar-brand.kbq-disabled .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle.kbq-disabled .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-states-disabled-content-icon-right)!important}.kbq-navbar-brand.kbq-vertical:hover .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-horizontal:hover .kbq-navbar-logo{z-index:1}.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)}.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)}\n"], dependencies: [{ kind: "component", type: i5.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarToggle, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-navbar-toggle', template: `
         @if (!customIcon) {
             <i
                 kbq-icon
-                [class.kbq-chevron-left_16]="navbar.expanded"
-                [class.kbq-chevron-right_16]="!navbar.expanded"
+                [class.kbq-bars-arrow-left_16]="navbar.expanded"
+                [class.kbq-bars-arrow-right_16]="!navbar.expanded"
             ></i>
         }
 
@@ -889,7 +900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '[class.kbq-expanded]': 'navbar.expanded',
                         '(keydown)': 'onKeydown($event)',
                         '(click)': 'toggle()',
-                        '(touchend)': 'handleTouchend()'
+                        '(touchend)': 'touchendHandler()'
                     }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["button.kbq-navbar-item,button.kbq-navbar-brand,button.kbq-navbar-toggle{background:transparent;border:none}.kbq-navbar{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,.kbq-vertical-navbar .kbq-vertical-navbar__container{background-color:var(--kbq-navbar-background)}.kbq-vertical-navbar .kbq-vertical-navbar__container{border-right:1px solid var(--kbq-navbar-border)}.kbq-navbar-item,.kbq-navbar-brand,.kbq-navbar-toggle{cursor:pointer}.kbq-navbar-item:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle:not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-default-content-background)}.kbq-navbar-item .kbq-navbar-title,.kbq-navbar-brand .kbq-navbar-title,.kbq-navbar-toggle .kbq-navbar-title{color:var(--kbq-navbar-item-default-content-text)}.kbq-navbar-item>.kbq-icon.kbq-empty,.kbq-navbar-brand>.kbq-icon.kbq-empty,.kbq-navbar-toggle>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-left)!important}.kbq-navbar-item .kbq-navbar-item__arrow-icon,.kbq-navbar-brand .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-default-content-icon-right)!important}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after{display:block;background:var(--kbq-navbar-item-states-hover-content-background)}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-hover-content-text)}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-left)!important}.kbq-navbar-item:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-brand:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle:hover:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-states-hover-content-icon-right)!important}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused,.kbq-navbar-brand.cdk-focused.cdk-keyboard-focused,.kbq-navbar-toggle.cdk-focused.cdk-keyboard-focused{outline:none}.kbq-navbar-item.cdk-focused.cdk-keyboard-focused:after,.kbq-navbar-brand.cdk-focused.cdk-keyboard-focused:after,.kbq-navbar-toggle.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,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand):not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle.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-item:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title,.kbq-navbar-toggle.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-title{color:var(--kbq-navbar-item-states-selected-content-text)}.kbq-navbar-item:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand)>.kbq-icon.kbq-empty,.kbq-navbar-toggle.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-item:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-item.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-brand:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-brand.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-states-selected-content-icon-right)!important}.kbq-navbar-item.kbq-navbar-focusable-item,.kbq-navbar-brand.kbq-navbar-focusable-item,.kbq-navbar-toggle.kbq-navbar-focusable-item{outline:none}.kbq-navbar-item.kbq-disabled,.kbq-navbar-brand.kbq-disabled,.kbq-navbar-toggle.kbq-disabled{pointer-events:none;cursor:default}.kbq-navbar-item.kbq-disabled:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-brand.kbq-disabled:not(.kbq-navbar-item_has-nested):after,.kbq-navbar-toggle.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,.kbq-navbar-brand.kbq-disabled .kbq-navbar-title,.kbq-navbar-toggle.kbq-disabled .kbq-navbar-title{color:var(--kbq-navbar-item-states-disabled-content-text)}.kbq-navbar-item.kbq-disabled>.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-disabled>.kbq-icon.kbq-empty,.kbq-navbar-toggle.kbq-disabled>.kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-disabled-content-icon-left)!important}.kbq-navbar-item.kbq-disabled .kbq-navbar-item__arrow-icon,.kbq-navbar-brand.kbq-disabled .kbq-navbar-item__arrow-icon,.kbq-navbar-toggle.kbq-disabled .kbq-navbar-item__arrow-icon{color:var(--kbq-navbar-item-states-disabled-content-icon-right)!important}.kbq-navbar-brand.kbq-vertical:hover .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-horizontal:hover .kbq-navbar-logo{z-index:1}.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)}.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)}\n"] }]
         }], ctorParameters: () => [{ type: KbqVerticalNavbar }, { type: i0.ChangeDetectorRef }], propDecorators: { customIcon: [{
                 type: ContentChild,
@@ -900,8 +911,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class KbqNavbarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarModule, declarations: [KbqNavbar,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarModule, declarations: [KbqNavbar,
             KbqNavbarContainer,
             KbqNavbarTitle,
             KbqNavbarItem,
@@ -927,12 +938,12 @@ class KbqNavbarModule {
             KbqNavbarFocusableItem,
             KbqNavbarRectangleElement,
             KbqNavbarBento] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarModule, imports: [A11yModule,
             PlatformModule,
             KbqIconModule,
             KbqToolTipModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqNavbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNavbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [