@koobiq/components 18.7.1 → 18.9.0

package/fesm2022/koobiq-components-tabs.mjs

@@ -1,29 +1,28 @@
-import * as i3 from '@angular/cdk/bidi';
-import * as i1$1 from '@angular/cdk/portal';
+import * as i1 from '@angular/cdk/bidi';
+import { Directionality } from '@angular/cdk/bidi';
+import * as i1$2 from '@angular/cdk/portal';
 import { CdkPortalOutlet, CdkPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Input, Output, ViewChild, forwardRef, Directive, Inject, inject, DestroyRef, InjectionToken, TemplateRef, ContentChild, ContentChildren, Attribute, NgModule } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Input, Output, ViewChild, forwardRef, Directive, Inject, inject, DestroyRef, ElementRef, ChangeDetectorRef, NgZone, booleanAttribute, InjectionToken, TemplateRef, ContentChild, ContentChildren, Renderer2, numberAttribute, NgModule } from '@angular/core';
 import { Subscription, Subject, fromEvent, of, merge, timer } from 'rxjs';
 import { startWith, takeUntil, debounceTime } from 'rxjs/operators';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i1 from '@angular/cdk/scrolling';
-import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { mixinDisabled, PopUpPlacements, KBQ_SELECT_SCROLL_STRATEGY, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KBQ_PARENT_ANIMATION_COMPONENT, mixinTabIndex, KbqCommonModule } from '@koobiq/components/core';
-import * as i2 from '@angular/cdk/platform';
-import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
-import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
-import * as i1$2 from '@angular/cdk/a11y';
-import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
+import * as i2 from '@angular/cdk/scrolling';
+import { ViewportRuler, CdkScrollableModule } from '@angular/cdk/scrolling';
+import { mixinDisabled, PopUpPlacements, KBQ_SELECT_SCROLL_STRATEGY, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KBQ_PARENT_ANIMATION_COMPONENT, KbqCommonModule } from '@koobiq/components/core';
+import * as i2$2 from '@angular/cdk/a11y';
+import { FocusKeyManager, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { hasModifierKey, ENTER, SPACE } from '@angular/cdk/keycodes';
+import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { HOME, END, UP_ARROW, DOWN_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@koobiq/cdk/keycodes';
 import { KBQ_DROPDOWN_SCROLL_STRATEGY } from '@koobiq/components/dropdown';
-import * as i4 from '@koobiq/components/icon';
+import * as i1$1 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
-import * as i5 from '@angular/common';
-import { NgStyle } from '@angular/common';
-import * as i3$1 from '@koobiq/components/tooltip';
+import * as i2$1 from '@angular/cdk/observers';
+import { CdkObserveContent } from '@angular/cdk/observers';
+import * as i3 from '@koobiq/components/tooltip';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
 
 const kbqTabsAnimations = {
@@ -142,15 +141,15 @@ class KbqTabBody {
         }
         return 'right-origin-center';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabBody, deps: [{ token: i0.ElementRef }, { token: i3.Directionality, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqTabBody, selector: "kbq-tab-body", inputs: { position: "position", content: "content", origin: "origin", animationDuration: "animationDuration" }, outputs: { onCentering: "onCentering", beforeCentering: "beforeCentering", afterLeavingCenter: "afterLeavingCenter", onCentered: "onCentered" }, host: { classAttribute: "kbq-tab-body" }, viewQueries: [{ propertyName: "portalHost", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<div\n    #content\n    cdk-scrollable\n    class=\"kbq-tab-body__content kbq-scrollbar kbq-hide-nested-popup\"\n    (@translateTab.done)=\"onTranslateTabComplete($event)\"\n    (@translateTab.start)=\"onTranslateTabStarted($event)\"\n    [@translateTab]=\"{\n        value: bodyPosition,\n        params: { animationDuration: animationDuration }\n    }\"\n>\n    <ng-template kbqTabBodyHost />\n</div>\n", styles: [".kbq-tab-body__content{height:100%;overflow:auto}.kbq-tab-body__content .kbq-tab-group_dynamic-height{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.CdkScrollable), selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i0.forwardRef(() => KbqTabBodyPortal), selector: "[kbqTabBodyHost]" }], animations: [kbqTabsAnimations.translateTab], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabBody, deps: [{ token: i0.ElementRef }, { token: i1.Directionality, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqTabBody, selector: "kbq-tab-body", inputs: { position: "position", content: "content", origin: "origin", animationDuration: "animationDuration" }, outputs: { onCentering: "onCentering", beforeCentering: "beforeCentering", afterLeavingCenter: "afterLeavingCenter", onCentered: "onCentered" }, host: { classAttribute: "kbq-tab-body" }, viewQueries: [{ propertyName: "portalHost", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<div\n    #content\n    cdkScrollable\n    class=\"kbq-tab-body__content kbq-scrollbar kbq-hide-nested-popup\"\n    (@translateTab.done)=\"onTranslateTabComplete($event)\"\n    (@translateTab.start)=\"onTranslateTabStarted($event)\"\n    [@translateTab]=\"{\n        value: bodyPosition,\n        params: { animationDuration: animationDuration }\n    }\"\n>\n    <ng-template kbqTabBodyHost />\n</div>\n", styles: [".kbq-tab-body__content{height:100%;overflow:auto}.kbq-tab-body__content .kbq-tab-group_dynamic-height{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.CdkScrollable), selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i0.forwardRef(() => KbqTabBodyPortal), selector: "[kbqTabBodyHost]" }], animations: [kbqTabsAnimations.translateTab], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabBody, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-tab-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [kbqTabsAnimations.translateTab], host: {
                         class: 'kbq-tab-body'
-                    }, template: "<div\n    #content\n    cdk-scrollable\n    class=\"kbq-tab-body__content kbq-scrollbar kbq-hide-nested-popup\"\n    (@translateTab.done)=\"onTranslateTabComplete($event)\"\n    (@translateTab.start)=\"onTranslateTabStarted($event)\"\n    [@translateTab]=\"{\n        value: bodyPosition,\n        params: { animationDuration: animationDuration }\n    }\"\n>\n    <ng-template kbqTabBodyHost />\n</div>\n", styles: [".kbq-tab-body__content{height:100%;overflow:auto}.kbq-tab-body__content .kbq-tab-group_dynamic-height{overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i3.Directionality, decorators: [{
+                    }, template: "<div\n    #content\n    cdkScrollable\n    class=\"kbq-tab-body__content kbq-scrollbar kbq-hide-nested-popup\"\n    (@translateTab.done)=\"onTranslateTabComplete($event)\"\n    (@translateTab.start)=\"onTranslateTabStarted($event)\"\n    [@translateTab]=\"{\n        value: bodyPosition,\n        params: { animationDuration: animationDuration }\n    }\"\n>\n    <ng-template kbqTabBodyHost />\n</div>\n", styles: [".kbq-tab-body__content{height:100%;overflow:auto}.kbq-tab-body__content .kbq-tab-group_dynamic-height{overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { position: [{
                 type: Input
@@ -287,14 +286,17 @@ class KbqPaginatedTabHeader {
         this.scrollDistanceChanged = true;
         this.checkScrollingControls();
     }
-    constructor(elementRef, changeDetectorRef, viewportRuler, ngZone, platform, dir, animationMode) {
-        this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
-        this.viewportRuler = viewportRuler;
-        this.ngZone = ngZone;
-        this.platform = platform;
-        this.dir = dir;
-        this.animationMode = animationMode;
+    /** Whether the tabs should be displayed vertically. */
+    set vertical(value) {
+        this._vertical = value;
+        if (this._vertical) {
+            this.disablePagination = true;
+        }
+    }
+    get vertical() {
+        return this._vertical;
+    }
+    constructor() {
         this._selectedIndex = 0;
         /** The distance in pixels that the tab labels should be translated to the left. */
         this._scrollDistance = 0;
@@ -313,15 +315,21 @@ class KbqPaginatedTabHeader {
          * layout recalculations if it's known that pagination won't be required.
          */
         this.disablePagination = false;
-        this.destroyRef = inject(DestroyRef);
-        this.vertical = false;
+        this._vertical = false;
         /** Stream that will stop the automated scrolling. */
         this.stopScrolling = new Subject();
         /** Whether the header should scroll to the selected index after the view has been checked. */
         this.selectedIndexChanged = false;
+        this.destroyRef = inject(DestroyRef);
+        this.elementRef = inject(ElementRef);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.viewportRuler = inject(ViewportRuler);
+        this.ngZone = inject(NgZone);
+        this.platform = inject(Platform);
+        this.dir = inject(Directionality, { optional: true });
         // Bind the `mouseleave` event on the outside since it doesn't change anything in the view.
-        ngZone.runOutsideAngular(() => {
-            fromEvent(elementRef.nativeElement, 'mouseleave')
+        this.ngZone.runOutsideAngular(() => {
+            fromEvent(this.elementRef.nativeElement, 'mouseleave')
                 .pipe(takeUntilDestroyed())
                 .subscribe(() => this.stopInterval());
         });
@@ -582,7 +590,7 @@ class KbqPaginatedTabHeader {
      * should be called sparingly.
      */
     checkPaginationEnabled() {
-        if (this.disablePagination || this.vertical) {
+        if (this.disablePagination) {
             this.showPaginationControls = false;
         }
         else {
@@ -680,20 +688,17 @@ class KbqPaginatedTabHeader {
             this.scrollTo(maxScrollDistance);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqPaginatedTabHeader, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ViewportRuler }, { token: i0.NgZone }, { token: i2.Platform }, { token: i3.Directionality, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqPaginatedTabHeader, inputs: { disablePagination: "disablePagination" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqPaginatedTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.6", type: KbqPaginatedTabHeader, inputs: { disablePagination: ["disablePagination", "disablePagination", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute] }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqPaginatedTabHeader, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ViewportRuler }, { type: i0.NgZone }, { type: i2.Platform }, { type: i3.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [ANIMATION_MODULE_TYPE]
-                }] }], propDecorators: { disablePagination: [{
-                type: Input
+        }], ctorParameters: () => [], propDecorators: { disablePagination: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], vertical: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
 const KBQ_TAB_LABEL = new InjectionToken('KbqTabLabel');
@@ -799,7 +804,7 @@ class KbqTab extends KbqTabMixinBase {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTab, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqTab, selector: "kbq-tab", inputs: { disabled: "disabled", tooltipTitle: "tooltipTitle", tooltipPlacement: "tooltipPlacement", textLabel: ["label", "textLabel"], empty: "empty", tabId: "tabId" }, providers: [
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.6", type: KbqTab, selector: "kbq-tab", inputs: { disabled: "disabled", tooltipTitle: "tooltipTitle", tooltipPlacement: "tooltipPlacement", textLabel: ["label", "textLabel"], empty: ["empty", "empty", booleanAttribute], tabId: "tabId" }, providers: [
             ...[KBQ_SELECT_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY].map(((token) => KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER(token, ((overlay) => (() => overlay.scrollStrategies.close())))))
         ], queries: [{ propertyName: "templateLabel", first: true, predicate: KBQ_TAB_LABEL, descendants: true }, { propertyName: "explicitContent", first: true, predicate: KbqTabContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["kbqTab"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-template><ng-content /></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -836,7 +841,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                 type: Input,
                 args: ['label']
             }], empty: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], tabId: [{
                 type: Input
             }] } });
@@ -928,25 +934,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
  * @docs-private
  */
 class KbqTabHeader extends KbqPaginatedTabHeader {
+    constructor() {
+        super(...arguments);
+        /** Whether the tabs are underlined. */
+        this.underlined = false;
+    }
     get activeTabOffsetWidth() {
-        return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetWidth + 'px';
+        return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetWidth;
     }
     get activeTabOffsetLeft() {
-        return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetLeft + 'px';
-    }
-    constructor(elementRef, changeDetectorRef, viewportRuler, ngZone, platform, dir, animationMode) {
-        super(elementRef, changeDetectorRef, viewportRuler, ngZone, platform, dir, animationMode);
-        this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
-        /** The index of the active tab. */
-        this.vertical = false;
-        this.underlined = false;
+        return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetLeft;
     }
     itemSelected(event) {
         event.preventDefault();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabHeader, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ViewportRuler }, { token: i0.NgZone }, { token: i2.Platform }, { token: i3.Directionality, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqTabHeader, selector: "kbq-tab-header", inputs: { selectedIndex: "selectedIndex", vertical: "vertical", underlined: "underlined" }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, host: { properties: { "class.kbq-tab-header_vertical": "vertical", "class.kbq-tab-header_underlined": "underlined", "class.kbq-tab-header__pagination-controls_enabled": "showPaginationControls", "class.kbq-tab-header_rtl": "getLayoutDirection() == 'rtl'" }, classAttribute: "kbq-tab-header" }, queries: [{ propertyName: "items", predicate: KbqTabLabelWrapper }], viewQueries: [{ propertyName: "tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    #previousPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n    [class.kbq-disabled]=\"disableScrollBefore\"\n    (click)=\"handlePaginatorClick('before')\"\n    (mousedown)=\"handlePaginatorPress('before', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n</div>\n\n<div\n    #tabListContainer\n    class=\"kbq-tab-header__content\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div\n        #tabList\n        class=\"kbq-tab-list\"\n        (cdkObserveContent)=\"onContentChanges()\"\n    >\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [ngStyle]=\"{\n                    width: activeTabOffsetWidth,\n                    left: activeTabOffsetLeft\n                }\"\n            ></div>\n        </div>\n    </div>\n</div>\n\n<div\n    #nextPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n    [class.kbq-disabled]=\"disableScrollAfter\"\n    (click)=\"handlePaginatorClick('after')\"\n    (mousedown)=\"handlePaginatorPress('after', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-right_16\"></i>\n</div>\n", styles: [".kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.kbq-tab-list__content{display:flex}.kbq-tab-group_align-labels-center .kbq-tab-list__content{justify-content:center}.kbq-tab-group_align-labels-end .kbq-tab-list__content{justify-content:flex-end}.kbq-tab-header_vertical .kbq-tab-list__content{flex-direction:column}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:8px 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after{content:\"\";position:absolute;left:0;bottom:0;right:0;height:1px;background:var(--kbq-line-contrast-less)}.kbq-tab-list__active-tab-underline{display:none}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{display:block;position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header__pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding-left:12px;padding-right:12px}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__content{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-selected{cursor:default}.kbq-tab-label.cdk-keyboard-focused{z-index:1}.kbq-tab-label.kbq-disabled{pointer-events:none}.kbq-tab-label .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"], dependencies: [{ kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.6", type: KbqTabHeader, selector: "kbq-tab-header", inputs: { selectedIndex: "selectedIndex", underlined: ["underlined", "underlined", booleanAttribute] }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, host: { properties: { "class.kbq-tab-header_vertical": "vertical", "class.kbq-tab-header_underlined": "underlined", "class.kbq-tab-header__pagination-controls_enabled": "showPaginationControls", "class.kbq-tab-header_rtl": "getLayoutDirection() == 'rtl'" }, classAttribute: "kbq-tab-header" }, queries: [{ propertyName: "items", predicate: KbqTabLabelWrapper }], viewQueries: [{ propertyName: "tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    #previousPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n    [class.kbq-disabled]=\"disableScrollBefore\"\n    (click)=\"handlePaginatorClick('before')\"\n    (mousedown)=\"handlePaginatorPress('before', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-header__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [style.left.px]=\"activeTabOffsetLeft\"\n                [style.width.px]=\"activeTabOffsetWidth\"\n            ></div>\n        </div>\n    </div>\n</div>\n\n<div\n    #nextPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n    [class.kbq-disabled]=\"disableScrollAfter\"\n    (click)=\"handlePaginatorClick('after')\"\n    (mousedown)=\"handlePaginatorPress('after', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-right_16\"></i>\n</div>\n", styles: [".kbq-tab-header__pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.kbq-tab-list__content{display:flex}.kbq-tab-group_align-labels-center .kbq-tab-list__content{justify-content:center}.kbq-tab-group_align-labels-end .kbq-tab-list__content{justify-content:flex-end}.kbq-tab-header_vertical .kbq-tab-list__content{flex-direction:column}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:8px 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after{content:\"\";position:absolute;left:0;bottom:0;right:0;height:1px;background:var(--kbq-line-contrast-less)}.kbq-tab-list__active-tab-underline{display:none}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{display:block;position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header__container{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-selected{cursor:default}.kbq-tab-label.cdk-keyboard-focused{z-index:1}.kbq-tab-label.kbq-disabled{pointer-events:none}.kbq-tab-label .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"], dependencies: [{ kind: "component", type: i1$1.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "directive", type: i2$1.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabHeader, decorators: [{
             type: Component,
@@ -956,18 +959,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                         '[class.kbq-tab-header_underlined]': 'underlined',
                         '[class.kbq-tab-header__pagination-controls_enabled]': 'showPaginationControls',
                         '[class.kbq-tab-header_rtl]': "getLayoutDirection() == 'rtl'"
-                    }, template: "<div\n    #previousPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n    [class.kbq-disabled]=\"disableScrollBefore\"\n    (click)=\"handlePaginatorClick('before')\"\n    (mousedown)=\"handlePaginatorPress('before', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n</div>\n\n<div\n    #tabListContainer\n    class=\"kbq-tab-header__content\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div\n        #tabList\n        class=\"kbq-tab-list\"\n        (cdkObserveContent)=\"onContentChanges()\"\n    >\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [ngStyle]=\"{\n                    width: activeTabOffsetWidth,\n                    left: activeTabOffsetLeft\n                }\"\n            ></div>\n        </div>\n    </div>\n</div>\n\n<div\n    #nextPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n    [class.kbq-disabled]=\"disableScrollAfter\"\n    (click)=\"handlePaginatorClick('after')\"\n    (mousedown)=\"handlePaginatorPress('after', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-right_16\"></i>\n</div>\n", styles: [".kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.kbq-tab-list__content{display:flex}.kbq-tab-group_align-labels-center .kbq-tab-list__content{justify-content:center}.kbq-tab-group_align-labels-end .kbq-tab-list__content{justify-content:flex-end}.kbq-tab-header_vertical .kbq-tab-list__content{flex-direction:column}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:8px 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after{content:\"\";position:absolute;left:0;bottom:0;right:0;height:1px;background:var(--kbq-line-contrast-less)}.kbq-tab-list__active-tab-underline{display:none}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{display:block;position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header__pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding-left:12px;padding-right:12px}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__content{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-selected{cursor:default}.kbq-tab-label.cdk-keyboard-focused{z-index:1}.kbq-tab-label.kbq-disabled{pointer-events:none}.kbq-tab-label .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ViewportRuler }, { type: i0.NgZone }, { type: i2.Platform }, { type: i3.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [ANIMATION_MODULE_TYPE]
-                }] }], propDecorators: { vertical: [{
-                type: Input
-            }], underlined: [{
-                type: Input
+                    }, template: "<div\n    #previousPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n    [class.kbq-disabled]=\"disableScrollBefore\"\n    (click)=\"handlePaginatorClick('before')\"\n    (mousedown)=\"handlePaginatorPress('before', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-header__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [style.left.px]=\"activeTabOffsetLeft\"\n                [style.width.px]=\"activeTabOffsetWidth\"\n            ></div>\n        </div>\n    </div>\n</div>\n\n<div\n    #nextPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n    [class.kbq-disabled]=\"disableScrollAfter\"\n    (click)=\"handlePaginatorClick('after')\"\n    (mousedown)=\"handlePaginatorPress('after', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-right_16\"></i>\n</div>\n", styles: [".kbq-tab-header__pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.kbq-tab-list__content{display:flex}.kbq-tab-group_align-labels-center .kbq-tab-list__content{justify-content:center}.kbq-tab-group_align-labels-end .kbq-tab-list__content{justify-content:flex-end}.kbq-tab-header_vertical .kbq-tab-list__content{flex-direction:column}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:8px 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after{content:\"\";position:absolute;left:0;bottom:0;right:0;height:1px;background:var(--kbq-line-contrast-less)}.kbq-tab-list__active-tab-underline{display:none}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{display:block;position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header__container{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-selected{cursor:default}.kbq-tab-label.cdk-keyboard-focused{z-index:1}.kbq-tab-label.kbq-disabled{pointer-events:none}.kbq-tab-label .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"] }]
+        }], propDecorators: { underlined: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], items: [{
                 type: ContentChildren,
                 args: [KbqTabLabelWrapper, { descendants: false }]
@@ -987,59 +982,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
 
 class KbqAlignTabsCenterCssStyler {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqAlignTabsCenterCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqAlignTabsCenterCssStyler, selector: "kbq-tab-group[kbq-align-tabs-center], [kbq-tab-nav-bar][kbq-align-tabs-center]", host: { classAttribute: "kbq-tab-group_align-labels-center" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqAlignTabsCenterCssStyler, selector: "kbq-tab-group[kbq-align-tabs-center], [kbq-tab-nav-bar][kbq-align-tabs-center], [kbqTabNavBar][kbq-align-tabs-center]", host: { classAttribute: "kbq-tab-group_align-labels-center" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqAlignTabsCenterCssStyler, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'kbq-tab-group[kbq-align-tabs-center], [kbq-tab-nav-bar][kbq-align-tabs-center]',
+                    selector: 'kbq-tab-group[kbq-align-tabs-center], [kbq-tab-nav-bar][kbq-align-tabs-center], [kbqTabNavBar][kbq-align-tabs-center]',
                     host: { class: 'kbq-tab-group_align-labels-center' }
                 }]
         }] });
 class KbqAlignTabsEndCssStyler {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqAlignTabsEndCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqAlignTabsEndCssStyler, selector: "kbq-tab-group[kbq-align-tabs-end], [kbq-tab-nav-bar][kbq-align-tabs-end]", host: { classAttribute: "kbq-tab-group_align-labels-end" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqAlignTabsEndCssStyler, selector: "kbq-tab-group[kbq-align-tabs-end], [kbq-tab-nav-bar][kbq-align-tabs-end], [kbqTabNavBar][kbq-align-tabs-end]", host: { classAttribute: "kbq-tab-group_align-labels-end" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqAlignTabsEndCssStyler, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'kbq-tab-group[kbq-align-tabs-end], [kbq-tab-nav-bar][kbq-align-tabs-end]',
+                    selector: 'kbq-tab-group[kbq-align-tabs-end], [kbq-tab-nav-bar][kbq-align-tabs-end], [kbqTabNavBar][kbq-align-tabs-end]',
                     host: { class: 'kbq-tab-group_align-labels-end' }
                 }]
         }] });
 class KbqStretchTabsCssStyler {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqStretchTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqStretchTabsCssStyler, selector: "kbq-tab-group[kbq-stretch-tabs], [kbq-tab-nav-bar][kbq-stretch-tabs]", host: { classAttribute: "kbq-tab-group_stretch-labels" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqStretchTabsCssStyler, selector: "kbq-tab-group[kbq-stretch-tabs], [kbq-tab-nav-bar][kbq-stretch-tabs], [kbqTabNavBar][kbq-stretch-tabs]", host: { classAttribute: "kbq-tab-group_stretch-labels" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqStretchTabsCssStyler, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'kbq-tab-group[kbq-stretch-tabs], [kbq-tab-nav-bar][kbq-stretch-tabs]',
+                    selector: 'kbq-tab-group[kbq-stretch-tabs], [kbq-tab-nav-bar][kbq-stretch-tabs], [kbqTabNavBar][kbq-stretch-tabs]',
                     host: { class: 'kbq-tab-group_stretch-labels' }
                 }]
         }] });
 class KbqVerticalTabsCssStyler {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqVerticalTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqVerticalTabsCssStyler, selector: "kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical]", host: { classAttribute: "kbq-tab-group_vertical" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqVerticalTabsCssStyler, selector: "kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical], [kbqTabNavBar][vertical]", host: { classAttribute: "kbq-tab-group_vertical" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqVerticalTabsCssStyler, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical]',
+                    selector: 'kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical], [kbqTabNavBar][vertical]',
                     host: { class: 'kbq-tab-group_vertical' }
                 }]
         }] });
-class KbqUnderlinedTabsCssStyler {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqUnderlinedTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqUnderlinedTabsCssStyler, selector: "kbq-tab-group[underlined], [kbq-tab-nav-bar][underlined]", host: { classAttribute: "kbq-tab-group_underlined" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqUnderlinedTabsCssStyler, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kbq-tab-group[underlined], [kbq-tab-nav-bar][underlined]',
-                    host: { class: 'kbq-tab-group_underlined' }
-                }]
-        }] });
 /** Used to generate unique ID's for each tab component */
 let nextId = 0;
 /** A simple change event emitted on focus or selection changes. */
