@koobiq/components 20.4.1 → 21.0.0

package/fesm2022/koobiq-components-navbar.mjs

@@ -1,47 +1,61 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ContentObserver } from '@angular/cdk/observers';
 import { SharedResizeObserver } from '@angular/cdk/observers/private';
-import { Platform, PlatformModule } from '@angular/cdk/platform';
+import { Platform, _getFocusedElementPierceShadowDom, PlatformModule } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, inject, ElementRef, ChangeDetectorRef, NgZone, contentChild, booleanAttribute, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, signal, input, computed, afterNextRender, DestroyRef, ContentChildren, forwardRef, contentChildren, effect, InjectionToken, NgModule } from '@angular/core';
+import { Directive, inject, ElementRef, ChangeDetectorRef, Injector, DestroyRef, contentChild, signal, input, booleanAttribute, afterNextRender, computed, contentChildren, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Renderer2, forwardRef, model, NgZone, untracked, InjectionToken, Injectable, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-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 * as i2 from '@koobiq/components/core';
+import { kbqInjectNativeElement, KBQ_WINDOW, kbqAnimationsDisabled, PopUpTriggers, PopUpPlacements, ENTER, SPACE, DOWN_ARROW, RIGHT_ARROW, kbqQueryListFrom, FocusKeyManager, kbqLeaveTabOrderOnTabOut, isVerticalMovement, isHorizontalMovement, TAB, LEFT_ARROW, KbqOverlayLayerExclude, ruRULocaleData, kbqLocaleConfigurationOverrideProvider, KbqLocaleOverridesDirective, UP_ARROW, NUMPAD_DIVIDE, SLASH } from '@koobiq/components/core';
+import * as i1 from '@koobiq/components/tooltip';
 import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
-import { Subject, map, distinctUntilChanged, from, EMPTY, merge } from 'rxjs';
-import { take, debounceTime, startWith } from 'rxjs/operators';
-import * as i1 from '@angular/cdk/a11y';
+import { Subject, map, distinctUntilChanged, from, EMPTY, merge, fromEvent } from 'rxjs';
+import { debounceTime, startWith } from 'rxjs/operators';
+import * as i1$1 from '@angular/cdk/a11y';
 import { FocusMonitor, CdkMonitorFocus, A11yModule } from '@angular/cdk/a11y';
 import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
-import { KbqDropdownTrigger, KBQ_DROPDOWN_HOST } from '@koobiq/components/dropdown';
+import { KbqDropdownTrigger } 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';
 
+/**
+ * Outer width of an element: its border box plus horizontal margins.
+ *
+ * Measured with `getBoundingClientRect()` rather than `getComputedStyle().width`, which resolves to the used
+ * content-box width whatever `box-sizing` says: `.kbq-navbar-item` is `border-box` with horizontal padding, and
+ * the navbar compares these sums against its own border box.
+ */
+const getOuterWidth = (element, window) => {
+    const { marginLeft, marginRight } = window.getComputedStyle(element);
+    return [marginLeft, marginRight].reduce((acc, item) => acc + (parseFloat(item) || 0), element.getBoundingClientRect().width);
+};
+
+/**
+ * Elements that already turn Enter/Space into a `click` on their own. Items authored on top of them must not
+ * get a synthetic activation on the same key, or the handler runs twice.
+ */
+const NATIVELY_ACTIONABLE_TAGS = new Set(['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA']);
+/** Switches an item to its collapsed, icon-only presentation. */
+const COLLAPSED_ITEM_CLASS = 'kbq-navbar-item_collapsed';
 class KbqNavbarLogo {
-    constructor() {
-        this.hovered = new Subject();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarLogo, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", 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: "21.2.25", ngImport: i0, type: KbqNavbarLogo, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqNavbarLogo, isStandalone: true, selector: "kbq-navbar-logo, [kbq-navbar-logo]", host: { classAttribute: "kbq-navbar-logo" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarLogo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarLogo, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-logo, [kbq-navbar-logo]',
                     host: {
-                        class: 'kbq-navbar-logo',
-                        '(mouseenter)': 'hovered.next(true)',
-                        '(mouseleave)': 'hovered.next(false)'
+                        class: 'kbq-navbar-logo'
                     }
                 }]
         }] });
 class KbqNavbarBento {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarBento, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", 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: "21.2.25", ngImport: i0, type: KbqNavbarBento, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.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: "20.3.30", ngImport: i0, type: KbqNavbarBento, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarBento, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-item[bento], [kbq-navbar-item][bento]',
@@ -50,13 +64,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     }
                 }]
         }] });
+/** Marks content to be projected after the title of a navbar item. */
+class KbqNavbarItemSuffix {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarItemSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqNavbarItemSuffix, isStandalone: true, selector: "[kbqNavbarItemSuffix]", host: { classAttribute: "kbq-navbar-item-suffix" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarItemSuffix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqNavbarItemSuffix]',
+                    host: {
+                        class: 'kbq-navbar-item-suffix'
+                    }
+                }]
+        }] });
 class KbqNavbarTitle {
     constructor() {
+        /** @docs-private */
         this.isBrowser = inject(Platform).isBrowser;
+        /** @docs-private */
         this.nativeElement = kbqInjectNativeElement();
         this.window = inject(KBQ_WINDOW);
-        this.hovered = new Subject();
     }
+    /** Text content of the title element. */
     get text() {
         return this.nativeElement.textContent || '';
     }
@@ -79,96 +109,73 @@ class KbqNavbarTitle {
             return false;
         return this.nativeElement.scrollHeight > this.nativeElement.clientHeight;
     }
-    /**
-     * Outer width of the title: its border box plus horizontal margins.
-     *
-     * Measured with `getBoundingClientRect()` rather than `getComputedStyle().width`, which resolves
-     * to the used content-box width whatever `box-sizing` says and would drop the title's padding.
-     */
+    /** Outer width of the title: its border box plus horizontal margins. */
     getOuterElementWidth() {
-        if (!this.isBrowser)
-            return 0;
-        const { marginLeft, marginRight } = this.window.getComputedStyle(this.nativeElement);
-        return [marginLeft, marginRight].reduce((acc, item) => acc + (parseFloat(item) || 0), this.nativeElement.getBoundingClientRect().width);
+        return this.isBrowser ? getOuterWidth(this.nativeElement, this.window) : 0;
     }
-    ngAfterViewInit() {
-        this.outerElementWidth = this.getOuterElementWidth();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqNavbarTitle, isStandalone: true, selector: "kbq-navbar-title, [kbq-navbar-title]", host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" }, classAttribute: "kbq-navbar-title" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqNavbarTitle, isStandalone: true, selector: "kbq-navbar-title, [kbq-navbar-title]", host: { classAttribute: "kbq-navbar-title" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-title, [kbq-navbar-title]',
                     host: {
-                        class: 'kbq-navbar-title',
-                        '(mouseenter)': 'hovered.next(true)',
-                        '(mouseleave)': 'hovered.next(false)'
+                        class: 'kbq-navbar-title'
                     }
                 }]
         }] });
 class KbqNavbarDivider {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqNavbarDivider, isStandalone: true, selector: "kbq-navbar-divider", host: { classAttribute: "kbq-navbar-divider" }, ngImport: i0 }); }
+    constructor() {
+        // Optional: the divider only picks up a rectangle element when both directives are imported, which is
+        // what `KbqNavbarModule` does but a hand-rolled standalone import need not.
+        this.rectangleElement = inject(KbqNavbarRectangleElement, { optional: true });
+    }
+    /**
+     * The separator runs across the navbar, so it is oriented the other way round: a horizontal navbar gets a
+     * vertical rule and vice versa.
+     */
+    get ariaOrientation() {
+        return this.rectangleElement?.isHorizontal() ? 'vertical' : 'horizontal';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqNavbarDivider, isStandalone: true, selector: "kbq-navbar-divider", host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "ariaOrientation" }, classAttribute: "kbq-navbar-divider" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarDivider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarDivider, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-divider',
                     host: {
-                        class: 'kbq-navbar-divider'
+                        class: 'kbq-navbar-divider',
+                        role: 'separator',
+                        '[attr.aria-orientation]': 'ariaOrientation'
                     }
                 }]
         }] });
 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;
-        /**
-         * Keeps an element with nothing to interact with out of the roving focus order, without announcing or
-         * styling it as disabled.
-         *
-         * @internal
-         */
-        this.decorative = false;
-    }
+    /** Interactive element projected into the item, if any. */
     get nestedElement() {
         return this.button() || this.formField();
     }
+    /** @docs-private */
     get tooltip() {
         return this._tooltip;
     }
+    /** @docs-private */
     get hasFocus() {
-        return !!this.nestedElement?.hasFocus || this._hasFocus;
+        return !!this.nestedElement?.hasFocus || this.hasFocusState();
     }
     set hasFocus(value) {
-        this._hasFocus = value;
+        this.hasFocusState.set(value);
     }
-    /**
-     * Whether the item is disabled.
-     *
-     * Also reads `true` for a decorative element, which the key manager has to skip just the same.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Whether the item is disabled. Also `true` for a decorative element, which the key manager skips as well. */
+    // An accessor, not a signal: `FocusKeyManager` reads it as a boolean through its default skip predicate, where a
+    // signal would always read truthy — the manager would skip every item and arrow navigation would stop working.
     get disabled() {
-        return this._disabled || this.decorative;
+        return this.disabledState() || this.decorative();
     }
     set disabled(value) {
-        if (value !== this._disabled) {
-            this._disabled = value;
-            this.changeDetector.markForCheck();
-        }
+        this.disabledState.set(value);
     }
     /**
      * Whether the item was disabled through `disabled`, as opposed to being decorative.
@@ -176,92 +183,148 @@ class KbqNavbarFocusableItem {
      * @internal
      */
     get explicitlyDisabled() {
-        return this._disabled;
+        return this.disabledState();
     }
+    /**
+     * Items are never in the tab order themselves: the navbar host owns the single tab stop and moves focus
+     * between items with the arrow keys (roving tabindex).
+     */
     get tabIndex() {
         return -1;
     }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
+        }
+    }
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.focusMonitor = inject(FocusMonitor);
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
+        /** @docs-private */
+        this.title = contentChild(KbqNavbarTitle, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.button = contentChild(KbqButton, ...(ngDevMode ? [{ debugName: "button" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.formField = contentChild(KbqFormField, ...(ngDevMode ? [{ debugName: "formField" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.onFocus = new Subject();
+        /** @docs-private */
+        this.onBlur = new Subject();
+        this.hasFocusState = signal(false, ...(ngDevMode ? [{ debugName: "hasFocusState" }] : /* istanbul ignore next */ []));
+        this.disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        /**
+         * Keeps an element with nothing to interact with out of the roving focus order, without announcing or
+         * styling it as disabled.
+         *
+         * @internal
+         */
+        this.decorative = signal(false, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        this.destroyRef.onDestroy(() => {
+            this.onFocus.complete();
+            this.onBlur.complete();
+        });
+    }
+    /** @docs-private */
     ngAfterViewInit() {
         this.focusMonitor.monitor(this.elementRef);
     }
+    /** @docs-private */
     ngAfterContentInit() {
         const button = this.button();
         if (button) {
             button.tabIndex = -1;
         }
     }
+    /** @docs-private */
     ngOnDestroy() {
         this.focusMonitor.stopMonitoring(this.elementRef);
     }
+    /** @docs-private */
     setTooltip(value) {
         this._tooltip = value;
     }
+    /** @docs-private */
     onFocusHandler() {
         if (this.disabled || this.hasFocus) {
             return;
         }
         this.onFocus.next({ item: this });
         this.hasFocus = true;
-        this.changeDetector.markForCheck();
         this.elementRef.nativeElement.focus();
     }
+    /** @docs-private */
     focus(origin) {
         if (this.disabled || this.hasFocus) {
             return;
         }
-        if (origin === 'keyboard') {
-            this.focusMonitor.focusVia(this.elementRef, origin);
+        // A pointer focuses what it lands on by itself; moving the focus for it would surface a focus ring and a
+        // tooltip. Focus set by code still has to reach the item, or the host keeps it while this item is active.
+        const movesFocus = origin !== 'mouse' && origin !== 'touch';
+        if (movesFocus) {
+            this.focusMonitor.focusVia(this.elementRef, origin ?? 'program');
         }
         if (this.nestedElement) {
-            if (origin === 'keyboard') {
-                // KbqButton tracks focus via FocusMonitor; KbqFormField just delegates to control.focus.
-                if ('focusViaKeyboard' in this.nestedElement) {
-                    this.nestedElement.focusViaKeyboard();
-                }
-                else {
-                    this.nestedElement.focus();
-                }
+            // KbqButton tracks focus via FocusMonitor; KbqFormField just delegates to control.focus.
+            if (origin === 'keyboard' && 'focusViaKeyboard' in this.nestedElement) {
+                this.nestedElement.focusViaKeyboard();
+            }
+            else if (movesFocus) {
+                this.nestedElement.focus();
             }
             this.changeDetector.markForCheck();
             return;
         }
-        if (origin === 'keyboard') {
-            this.tooltip?.show();
+        if (movesFocus) {
+            if (origin === 'keyboard')
+                this.tooltip?.show();
             this.onFocusHandler();
         }
     }
+    /** @docs-private */
     blur() {
-        // When animations are enabled, Angular may end up removing the option from the DOM a little
-        // earlier than usual, causing it to be blurred and throwing off the logic in the list
-        // that moves focus not the next item. To work around the issue, we defer marking the option
-        // as not focused until the next time the zone stabilizes.
-        this.ngZone.onStable
-            .asObservable()
-            .pipe(take(1))
-            .subscribe(() => {
-            this.ngZone.run(() => {
-                this._hasFocus = false;
-                this.tooltip?.hide();
-                if (this.button()?.hasFocus) {
-                    return;
-                }
-                this.onBlur.next({ item: this });
-            });
-        });
+        // Deferred until the focus has settled: an item hands its focus to its nested button or form field, which
+        // registers its focus only after this blur, and the item gets no focus event of its own afterwards. A blur
+        // reported before that would read as no item being focused and clear the navbar's active item. An item
+        // blurred by its own destruction has nothing to update.
+        if (this.destroyRef.destroyed)
+            return;
+        afterNextRender(() => {
+            // Focus can be back by the time this runs (a blur and a focus in the same task): then nothing was lost.
+            if (_getFocusedElementPierceShadowDom() === this.elementRef.nativeElement)
+                return;
+            this.hasFocusState.set(false);
+            this.tooltip?.hide();
+            if (this.button()?.hasFocus) {
+                return;
+            }
+            this.onBlur.next({ item: this });
+        }, { injector: this.injector });
     }
+    /** @docs-private */
     getLabel() {
         return this.title()?.text || '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarFocusableItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.30", 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": "explicitlyDisabled || null", "class.kbq-navbar-item_has-nested": "!!nestedElement", "class.kbq-disabled": "explicitlyDisabled" }, 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarFocusableItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.25", type: KbqNavbarFocusableItem, isStandalone: true, selector: "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle", inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocusHandler()", "blur": "blur()" }, properties: { "attr.tabindex": "tabIndex", "attr.aria-disabled": "explicitlyDisabled || null", "class.kbq-navbar-item_has-nested": "!!nestedElement", "class.kbq-disabled": "explicitlyDisabled" }, 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 }], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarFocusableItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.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',
                     host: {
                         '[attr.tabindex]': 'tabIndex',
-                        '[attr.disabled]': 'explicitlyDisabled || null',
+                        // `aria-disabled` and not the `disabled` content attribute: these are custom elements, not form
+                        // controls, so the browser and assistive technology both ignore `disabled` on them.
+                        '[attr.aria-disabled]': 'explicitlyDisabled || null',
                         class: 'kbq-navbar-focusable-item',
                         '[class.kbq-navbar-item_has-nested]': '!!nestedElement',
                         '[class.kbq-disabled]': 'explicitlyDisabled',
@@ -269,250 +332,342 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '(blur)': 'blur()'
                     }
                 }]
-        }], 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 }]
-            }] } });
+        }], ctorParameters: () => [], 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 }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 class KbqNavbarRectangleElement {
-    constructor() {
-        this.isBrowser = inject(Platform).isBrowser;
-        this.nativeElement = kbqInjectNativeElement();
-        this.window = inject(KBQ_WINDOW);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.state = new Subject();
-        this._horizontal = false;
-        this._vertical = true;
-        this.button = contentChild(KbqButtonCssStyler, ...(ngDevMode ? [{ debugName: "button" }] : []));
-    }
-    get horizontal() {
-        return this._horizontal;
+    /**
+     * Orientation of the navbar this element belongs to. Written by the ambient `KbqNavbar` /
+     * `KbqVerticalNavbar`; the element itself only reads it.
+     */
+    get orientation() {
+        return this._orientation();
     }
-    set horizontal(value) {
-        if (this._horizontal === value)
+    set orientation(value) {
+        if (this._orientation() === value)
             return;
-        this._horizontal = value;
-        this._vertical = !value;
+        this._orientation.set(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();
     }
+    /** Whether the element is rendered in its collapsed (icon-only) form. @docs-private */
     get collapsed() {
-        return this._collapsed;
+        return !!this._collapsed();
     }
     set collapsed(value) {
-        if (this._collapsed === value)
+        if (this._collapsed() === value)
             return;
-        this._collapsed = value;
+        this._collapsed.set(value);
         this.state.next();
     }
-    /**
-     * Outer width of the item: its border box plus horizontal margins.
-     *
-     * Measured with `getBoundingClientRect()` rather than `getComputedStyle().width`, which resolves
-     * to the used content-box width whatever `box-sizing` says. `.kbq-navbar-item` is `border-box`
-     * with horizontal padding, so the computed value dropped that padding from every item, while
-     * `KbqNavbar.width` — the figure this sum is compared against — has always been a border box.
-     * The navbar therefore under-counted its own content and collapsed later than it should.
-     */
+    constructor() {
+        /** @docs-private */
+        this.isBrowser = inject(Platform).isBrowser;
+        /** @docs-private */
+        this.nativeElement = kbqInjectNativeElement();
+        this.window = inject(KBQ_WINDOW);
+        this.destroyRef = inject(DestroyRef);
+        /** Emits whenever the orientation or the collapsed state of the element changes. @docs-private */
+        this.state = new Subject();
+        this._orientation = signal('vertical', ...(ngDevMode ? [{ debugName: "_orientation" }] : /* istanbul ignore next */ []));
+        /** Whether the ambient navbar is horizontal. @docs-private */
+        this.isHorizontal = computed(() => this._orientation() === 'horizontal', ...(ngDevMode ? [{ debugName: "isHorizontal" }] : /* istanbul ignore next */ []));
+        /** Whether the ambient navbar is vertical. @docs-private */
+        this.isVertical = computed(() => this._orientation() === 'vertical', ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
+        // Deliberately left `undefined`: it is not equal to either boolean, so the guard below always lets the
+        // first assignment through. Initializing it to `false` would swallow the initial `collapsed = false` of a
+        // navbar that starts expanded, and with it the `updateDropdown()` that rides on that emission.
+        this._collapsed = signal(undefined, ...(ngDevMode ? [{ debugName: "_collapsed" }] : /* istanbul ignore next */ []));
+        /** Signal mirror of `collapsed`, for `computed()` consumers. @docs-private */
+        this.collapsedState = computed(() => !!this._collapsed(), ...(ngDevMode ? [{ debugName: "collapsedState" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.button = contentChild(KbqButtonCssStyler, ...(ngDevMode ? [{ debugName: "button" }] : /* istanbul ignore next */ []));
+        this.destroyRef.onDestroy(() => this.state.complete());
+    }
+    /** Outer width of the element: its border box plus horizontal margins. */
     getOuterElementWidth() {
-        if (!this.isBrowser)
-            return 0;
-        const { marginLeft, marginRight } = this.window.getComputedStyle(this.nativeElement);
-        return [marginLeft, marginRight].reduce((acc, item) => acc + (parseFloat(item) || 0), this.nativeElement.getBoundingClientRect().width);
+        return this.isBrowser ? getOuterWidth(this.nativeElement, this.window) : 0;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarRectangleElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.30", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarRectangleElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.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": "isVertical()", "class.kbq-horizontal": "isHorizontal()", "class.kbq-expanded": "isVertical() && !collapsed", "class.kbq-collapsed": "isVertical() && collapsed" } }, queries: [{ propertyName: "button", first: true, predicate: KbqButtonCssStyler, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarRectangleElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.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]',
                     host: {
-                        '[class.kbq-vertical]': 'vertical',
-                        '[class.kbq-horizontal]': 'horizontal',
-                        '[class.kbq-expanded]': 'vertical && !collapsed',
-                        '[class.kbq-collapsed]': 'vertical && collapsed'
+                        '[class.kbq-vertical]': 'isVertical()',
+                        '[class.kbq-horizontal]': 'isHorizontal()',
+                        '[class.kbq-expanded]': 'isVertical() && !collapsed',
+                        '[class.kbq-collapsed]': 'isVertical() && collapsed'
                     }
                 }]
-        }], 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;
-    }
-    set collapsedText(value) {
-        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;
-    }
-    set trigger(value) {
-        if (value) {
-            this._trigger = value;
-            this.initListeners();
-        }
-    }
+        }], ctorParameters: () => [], propDecorators: { button: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqButtonCssStyler), { isSignal: true }] }] } });
+class KbqNavbarItem {
+    /** Collapses the item regardless of what the ambient navbar decided. */
     set collapsed(value) {
-        if (this._collapsed !== value) {
-            this._collapsed = value;
-            this.updateTooltip();
-        }
-    }
-    // todo in future need rename to 'collapsed'
-    get isCollapsed() {
-        return this._collapsed ?? this.rectangleElement.collapsed;
+        this.ownCollapsed.set(value);
     }
+    /** @docs-private */
     get croppedText() {
         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;
-    }
-    set collapsable(value) {
-        this._collapsable = coerceBooleanProperty(value);
-    }
+    /** Text used for the tooltip and for the accessible name of a collapsed item. */
     get titleText() {
-        return this._collapsedText || this.title()?.text || null;
-    }
-    get disabled() {
-        if (this._disabled !== undefined) {
-            return this._disabled;
-        }
-        return !this.isCollapsed && !this.hasCroppedText;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
+        return this.collapsedText() || this.title()?.text || null;
     }
+    /** @docs-private */
     get hasDropDownTrigger() {
         return !!this.dropdownTrigger;
     }
-    get showVerticalDropDownAngle() {
-        return !this.bento && this.hasDropDownTrigger && this.rectangleElement.vertical && !this.isCollapsed;
-    }
-    get showHorizontalDropDownAngle() {
-        return this.hasDropDownTrigger && this.rectangleElement.horizontal && !this.isCollapsed;
-    }
+    /** @docs-private */
     get hasCroppedText() {
         return !!this.title()?.isOverflown;
     }
+    /**
+     * A collapsed item shows nothing but its icon, and a tooltip is a transient overlay — never an accessible
+     * name. The name is therefore published on the element itself, unless the consumer named it already.
+     */
+    get resolvedAriaLabel() {
+        return this.ariaLabel() ?? (this.isCollapsed() ? this.titleText : null);
+    }
+    /**
+     * Items authored as `<kbq-navbar-item>` are custom elements with no implicit role, so they are announced as
+     * plain content. Anything already actionable — a native element, or a projected button/form field that owns
+     * the interaction — keeps its own semantics.
+     *
+     * No `aria-haspopup` for dropdown-trigger items on purpose: `KbqDropdownTrigger` deliberately omits it
+     * because the panel carries no menu semantics; it does publish `aria-expanded` itself.
+     */
+    get role() {
+        if (NATIVELY_ACTIONABLE_TAGS.has(this.nativeElement.tagName) || this.navbarFocusableItem.nestedElement) {
+            return null;
+        }
+        return 'button';
+    }
+    /** Whether Enter/Space has to be turned into a click by hand. */
+    get needsSyntheticActivation() {
+        return this.role === 'button' && !this.hasDropDownTrigger;
+    }
     constructor() {
-        super();
+        /** @docs-private */
         this.rectangleElement = inject(KbqNavbarRectangleElement);
+        /** @docs-private */
         this.navbarFocusableItem = inject(KbqNavbarFocusableItem);
+        /** @docs-private */
+        this.tooltip = inject(KbqTooltipTrigger, { self: true });
+        this.nativeElement = kbqInjectNativeElement();
         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;
+        this.contentObserver = inject(ContentObserver);
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
+        // Outer widths recorded by `measureWidths()`, 0 while unknown.
+        this.expandedWidth = 0;
+        this.collapsedWidth = 0;
+        /** @docs-private */
+        this.title = contentChild(KbqNavbarTitle, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.icons = contentChildren(KbqIcon, { ...(ngDevMode ? { debugName: "icons" } : /* istanbul ignore next */ {}), descendants: true });
+        /** Icon shown before the title; it stays visible when the item collapses. @docs-private */
+        this.icon = computed(() => this.icons().find((icon) => !icon.getHostElement().closest('[kbqNavbarItemSuffix]')), ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Text shown in the tooltip of a collapsed item. Defaults to the text of the projected `kbq-navbar-title`. */
+        this.collapsedText = input('', ...(ngDevMode ? [{ debugName: "collapsedText" }] : /* istanbul ignore next */ []));
+        /** Whether the item may be collapsed when the horizontal navbar runs out of room. */
+        this.collapsable = input(true, { ...(ngDevMode ? { debugName: "collapsable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Explicitly enables or disables the item's tooltip.
+         *
+         * Left unset, the tooltip is enabled exactly when the title cannot be read from the item itself — the item
+         * is collapsed, its title is clipped, or it has no title at all.
+         */
+        this.tooltipDisabled = input(undefined, { ...(ngDevMode ? { debugName: "tooltipDisabled" } : /* istanbul ignore next */ {}), alias: 'kbqTooltipDisabled',
+            transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+        this.ownCollapsed = signal(undefined, ...(ngDevMode ? [{ debugName: "ownCollapsed" }] : /* istanbul ignore next */ []));
+        /** Whether the item is rendered in its collapsed (icon-only) form. */
+        // todo in future need rename to 'collapsed'
+        this.isCollapsed = computed(() => this.ownCollapsed() ?? this.rectangleElement.collapsedState(), ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.showVerticalDropDownAngle = computed(() => !this.bento && this.hasDropDownTrigger && this.rectangleElement.isVertical() && !this.isCollapsed(), ...(ngDevMode ? [{ debugName: "showVerticalDropDownAngle" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.showHorizontalDropDownAngle = computed(() => this.hasDropDownTrigger && this.rectangleElement.isHorizontal() && !this.isCollapsed(), ...(ngDevMode ? [{ debugName: "showHorizontalDropDownAngle" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the title of a vertical bento item slides in without motion.
+         *
+         * @docs-private
+         */
+        this.animationsDisabled = kbqAnimationsDisabled();
+        /**
+         * Accessible name of the item. Needed for an icon-only item, which has no visible label of its own; an
+         * item that renders a title is named by it.
+         */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
         if (this.hasDropDownTrigger) {
-            this.dropdownTrigger.openByArrowDown = false;
+            this.dropdownTrigger.openByArrowDown.set(false);
         }
         this.rectangleElement.state.pipe(takeUntilDestroyed()).subscribe(() => {
-            this.collapsed = this.rectangleElement.collapsed;
             this.updateDropdown();
-            this.changeDetectorRef.detectChanges();
+            this.updateTooltip();
+        });
+        this.navbarFocusableItem.setTooltip(this.tooltip);
+        this.tooltip.arrow = false;
+        this.tooltip.offset = 0;
+        this.tooltip.setOverlayPanelClass('kbq-tooltip-panel_horizontal-navbar');
+        // The tooltip of a collapsed item stands in for its missing title, so it must not also open on focus:
+        // `KbqNavbarFocusableItem.focus()` shows it explicitly, and only for keyboard focus.
+        this.tooltip.trigger = `${PopUpTriggers.Hover}`;
+        effect(() => {
+            // Re-read the reactive inputs the tooltip content depends on.
+            this.collapsedText();
+            this.tooltipDisabled();
+            this.isCollapsed();
+            this.updateTooltip();
+            // Whether the title is clipped can only be measured once this change is rendered.
+            afterNextRender(() => this.updateTooltip(), { injector: this.injector });
         });
-        this._trigger = `${PopUpTriggers.Hover}`;
-        this.navbarFocusableItem.setTooltip(this);
-        this.arrow = false;
-        this.offset = 0;
-        this.overlayConfig.panelClass = 'kbq-tooltip-panel_horizontal-navbar';
+        // Content changes, such as a new title text, can clip the title too.
+        afterNextRender(() => this.contentObserver
+            .observe(this.nativeElement)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.updateTooltip()));
     }
+    /** @docs-private */
     ngAfterContentInit() {
         this.updateTooltip();
     }
-    updateDropdown() {
-        if (!this.dropdownTrigger?.dropdown)
-            return;
-        if (this.rectangleElement.vertical) {
-            this.dropdownTrigger.dropdown.overlapTriggerX = false;
-            this.dropdownTrigger.dropdown.overlapTriggerY = true;
-            // needs to shift dropdown to the left by 8 pixels
-            this.dropdownTrigger.offsetX = -8;
-        }
-    }
+    /** @docs-private */
     updateTooltip() {
-        if (this.isCollapsed) {
-            this.content = `${this.titleText || ''}`;
+        const titleText = this.titleText;
+        // With no title or `collapsedText` to stand in, a collapsed item keeps the content bound as `tooltipText`.
+        if (this.isCollapsed() && titleText) {
+            this.tooltip.content = titleText;
         }
-        else if (!this.isCollapsed && this.hasCroppedText) {
-            this.content = this.croppedText;
+        else if (this.hasCroppedText) {
+            this.tooltip.content = this.croppedText;
         }
-        if (this.rectangleElement.vertical) {
-            this.placement = PopUpPlacements.Right;
-            this.placementPriority = PopUpPlacements.Right;
+        // A fully visible title needs no tooltip; for a collapsed, clipped or missing one it is the only label.
+        this.tooltip.disabled =
+            this.tooltipDisabled() ?? (!!this.title() && !this.isCollapsed() && !this.hasCroppedText);
+        if (this.rectangleElement.isVertical()) {
+            this.tooltip.tooltipPlacement = PopUpPlacements.Right;
+            this.tooltip.tooltipPlacementPriority = PopUpPlacements.Right;
         }
         this.changeDetectorRef.markForCheck();
     }
-    getTitleWidth() {
-        return this.title()?.outerElementWidth ?? 0;
+    /**
+     * Records the outer width of the item in the presentation it is shown in, and measures the other one only while
+     * it is still unknown.
+     *
+     * The other presentation is read by toggling the collapse class around the measurement. Restoring it within
+     * the same task is safe: the browser does not paint mid-task, and the host binding only writes to the DOM when
+     * its value changes. Both rely on the item having no CSS transition. A width seen in the real presentation is
+     * preferred because a collapsed item does not render its dropdown chevron, so toggling it back undercounts.
+     *
+     * @docs-private
+     */
+    measureWidths() {
+        // A hidden item has no box, and its margins alone would be recorded as a width.
+        if (!this.nativeElement.getClientRects().length)
+            return;
+        const classList = this.nativeElement.classList;
+        const collapsed = classList.contains(COLLAPSED_ITEM_CLASS);
+        if (collapsed) {
+            this.collapsedWidth = this.rectangleElement.getOuterElementWidth();
+        }
+        else {
+            this.expandedWidth = this.rectangleElement.getOuterElementWidth();
+        }
+        if (collapsed ? this.expandedWidth : this.collapsedWidth)
+            return;
+        classList.toggle(COLLAPSED_ITEM_CLASS);
+        const otherWidth = this.rectangleElement.getOuterElementWidth();
+        classList.toggle(COLLAPSED_ITEM_CLASS);
+        if (collapsed) {
+            this.expandedWidth = otherWidth;
+        }
+        else {
+            this.collapsedWidth = otherWidth;
+        }
+    }
+    /**
+     * Width the item gives back by collapsing: its expanded outer width less its collapsed one, as last recorded by
+     * `measureWidths()`. It covers everything the collapse removes or changes — the title, a suffix, the dropdown
+     * chevron and the padding and margins that differ between the two presentations.
+     *
+     * @docs-private
+     */
+    getCollapsibleWidth() {
+        return Math.max(this.expandedWidth - this.collapsedWidth, 0);
     }
+    /** @docs-private */
     onKeyDown($event) {
+        if (this.needsSyntheticActivation && [ENTER, SPACE].includes($event.keyCode)) {
+            this.nativeElement.click();
+            $event.preventDefault();
+            return;
+        }
         if (!this.hasDropDownTrigger) {
             return;
         }
-        if ((this.rectangleElement.horizontal && $event.keyCode === DOWN_ARROW) ||
-            (this.rectangleElement.vertical && $event.keyCode === RIGHT_ARROW)) {
+        if ((this.rectangleElement.isHorizontal() && $event.keyCode === DOWN_ARROW) ||
+            (this.rectangleElement.isVertical() && $event.keyCode === RIGHT_ARROW)) {
             this.dropdownTrigger.openedBy = 'keyboard';
             this.dropdownTrigger.open();
             $event.stopPropagation();
             $event.preventDefault();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", 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 }); }
+    updateDropdown() {
+        const dropdown = this.dropdownTrigger?.dropdown();
+        if (!dropdown)
+            return;
+        if (this.rectangleElement.isVertical()) {
+            dropdown.overlapTriggerX.set(false);
+            dropdown.overlapTriggerY.set(true);
+            // needs to shift dropdown to the left by 8 pixels
+            this.dropdownTrigger.offsetX.set(-8);
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqNavbarItem, isStandalone: true, selector: "kbq-navbar-item, [kbq-navbar-item]", inputs: { collapsedText: { classPropertyName: "collapsedText", publicName: "collapsedText", isSignal: true, isRequired: false, transformFunction: null }, collapsable: { classPropertyName: "collapsable", publicName: "collapsable", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "kbqTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.kbq-navbar-item_collapsed": "isCollapsed()", "class.kbq-navbar-item_with-title": "!!title()", "attr.role": "role", "attr.aria-label": "resolvedAriaLabel" }, classAttribute: "kbq-navbar-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true, isSignal: true }, { propertyName: "icons", predicate: KbqIcon, descendants: true, isSignal: true }], exportAs: ["kbqNavbarItem"], hostDirectives: [{ directive: i1.KbqTooltipTrigger, inputs: ["kbqTooltip", "tooltipText", "kbqTooltipClass", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipColor", "kbqTooltipContext", "kbqTooltipContext", "kbqTooltipOffset", "kbqTooltipOffset", "kbqTrigger", "kbqTrigger", "kbqPlacement", "kbqPlacement", "kbqPlacementPriority", "kbqPlacementPriority", "kbqEnterDelay", "kbqEnterDelay", "kbqLeaveDelay", "kbqLeaveDelay", "kbqVisible", "kbqVisible"], outputs: ["kbqVisibleChange", "kbqVisibleChange", "kbqPlacementChange", "kbqPlacementChange"] }], ngImport: i0, template: "<ng-content select=\"[kbq-icon]:not([kbqNavbarItemSuffix])\" />\n\n@if (title()) {\n    <div class=\"kbq-navbar-item__container\">\n        <div class=\"kbq-navbar-item__title\" [class.kbq-animations-disabled]=\"animationsDisabled\">\n            <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\" />\n        </div>\n        <ng-content select=\"[kbqNavbarItemSuffix]\" />\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: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarItem, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-navbar-item, [kbq-navbar-item]', imports: [
                         KbqIcon
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-navbar-item',
-                        '[class.kbq-navbar-item_collapsed]': 'isCollapsed',
+                        [`[class.${COLLAPSED_ITEM_CLASS}]`]: 'isCollapsed()',
                         '[class.kbq-navbar-item_with-title]': '!!title()',
+                        '[attr.role]': 'role',
+                        '[attr.aria-label]': 'resolvedAriaLabel',
                         '(keydown)': 'onKeyDown($event)'
-                    }, 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,
-                args: ['kbqTrigger']
-            }], collapsable: [{
-                type: Input
-            }] } });
+                    }, hostDirectives: [
+                        {
+                            directive: KbqTooltipTrigger,
+                            inputs: [
+                                'kbqTooltip: tooltipText',
+                                'kbqTooltipClass',
+                                'kbqTooltipColor',
+                                'kbqTooltipContext',
+                                'kbqTooltipOffset',
+                                'kbqTrigger',
+                                'kbqPlacement',
+                                'kbqPlacementPriority',
+                                'kbqEnterDelay',
+                                'kbqLeaveDelay',
+                                'kbqVisible'
+                            ],
+                            outputs: [
+                                'kbqVisibleChange',
+                                'kbqPlacementChange'
+                            ]
+                        }
+                    ], exportAs: 'kbqNavbarItem', template: "<ng-content select=\"[kbq-icon]:not([kbqNavbarItemSuffix])\" />\n\n@if (title()) {\n    <div class=\"kbq-navbar-item__container\">\n        <div class=\"kbq-navbar-item__title\" [class.kbq-animations-disabled]=\"animationsDisabled\">\n            <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\" />\n        </div>\n        <ng-content select=\"[kbqNavbarItemSuffix]\" />\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 }] }], icons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqIcon), { ...{ descendants: true }, isSignal: true }] }], collapsedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedText", required: false }] }], collapsable: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsable", required: false }] }], tooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqTooltipDisabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
 
 /** Switches the brand title to the compact two-line presentation. */
 const LONG_TITLE_CLASS = 'kbq-navbar-brand_long-title';
-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;
-    }
-    set collapsedText(value) {
-        this._collapsedText = value;
-        this.updateTooltip();
-    }
+class KbqNavbarBrand {
+    /** Whether the brand is rendered as a native link. */
     get isLink() {
         return this.nativeElement.tagName === 'A';
     }
@@ -528,30 +683,16 @@ class KbqNavbarBrand extends KbqTooltipTrigger {
     }
     /** @docs-private */
     get titleText() {
-        return this.collapsedText || this.title()?.text || null;
-    }
-    /** @docs-private */
-    get disabled() {
-        if (this._disabled !== undefined) {
-            return this._disabled;
-        }
-        return !this.collapsed && !this.hasCroppedText;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
-    /** @docs-private */
-    get collapsed() {
-        return this._collapsed ?? this.rectangleElement.collapsed;
+        return this.collapsedText() || this.title()?.text || null;
     }
-    set collapsed(value) {
-        if (this._collapsed !== value) {
-            this._collapsed = value;
-            this.updateTooltip();
-        }
+    /**
+     * A collapsed brand shows nothing but its logo, and a tooltip is a transient overlay — never an accessible
+     * name. The name is therefore published on the element itself, unless the consumer named it already.
+     */
+    get resolvedAriaLabel() {
+        return this.ariaLabel() ?? (this.collapsed() ? this.titleText : null);
     }
     constructor() {
-        super();
         /** @docs-private */
         this.nativeElement = kbqInjectNativeElement();
         /** @docs-private */
@@ -560,50 +701,67 @@ class KbqNavbarBrand extends KbqTooltipTrigger {
         this.rectangleElement = inject(KbqNavbarRectangleElement);
         /** @docs-private */
         this.navbarFocusableItem = inject(KbqNavbarFocusableItem);
+        /** @docs-private */
+        this.tooltip = inject(KbqTooltipTrigger, { self: true });
         this.isBrowser = inject(Platform).isBrowser;
         this.resizeObserver = inject(SharedResizeObserver);
         this.contentObserver = inject(ContentObserver);
         this.document = inject(DOCUMENT);
         this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
+        this.renderer = inject(Renderer2);
         this.debounceInterval = 100;
         /** @docs-private */
-        this.title = contentChild(KbqNavbarTitle, ...(ngDevMode ? [{ debugName: "title" }] : []));
-        /** Whether the title has been measured as not fitting into a single line. */
-        this.autoLongTitle = signal(false, ...(ngDevMode ? [{ debugName: "autoLongTitle" }] : []));
+        this.title = contentChild(KbqNavbarTitle, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         /**
-         * Alternative display of the brand name in two lines.
+         * Whether the title has been measured as not fitting into a single line, which switches it to the compact
+         * two-line presentation.
          *
-         * @deprecated The mode is now detected automatically when the title does not fit into a single line.
-         * Leave unset for auto-detection; `true` and `false` force the mode on and off respectively.
-         * Will be removed in the next major release.
+         * @docs-private
          */
-        this.longTitle = input(...(ngDevMode ? [undefined, { debugName: "longTitle" }] : []));
-        /** @docs-private */
-        this.longTitleEnabled = computed(() => this.longTitle() ?? this.autoLongTitle(), ...(ngDevMode ? [{ debugName: "longTitleEnabled" }] : []));
-        this._collapsed = false;
-        this.rectangleElement.state.pipe(takeUntilDestroyed()).subscribe(() => {
-            this.collapsed = this.rectangleElement.collapsed;
-            this.changeDetectorRef.detectChanges();
-        });
-        this._trigger = `${PopUpTriggers.Hover}`;
-        this.navbarFocusableItem.setTooltip(this);
-        this.arrow = false;
-        this.offset = 0;
-        this.navbarFocusableItem.decorative = !this.isLink;
-        afterNextRender(() => {
-            // Deferred a microtask: the ambient `KbqNavbar` flips this item's rectangle element to
-            // horizontal via its own `Promise.resolve().then()` (see `KbqNavbar.setItemsState`), which
-            // runs after this callback. Without the extra hop, the first measurement below can run while
-            // the rectangle element still reports its default vertical/expanded state.
-            Promise.resolve().then(() => this.observeLongTitle());
+        this.longTitleEnabled = signal(false, ...(ngDevMode ? [{ debugName: "longTitleEnabled" }] : /* istanbul ignore next */ []));
+        /** text that will be displayed in the tooltip. By default, the text is taken from kbq-navbar-title. */
+        this.collapsedText = input('', ...(ngDevMode ? [{ debugName: "collapsedText" }] : /* istanbul ignore next */ []));
+        /**
+         * Explicitly enables or disables the brand's tooltip.
+         *
+         * Left unset, the tooltip is enabled exactly when the title cannot be read from the brand itself — the
+         * navbar is collapsed, the title is clipped, or there is no title at all.
+         */
+        this.tooltipDisabled = input(undefined, { ...(ngDevMode ? { debugName: "tooltipDisabled" } : /* istanbul ignore next */ {}), alias: 'kbqTooltipDisabled',
+            transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+        /** Whether the brand is rendered in its collapsed (logo-only) form. @docs-private */
+        this.collapsed = this.rectangleElement.collapsedState;
+        /** Accessible name of the brand. Needed when the brand renders nothing but a logo. */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+        this.rectangleElement.state.pipe(takeUntilDestroyed()).subscribe(() => this.updateTooltip());
+        this.tooltip.arrow = false;
+        this.tooltip.offset = 0;
+        // A brand tooltip stands in for a title that cannot be read from the element itself, so it opens on
+        // hover only; keyboard focus surfaces it through `KbqNavbarFocusableItem.focus()`.
+        this.tooltip.trigger = `${PopUpTriggers.Hover}`;
+        this.navbarFocusableItem.setTooltip(this.tooltip);
+        effect(() => {
+            // Re-read the reactive inputs the tooltip content depends on.
+            this.collapsedText();
+            this.tooltipDisabled();
+            this.collapsed();
+            this.updateTooltip();
         });
+        afterNextRender(() => this.observeLongTitle());
         // A disabled navbar item takes `pointer-events: none`, which on a brand would also stop the tooltip a
         // collapsed brand depends on. Capturing on the host runs ahead of every listener of the link, `RouterLink`
         // included.
         const unlisten = this.renderer.listen(this.nativeElement, 'click', (event) => this.preventDisabledActivation(event), { capture: true });
         this.destroyRef.onDestroy(unlisten);
     }
+    /** @docs-private */
     ngAfterContentInit() {
+        // A brand that is neither a link nor a wrapper around something interactive is decorative, and only
+        // then is it kept out of the roving focus order. Deciding this here and not in the constructor is what
+        // makes the projected content visible at all; deciding it from `isLink` alone used to disable every
+        // `<div kbq-navbar-brand>`, however interactive its content was.
+        this.navbarFocusableItem.decorative.set(!this.isLink && !this.navbarFocusableItem.nestedElement);
         this.updateTooltip();
     }
     preventDisabledActivation(event) {
@@ -613,14 +771,18 @@ class KbqNavbarBrand extends KbqTooltipTrigger {
         event.stopImmediatePropagation();
     }
     updateTooltip() {
-        if (this.collapsed) {
-            this.content = `${this.titleText || ''}`;
+        const titleText = this.titleText;
+        // With no title or `collapsedText` to stand in, a collapsed brand keeps the content bound as `tooltipText`.
+        if (this.collapsed() && titleText) {
+            this.tooltip.content = titleText;
         }
-        else if (!this.collapsed && this.hasCroppedText) {
-            this.content = this.croppedText;
+        else if (this.hasCroppedText) {
+            this.tooltip.content = this.croppedText;
         }
-        if (this.rectangleElement.vertical) {
-            this.placement = PopUpPlacements.Right;
+        // A fully visible title needs no tooltip; for a collapsed, clipped or missing one it is the only label.
+        this.tooltip.disabled = this.tooltipDisabled() ?? (!!this.title() && !this.collapsed() && !this.hasCroppedText);
+        if (this.rectangleElement.isVertical()) {
+            this.tooltip.tooltipPlacement = PopUpPlacements.Right;
         }
         this.changeDetectorRef.markForCheck();
     }
@@ -652,7 +814,7 @@ class KbqNavbarBrand extends KbqTooltipTrigger {
             .subscribe(() => afterNextRender({ mixedReadWrite: () => this.updateAutoLongTitle() }, { injector: this.injector }));
     }
     updateAutoLongTitle() {
-        this.autoLongTitle.set(this.measureNeedsLongTitle());
+        this.longTitleEnabled.set(this.measureNeedsLongTitle());
         // The clamp state feeds into `hasCroppedText`, which the tooltip's content depends on - refresh it
         // so a title that becomes clamped after the initial render doesn't show stale/empty tooltip content.
         this.updateTooltip();
@@ -668,7 +830,7 @@ class KbqNavbarBrand extends KbqTooltipTrigger {
         const title = this.title();
         // A collapsed title is `display: none`, so it measures as 0 - keep the last known value instead.
         if (!title || this.rectangleElement.collapsed) {
-            return this.autoLongTitle();
+            return this.longTitleEnabled();
         }
         const host = this.nativeElement;
         const applied = host.classList.contains(LONG_TITLE_CLASS);
@@ -679,71 +841,131 @@ class KbqNavbarBrand extends KbqTooltipTrigger {
             host.classList.add(LONG_TITLE_CLASS);
         return overflown;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", 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": "longTitleEnabled()", "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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqNavbarBrand, isStandalone: true, selector: "kbq-navbar-brand, [kbq-navbar-brand]", inputs: { collapsedText: { classPropertyName: "collapsedText", publicName: "collapsedText", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "kbqTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-navbar-brand_long-title": "longTitleEnabled()", "class.kbq-navbar-brand_link": "isLink", "attr.aria-label": "resolvedAriaLabel" }, classAttribute: "kbq-navbar-brand" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true, isSignal: true }], exportAs: ["kbqNavbarBrand"], hostDirectives: [{ directive: i1.KbqTooltipTrigger, inputs: ["kbqTooltip", "tooltipText", "kbqTooltipClass", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipColor", "kbqTooltipOffset", "kbqTooltipOffset", "kbqTrigger", "kbqTrigger", "kbqPlacement", "kbqPlacement", "kbqEnterDelay", "kbqEnterDelay", "kbqLeaveDelay", "kbqLeaveDelay", "kbqVisible", "kbqVisible"], outputs: ["kbqVisibleChange", "kbqVisibleChange", "kbqPlacementChange", "kbqPlacementChange"] }], 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:not(.kbq-disabled) .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{box-sizing:content-box;max-width:154px;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-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;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-disabled{cursor:default}.kbq-navbar-brand.kbq-navbar-brand_link:not(.kbq-disabled){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:not(.kbq-disabled){outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled):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:not(.kbq-disabled) .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover:not(.kbq-disabled) .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);line-height:16px}\n"] }); }
+    `, 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)}@supports (corner-shape: squircle){.kbq-navbar-brand{corner-shape:squircle;border-radius:clamp(var(--kbq-size-s) * 1.85,var(--kbq-size-s) * 2.3 - 3.6px,var(--kbq-size-s) * 2)}}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}@supports (corner-shape: squircle){.kbq-navbar-brand:after{corner-shape:squircle;border-radius:clamp(var(--kbq-navbar-item-size-content-border-radius) * 1.85,var(--kbq-navbar-item-size-content-border-radius) * 2.3 - 3.6px,var(--kbq-navbar-item-size-content-border-radius) * 2)}}.kbq-navbar-brand:not(.kbq-disabled) .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{box-sizing:content-box;max-width:154px;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:var(--kbq-navbar-brand-vertical-size-title-max-width)}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;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)}.kbq-navbar-brand .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-right)}.kbq-navbar-brand.kbq-disabled{cursor:default}.kbq-navbar-brand.kbq-navbar-brand_link:not(.kbq-disabled){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)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-right)}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled){outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled):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)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix .kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-right)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-vertical:hover:not(.kbq-disabled) .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover:not(.kbq-disabled) .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);line-height:16px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarBrand, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarBrand, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-navbar-brand, [kbq-navbar-brand]', template: `
         <ng-content />
-    `, host: {
+    `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'kbq-navbar-brand',
                         [`[class.${LONG_TITLE_CLASS}]`]: 'longTitleEnabled()',
-                        '[class.kbq-navbar-brand_link]': 'isLink'
-                    }, 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:not(.kbq-disabled) .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{box-sizing:content-box;max-width:154px;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-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;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-disabled{cursor:default}.kbq-navbar-brand.kbq-navbar-brand_link:not(.kbq-disabled){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:not(.kbq-disabled){outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled):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:not(.kbq-disabled) .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover:not(.kbq-disabled) .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);line-height:16px}\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.kbq-navbar-brand_link]': 'isLink',
+                        '[attr.aria-label]': 'resolvedAriaLabel'
+                    }, hostDirectives: [
+                        {
+                            directive: KbqTooltipTrigger,
+                            inputs: [
+                                'kbqTooltip: tooltipText',
+                                'kbqTooltipClass',
+                                'kbqTooltipColor',
+                                'kbqTooltipOffset',
+                                'kbqTrigger',
+                                'kbqPlacement',
+                                'kbqEnterDelay',
+                                'kbqLeaveDelay',
+                                'kbqVisible'
+                            ],
+                            outputs: [
+                                'kbqVisibleChange',
+                                'kbqPlacementChange'
+                            ]
+                        }
+                    ], 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)}@supports (corner-shape: squircle){.kbq-navbar-brand{corner-shape:squircle;border-radius:clamp(var(--kbq-size-s) * 1.85,var(--kbq-size-s) * 2.3 - 3.6px,var(--kbq-size-s) * 2)}}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}@supports (corner-shape: squircle){.kbq-navbar-brand:after{corner-shape:squircle;border-radius:clamp(var(--kbq-navbar-item-size-content-border-radius) * 1.85,var(--kbq-navbar-item-size-content-border-radius) * 2.3 - 3.6px,var(--kbq-navbar-item-size-content-border-radius) * 2)}}.kbq-navbar-brand:not(.kbq-disabled) .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{box-sizing:content-box;max-width:154px;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:var(--kbq-navbar-brand-vertical-size-title-max-width)}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;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)}.kbq-navbar-brand .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-right)}.kbq-navbar-brand.kbq-disabled{cursor:default}.kbq-navbar-brand.kbq-navbar-brand_link:not(.kbq-disabled){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)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-right)}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled){outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled):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)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix .kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-right)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-vertical:hover:not(.kbq-disabled) .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover:not(.kbq-disabled) .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);line-height:16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqNavbarTitle), { isSignal: true }] }], collapsedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedText", required: false }] }], tooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqTooltipDisabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
 
 class KbqFocusableComponent {
     constructor() {
+        /** @docs-private */
         this.changeDetectorRef = inject(ChangeDetectorRef);
+        /** @docs-private */
         this.elementRef = inject(ElementRef);
+        /** @docs-private */
         this.focusMonitor = inject(FocusMonitor);
-        this._tabIndex = 0;
-        this.lastFocusOrigin = null;
+        /** @docs-private */
         this.destroyRef = inject(DestroyRef);
+        this.focusableItemsQuery = contentChildren(forwardRef(() => KbqNavbarFocusableItem), { ...(ngDevMode ? { debugName: "focusableItemsQuery" } : /* istanbul ignore next */ {}), descendants: true });
+        this.focusableItemsList = kbqQueryListFrom(this.focusableItemsQuery);
+        /**
+         * Tab index of the navbar host. The navbar owns the single tab stop of the whole widget and moves focus
+         * between its items with the arrow keys. A navbar without a focusable item stays out of the tab order.
+         */
+        this.tabIndex = model(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+        /**
+         * Tab index the host renders: {@link tabIndex}, or `-1` while there is no item to hand the focus to. Derived
+         * rather than written to the model, which a consumer may bind.
+         *
+         * @docs-private
+         */
+        this.renderedTabIndex = computed(() => this.focusableItemsQuery().length === 0 ? -1 : this.tabIndex(), ...(ngDevMode ? [{ debugName: "renderedTabIndex" }] : /* istanbul ignore next */ []));
+        /**
+         * Accessible name of the navigation landmark. Set it whenever a page renders more than one navbar, so
+         * assistive technology can tell them apart.
+         */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+        this.lastFocusOrigin = null;
+        this.cachedOptionFocusChanges = null;
+        this.cachedOptionBlurChanges = null;
+        this.optionFocusSubscription = null;
+        this.optionBlurSubscription = null;
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get tabIndex() {
-        return this._tabIndex;
-    }
-    set tabIndex(value) {
-        this._tabIndex = value;
+    /** @docs-private */
+    get focusableItems() {
+        return this.focusableItemsList();
     }
+    /** Focus events of every focusable item, merged once per change of the item set. @docs-private */
     get optionFocusChanges() {
-        return merge(...this.focusableItems.map((item) => item.onFocus));
+        return (this.cachedOptionFocusChanges ??= merge(...this.focusableItems.map((item) => item.onFocus)));
     }
+    /** Blur events of every focusable item, merged once per change of the item set. @docs-private */
     get optionBlurChanges() {
-        return merge(...this.focusableItems.map((option) => option.onBlur));
+        return (this.cachedOptionBlurChanges ??= merge(...this.focusableItems.map((option) => option.onBlur)));
     }
+    /** @docs-private */
     ngAfterContentInit() {
         this.keyManager = new FocusKeyManager(this.focusableItems).withTypeAhead();
-        this.keyManager.tabOut.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this.tabIndex = -1;
-            setTimeout(() => {
-                this.tabIndex = 0;
-                this.changeDetectorRef.markForCheck();
-            });
-        });
-        this.focusableItems.changes.pipe(startWith(null), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this.resetOptions();
-            // Check to see if we need to update our tab index
-            this.updateTabIndex();
-        });
+        kbqLeaveTabOrderOnTabOut(this.keyManager.tabOut, this.elementRef.nativeElement, () => this.renderedTabIndex(), this.destroyRef);
+        this.focusableItems.changes
+            .pipe(startWith(null), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.resetOptions());
     }
+    /** @docs-private */
+    ngAfterContentChecked() {
+        // Syncs the list here so `changes` emits after the projected items are bound and before the host bindings.
+        this.focusableItemsList();
+    }
+    /**
+     * Monitored with `checkChildren`, because the navbar is one composite widget: the host owns the tab stop
+     * but hands focus straight to an item, and without it that hand-off reads as the navbar being blurred.
+     *
+     * @docs-private
+     */
     ngAfterViewInit() {
-        this.focusMonitor.monitor(this.elementRef).subscribe((focusOrigin) => {
+        this.focusMonitor
+            .monitor(this.elementRef, true)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((focusOrigin) => {
+            // A child losing focus to another child reports `null` in between; keep the origin the arrow
+            // keys travel on, and let a real blur of the whole navbar be handled by `blur()`.
+            if (focusOrigin === null)
+                return;
             this.lastFocusOrigin = focusOrigin;
             this.keyManager.setFocusOrigin(focusOrigin);
         });
     }
+    /** @docs-private */
     ngOnDestroy() {
+        this.dropSubscriptions();
         this.focusMonitor.stopMonitoring(this.elementRef);
     }
+    /** Host element of the navbar. @docs-private */
+    getNativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    /** @docs-private */
     focus() {
         if (this.focusableItems.length === 0) {
             return;
@@ -755,25 +977,26 @@ class KbqFocusableComponent {
         }
         this.keyManager.setFirstItemActive();
     }
+    /** @docs-private */
     blur() {
         if (!this.hasFocusedItem()) {
             this.keyManager.setActiveItem(-1);
         }
         this.changeDetectorRef.markForCheck();
     }
+    /** @docs-private */
     resetOptions() {
         this.dropSubscriptions();
         this.listenToOptionsFocus();
     }
+    /** @docs-private */
     dropSubscriptions() {
-        if (this.optionFocusSubscription) {
-            this.optionFocusSubscription.unsubscribe();
-            this.optionFocusSubscription = null;
-        }
-        if (this.optionBlurSubscription) {
-            this.optionBlurSubscription.unsubscribe();
-            this.optionBlurSubscription = null;
-        }
+        this.optionFocusSubscription?.unsubscribe();
+        this.optionFocusSubscription = null;
+        this.optionBlurSubscription?.unsubscribe();
+        this.optionBlurSubscription = null;
+        this.cachedOptionFocusChanges = null;
+        this.cachedOptionBlurChanges = null;
     }
     listenToOptionsFocus() {
         this.optionFocusSubscription = this.optionFocusChanges.subscribe((event) => {
@@ -784,31 +1007,23 @@ class KbqFocusableComponent {
         });
         this.optionBlurSubscription = this.optionBlurChanges.subscribe(() => this.blur());
     }
-    updateTabIndex() {
-        this.tabIndex = this.focusableItems.length === 0 ? -1 : 0;
-    }
     isValidIndex(index) {
         return index >= 0 && index < this.focusableItems.length;
     }
     hasFocusedItem() {
         return this.focusableItems.some((item) => item.hasFocus);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqFocusableComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", 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: "21.2.25", ngImport: i0, type: KbqFocusableComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.25", type: KbqFocusableComponent, isStandalone: true, inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabIndex: "tabIndexChange" }, queries: [{ propertyName: "focusableItemsQuery", predicate: i0.forwardRef(() => KbqNavbarFocusableItem), descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqFocusableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqFocusableComponent, decorators: [{
             type: Directive
-        }], propDecorators: { focusableItems: [{
-                type: ContentChildren,
-                args: [forwardRef(() => KbqNavbarFocusableItem), { descendants: true }]
-            }], tabIndex: [{
-                type: Input
-            }] } });
+        }], propDecorators: { focusableItemsQuery: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqNavbarFocusableItem), { ...{ descendants: true }, isSignal: true }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }, { type: i0.Output, args: ["tabIndexChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
 class KbqNavbarContainer {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", 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: "21.2.25", ngImport: i0, type: KbqNavbarContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqNavbarContainer, isStandalone: true, selector: "kbq-navbar-container", host: { classAttribute: "kbq-navbar-container" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarContainer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-container',
@@ -821,63 +1036,95 @@ class KbqNavbar extends KbqFocusableComponent {
     get width() {
         return this.elementRef.nativeElement.getBoundingClientRect().width;
     }
-    get totalItemsWidth() {
-        return this.rectangleElements().reduce((acc, item) => acc + item.getOuterElementWidth(), 0);
+    /**
+     * Room the content needs: the outer widths of the containers' children plus the containers' own margins, which
+     * hold the gap between them. The containers' boxes are not measured whole, so a container styled to grow still
+     * reports what it needs rather than what it was given.
+     */
+    get contentWidth() {
+        return Array.from(this.elementRef.nativeElement.children).reduce((total, container) => {
+            const { marginLeft, marginRight } = this.window.getComputedStyle(container);
+            return Array.from(container.children).reduce((acc, child) => acc + getOuterWidth(child, this.window), total + (parseFloat(marginLeft) || 0) + (parseFloat(marginRight) || 0));
+        }, 0);
     }
     get collapsableItems() {
         return this.navbarItems()
-            .filter((item) => item.icon() && item.title() && item.collapsable)
+            .filter((item) => item.icon() && item.title() && item.collapsable())
             .reverse();
     }
     constructor() {
-        const elementRef = inject(ElementRef);
-        const changeDetectorRef = inject(ChangeDetectorRef);
-        const focusMonitor = inject(FocusMonitor);
         super();
         this.platform = inject(Platform);
-        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.ngZone = inject(NgZone);
+        this.window = inject(KBQ_WINDOW);
+        /** @docs-private */
+        this.rectangleElements = contentChildren(forwardRef(() => KbqNavbarRectangleElement), { ...(ngDevMode ? { debugName: "rectangleElements" } : /* istanbul ignore next */ {}), descendants: true });
+        /** @docs-private */
+        this.navbarItems = contentChildren(forwardRef(() => KbqNavbarItem), { ...(ngDevMode ? { debugName: "navbarItems" } : /* istanbul ignore next */ {}), descendants: true });
+        /** Raw `resize` events of the window, fed from outside the Angular zone. @docs-private */
         this.resizeStream = new Subject();
         this.resizeDebounceInterval = 100;
+        /**
+         * Recomputes which collapsable items fit into the current navbar width.
+         *
+         * Every measurement is taken up front, and only then is anything written: collapsing an item invalidates
+         * layout, so a measurement taken afterwards forces a synchronous reflow for each of the remaining items. The
+         * width an item frees by collapsing comes from its own record of both presentations, see
+         * `KbqNavbarItem.measureWidths()`.
+         *
+         * @docs-private
+         */
         this.updateExpandedStateForItems = () => {
-            const collapseDelta = this.totalItemsWidth - this.width;
-            const needCollapse = collapseDelta > 0;
-            if (needCollapse) {
-                this.collapseItems(collapseDelta);
-            }
-            else {
-                this.expandItems(collapseDelta);
-            }
-        };
-        this.setItemsState = (rectangleElements) => {
-            Promise.resolve().then(() => rectangleElements.forEach((item) => (item.horizontal = true)));
+            // Untracked: called from a consumer's `effect()`, the items and their collapsed state read here would make the
+            // effect run again on every collapse it makes.
+            untracked(() => this.fitItems());
         };
-        this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
-        this.focusMonitor = focusMonitor;
-        this.resizeSubscription = this.resizeStream
+        this.destroyRef.onDestroy(() => this.resizeStream.complete());
+        // Raw resize events must not enter the zone: a single drag fires hundreds of them, and only the
+        // debounced recompute at the end of the burst is worth a change detection pass.
+        if (this.platform.isBrowser) {
+            this.ngZone.runOutsideAngular(() => {
+                fromEvent(this.window, 'resize')
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe((event) => this.resizeStream.next(event));
+            });
+        }
+        this.resizeStream
             .pipe(debounceTime(this.resizeDebounceInterval), takeUntilDestroyed())
-            .subscribe(this.updateExpandedStateForItems);
-        effect(() => this.setItemsState(this.rectangleElements()));
+            .subscribe(() => this.ngZone.run(this.updateExpandedStateForItems));
+        effect(() => this.rectangleElements().forEach((item) => (item.orientation = 'horizontal')));
+        // Note: this wait is required for loading and rendering fonts for icons;
+        // unfortunately we cannot control font rendering. Bound to the component's lifetime, unlike a bare
+        // `setTimeout`, so it can never run against a destroyed view.
+        afterNextRender(() => this.updateExpandedStateForItems());
     }
+    /** @docs-private */
     ngAfterContentInit() {
         super.ngAfterContentInit();
         this.keyManager.withVerticalOrientation(false).withHorizontalOrientation('ltr');
     }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        if (!this.platform.isBrowser)
+    /** Body of `updateExpandedStateForItems()`. */
+    fitItems() {
+        const availableWidth = this.width;
+        // A navbar that is not rendered, e.g. hidden in an inactive tab, has nothing to measure yet.
+        if (!availableWidth)
             return;
-        // Note: this wait is required for loading and rendering fonts for icons;
-        // unfortunately we cannot control font rendering
-        setTimeout(this.updateExpandedStateForItems);
-    }
-    ngOnDestroy() {
-        this.resizeSubscription.unsubscribe();
-        super.ngOnDestroy();
+        const items = this.collapsableItems;
+        // Before the content is read, because an item seen in one presentation measures the other by toggling a class.
+        items.forEach((item) => item.measureWidths());
+        const collapseDelta = this.contentWidth - availableWidth;
+        if (collapseDelta > 0) {
+            this.collapseItems(items, collapseDelta);
+        }
+        else {
+            this.expandItems(items, collapseDelta);
+        }
     }
+    /** @docs-private */
     onKeyDown(event) {
         const keyCode = event.keyCode;
+        // The origin of the last focus event may be a click, and an item takes no DOM focus for a pointer origin.
+        this.keyManager.setFocusOrigin('keyboard');
         if (!this.eventFromInput(event) && (isVerticalMovement(event) || isHorizontalMovement(event))) {
             event.preventDefault();
         }
@@ -906,116 +1153,109 @@ class KbqNavbar extends KbqFocusableComponent {
         const input = event.target;
         return input.selectionEnd === input.value.length;
     }
-    collapseItems(collapseDelta) {
+    collapseItems(items, collapseDelta) {
         let delta = collapseDelta;
-        const unCollapsedItems = this.collapsableItems.filter((item) => !item.collapsed);
-        for (const item of unCollapsedItems) {
+        // An item that frees nothing has not been measured, because it is hidden, and collapsing it gains nothing.
+        for (const item of items.filter((item) => !item.isCollapsed() && item.getCollapsibleWidth() > 0)) {
             item.collapsed = true;
-            delta -= item.getTitleWidth();
-            if (delta < 0) {
+            delta -= item.getCollapsibleWidth();
+            if (delta <= 0)
                 break;
-            }
         }
     }
-    expandItems(collapseDelta) {
+    expandItems(items, collapseDelta) {
         let delta = collapseDelta;
-        this.collapsableItems
-            .filter((item) => item.collapsed)
-            .forEach((item) => {
-            if (delta + item.getTitleWidth() < 0) {
+        for (const item of items.filter((item) => item.isCollapsed())) {
+            if (delta + item.getCollapsibleWidth() <= 0) {
                 item.collapsed = false;
-                delta += item.getTitleWidth();
+                delta += item.getCollapsibleWidth();
             }
-        });
+        }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", 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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqNavbar, isStandalone: true, selector: "kbq-navbar", host: { attributes: { "role": "navigation" }, listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.tabindex": "renderedTabIndex()" }, classAttribute: "kbq-navbar" }, queries: [{ propertyName: "rectangleElements", predicate: i0.forwardRef(() => KbqNavbarRectangleElement), descendants: true, isSignal: true }, { propertyName: "navbarItems", predicate: i0.forwardRef(() => KbqNavbarItem), descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i2.KbqOverlayLayerExclude }], 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;transition:opacity .15s ease-out,margin-left .15s ease-out}.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,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-active .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-pressed .kbq-navbar-item__title{margin-left:0;opacity:1}.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-badge-filled.kbq-badge_fade-contrast{background:linear-gradient(var(--kbq-background-contrast-fade),var(--kbq-background-contrast-fade)),var(--kbq-background-bg-tertiary)}.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:not(.kbq-disabled) .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{box-sizing:content-box;max-width:154px;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-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;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-disabled{cursor:default}.kbq-navbar-brand.kbq-navbar-brand_link:not(.kbq-disabled){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:not(.kbq-disabled){outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled):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:not(.kbq-disabled) .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover:not(.kbq-disabled) .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);line-height:16px}\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 }); }
+    `, isInline: true, styles: ["button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-navbar{z-index:var(--kbq-navbar-z-index);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)}.kbq-navbar-item .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-right)}.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)}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-hovered:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty,.kbq-navbar-item:hover:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item:hover:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-right)}.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)}.kbq-navbar-item:active:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item:active:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-right)}.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)}.kbq-navbar-item.kbq-disabled .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-disabled .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-disabled-content-icon-right)}.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", "@charset \"UTF-8\";.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-vertical-size-height)}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical .kbq-navbar-item-suffix{margin-left:auto}.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-badge{position:static}.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:calc(-1 * var(--kbq-size-s));opacity:0;transition:opacity .15s ease-out,margin-left .15s ease-out}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento .kbq-navbar-item__title.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento .kbq-navbar-item__title{animation:none;transition:none}}.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,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-active .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-pressed .kbq-navbar-item__title{margin-left:0;opacity:1}.kbq-navbar-item.kbq-vertical.kbq-collapsed{width:var(--kbq-size-6xl);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{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-suffix{margin-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{top:calc(-1 * var(--kbq-size-3xs));right:calc(-1 * var(--kbq-size-3xs))}.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)}@supports (corner-shape: squircle){.kbq-navbar-item{corner-shape:squircle;border-radius:clamp(var(--kbq-navbar-item-size-content-border-radius) * 1.85,var(--kbq-navbar-item-size-content-border-radius) * 2.3 - 3.6px,var(--kbq-navbar-item-size-content-border-radius) * 2)}}.kbq-navbar-item .kbq-icon{min-width:var(--kbq-size-l);min-height:var(--kbq-size-l)}.kbq-navbar-item .kbq-badge-filled.kbq-badge_fade-contrast{background:linear-gradient(var(--kbq-background-contrast-fade),var(--kbq-background-contrast-fade)),var(--kbq-background-bg-tertiary)}.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)}@supports (corner-shape: squircle){.kbq-navbar-item:after{corner-shape:squircle;border-radius:clamp(var(--kbq-navbar-item-size-content-border-radius) * 1.85,var(--kbq-navbar-item-size-content-border-radius) * 2.3 - 3.6px,var(--kbq-navbar-item-size-content-border-radius) * 2)}}.kbq-navbar-item .kbq-badge{position:absolute;z-index:1}.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)}@supports (corner-shape: squircle){.kbq-navbar-brand{corner-shape:squircle;border-radius:clamp(var(--kbq-size-s) * 1.85,var(--kbq-size-s) * 2.3 - 3.6px,var(--kbq-size-s) * 2)}}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}@supports (corner-shape: squircle){.kbq-navbar-brand:after{corner-shape:squircle;border-radius:clamp(var(--kbq-navbar-item-size-content-border-radius) * 1.85,var(--kbq-navbar-item-size-content-border-radius) * 2.3 - 3.6px,var(--kbq-navbar-item-size-content-border-radius) * 2)}}.kbq-navbar-brand:not(.kbq-disabled) .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{box-sizing:content-box;max-width:154px;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:var(--kbq-navbar-brand-vertical-size-title-max-width)}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;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)}.kbq-navbar-brand .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-right)}.kbq-navbar-brand.kbq-disabled{cursor:default}.kbq-navbar-brand.kbq-navbar-brand_link:not(.kbq-disabled){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)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-right)}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled){outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled):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)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix .kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-right)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-vertical:hover:not(.kbq-disabled) .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover:not(.kbq-disabled) .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);line-height:16px}\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:var(--kbq-size-m);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-item-vertical-size-height: 41px;--kbq-navbar-vertical-size-expanded-width: 240px;--kbq-navbar-brand-vertical-size-title-max-width: 200px;--kbq-navbar-toggle-size-circle: 28px;--kbq-navbar-z-index: 990;--kbq-navbar-vertical-open-over-z-index: 989;--kbq-navbar-toggle-z-index: 991;--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: "20.3.30", ngImport: i0, type: KbqNavbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbar, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-navbar', template: `
         <ng-content select="[kbq-navbar-container], kbq-navbar-container" />
-    `, providers: [
-                        { provide: KBQ_DROPDOWN_HOST, useExisting: KbqNavbar }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-navbar',
-                        '[attr.tabindex]': 'tabIndex',
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.tabindex]': 'renderedTabIndex()',
                         '(focus)': 'focus()',
                         '(blur)': 'blur()',
-                        '(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;transition:opacity .15s ease-out,margin-left .15s ease-out}.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,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-active .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-pressed .kbq-navbar-item__title{margin-left:0;opacity:1}.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-badge-filled.kbq-badge_fade-contrast{background:linear-gradient(var(--kbq-background-contrast-fade),var(--kbq-background-contrast-fade)),var(--kbq-background-bg-tertiary)}.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:not(.kbq-disabled) .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{box-sizing:content-box;max-width:154px;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-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;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-disabled{cursor:default}.kbq-navbar-brand.kbq-navbar-brand_link:not(.kbq-disabled){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:not(.kbq-disabled){outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled):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:not(.kbq-disabled) .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover:not(.kbq-disabled) .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);line-height:16px}\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"] }]
+                        '(keydown)': 'onKeyDown($event)'
+                    }, hostDirectives: [KbqOverlayLayerExclude], styles: ["button.kbq-navbar-item,button.kbq-navbar-brand{background:transparent;border:none}.kbq-navbar{z-index:var(--kbq-navbar-z-index);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)}.kbq-navbar-item .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-right)}.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)}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-hovered:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty,.kbq-navbar-item:hover:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item:hover:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-right)}.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)}.kbq-navbar-item:active:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item:active:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-right)}.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)}.kbq-navbar-item.kbq-disabled .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-disabled .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-disabled-content-icon-right)}.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", "@charset \"UTF-8\";.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-vertical-size-height)}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical .kbq-navbar-item-suffix{margin-left:auto}.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-badge{position:static}.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:calc(-1 * var(--kbq-size-s));opacity:0;transition:opacity .15s ease-out,margin-left .15s ease-out}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento .kbq-navbar-item__title.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento .kbq-navbar-item__title{animation:none;transition:none}}.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,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-active .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-pressed .kbq-navbar-item__title{margin-left:0;opacity:1}.kbq-navbar-item.kbq-vertical.kbq-collapsed{width:var(--kbq-size-6xl);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{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-suffix{margin-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{top:calc(-1 * var(--kbq-size-3xs));right:calc(-1 * var(--kbq-size-3xs))}.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)}@supports (corner-shape: squircle){.kbq-navbar-item{corner-shape:squircle;border-radius:clamp(var(--kbq-navbar-item-size-content-border-radius) * 1.85,var(--kbq-navbar-item-size-content-border-radius) * 2.3 - 3.6px,var(--kbq-navbar-item-size-content-border-radius) * 2)}}.kbq-navbar-item .kbq-icon{min-width:var(--kbq-size-l);min-height:var(--kbq-size-l)}.kbq-navbar-item .kbq-badge-filled.kbq-badge_fade-contrast{background:linear-gradient(var(--kbq-background-contrast-fade),var(--kbq-background-contrast-fade)),var(--kbq-background-bg-tertiary)}.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)}@supports (corner-shape: squircle){.kbq-navbar-item:after{corner-shape:squircle;border-radius:clamp(var(--kbq-navbar-item-size-content-border-radius) * 1.85,var(--kbq-navbar-item-size-content-border-radius) * 2.3 - 3.6px,var(--kbq-navbar-item-size-content-border-radius) * 2)}}.kbq-navbar-item .kbq-badge{position:absolute;z-index:1}.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)}@supports (corner-shape: squircle){.kbq-navbar-brand{corner-shape:squircle;border-radius:clamp(var(--kbq-size-s) * 1.85,var(--kbq-size-s) * 2.3 - 3.6px,var(--kbq-size-s) * 2)}}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}@supports (corner-shape: squircle){.kbq-navbar-brand:after{corner-shape:squircle;border-radius:clamp(var(--kbq-navbar-item-size-content-border-radius) * 1.85,var(--kbq-navbar-item-size-content-border-radius) * 2.3 - 3.6px,var(--kbq-navbar-item-size-content-border-radius) * 2)}}.kbq-navbar-brand:not(.kbq-disabled) .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{box-sizing:content-box;max-width:154px;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:var(--kbq-navbar-brand-vertical-size-title-max-width)}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;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)}.kbq-navbar-brand .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-right)}.kbq-navbar-brand.kbq-disabled{cursor:default}.kbq-navbar-brand.kbq-navbar-brand_link:not(.kbq-disabled){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)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-right)}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled){outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled):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)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix .kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-right)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-vertical:hover:not(.kbq-disabled) .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover:not(.kbq-disabled) .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);line-height:16px}\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:var(--kbq-size-m);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-item-vertical-size-height: 41px;--kbq-navbar-vertical-size-expanded-width: 240px;--kbq-navbar-brand-vertical-size-title-max-width: 200px;--kbq-navbar-toggle-size-circle: 28px;--kbq-navbar-z-index: 990;--kbq-navbar-vertical-open-over-z-index: 989;--kbq-navbar-toggle-z-index: 991;--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 }] }], navbarItems: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqNavbarItem), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /** default configuration of navbar */
 /** @docs-private */
-const KBQ_VERTICAL_NAVBAR_DEFAULT_CONFIGURATION = ruRULocaleData.navbar;
+const KBQ_NAVBAR_DEFAULT_LOCALE_CONFIGURATION = ruRULocaleData.navbar;
 /** Injection Token for providing configuration of navbar */
 /** @docs-private */
-const KBQ_VERTICAL_NAVBAR_CONFIGURATION = new InjectionToken('KbqVerticalNavbarConfiguration');
+const KBQ_NAVBAR_LOCALE_CONFIGURATION = new InjectionToken('KbqNavbarLocaleConfiguration', { factory: () => KBQ_NAVBAR_DEFAULT_LOCALE_CONFIGURATION });
+/**
+ * Utility provider for `KBQ_NAVBAR_LOCALE_CONFIGURATION`. Only the strings you pass are overridden; the
+ * rest keep following the active locale.
+ */
+const kbqNavbarLocaleConfigurationProvider = (configuration) => kbqLocaleConfigurationOverrideProvider('navbar', configuration);
+/** @deprecated Use {@link KBQ_NAVBAR_DEFAULT_LOCALE_CONFIGURATION}. Will be removed in 22.0.0. */
+const KBQ_VERTICAL_NAVBAR_DEFAULT_CONFIGURATION = KBQ_NAVBAR_DEFAULT_LOCALE_CONFIGURATION;
+/** @deprecated Use {@link KBQ_NAVBAR_LOCALE_CONFIGURATION}. Will be removed in 22.0.0. */
+const KBQ_VERTICAL_NAVBAR_CONFIGURATION = KBQ_NAVBAR_LOCALE_CONFIGURATION;
 class KbqVerticalNavbar extends KbqFocusableComponent {
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get expanded() {
-        return this._expanded;
-    }
-    set expanded(value) {
-        this._expanded = coerceBooleanProperty(value);
-        this.updateExpandedStateForItems();
-    }
     constructor() {
-        const elementRef = inject(ElementRef);
         super();
+        /**
+         * Localized strings of the navbar.
+         *
+         * A signal, so that a locale change reaches the `OnPush` descendants that render these strings — a plain
+         * field would leave them showing the previous locale until something else marked them dirty. It also keeps
+         * the value observable from outside: `KbqNavbarToggle` reads it in an `effect` to refresh its tooltip,
+         * which a `markForCheck()` here could never have reached in that separate `OnPush` view.
+         */
+        this.localeConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('navbar', KBQ_NAVBAR_LOCALE_CONFIGURATION);
         /** @docs-private */
-        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
-        this.externalConfiguration = inject(KBQ_VERTICAL_NAVBAR_CONFIGURATION, { optional: 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 = input(false, ...(ngDevMode ? [{ debugName: "openOver" }] : []));
-        this._expanded = false;
-        this.updateExpandedStateForItems = () => this.rectangleElements().forEach(this.updateItemExpandedState);
-        this.updateTooltipForItems = () => this.items().forEach((item) => item.updateTooltip());
-        this.setItemsVerticalStateAndUpdateExpandedState = (rectangleElements) => rectangleElements.forEach(this.setItemVerticalStateAndUpdateExpandedState);
-        this.setItemVerticalStateAndUpdateExpandedState = (item) => {
-            queueMicrotask(() => this.setItemVerticalState(item));
-            this.updateItemExpandedState(item);
-        };
-        this.setItemVerticalState = (item) => {
-            item.vertical = true;
-        };
-        this.updateItemExpandedState = (item) => {
-            item.collapsed = !this.expanded;
-            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);
-        if (!this.localeService) {
-            this.initDefaultParams();
-        }
+        this.rectangleElements = contentChildren(forwardRef(() => KbqNavbarRectangleElement), { ...(ngDevMode ? { debugName: "rectangleElements" } : /* istanbul ignore next */ {}), descendants: true });
+        /** @docs-private */
+        this.items = contentChildren(forwardRef(() => KbqNavbarItem), { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
+        /** @docs-private */
+        this.bento = contentChild(forwardRef(() => KbqNavbarBento), ...(ngDevMode ? [{ debugName: "bento" }] : /* istanbul ignore next */ []));
+        /** Whether the expanded navbar overlays the page content instead of taking room from it. */
+        this.openOver = input(false, ...(ngDevMode ? [{ debugName: "openOver" }] : /* istanbul ignore next */ []));
+        /** Whether the navbar is expanded. */
+        this.expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.destroyRef.onDestroy(() => clearTimeout(this.buttonIconsRefresh));
+        effect(() => {
+            // Re-runs both when the projected elements change and when the navbar is expanded or collapsed.
+            const expanded = this.expanded();
+            this.rectangleElements().forEach((item) => {
+                item.orientation = 'vertical';
+                item.collapsed = !expanded;
+            });
+            this.refreshButtonIcons();
+        });
     }
+    /** @docs-private */
     ngAfterContentInit() {
-        this.updateTooltipForItems();
         super.ngAfterContentInit();
         this.keyManager.withVerticalOrientation(true);
     }
+    /** Expands a collapsed navbar and collapses an expanded one. */
     toggle() {
-        this.expanded = !this.expanded;
-        this.changeDetectorRef.markForCheck();
+        // Untracked: called from a consumer's `effect()`, `expanded` read here would make the effect run again on every
+        // expand and collapse.
+        this.expanded.set(!untracked(this.expanded));
     }
+    /** @docs-private */
     onKeyDown(event) {
         const keyCode = event.keyCode;
+        // The origin of the last focus event may be a click, and an item takes no DOM focus for a pointer origin.
+        this.keyManager.setFocusOrigin('keyboard');
         if (!event.target.attributes.getNamedItem('kbqinput') &&
             (isVerticalMovement(event) || isHorizontalMovement(event))) {
             event.preventDefault();
@@ -1034,65 +1274,159 @@ class KbqVerticalNavbar extends KbqFocusableComponent {
             this.keyManager.onKeydown(event);
         }
     }
-    initDefaultParams() {
-        this.configuration = KBQ_VERTICAL_NAVBAR_DEFAULT_CONFIGURATION;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqVerticalNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", 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">
+    /**
+     * Buttons projected into the items re-pick their icon-only modifier from the rendered width, so the pass
+     * has to wait for the collapsed/expanded classes to reach the DOM. One deferred pass over every item, not
+     * one timer per item.
+     */
+    refreshButtonIcons() {
+        const elements = this.rectangleElements();
+        // A pending pass is replaced: every element of it that is still projected is among these.
+        clearTimeout(this.buttonIconsRefresh);
+        if (!elements.length)
+            return;
+        this.buttonIconsRefresh = setTimeout(() => elements.forEach((item) => item.button()?.updateClassModifierForIcons()));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqVerticalNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.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: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { attributes: { "role": "navigation" }, listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)" }, properties: { "attr.aria-label": "ariaLabel()", "class.kbq-vertical-navbar_open-over": "openOver()", "attr.tabindex": "renderedTabIndex()", "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$1.CdkMonitorFocus }, { directive: i2.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }, { directive: i2.KbqOverlayLayerExclude }], 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{box-sizing:border-box;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;transition:opacity .15s ease-out,margin-left .15s ease-out}.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,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-active .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-pressed .kbq-navbar-item__title{margin-left:0;opacity:1}.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-badge-filled.kbq-badge_fade-contrast{background:linear-gradient(var(--kbq-background-contrast-fade),var(--kbq-background-contrast-fade)),var(--kbq-background-bg-tertiary)}.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:not(.kbq-disabled) .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{box-sizing:content-box;max-width:154px;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-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;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-disabled{cursor:default}.kbq-navbar-brand.kbq-navbar-brand_link:not(.kbq-disabled){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:not(.kbq-disabled){outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled):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:not(.kbq-disabled) .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover:not(.kbq-disabled) .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);line-height:16px}\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 }); }
+    `, 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{box-sizing:border-box;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:var(--kbq-navbar-vertical-size-expanded-width)}.kbq-vertical-navbar.kbq-vertical-navbar_open-over .kbq-vertical-navbar__container{position:absolute;z-index:var(--kbq-navbar-vertical-open-over-z-index)}.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)}.kbq-navbar-item .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-right)}.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)}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-hovered:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty,.kbq-navbar-item:hover:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item:hover:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-right)}.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)}.kbq-navbar-item:active:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item:active:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-right)}.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)}.kbq-navbar-item.kbq-disabled .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-disabled .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-disabled-content-icon-right)}.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", "@charset \"UTF-8\";.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-vertical-size-height)}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical .kbq-navbar-item-suffix{margin-left:auto}.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-badge{position:static}.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:calc(-1 * var(--kbq-size-s));opacity:0;transition:opacity .15s ease-out,margin-left .15s ease-out}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento .kbq-navbar-item__title.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento .kbq-navbar-item__title{animation:none;transition:none}}.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,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-active .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-pressed .kbq-navbar-item__title{margin-left:0;opacity:1}.kbq-navbar-item.kbq-vertical.kbq-collapsed{width:var(--kbq-size-6xl);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{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-suffix{margin-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{top:calc(-1 * var(--kbq-size-3xs));right:calc(-1 * var(--kbq-size-3xs))}.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)}@supports (corner-shape: squircle){.kbq-navbar-item{corner-shape:squircle;border-radius:clamp(var(--kbq-navbar-item-size-content-border-radius) * 1.85,var(--kbq-navbar-item-size-content-border-radius) * 2.3 - 3.6px,var(--kbq-navbar-item-size-content-border-radius) * 2)}}.kbq-navbar-item .kbq-icon{min-width:var(--kbq-size-l);min-height:var(--kbq-size-l)}.kbq-navbar-item .kbq-badge-filled.kbq-badge_fade-contrast{background:linear-gradient(var(--kbq-background-contrast-fade),var(--kbq-background-contrast-fade)),var(--kbq-background-bg-tertiary)}.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)}@supports (corner-shape: squircle){.kbq-navbar-item:after{corner-shape:squircle;border-radius:clamp(var(--kbq-navbar-item-size-content-border-radius) * 1.85,var(--kbq-navbar-item-size-content-border-radius) * 2.3 - 3.6px,var(--kbq-navbar-item-size-content-border-radius) * 2)}}.kbq-navbar-item .kbq-badge{position:absolute;z-index:1}.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)}@supports (corner-shape: squircle){.kbq-navbar-brand{corner-shape:squircle;border-radius:clamp(var(--kbq-size-s) * 1.85,var(--kbq-size-s) * 2.3 - 3.6px,var(--kbq-size-s) * 2)}}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}@supports (corner-shape: squircle){.kbq-navbar-brand:after{corner-shape:squircle;border-radius:clamp(var(--kbq-navbar-item-size-content-border-radius) * 1.85,var(--kbq-navbar-item-size-content-border-radius) * 2.3 - 3.6px,var(--kbq-navbar-item-size-content-border-radius) * 2)}}.kbq-navbar-brand:not(.kbq-disabled) .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{box-sizing:content-box;max-width:154px;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:var(--kbq-navbar-brand-vertical-size-title-max-width)}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;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)}.kbq-navbar-brand .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-right)}.kbq-navbar-brand.kbq-disabled{cursor:default}.kbq-navbar-brand.kbq-navbar-brand_link:not(.kbq-disabled){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)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-right)}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled){outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled):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)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix .kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-right)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-vertical:hover:not(.kbq-disabled) .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover:not(.kbq-disabled) .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);line-height:16px}\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:var(--kbq-size-m);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-item-vertical-size-height: 41px;--kbq-navbar-vertical-size-expanded-width: 240px;--kbq-navbar-brand-vertical-size-title-max-width: 200px;--kbq-navbar-toggle-size-circle: 28px;--kbq-navbar-z-index: 990;--kbq-navbar-vertical-open-over-z-index: 989;--kbq-navbar-toggle-z-index: 991;--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: "20.3.30", ngImport: i0, type: KbqVerticalNavbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.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">
+        <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>
     `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-vertical-navbar',
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel()',
                         '[class.kbq-vertical-navbar_open-over]': 'openOver()',
-                        '[attr.tabindex]': 'tabIndex',
+                        '[attr.tabindex]': 'renderedTabIndex()',
                         '[attr.cdkMonitorSubtreeFocus]': 'true',
                         '(focus)': 'focus()',
                         '(blur)': 'blur()',
                         '(keydown)': 'onKeyDown($event)'
-                    }, 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{box-sizing:border-box;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;transition:opacity .15s ease-out,margin-left .15s ease-out}.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,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-active .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-pressed .kbq-navbar-item__title{margin-left:0;opacity:1}.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-badge-filled.kbq-badge_fade-contrast{background:linear-gradient(var(--kbq-background-contrast-fade),var(--kbq-background-contrast-fade)),var(--kbq-background-bg-tertiary)}.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:not(.kbq-disabled) .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{box-sizing:content-box;max-width:154px;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-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;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-disabled{cursor:default}.kbq-navbar-brand.kbq-navbar-brand_link:not(.kbq-disabled){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:not(.kbq-disabled){outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled):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:not(.kbq-disabled) .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover:not(.kbq-disabled) .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);line-height:16px}\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
-            }] } });
+                    }, hostDirectives: [
+                        CdkMonitorFocus,
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] },
+                        KbqOverlayLayerExclude
+                    ], 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{box-sizing:border-box;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:var(--kbq-navbar-vertical-size-expanded-width)}.kbq-vertical-navbar.kbq-vertical-navbar_open-over .kbq-vertical-navbar__container{position:absolute;z-index:var(--kbq-navbar-vertical-open-over-z-index)}.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)}.kbq-navbar-item .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-right)}.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)}.kbq-navbar-item.kbq-hovered:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-hovered:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty,.kbq-navbar-item:hover:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item:hover:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-right)}.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)}.kbq-navbar-item:active:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item:active:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-active:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-right)}.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)}.kbq-navbar-item.kbq-disabled .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-item.kbq-disabled .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-disabled-content-icon-right)}.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", "@charset \"UTF-8\";.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-vertical-size-height)}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:var(--kbq-size-m)}.kbq-navbar-item.kbq-vertical .kbq-navbar-item-suffix{margin-left:auto}.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-badge{position:static}.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:calc(-1 * var(--kbq-size-s));opacity:0;transition:opacity .15s ease-out,margin-left .15s ease-out}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento .kbq-navbar-item__title.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento .kbq-navbar-item__title{animation:none;transition:none}}.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,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-active .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento.kbq-pressed .kbq-navbar-item__title{margin-left:0;opacity:1}.kbq-navbar-item.kbq-vertical.kbq-collapsed{width:var(--kbq-size-6xl);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{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-suffix{margin-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{top:calc(-1 * var(--kbq-size-3xs));right:calc(-1 * var(--kbq-size-3xs))}.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)}@supports (corner-shape: squircle){.kbq-navbar-item{corner-shape:squircle;border-radius:clamp(var(--kbq-navbar-item-size-content-border-radius) * 1.85,var(--kbq-navbar-item-size-content-border-radius) * 2.3 - 3.6px,var(--kbq-navbar-item-size-content-border-radius) * 2)}}.kbq-navbar-item .kbq-icon{min-width:var(--kbq-size-l);min-height:var(--kbq-size-l)}.kbq-navbar-item .kbq-badge-filled.kbq-badge_fade-contrast{background:linear-gradient(var(--kbq-background-contrast-fade),var(--kbq-background-contrast-fade)),var(--kbq-background-bg-tertiary)}.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)}@supports (corner-shape: squircle){.kbq-navbar-item:after{corner-shape:squircle;border-radius:clamp(var(--kbq-navbar-item-size-content-border-radius) * 1.85,var(--kbq-navbar-item-size-content-border-radius) * 2.3 - 3.6px,var(--kbq-navbar-item-size-content-border-radius) * 2)}}.kbq-navbar-item .kbq-badge{position:absolute;z-index:1}.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)}@supports (corner-shape: squircle){.kbq-navbar-brand{corner-shape:squircle;border-radius:clamp(var(--kbq-size-s) * 1.85,var(--kbq-size-s) * 2.3 - 3.6px,var(--kbq-size-s) * 2)}}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius)}@supports (corner-shape: squircle){.kbq-navbar-brand:after{corner-shape:squircle;border-radius:clamp(var(--kbq-navbar-item-size-content-border-radius) * 1.85,var(--kbq-navbar-item-size-content-border-radius) * 2.3 - 3.6px,var(--kbq-navbar-item-size-content-border-radius) * 2)}}.kbq-navbar-brand:not(.kbq-disabled) .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{box-sizing:content-box;max-width:154px;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:var(--kbq-navbar-brand-vertical-size-title-max-width)}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;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)}.kbq-navbar-brand .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-default-content-icon-right)}.kbq-navbar-brand.kbq-disabled{cursor:default}.kbq-navbar-brand.kbq-navbar-brand_link:not(.kbq-disabled){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)}.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link:hover:not(.kbq-disabled) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-hover-content-icon-right)}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled){outline:none}.kbq-navbar-brand.kbq-navbar-brand_link.cdk-focused.cdk-keyboard-focused:not(.kbq-disabled):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)}.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link:active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix .kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix.kbq-icon.kbq-empty,.kbq-navbar-brand.kbq-navbar-brand_link.kbq-active:not(.kbq-disabled,.kbq-vertical.kbq-navbar-brand) .kbq-navbar-item-suffix .kbq-icon.kbq-empty{color:var(--kbq-navbar-item-states-selected-content-icon-right)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-vertical:hover:not(.kbq-disabled) .kbq-navbar-logo{transform:scale(1.06)}.kbq-navbar-brand.kbq-navbar-brand_link.kbq-horizontal:hover:not(.kbq-disabled) .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);line-height:16px}\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:var(--kbq-size-m);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-item-vertical-size-height: 41px;--kbq-navbar-vertical-size-expanded-width: 240px;--kbq-navbar-brand-vertical-size-title-max-width: 200px;--kbq-navbar-toggle-size-circle: 28px;--kbq-navbar-z-index: 990;--kbq-navbar-vertical-open-over-z-index: 989;--kbq-navbar-toggle-z-index: 991;--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: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
 
-class KbqNavbarToggle {
+/**
+ * Dispatches the global `Ctrl+/` shortcut to exactly one navbar toggle.
+ *
+ * Every toggle used to bind its own window listener and call `toggle()` unconditionally, so a single keypress
+ * collapsed *every* vertical navbar on the page. One shared listener instead picks the toggle whose navbar
+ * currently holds focus, and falls back to the first registered one so the shortcut still works from anywhere.
+ *
+ * @docs-private
+ */
+class KbqNavbarToggleRegistry {
     constructor() {
         this.window = inject(KBQ_WINDOW);
+        this.document = inject(DOCUMENT);
         this.ngZone = inject(NgZone);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.toggles = new Set();
+        this.handleKeydown = (event) => {
+            if (!event.ctrlKey || ![NUMPAD_DIVIDE, SLASH].includes(event.keyCode))
+                return;
+            const target = this.resolveTarget();
+            if (!target)
+                return;
+            this.ngZone.run(() => target.toggle());
+        };
+    }
+    /** Starts listening for the shortcut on behalf of the given toggle. */
+    add(toggle) {
+        if (this.toggles.size === 0) {
+            this.ngZone.runOutsideAngular(() => this.window.addEventListener('keydown', this.handleKeydown));
+        }
+        this.toggles.add(toggle);
+    }
+    /** Stops dispatching the shortcut to the given toggle. */
+    remove(toggle) {
+        this.toggles.delete(toggle);
+        if (this.toggles.size === 0) {
+            this.window.removeEventListener('keydown', this.handleKeydown);
+        }
+    }
+    ngOnDestroy() {
+        this.window.removeEventListener('keydown', this.handleKeydown);
+        this.toggles.clear();
+    }
+    resolveTarget() {
+        const toggles = [...this.toggles];
+        const activeElement = this.document.activeElement;
+        const focused = activeElement && toggles.find((toggle) => toggle.contains(activeElement));
+        return focused || toggles[0];
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarToggleRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarToggleRegistry, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarToggleRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class KbqNavbarToggle {
+    /** Accessible name of the toggle; it names the action the toggle performs. @docs-private */
+    get label() {
+        return this.navbar.expanded()
+            ? this.navbar.localeConfiguration().toggle.collapse
+            : this.navbar.localeConfiguration().toggle.expand;
+    }
+    constructor() {
+        this.nativeElement = kbqInjectNativeElement();
+        this.registry = inject(KbqNavbarToggleRegistry);
+        this.isBrowser = inject(Platform).isBrowser;
         this.tooltip = inject(KbqTooltipTrigger, { self: true });
         /** @docs-private */
         this.navbar = inject(KbqVerticalNavbar);
         this.updateTooltipContent = () => {
-            this.tooltip.content = this.navbar.expanded
-                ? this.navbar.configuration.toggle.collapse
-                : this.navbar.configuration.toggle.expand;
+            this.tooltip.content = this.label;
         };
-        this.windowToggleHandler = (event) => {
-            if (event.ctrlKey && [NUMPAD_DIVIDE, SLASH].includes(event.keyCode)) {
-                this.ngZone.run(this.navbar.toggle);
-            }
-        };
-        afterNextRender(() => {
-            this.ngZone.runOutsideAngular(() => this.window.addEventListener('keydown', this.windowToggleHandler));
-        });
+        if (this.isBrowser) {
+            this.registry.add(this);
+        }
         this.tooltip.arrow = false;
         this.updateTooltipContent();
         this.tooltip.tooltipPlacement = PopUpPlacements.Right;
         this.tooltip.visibleChange.pipe(takeUntilDestroyed()).subscribe(this.updateTooltipContent);
+        // `content` is a plain property, so a tooltip that is already open keeps the string it was given.
+        // Reading the navbar's signal-backed configuration here re-applies it on a locale change instead
+        // of leaving the previous locale on screen until the next show.
+        effect(() => this.updateTooltipContent());
     }
+    /** @docs-private */
     ngOnDestroy() {
-        this.window.removeEventListener('keydown', this.windowToggleHandler);
+        this.registry.remove(this);
+    }
+    /** Whether the given element sits inside the navbar this toggle belongs to. @docs-private */
+    contains(element) {
+        return this.navbar.getNativeElement().contains(element) || this.nativeElement.contains(element);
+    }
+    /** toggles the state of the navbar */
+    toggle() {
+        // Untracked: called from a consumer's `effect()`, the state read on the way — `expanded`, the tooltip's — would
+        // make the effect run again on every expand and collapse.
+        untracked(() => {
+            this.navbar.toggle();
+            this.tooltip.hide();
+        });
     }
     /** @docs-private */
     keydownHandler($event) {
@@ -1102,26 +1436,20 @@ class KbqNavbarToggle {
             $event.preventDefault();
         }
     }
-    /** toggles the state of the navbar */
-    toggle() {
-        this.navbar.toggle();
-        this.tooltip.hide();
-        this.changeDetectorRef.detectChanges();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", 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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqNavbarToggle, isStandalone: true, selector: "kbq-navbar-toggle, [kbq-navbar-toggle]", host: { attributes: { "role": "button", "aria-keyshortcuts": "Control+/" }, listeners: { "keydown": "keydownHandler($event)", "click": "toggle()" }, properties: { "class.kbq-collapsed": "!navbar.expanded()", "class.kbq-expanded": "navbar.expanded()", "attr.aria-expanded": "navbar.expanded()", "attr.aria-label": "label" }, classAttribute: "kbq-navbar-toggle kbq-vertical" }, hostDirectives: [{ directive: i1$1.CdkMonitorFocus }, { directive: i1.KbqTooltipTrigger }], ngImport: i0, template: `
         <span class="kbq-navbar-toggle__circle">
             <ng-content select="[kbq-icon]">
                 <i
                     kbq-icon