@@ -1048,26 +1032,16 @@ class KbqTabChangeEvent {
 /** Injection token that can be used to provide the default options the tabs module. */
 const KBQ_TABS_CONFIG = new InjectionToken('KBQ_TABS_CONFIG');
 // Boilerplate for applying mixins to KbqTabGroup.
-/** @docs-private */
 class KbqTabGroupBase {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
 }
-/** @docs-private */
 const KbqTabGroupMixinBase = mixinDisabled(KbqTabGroupBase);
 /**
- * Tab-group component.  Supports basic tab pairs (label + content) and includes
- * keyboard navigation.
+ * Tab-group component.  Supports basic tab pairs (label + content) and includes keyboard navigation.
  */
 class KbqTabGroup extends KbqTabGroupMixinBase {
-    /** Whether the tab group should grow to the size of the active tab. */
-    get dynamicHeight() {
-        return this._dynamicHeight;
-    }
-    set dynamicHeight(value) {
-        this._dynamicHeight = coerceBooleanProperty(value);
-    }
     /** The index of the active tab. */
     get selectedIndex() {
         return this._selectedIndex;
@@ -1092,13 +1066,16 @@ class KbqTabGroup extends KbqTabGroupMixinBase {
     set activeTab(value) {
         this.attributeToSelectBy = value;
     }
-    constructor(elementRef, changeDetectorRef, vertical, underlined, defaultConfig) {
+    constructor(elementRef, changeDetectorRef, defaultConfig) {
         super(elementRef);
         this.changeDetectorRef = changeDetectorRef;
         this.resizeStream = new Subject();
         this.transparent = false;
         this.onSurface = false;
-        this._dynamicHeight = false;
+        this.underlined = false;
+        this.vertical = false;
+        /** Whether the tab group should grow to the size of the active tab. */
+        this.dynamicHeight = false;
         this._selectedIndex = null;
         /** Position of the tab header. */
         this.headerPosition = 'above';
@@ -1124,8 +1101,6 @@ class KbqTabGroup extends KbqTabGroupMixinBase {
         this.checkOverflow = () => {
             this.tabHeader.items.forEach((headerTab) => headerTab.checkOverflow());
         };
-        this.vertical = coerceBooleanProperty(vertical);
-        this.underlined = coerceBooleanProperty(underlined);
         this.groupId = nextId++;
         this.animationDuration = defaultConfig?.animationDuration || '0ms';
         this.subscribeToResize();
@@ -1224,7 +1199,7 @@ class KbqTabGroup extends KbqTabGroupMixinBase {
      * height property is true.
      */
     setTabBodyWrapperHeight(tabHeight) {
-        if (!this._dynamicHeight || !this.tabBodyWrapperHeight) {
+        if (!this.dynamicHeight || !this.tabBodyWrapperHeight) {
             return;
         }
         const wrapper = this.tabBodyWrapper.nativeElement;
@@ -1308,8 +1283,8 @@ class KbqTabGroup extends KbqTabGroupMixinBase {
         }
         return this.tabs?.toArray().indexOf(currentSelectedTab);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabGroup, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: 'vertical', attribute: true }, { token: 'underlined', attribute: true }, { token: KBQ_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqTabGroup, selector: "kbq-tab-group", inputs: { disabled: "disabled", transparent: "transparent", onSurface: "onSurface", dynamicHeight: "dynamicHeight", selectedIndex: "selectedIndex", activeTab: "activeTab", headerPosition: "headerPosition", animationDuration: "animationDuration" }, outputs: { selectedIndexChange: "selectedIndexChange", activeTabChange: "activeTabChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, properties: { "class.kbq-tab-group_filled": "!transparent", "class.kbq-tab-group_transparent": "transparent", "class.kbq-tab-group_on-background": "!onSurface", "class.kbq-tab-group_on-surface": "onSurface", "class.kbq-tab-group_dynamic-height": "dynamicHeight", "class.kbq-tab-group_inverted-header": "headerPosition === \"below\"" }, classAttribute: "kbq-tab-group" }, providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => this)) }], queries: [{ propertyName: "tabs", predicate: KbqTab }], viewQueries: [{ propertyName: "tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], exportAs: ["kbqTabGroup"], usesInheritance: true, ngImport: i0, template: "<kbq-tab-header\n    #tabHeader\n    [selectedIndex]=\"selectedIndex\"\n    [underlined]=\"underlined\"\n    [vertical]=\"vertical\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"onSelectFocusedIndex($event)\"\n>\n    @for (tab of tabs; track tab; let i = $index) {\n        <div\n            cdkMonitorElementFocus\n            kbqTabLabelWrapper\n            class=\"kbq-tab-label\"\n            [attr.tabindex]=\"getTabIndex(tab, i)\"\n            [class.kbq-selected]=\"selectedIndex === i\"\n            [class.kbq-tab-label_empty]=\"tab.empty\"\n            [class.kbq-tab-label_horizontal]=\"!vertical\"\n            [class.kbq-tab-label_underlined]=\"underlined\"\n            [class.kbq-tab-label_vertical]=\"vertical\"\n            [disabled]=\"tab.disabled\"\n            [id]=\"getTabLabelId(i)\"\n            [kbqPlacement]=\"tab.tooltipPlacement\"\n            [kbqTooltip]=\"tab.tooltipTitle\"\n            [kbqTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n            [kbqTrigger]=\"'hover, focus'\"\n            [tab]=\"tab\"\n            (click)=\"handleClick(tab, tabHeader, i)\"\n        >\n            <div\n                #labelContent\n                class=\"kbq-tab-label__content\"\n                [class.kbq-tab-label__template]=\"tab.templateLabel\"\n            >\n                <!-- If there is a label template, use it. -->\n                @if (tab.templateLabel) {\n                    <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n                }\n                <!-- If there is not a label template, fall back to the text label. -->\n                @if (!tab.templateLabel) {\n                    {{ tab.textLabel }}\n                }\n            </div>\n        </div>\n    }\n</kbq-tab-header>\n\n<div\n    #tabBodyWrapper\n    class=\"kbq-tab-body__wrapper\"\n>\n    @for (tab of tabs; track tab; let i = $index) {\n        <kbq-tab-body\n            [animationDuration]=\"animationDuration\"\n            [class.kbq-tab-body__active]=\"selectedIndex === i\"\n            [content]=\"tab.content!\"\n            [id]=\"getTabContentId(i)\"\n            [origin]=\"tab.origin!\"\n            [position]=\"tab.position!\"\n            (onCentered)=\"removeTabBodyWrapperHeight()\"\n            (onCentering)=\"setTabBodyWrapperHeight($event)\"\n        />\n    }\n</div>\n", styles: [".kbq-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:left}.kbq-tab-group.kbq-tab-group_inverted-header{flex-direction:column-reverse}.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0}.kbq-tab-group_vertical .kbq-tab-header__content{overflow-y:auto}.kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-body.kbq-tab-body__active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i1$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i3$1.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: KbqTabLabelWrapper, selector: "[kbqTabLabelWrapper]", inputs: ["disabled", "tab"] }, { kind: "component", type: KbqTabBody, selector: "kbq-tab-body", inputs: ["position", "content", "origin", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }, { kind: "component", type: KbqTabHeader, selector: "kbq-tab-header", inputs: ["selectedIndex", "vertical", "underlined"], outputs: ["selectFocusedIndex", "indexFocused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabGroup, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: KBQ_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqTabGroup, selector: "kbq-tab-group", inputs: { disabled: "disabled", transparent: ["transparent", "transparent", booleanAttribute], onSurface: ["onSurface", "onSurface", booleanAttribute], underlined: ["underlined", "underlined", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute], dynamicHeight: ["dynamicHeight", "dynamicHeight", booleanAttribute], selectedIndex: "selectedIndex", activeTab: "activeTab", headerPosition: "headerPosition", animationDuration: "animationDuration" }, outputs: { selectedIndexChange: "selectedIndexChange", activeTabChange: "activeTabChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, properties: { "class.kbq-tab-group_filled": "!transparent", "class.kbq-tab-group_transparent": "transparent", "class.kbq-tab-group_on-background": "!onSurface", "class.kbq-tab-group_on-surface": "onSurface", "class.kbq-tab-group_dynamic-height": "dynamicHeight", "class.kbq-tab-group_inverted-header": "headerPosition === \"below\"" }, classAttribute: "kbq-tab-group" }, providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => this)) }], queries: [{ propertyName: "tabs", predicate: KbqTab }], viewQueries: [{ propertyName: "tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], exportAs: ["kbqTabGroup"], usesInheritance: true, ngImport: i0, template: "<kbq-tab-header\n    #tabHeader\n    [selectedIndex]=\"selectedIndex\"\n    [underlined]=\"underlined\"\n    [vertical]=\"vertical\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"onSelectFocusedIndex($event)\"\n>\n    @for (tab of tabs; track tab; let i = $index) {\n        <div\n            cdkMonitorElementFocus\n            kbqTabLabelWrapper\n            class=\"kbq-tab-label\"\n            [attr.tabindex]=\"getTabIndex(tab, i)\"\n            [class.kbq-selected]=\"selectedIndex === i\"\n            [class.kbq-tab-label_empty]=\"tab.empty\"\n            [class.kbq-tab-label_horizontal]=\"!vertical\"\n            [class.kbq-tab-label_underlined]=\"underlined\"\n            [class.kbq-tab-label_vertical]=\"vertical\"\n            [disabled]=\"tab.disabled\"\n            [id]=\"getTabLabelId(i)\"\n            [kbqPlacement]=\"tab.tooltipPlacement\"\n            [kbqTooltip]=\"tab.tooltipTitle\"\n            [kbqTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n            [kbqTrigger]=\"'hover, focus'\"\n            [tab]=\"tab\"\n            (click)=\"handleClick(tab, tabHeader, i)\"\n        >\n            <div #labelContent class=\"kbq-tab-label__content\" [class.kbq-tab-label__template]=\"tab.templateLabel\">\n                <!-- If there is a label template, use it. -->\n                @if (tab.templateLabel) {\n                    <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n                }\n                <!-- If there is not a label template, fall back to the text label. -->\n                @if (!tab.templateLabel) {\n                    {{ tab.textLabel }}\n                }\n            </div>\n        </div>\n    }\n</kbq-tab-header>\n\n<div #tabBodyWrapper class=\"kbq-tab-body__wrapper\">\n    @for (tab of tabs; track tab; let i = $index) {\n        <kbq-tab-body\n            [animationDuration]=\"animationDuration\"\n            [class.kbq-tab-body__active]=\"selectedIndex === i\"\n            [content]=\"tab.content!\"\n            [id]=\"getTabContentId(i)\"\n            [origin]=\"tab.origin!\"\n            [position]=\"tab.position!\"\n            (onCentered)=\"removeTabBodyWrapperHeight()\"\n            (onCentering)=\"setTabBodyWrapperHeight($event)\"\n        />\n    }\n</div>\n", styles: [".kbq-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:left}.kbq-tab-group.kbq-tab-group_inverted-header{flex-direction:column-reverse}.kbq-tab-group.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-header__container{overflow-y:auto}.kbq-tab-group .kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-group .kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-group .kbq-tab-body.kbq-tab-body__active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-group .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n"], dependencies: [{ kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i3.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: KbqTabLabelWrapper, selector: "[kbqTabLabelWrapper]", inputs: ["disabled", "tab"] }, { kind: "component", type: KbqTabBody, selector: "kbq-tab-body", inputs: ["position", "content", "origin", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }, { kind: "component", type: KbqTabHeader, selector: "kbq-tab-header", inputs: ["selectedIndex", "underlined"], outputs: ["selectFocusedIndex", "indexFocused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabGroup, decorators: [{
             type: Component,
@@ -1322,14 +1297,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                         '[class.kbq-tab-group_dynamic-height]': 'dynamicHeight',
                         '[class.kbq-tab-group_inverted-header]': 'headerPosition === "below"',
                         '(window:resize)': 'resizeStream.next($event)'
-                    }, providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => this)) }], template: "<kbq-tab-header\n    #tabHeader\n    [selectedIndex]=\"selectedIndex\"\n    [underlined]=\"underlined\"\n    [vertical]=\"vertical\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"onSelectFocusedIndex($event)\"\n>\n    @for (tab of tabs; track tab; let i = $index) {\n        <div\n            cdkMonitorElementFocus\n            kbqTabLabelWrapper\n            class=\"kbq-tab-label\"\n            [attr.tabindex]=\"getTabIndex(tab, i)\"\n            [class.kbq-selected]=\"selectedIndex === i\"\n            [class.kbq-tab-label_empty]=\"tab.empty\"\n            [class.kbq-tab-label_horizontal]=\"!vertical\"\n            [class.kbq-tab-label_underlined]=\"underlined\"\n            [class.kbq-tab-label_vertical]=\"vertical\"\n            [disabled]=\"tab.disabled\"\n            [id]=\"getTabLabelId(i)\"\n            [kbqPlacement]=\"tab.tooltipPlacement\"\n            [kbqTooltip]=\"tab.tooltipTitle\"\n            [kbqTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n            [kbqTrigger]=\"'hover, focus'\"\n            [tab]=\"tab\"\n            (click)=\"handleClick(tab, tabHeader, i)\"\n        >\n            <div\n                #labelContent\n                class=\"kbq-tab-label__content\"\n                [class.kbq-tab-label__template]=\"tab.templateLabel\"\n            >\n                <!-- If there is a label template, use it. -->\n                @if (tab.templateLabel) {\n                    <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n                }\n                <!-- If there is not a label template, fall back to the text label. -->\n                @if (!tab.templateLabel) {\n                    {{ tab.textLabel }}\n                }\n            </div>\n        </div>\n    }\n</kbq-tab-header>\n\n<div\n    #tabBodyWrapper\n    class=\"kbq-tab-body__wrapper\"\n>\n    @for (tab of tabs; track tab; let i = $index) {\n        <kbq-tab-body\n            [animationDuration]=\"animationDuration\"\n            [class.kbq-tab-body__active]=\"selectedIndex === i\"\n            [content]=\"tab.content!\"\n            [id]=\"getTabContentId(i)\"\n            [origin]=\"tab.origin!\"\n            [position]=\"tab.position!\"\n            (onCentered)=\"removeTabBodyWrapperHeight()\"\n            (onCentering)=\"setTabBodyWrapperHeight($event)\"\n        />\n    }\n</div>\n", styles: [".kbq-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:left}.kbq-tab-group.kbq-tab-group_inverted-header{flex-direction:column-reverse}.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0}.kbq-tab-group_vertical .kbq-tab-header__content{overflow-y:auto}.kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-body.kbq-tab-body__active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n"] }]
+                    }, providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => this)) }], template: "<kbq-tab-header\n    #tabHeader\n    [selectedIndex]=\"selectedIndex\"\n    [underlined]=\"underlined\"\n    [vertical]=\"vertical\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"onSelectFocusedIndex($event)\"\n>\n    @for (tab of tabs; track tab; let i = $index) {\n        <div\n            cdkMonitorElementFocus\n            kbqTabLabelWrapper\n            class=\"kbq-tab-label\"\n            [attr.tabindex]=\"getTabIndex(tab, i)\"\n            [class.kbq-selected]=\"selectedIndex === i\"\n            [class.kbq-tab-label_empty]=\"tab.empty\"\n            [class.kbq-tab-label_horizontal]=\"!vertical\"\n            [class.kbq-tab-label_underlined]=\"underlined\"\n            [class.kbq-tab-label_vertical]=\"vertical\"\n            [disabled]=\"tab.disabled\"\n            [id]=\"getTabLabelId(i)\"\n            [kbqPlacement]=\"tab.tooltipPlacement\"\n            [kbqTooltip]=\"tab.tooltipTitle\"\n            [kbqTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n            [kbqTrigger]=\"'hover, focus'\"\n            [tab]=\"tab\"\n            (click)=\"handleClick(tab, tabHeader, i)\"\n        >\n            <div #labelContent class=\"kbq-tab-label__content\" [class.kbq-tab-label__template]=\"tab.templateLabel\">\n                <!-- If there is a label template, use it. -->\n                @if (tab.templateLabel) {\n                    <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n                }\n                <!-- If there is not a label template, fall back to the text label. -->\n                @if (!tab.templateLabel) {\n                    {{ tab.textLabel }}\n                }\n            </div>\n        </div>\n    }\n</kbq-tab-header>\n\n<div #tabBodyWrapper class=\"kbq-tab-body__wrapper\">\n    @for (tab of tabs; track tab; let i = $index) {\n        <kbq-tab-body\n            [animationDuration]=\"animationDuration\"\n            [class.kbq-tab-body__active]=\"selectedIndex === i\"\n            [content]=\"tab.content!\"\n            [id]=\"getTabContentId(i)\"\n            [origin]=\"tab.origin!\"\n            [position]=\"tab.position!\"\n            (onCentered)=\"removeTabBodyWrapperHeight()\"\n            (onCentering)=\"setTabBodyWrapperHeight($event)\"\n        />\n    }\n</div>\n", styles: [".kbq-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:left}.kbq-tab-group.kbq-tab-group_inverted-header{flex-direction:column-reverse}.kbq-tab-group.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-header__container{overflow-y:auto}.kbq-tab-group .kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-group .kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-group .kbq-tab-body.kbq-tab-body__active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-group .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['vertical']
-                }] }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['underlined']
-                }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [KBQ_TABS_CONFIG]
                 }, {
@@ -1344,11 +1313,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                 type: ViewChild,
                 args: ['tabHeader', { static: false }]
             }], transparent: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], onSurface: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], underlined: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], vertical: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], dynamicHeight: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], selectedIndex: [{
                 type: Input
             }], activeTab: [{
@@ -1369,69 +1347,169 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                 type: Output
             }] } });
 