-                    [class.kbq-chevron-double-left-s_16]="navbar.expanded"
-                    [class.kbq-chevron-double-right-s_16]="!navbar.expanded"
+                    [class.kbq-chevron-double-left-s_16]="navbar.expanded()"
+                    [class.kbq-chevron-double-right-s_16]="!navbar.expanded()"
                 ></i>
             </ng-content>
         </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 }); }
+    `, isInline: true, styles: [".kbq-navbar-toggle{position:absolute;top:var(--kbq-size-3xl);right:calc(-1 * var(--kbq-size-l));z-index:var(--kbq-navbar-toggle-z-index);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:var(--kbq-navbar-toggle-size-circle);height:var(--kbq-navbar-toggle-size-circle);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: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarToggle, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-navbar-toggle, [kbq-navbar-toggle]', imports: [
                         KbqIconModule
@@ -1130,23 +1458,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
             <ng-content select="[kbq-icon]">
                 <i
                     kbq-icon
-                    [class.kbq-chevron-double-left-s_16]="navbar.expanded"
-                    [class.kbq-chevron-double-right-s_16]="!navbar.expanded"
+                    [class.kbq-chevron-double-left-s_16]="navbar.expanded()"
+                    [class.kbq-chevron-double-right-s_16]="!navbar.expanded()"
                 ></i>
             </ng-content>
         </span>
     `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-navbar-toggle kbq-vertical',
-                        '[class.kbq-collapsed]': '!navbar.expanded',
-                        '[class.kbq-expanded]': 'navbar.expanded',
+                        '[class.kbq-collapsed]': '!navbar.expanded()',
+                        '[class.kbq-expanded]': 'navbar.expanded()',
+                        // The toggle is icon-only and its tooltip is a transient overlay, never an accessible name. Role, name
+                        // and state are published on the host so assistive technology announces an expand/collapse control
+                        // instead of an unlabelled element.
+                        role: 'button',
+                        '[attr.aria-expanded]': 'navbar.expanded()',
+                        '[attr.aria-label]': 'label',
+                        'aria-keyshortcuts': 'Control+/',
                         '(keydown)': 'keydownHandler($event)',
                         '(click)': 'toggle()'
-                    }, hostDirectives: [CdkMonitorFocus, KbqTooltipTrigger], 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"] }]
+                    }, hostDirectives: [CdkMonitorFocus, KbqTooltipTrigger], styles: [".kbq-navbar-toggle{position:absolute;top:var(--kbq-size-3xl);right:calc(-1 * var(--kbq-size-l));z-index:var(--kbq-navbar-toggle-z-index);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:var(--kbq-navbar-toggle-size-circle);height:var(--kbq-navbar-toggle-size-circle);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"] }]
         }], ctorParameters: () => [] });
 
 class KbqNavbarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarModule, imports: [A11yModule,
             PlatformModule,
             KbqIconModule,
             KbqToolTipModule,
@@ -1161,7 +1496,8 @@ class KbqNavbarModule {
             KbqNavbarDivider,
             KbqNavbarFocusableItem,
             KbqNavbarRectangleElement,
-            KbqNavbarBento], exports: [KbqNavbar,
+            KbqNavbarBento,
+            KbqNavbarItemSuffix], exports: [KbqNavbar,
             KbqNavbarContainer,
             KbqNavbarTitle,
             KbqNavbarItem,
@@ -1172,15 +1508,16 @@ class KbqNavbarModule {
             KbqNavbarDivider,
             KbqNavbarFocusableItem,
             KbqNavbarRectangleElement,
-            KbqNavbarBento] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarModule, imports: [A11yModule,
+            KbqNavbarBento,
+            KbqNavbarItemSuffix] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarModule, imports: [A11yModule,
             PlatformModule,
             KbqIconModule,
             KbqToolTipModule,
             KbqNavbarItem,
             KbqNavbarToggle] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNavbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNavbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1199,7 +1536,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqNavbarDivider,
                         KbqNavbarFocusableItem,
                         KbqNavbarRectangleElement,
-                        KbqNavbarBento
+                        KbqNavbarBento,
+                        KbqNavbarItemSuffix
                     ],
                     exports: [
                         KbqNavbar,
@@ -1213,7 +1551,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqNavbarDivider,
                         KbqNavbarFocusableItem,
                         KbqNavbarRectangleElement,
-                        KbqNavbarBento
+                        KbqNavbarBento,
+                        KbqNavbarItemSuffix
                     ]
                 }]
         }] });