-// Boilerplate for applying mixins to KbqTabLink.
-/** @docs-private */
-class KbqTabLinkBase {
-}
-/** @docs-private */
-const KbqTabLinkMixinBase = mixinTabIndex(mixinDisabled(KbqTabLinkBase));
+// Increasing integer for generating unique ids for tab nav components.
+let nextUniqueId = 0;
 /**
  * Navigation component matching the styles of the tab group header.
  */
-class KbqTabNav {
-    constructor(vertical) {
-        this.vertical = false;
+class KbqTabNavBar extends KbqPaginatedTabHeader {
+    constructor() {
+        super(...arguments);
+        /** Whether the nav bar background should be transparent. */
         this.transparent = false;
         this.onSurface = false;
-        this.vertical = coerceBooleanProperty(vertical);
+        /** Whether the nav bar should be underlined. */
+        this.underlined = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabNav, deps: [{ token: 'vertical', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqTabNav, selector: "[kbq-tab-nav-bar]", inputs: { transparent: "transparent", onSurface: "onSurface" }, host: { properties: { "class.kbq-tab-nav-bar_filled": "!transparent", "class.kbq-tab-nav-bar_transparent": "transparent", "class.kbq-tab-nav-bar_on-background": "!onSurface", "class.kbq-tab-nav-bar_on-surface": "onSurface" }, classAttribute: "kbq-tab-nav-bar" }, queries: [{ propertyName: "links", predicate: i0.forwardRef(() => KbqTabLink) }], exportAs: ["kbqTabNavBar", "kbqTabNav"], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}.kbq-tab-nav-bar{display:flex;flex-grow:1;position:relative}.kbq-tab-nav-bar .kbq-tab-group_align-labels-center{justify-content:center}.kbq-tab-nav-bar .kbq-tab-group_align-labels-end{justify-content:flex-end}.kbq-tab-nav-bar.kbq-tab-group_vertical{flex-direction:column;flex-grow:0;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    get role() {
+        return this.tabNavPanel ? 'tablist' : this.elementRef.nativeElement.getAttribute('role');
+    }
+    get activeTabOffsetWidth() {
+        return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetWidth;
+    }
+    get activeTabOffsetLeft() {
+        return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetLeft;
+    }
+    ngAfterContentInit() {
+        // We need this to run before the `changes` subscription in parent to ensure that the `selectedIndex` is
+        // up-to-date by the time the `KbqPaginatedTabHeader` starts looking for it.
+        this.items.changes.pipe(startWith(null), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.updateActiveLink();
+        });
+        super.ngAfterContentInit();
+    }
+    itemSelected() { }
+    /** Notifies the component that the active link has been changed. */
+    updateActiveLink() {
+        if (!this.items) {
+            return;
+        }
+        const items = this.items.toArray();
+        for (let i = 0; i < items.length; i++) {
+            if (items[i].active) {
+                this.selectedIndex = i;
+                this.changeDetectorRef.markForCheck();
+                if (this.tabNavPanel) {
+                    this.tabNavPanel.activeTabId = items[i].id;
+                }
+                return;
+            }
+        }
+        // The ink bar should hide itself if no items are active.
+        this.selectedIndex = -1;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabNavBar, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.6", type: KbqTabNavBar, isStandalone: true, selector: "[kbqTabNavBar], [kbq-tab-nav-bar]", inputs: { transparent: ["transparent", "transparent", booleanAttribute], onSurface: ["onSurface", "onSurface", booleanAttribute], underlined: ["underlined", "underlined", booleanAttribute], tabNavPanel: "tabNavPanel" }, host: { properties: { "class.kbq-tab-nav-bar_filled": "!transparent", "class.kbq-tab-nav-bar_transparent": "transparent", "class.kbq-tab-nav-bar_on-background": "!onSurface", "class.kbq-tab-nav-bar_on-surface": "onSurface", "class.kbq-tab-header_underlined": "underlined", "class.kbq-tab-header__pagination-controls_enabled": "showPaginationControls", "attr.role": "role" }, classAttribute: "kbq-tab-nav-bar" }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => KbqTabLink), descendants: true }], viewQueries: [{ propertyName: "tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], exportAs: ["kbqTabNavBar"], usesInheritance: true, ngImport: i0, template: "<div\n    #previousPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n    [class.kbq-disabled]=\"disableScrollBefore\"\n    (click)=\"handlePaginatorClick('before')\"\n    (mousedown)=\"handlePaginatorPress('before', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-link__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [style.left.px]=\"activeTabOffsetLeft\"\n                [style.width.px]=\"activeTabOffsetWidth\"\n            ></div>\n        </div>\n    </div>\n</div>\n\n<div\n    #nextPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n    [class.kbq-disabled]=\"disableScrollAfter\"\n    (click)=\"handlePaginatorClick('after')\"\n    (mousedown)=\"handlePaginatorPress('after', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-right_16\"></i>\n</div>\n", styles: [".kbq-tab-header__pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-link__container{overflow-y:scroll}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-list__content{flex-direction:column;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical)}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n", ".kbq-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$1.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabNav, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabNavBar, decorators: [{
             type: Component,
-            args: [{ selector: '[kbq-tab-nav-bar]', exportAs: 'kbqTabNavBar, kbqTabNav', template: '<ng-content />', host: {
+            args: [{ standalone: true, imports: [
+                        KbqIconModule,
+                        CdkObserveContent
+                    ], selector: '[kbqTabNavBar], [kbq-tab-nav-bar]', exportAs: 'kbqTabNavBar', host: {
                         class: 'kbq-tab-nav-bar',
                         '[class.kbq-tab-nav-bar_filled]': '!transparent',
                         '[class.kbq-tab-nav-bar_transparent]': 'transparent',
                         '[class.kbq-tab-nav-bar_on-background]': '!onSurface',
-                        '[class.kbq-tab-nav-bar_on-surface]': 'onSurface'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}.kbq-tab-nav-bar{display:flex;flex-grow:1;position:relative}.kbq-tab-nav-bar .kbq-tab-group_align-labels-center{justify-content:center}.kbq-tab-nav-bar .kbq-tab-group_align-labels-end{justify-content:flex-end}.kbq-tab-nav-bar.kbq-tab-group_vertical{flex-direction:column;flex-grow:0;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['vertical']
-                }] }], propDecorators: { transparent: [{
-                type: Input
+                        '[class.kbq-tab-nav-bar_on-surface]': 'onSurface',
+                        '[class.kbq-tab-header_underlined]': 'underlined',
+                        '[class.kbq-tab-header__pagination-controls_enabled]': 'showPaginationControls',
+                        '[attr.role]': 'role'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    #previousPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n    [class.kbq-disabled]=\"disableScrollBefore\"\n    (click)=\"handlePaginatorClick('before')\"\n    (mousedown)=\"handlePaginatorPress('before', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-link__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [style.left.px]=\"activeTabOffsetLeft\"\n                [style.width.px]=\"activeTabOffsetWidth\"\n            ></div>\n        </div>\n    </div>\n</div>\n\n<div\n    #nextPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n    [class.kbq-disabled]=\"disableScrollAfter\"\n    (click)=\"handlePaginatorClick('after')\"\n    (mousedown)=\"handlePaginatorPress('after', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-right_16\"></i>\n</div>\n", styles: [".kbq-tab-header__pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-link__container{overflow-y:scroll}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-list__content{flex-direction:column;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical)}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n", ".kbq-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}\n"] }]
+        }], propDecorators: { tabListContainer: [{
+                type: ViewChild,
+                args: ['tabListContainer', { static: true }]
+            }], tabList: [{
+                type: ViewChild,
+                args: ['tabList', { static: true }]
+            }], nextPaginator: [{
+                type: ViewChild,
+                args: ['nextPaginator']
+            }], previousPaginator: [{
+                type: ViewChild,
+                args: ['previousPaginator']
+            }], items: [{
+                type: ContentChildren,
+                args: [forwardRef(() => KbqTabLink), { descendants: true }]
+            }], transparent: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], onSurface: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], underlined: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], tabNavPanel: [{
                 type: Input
-            }], links: [{
-                type: ContentChildren,
-                args: [forwardRef(() => KbqTabLink)]
             }] } });
 /**
- * Link inside of a `kbq-tab-nav-bar`.
+ * Link inside of a KbqTabNavBar.
  */
-class KbqTabLink extends KbqTabLinkMixinBase {
-    get vertical() {
-        return this.tabNav.vertical;
-    }
+class KbqTabLink {
     /** Whether the link is active. */
     get active() {
-        return this.isActive;
+        return this._active;
     }
     set active(value) {
-        if (value !== this.isActive) {
-            this.isActive = value;
+        if (value !== this._active) {
+            this._active = value;
+            this.tabNavBar.updateActiveLink();
         }
     }
-    constructor(elementRef, focusMonitor, renderer, tabNav) {
-        super();
-        this.elementRef = elementRef;
-        this.focusMonitor = focusMonitor;
-        this.renderer = renderer;
-        this.tabNav = tabNav;
+    get vertical() {
+        return this.tabNavBar.vertical;
+    }
+    get underlined() {
+        return this.tabNavBar.underlined;
+    }
+    /** Link tab index. */
+    set tabIndex(value) {
+        this._tabIndex = value;
+    }
+    get tabIndex() {
+        if (this.tabNavBar.tabNavPanel) {
+            return this.active && !this.disabled ? this._tabIndex : -1;
+        }
+        else {
+            return this.disabled ? -1 : this._tabIndex;
+        }
+    }
+    /** Link aria-selected attribute value. */
+    get ariaSelected() {
+        if (this.tabNavBar.tabNavPanel) {
+            return this.active ? 'true' : 'false';
+        }
+        else {
+            return this.elementRef.nativeElement.getAttribute('aria-selected');
+        }
+    }
+    /** Link role attribute value. */
+    get role() {
+        return this.tabNavBar.tabNavPanel ? 'tab' : this.elementRef.nativeElement.getAttribute('role');
+    }
+    /** Link aria-controls attribute value. */
+    get ariaControls() {
+        return this.tabNavBar.tabNavPanel
+            ? this.tabNavBar.tabNavPanel?.id
+            : this.elementRef.nativeElement.getAttribute('aria-controls');
+    }
+    /** Link aria-current attribute value. */
+    get ariaCurrent() {
+        return this.active && !this.tabNavBar.tabNavPanel ? 'page' : null;
+    }
+    constructor() {
+        /** Unique id for the link. */
+        this.id = `kbq-tab-link-${nextUniqueId++}`;
         /** Whether the tab link is active or not. */
-        this.isActive = false;
+        this._active = false;
+        /** Whether the tab link is disabled. */
+        this.disabled = false;
+        this._tabIndex = 0;
+        this.elementRef = inject(ElementRef);
+        this.focusMonitor = inject(FocusMonitor);
+        this.renderer = inject(Renderer2);
+        this.tabNavBar = inject(KbqTabNavBar);
         this.focusMonitor.monitor(this.elementRef.nativeElement);
     }
     ngAfterViewInit() {
@@ -1457,39 +1535,125 @@ class KbqTabLink extends KbqTabLinkMixinBase {
             this.renderer.addClass(secondIconElement, 'kbq-icon_right');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabLink, deps: [{ token: i0.ElementRef }, { token: i1$2.FocusMonitor }, { token: i0.Renderer2 }, { token: KbqTabNav }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqTabLink, selector: "a[kbq-tab-link], a[kbqTabLink]", inputs: { disabled: "disabled", tabIndex: "tabIndex", active: "active" }, host: { properties: { "class.kbq-selected": "active", "class.kbq-tab-label_vertical": "vertical", "class.kbq-tab-label_horizontal": "!vertical", "class.kbq-disabled": "disabled", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tab-link" }, exportAs: ["kbqTabLink"], usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** Focuses the tab link. */
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    /** Handles the focus event. */
+    handleFocus() {
+        // Since we allow navigation through tabbing in the nav bar, we have to update the focused index whenever the
+        // link receives focus.
+        this.tabNavBar.focusIndex = this.tabNavBar.items.toArray().indexOf(this);
+    }
+    /** Handles the keydown event. */
+    handleKeydown(event) {
+        if (event.keyCode === SPACE || event.keyCode === ENTER) {
+            if (this.disabled) {
+                event.preventDefault();
+            }
+            else if (this.tabNavBar.tabNavPanel) {
+                // Only prevent the default action on space since it can scroll the page.
+                // Don't prevent enter since it can break link navigation.
+                if (event.keyCode === SPACE) {
+                    event.preventDefault();
+                }
+                this.elementRef.nativeElement.click();
+            }
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.6", type: KbqTabLink, isStandalone: true, selector: "[kbqTabLink], [kbq-tab-link]", inputs: { id: "id", active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", numberAttribute] }, host: { listeners: { "focus": "handleFocus()", "keydown": "handleKeydown($event)" }, properties: { "class.kbq-selected": "active", "class.kbq-tab-label_vertical": "vertical", "class.kbq-tab-label_horizontal": "!vertical", "class.kbq-tab-label_underlined": "underlined", "class.kbq-disabled": "disabled", "attr.id": "id", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "attr.aria-disabled": "disabled", "attr.aria-selected": "ariaSelected", "attr.role": "role", "attr.aria-controls": "ariaControls", "attr.aria-current": "ariaCurrent" }, classAttribute: "kbq-tab-link" }, exportAs: ["kbqTabLink"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabLink, decorators: [{
-            type: Component,
+            type: Directive,
             args: [{
-                    selector: 'a[kbq-tab-link], a[kbqTabLink]',
+                    standalone: true,
+                    selector: '[kbqTabLink], [kbq-tab-link]',
                     exportAs: 'kbqTabLink',
-                    template: '<ng-content />',
-                    inputs: ['disabled', 'tabIndex'],
                     host: {
                         class: 'kbq-tab-link',
                         '[class.kbq-selected]': 'active',
                         '[class.kbq-tab-label_vertical]': 'vertical',
                         '[class.kbq-tab-label_horizontal]': '!vertical',
+                        '[class.kbq-tab-label_underlined]': 'underlined',
                         '[class.kbq-disabled]': 'disabled',
+                        '[attr.id]': 'id',
                         '[attr.tabindex]': 'tabIndex',
-                        '[attr.disabled]': 'disabled || null'
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                        '[attr.disabled]': 'disabled || null',
+                        '[attr.aria-disabled]': 'disabled',
+                        '[attr.aria-selected]': 'ariaSelected',
+                        '[attr.role]': 'role',
+                        '[attr.aria-controls]': 'ariaControls',
+                        '[attr.aria-current]': 'ariaCurrent',
+                        '(focus)': 'handleFocus()',
+                        '(keydown)': 'handleKeydown($event)'
+                    }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.FocusMonitor }, { type: i0.Renderer2 }, { type: KbqTabNav }], propDecorators: { active: [{
+        }], ctorParameters: () => [], propDecorators: { id: [{
+                type: Input
+            }], active: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], tabIndex: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }] } });
+/**
+ * Tab panel component associated with KbqTabNav.
+ */
+class KbqTabNavPanel {
+    constructor() {
+        /** Unique id for the tab panel. */
+        this.id = `kbq-tab-nav-panel-${nextUniqueId++}`;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabNavPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqTabNavPanel, isStandalone: true, selector: "[kbqTabNavPanel]", inputs: { id: "id" }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.id": "id", "attr.aria-labelledby": "activeTabId" }, classAttribute: "kbq-tab-nav-panel" }, exportAs: ["kbqTabNavPanel"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabNavPanel, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[kbqTabNavPanel]',
+                    exportAs: 'kbqTabNavPanel',
+                    host: {
+                        class: 'kbq-tab-nav-panel',
+                        '[attr.id]': 'id',
+                        '[attr.aria-labelledby]': 'activeTabId',
+                        role: 'tabpanel'
+                    }
+                }]
+        }], propDecorators: { id: [{
                 type: Input
             }] } });
 
+const STANDALONE_COMPONENTS = [
+    KbqTabNavBar,
+    KbqTabLink,
+    KbqTabNavPanel
+];
+const COMPONENTS = [
+    KbqTabGroup,
+    KbqTabLabel,
+    KbqTab,
+    KbqTabLabelWrapper,
+    KbqTabBody,
+    KbqTabBodyPortal,
+    KbqTabHeader,
+    KbqTabContent,
+    KbqAlignTabsCenterCssStyler,
+    KbqAlignTabsEndCssStyler,
+    KbqStretchTabsCssStyler,
+    KbqVerticalTabsCssStyler
+];
 class KbqTabsModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: KbqTabsModule, declarations: [KbqTabGroup,
             KbqTabLabel,
             KbqTab,
             KbqTabLabelWrapper,
-            KbqTabNav,
-            KbqTabLink,
             KbqTabBody,
             KbqTabBodyPortal,
             KbqTabHeader,
@@ -1497,31 +1661,34 @@ class KbqTabsModule {
             KbqAlignTabsCenterCssStyler,
             KbqAlignTabsEndCssStyler,
             KbqStretchTabsCssStyler,
-            KbqUnderlinedTabsCssStyler,
             KbqVerticalTabsCssStyler], imports: [PortalModule,
             A11yModule,
             CdkScrollableModule,
             KbqCommonModule,
             KbqIconModule,
             KbqToolTipModule,
-            NgStyle], exports: [KbqCommonModule,
-            KbqTabGroup,
+            CdkObserveContent, KbqTabNavBar,
+            KbqTabLink,
+            KbqTabNavPanel], exports: [KbqTabGroup,
             KbqTabLabel,
             KbqTab,
-            KbqTabNav,
-            KbqTabLink,
+            KbqTabLabelWrapper,
+            KbqTabBody,
+            KbqTabBodyPortal,
+            KbqTabHeader,
             KbqTabContent,
             KbqAlignTabsCenterCssStyler,
             KbqAlignTabsEndCssStyler,
             KbqStretchTabsCssStyler,
-            KbqUnderlinedTabsCssStyler,
-            KbqVerticalTabsCssStyler] }); }
+            KbqVerticalTabsCssStyler, KbqTabNavBar,
+            KbqTabLink,
+            KbqTabNavPanel] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabsModule, imports: [PortalModule,
             A11yModule,
             CdkScrollableModule,
             KbqCommonModule,
             KbqIconModule,
-            KbqToolTipModule, KbqCommonModule] }); }
+            KbqToolTipModule, KbqTabNavBar] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabsModule, decorators: [{
             type: NgModule,
@@ -1533,39 +1700,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                         KbqCommonModule,
                         KbqIconModule,
                         KbqToolTipModule,
-                        NgStyle
+                        CdkObserveContent,
+                        ...STANDALONE_COMPONENTS
                     ],
-                    // Don't export all components because some are only to be used internally.
+                    declarations: COMPONENTS,
                     exports: [
-                        KbqCommonModule,
-                        KbqTabGroup,
-                        KbqTabLabel,
-                        KbqTab,
-                        KbqTabNav,
-                        KbqTabLink,
-                        KbqTabContent,
-                        KbqAlignTabsCenterCssStyler,
-                        KbqAlignTabsEndCssStyler,
-                        KbqStretchTabsCssStyler,
-                        KbqUnderlinedTabsCssStyler,
-                        KbqVerticalTabsCssStyler
-                    ],
-                    declarations: [
-                        KbqTabGroup,
-                        KbqTabLabel,
-                        KbqTab,
-                        KbqTabLabelWrapper,
-                        KbqTabNav,
-                        KbqTabLink,
-                        KbqTabBody,
-                        KbqTabBodyPortal,
-                        KbqTabHeader,
-                        KbqTabContent,
-                        KbqAlignTabsCenterCssStyler,
-                        KbqAlignTabsEndCssStyler,
-                        KbqStretchTabsCssStyler,
-                        KbqUnderlinedTabsCssStyler,
-                        KbqVerticalTabsCssStyler
+                        ...COMPONENTS,
+                        ...STANDALONE_COMPONENTS
                     ]
                 }]
         }] });