@@ -1222,5 +1561,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_VERTICAL_NAVBAR_CONFIGURATION, KBQ_VERTICAL_NAVBAR_DEFAULT_CONFIGURATION, KbqFocusableComponent, KbqNavbar, KbqNavbarBento, KbqNavbarBrand, KbqNavbarContainer, KbqNavbarDivider, KbqNavbarFocusableItem, KbqNavbarItem, KbqNavbarLogo, KbqNavbarModule, KbqNavbarRectangleElement, KbqNavbarTitle, KbqNavbarToggle, KbqVerticalNavbar };
+export { KBQ_NAVBAR_DEFAULT_LOCALE_CONFIGURATION, KBQ_NAVBAR_LOCALE_CONFIGURATION, KBQ_VERTICAL_NAVBAR_CONFIGURATION, KBQ_VERTICAL_NAVBAR_DEFAULT_CONFIGURATION, KbqFocusableComponent, KbqNavbar, KbqNavbarBento, KbqNavbarBrand, KbqNavbarContainer, KbqNavbarDivider, KbqNavbarFocusableItem, KbqNavbarItem, KbqNavbarItemSuffix, KbqNavbarLogo, KbqNavbarModule, KbqNavbarRectangleElement, KbqNavbarTitle, KbqNavbarToggle, KbqNavbarToggleRegistry, KbqVerticalNavbar, kbqNavbarLocaleConfigurationProvider };
 //# sourceMappingURL=koobiq-components-navbar.mjs.map