@@ -1574,5 +1715,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_TABS_CONFIG, KbqAlignTabsCenterCssStyler, KbqAlignTabsEndCssStyler, KbqStretchTabsCssStyler, KbqTab, KbqTabBody, KbqTabBodyPortal, KbqTabChangeEvent, KbqTabContent, KbqTabGroup, KbqTabGroupBase, KbqTabGroupMixinBase, KbqTabHeader, KbqTabLabel, KbqTabLabelWrapper, KbqTabLink, KbqTabNav, KbqTabsModule, KbqUnderlinedTabsCssStyler, KbqVerticalTabsCssStyler, kbqTabsAnimations };
+export { KBQ_TABS_CONFIG, KBQ_TAB_LABEL, KbqAlignTabsCenterCssStyler, KbqAlignTabsEndCssStyler, KbqStretchTabsCssStyler, KbqTab, KbqTabBase, KbqTabBody, KbqTabBodyPortal, KbqTabChangeEvent, KbqTabContent, KbqTabGroup, KbqTabHeader, KbqTabLabel, KbqTabLabelWrapper, KbqTabLabelWrapperBase, KbqTabLabelWrapperMixinBase, KbqTabLink, KbqTabMixinBase, KbqTabNavBar, KbqTabNavPanel, KbqTabsModule, KbqVerticalTabsCssStyler, kbqTabsAnimations };
 //# sourceMappingURL=koobiq-components-tabs.mjs.map