@koobiq/components 20.4.1 → 21.0.0

package/fesm2022/koobiq-components-tabs.mjs

@@ -1,228 +1,25 @@
+import { FocusKeyManager, CdkMonitorFocus, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
-import { CdkPortalOutlet, CdkPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
-import { CdkScrollable, CdkScrollableModule } from '@angular/cdk/scrolling';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { hasModifierKey, ENTER, SPACE } from '@angular/cdk/keycodes';
+import { SharedResizeObserver } from '@angular/cdk/observers/private';
+import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
+import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, DestroyRef, output, EventEmitter, viewChild, input, ChangeDetectorRef, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, forwardRef, Directive, TemplateRef, NgZone, booleanAttribute, numberAttribute, InjectionToken, ViewContainerRef, contentChild, ContentChild, Renderer2, ViewChild, ContentChildren, NgModule } from '@angular/core';
-import { Subscription, Subject, ReplaySubject, fromEvent, of, merge, timer } from 'rxjs';
-import { startWith, auditTime, debounceTime, takeUntil } from 'rxjs/operators';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import { FocusKeyManager, CdkMonitorFocus, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
-import { KBQ_WINDOW, HOME, END, UP_ARROW, DOWN_ARROW, RIGHT_ARROW, LEFT_ARROW, kbqHasScrollOverflow, kbqGetScrollOverflowTolerance, PopUpPlacements, KBQ_SELECT_SCROLL_STRATEGY, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, isUndefined, KBQ_PARENT_ANIMATION_COMPONENT } from '@koobiq/components/core';
+import { untracked, input, booleanAttribute, signal, EventEmitter, inject, DestroyRef, ElementRef, ChangeDetectorRef, NgZone, Injector, afterNextRender, Directive, output, viewChild, computed, MAX_ANIMATION_TIMEOUT, ViewEncapsulation, ChangeDetectionStrategy, Component, forwardRef, TemplateRef, Renderer2, contentChild, contentChildren, InjectionToken, ViewContainerRef, isDevMode, NgModule } from '@angular/core';
+import { takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@koobiq/components/core';
+import { kbqOptionalNumberAttribute, KBQ_WINDOW, kbqAnimationsDisabled, HOME, END, UP_ARROW, DOWN_ARROW, RIGHT_ARROW, LEFT_ARROW, kbqHasScrollOverflow, kbqGetScrollOverflowTolerance, kbqAnimationsSettled, kbqQueryListFrom, isUndefined, PopUpPlacements, KBQ_SELECT_SCROLL_STRATEGY, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KbqStateSaving, KBQ_PARENT_ANIMATION_COMPONENT } from '@koobiq/components/core';
+import { KBQ_SCROLLBAR_OPTIONS, KbqScrollbarViewport } from '@koobiq/components/scrollbar';
+import { Subject, ReplaySubject, fromEvent, of, merge, timer, Subscription } from 'rxjs';
+import { auditTime, debounceTime, takeUntil, startWith } from 'rxjs/operators';
+import { CdkPortalOutlet, CdkPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
 import { CdkObserveContent } from '@angular/cdk/observers';
-import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
 import * as i1 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
-import { coerceNumberProperty } from '@angular/cdk/coercion';
-import { hasModifierKey, ENTER, SPACE } from '@angular/cdk/keycodes';
-import { SharedResizeObserver } from '@angular/cdk/observers/private';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { KBQ_DROPDOWN_SCROLL_STRATEGY } from '@koobiq/components/dropdown';
-
-const kbqTabsAnimations = {
-    /** Animation translates a tab along the X axis. */
-    translateTab: trigger('translateTab', [
-        // Note: transitions to `none` instead of 0, because some browsers might blur the content.
-        state('center, void, left-origin-center, right-origin-center', style({ transform: 'none' })),
-        // If the tab is either on the left or right, we additionally add a `min-height` of 1px
-        // in order to ensure that the element has a height before its state changes. This is
-        // necessary because Chrome does seem to skip the transition in RTL mode if the element does
-        // not have a static height and is not rendered. See related issue: #9465
-        state('left', style({ transform: 'translate3d(-100%, 0, 0)', minHeight: '1px' })),
-        state('right', style({ transform: 'translate3d(100%, 0, 0)', minHeight: '1px' })),
-        transition('* => left, * => right, left => center, right => center', animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')),
-        transition('void => left-origin-center', [
-            style({ transform: 'translate3d(-100%, 0, 0)' }),
-            animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')
-        ]),
-        transition('void => right-origin-center', [
-            style({ transform: 'translate3d(100%, 0, 0)' }),
-            animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')
-        ])
-    ])
-};
-
-/**
- * Wrapper for the contents of a tab.
- * @docs-private
- */
-class KbqTabBody {
-    /** The shifted index position of the tab body, where zero represents the active center tab. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set position(position) {
-        this.positionIndex = position;
-        this.computePositionAnimationState();
-    }
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.dir = inject(Directionality, { optional: true });
-        this.destroyRef = inject(DestroyRef);
-        /** Event emitted when the tab begins to animate towards the center as the active tab. */
-        this.onCentering = output();
-        /** Event emitted before the centering of the tab begins. */
-        this.beforeCentering = new EventEmitter();
-        /** Event emitted before the centering of the tab begins. */
-        this.afterLeavingCenter = new EventEmitter();
-        /** Event emitted when the tab completes its animation towards the center. */
-        this.onCentered = output();
-        /** The portal host inside of this container into which the tab body content will be loaded. */
-        this.portalHost = viewChild.required(CdkPortalOutlet);
-        /** The tab body content to display. */
-        this.content = input(undefined, ...(ngDevMode ? [{ debugName: "content" }] : []));
-        // Note that the default value will always be overwritten by `KbqTabBody`, but we need one
-        // anyway to prevent the animations module from throwing an error if the body is used on its own.
-        /** Duration for the tab's animation. */
-        this.animationDuration = input('0ms', ...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
-        /** Subscription to the directionality change observable. */
-        this.dirChangeSubscription = Subscription.EMPTY;
-        const changeDetectorRef = inject(ChangeDetectorRef);
-        if (this.dir && changeDetectorRef) {
-            this.dirChangeSubscription = this.dir.change.subscribe((direction) => {
-                this.computePositionAnimationState(direction);
-                changeDetectorRef.markForCheck();
-            });
-        }
-    }
-    /**
-     * After initialized, check if the content is centered and has an origin. If so, set the
-     * special position states that transition the tab from the left or right before centering.
-     */
-    ngOnInit() {
-        if (this.bodyPosition === 'center' && this.origin != null) {
-            this.bodyPosition = this.computePositionFromOrigin();
-        }
-    }
-    ngOnDestroy() {
-        this.dirChangeSubscription.unsubscribe();
-    }
-    onTranslateTabStarted(e) {
-        // Both animation callbacks still fire when the body is destroyed mid-animation.
-        if (this.destroyRef.destroyed)
-            return;
-        const isCentering = this.isCenterPosition(e.toState);
-        this.beforeCentering.emit(isCentering);
-        if (isCentering) {
-            this.onCentering.emit(this.elementRef.nativeElement.clientHeight);
-        }
-    }
-    onTranslateTabComplete(e) {
-        if (this.destroyRef.destroyed)
-            return;
-        // If the transition to the center is complete, emit an event.
-        if (this.isCenterPosition(e.toState) && this.isCenterPosition(this.bodyPosition)) {
-            // TODO: The 'emit' function requires a mandatory void argument
-            this.onCentered.emit();
-        }
-        if (this.isCenterPosition(e.fromState) && !this.isCenterPosition(this.bodyPosition)) {
-            this.afterLeavingCenter.emit();
-        }
-    }
-    /** The text direction of the containing app. */
-    getLayoutDirection() {
-        return this.dir && this.dir.value === 'rtl' ? 'rtl' : 'ltr';
-    }
-    /** Whether the provided position state is considered center, regardless of origin. */
-    isCenterPosition(position) {
-        return position === 'center' || position === 'left-origin-center' || position === 'right-origin-center';
-    }
-    /** Computes the position state that will be used for the tab-body animation trigger. */
-    computePositionAnimationState(dir = this.getLayoutDirection()) {
-        if (this.positionIndex < 0) {
-            this.bodyPosition = dir === 'ltr' ? 'left' : 'right';
-        }
-        else if (this.positionIndex > 0) {
-            this.bodyPosition = dir === 'ltr' ? 'right' : 'left';
-        }
-        else {
-            this.bodyPosition = 'center';
-        }
-    }
-    /**
-     * Computes the position state based on the specified origin position. This is used if the
-     * tab is becoming visible immediately after creation.
-     */
-    computePositionFromOrigin() {
-        const dir = this.getLayoutDirection();
-        if ((dir === 'ltr' && this.origin <= 0) || (dir === 'rtl' && this.origin > 0)) {
-            return 'left-origin-center';
-        }
-        return 'right-origin-center';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqTabBody, isStandalone: true, selector: "kbq-tab-body", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: false, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCentering: "onCentering", beforeCentering: "beforeCentering", afterLeavingCenter: "afterLeavingCenter", onCentered: "onCentered" }, host: { classAttribute: "kbq-tab-body" }, viewQueries: [{ propertyName: "portalHost", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    #content\n    cdkScrollable\n    class=\"kbq-tab-body__content kbq-scrollbar kbq-hide-nested-popup\"\n    [@translateTab]=\"{\n        value: bodyPosition,\n        params: { animationDuration: animationDuration() }\n    }\"\n    (@translateTab.done)=\"onTranslateTabComplete($event)\"\n    (@translateTab.start)=\"onTranslateTabStarted($event)\"\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(() => 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: "20.3.30", ngImport: i0, type: KbqTabBody, decorators: [{
-            type: Component,
-            args: [{ selector: 'kbq-tab-body', imports: [CdkScrollable, forwardRef((() => KbqTabBodyPortal))], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'kbq-tab-body'
-                    }, animations: [kbqTabsAnimations.translateTab], template: "<div\n    #content\n    cdkScrollable\n    class=\"kbq-tab-body__content kbq-scrollbar kbq-hide-nested-popup\"\n    [@translateTab]=\"{\n        value: bodyPosition,\n        params: { animationDuration: animationDuration() }\n    }\"\n    (@translateTab.done)=\"onTranslateTabComplete($event)\"\n    (@translateTab.start)=\"onTranslateTabStarted($event)\"\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: () => [], propDecorators: { position: [{
-                type: Input
-            }], onCentering: [{ type: i0.Output, args: ["onCentering"] }], beforeCentering: [{
-                type: Output
-            }], afterLeavingCenter: [{
-                type: Output
-            }], onCentered: [{ type: i0.Output, args: ["onCentered"] }], portalHost: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], origin: [{
-                type: Input
-            }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }] } });
-/**
- * The portal host directive for the contents of the tab.
- * @docs-private
- */
-class KbqTabBodyPortal extends CdkPortalOutlet {
-    constructor() {
-        super(...arguments);
-        this.host = inject(KbqTabBody);
-        /** Subscription to events for when the tab body begins centering. */
-        this.centeringSub = Subscription.EMPTY;
-        /** Subscription to events for when the tab body finishes leaving from center position. */
-        this.leavingSub = Subscription.EMPTY;
-    }
-    /** Set initial visibility or set up subscription for changing visibility. */
-    ngOnInit() {
-        super.ngOnInit();
-        this.centeringSub = this.host.beforeCentering
-            .pipe(startWith(this.host.isCenterPosition(this.host.bodyPosition)))
-            .subscribe((isCentering) => {
-            if (isCentering && !this.hasAttached()) {
-                this.attach(this.host.content());
-            }
-        });
-        this.leavingSub = this.host.afterLeavingCenter.subscribe(() => {
-            this.detach();
-        });
-    }
-    /** Clean up centering subscription. */
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.centeringSub.unsubscribe();
-        this.leavingSub.unsubscribe();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabBodyPortal, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTabBodyPortal, isStandalone: true, selector: "[kbqTabBodyHost]", usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabBodyPortal, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kbqTabBodyHost]'
-                }]
-        }] });
-
-/** Decorates the `ng-template` tags and reads out the template from it. */
-class KbqTabContent {
-    constructor() {
-        this.template = inject(TemplateRef);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTabContent, isStandalone: true, selector: "[kbqTabContent]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabContent, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kbqTabContent]'
-                }]
-        }] });
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 
 /** Config used to bind passive event listeners */
 const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
@@ -264,24 +61,27 @@ const DRAGGING_CLASS = 'kbq-tab-header__scroll-container_dragging';
 const NON_DRAGGABLE_TARGET_SELECTOR = 'button, [kbq-icon-button], input, select, textarea';
 /**
  * Base class for a tab header that supported pagination.
+ *
  * @docs-private
  */
 class KbqPaginatedTabHeader {
     /** The index of the active tab. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get selectedIndex() {
-        return this._selectedIndex;
+        return this.selectedIndexState();
     }
     set selectedIndex(value) {
         const coercedValue = coerceNumberProperty(value);
-        this.selectedIndexChanged = this._selectedIndex !== coercedValue;
-        this._selectedIndex = coercedValue;
+        this.selectedIndexChanged = untracked(this.selectedIndexState) !== coercedValue;
+        this.selectedIndexState.set(coercedValue);
         this.keyManager?.updateActiveItem(coercedValue);
     }
     /** Tracks which element has focus; used for keyboard navigation */
     get focusIndex() {
-        return this.keyManager ? this.keyManager.activeItemIndex : 0;
+        // Before `ngAfterContentInit` builds the key manager the selection is where focus would land —
+        // `updateActiveItem(this.selectedIndex)` is the first thing that runs once it exists. Falling
+        // back to `0` instead would hand the roving `tabindex="0"` to the first tab on the very first
+        // render of any group that does not open on it.
+        return this.keyManager ? this.keyManager.activeItemIndex : this.selectedIndex;
     }
     /** When the focus index is set, we must manually send focus to the correct label */
     set focusIndex(value) {
@@ -290,20 +90,49 @@ class KbqPaginatedTabHeader {
         }
         this.keyManager.setActiveItem(value);
     }
+    /**
+     * Whether pagination should be disabled. This can be used to avoid unnecessary
+     * layout recalculations if it's known that pagination won't be required.
+     *
+     * A vertical header never paginates, so `vertical` forces this on without overwriting the value
+     * the consumer set — turning `vertical` back off restores it.
+     */
+    get disablePagination() {
+        return this._disablePagination || this._vertical;
+    }
+    set disablePagination(value) {
+        this._disablePagination = value;
+    }
     /** Whether the tabs should be displayed vertically. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     set vertical(value) {
         this._vertical = value;
-        if (this._vertical) {
-            this.disablePagination = true;
-        }
     }
     get vertical() {
         return this._vertical;
     }
+    /**
+     * Scrollbar mode for the tab strip. Only a vertical header scrolls in a direction the user is meant
+     * to see, so a horizontal one asks for `hidden`: the native scrollbar stays suppressed and no custom
+     * track is built for a strip that is paginated and dragged instead of scrolled by hand.
+     *
+     * Follows `vertical` itself: the `kbq-tab-group_vertical` class the stylesheet keys `overflow-y: auto`
+     * on is bound to the same value. The class of a nav bar is its own host binding, applied only after
+     * its content hooks, so reading the class from here would miss it on the first check.
+     */
+    get scrollbarMode() {
+        return this.vertical ? this.scrollbarOptions.mode : 'hidden';
+    }
     constructor() {
-        this._selectedIndex = 0;
+        /** @docs-private */
+        this.selectedIndexInput = input(undefined, { ...(ngDevMode ? { debugName: "selectedIndexInput" } : /* istanbul ignore next */ {}), alias: 'selectedIndex',
+            transform: kbqOptionalNumberAttribute });
+        /** @docs-private */
+        this.disablePaginationInput = input(undefined, { ...(ngDevMode ? { debugName: "disablePaginationInput" } : /* istanbul ignore next */ {}), alias: 'disablePagination',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.verticalInput = input(undefined, { ...(ngDevMode ? { debugName: "verticalInput" } : /* istanbul ignore next */ {}), alias: 'vertical',
+            transform: booleanAttribute });
+        this.selectedIndexState = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndexState" }] : /* istanbul ignore next */ []));
         /** Event emitted when the option is selected. */
         this.selectFocusedIndex = new EventEmitter();
         /** Event emitted when a label is focused. */
@@ -314,18 +143,23 @@ class KbqPaginatedTabHeader {
         this.disableScrollAfter = true;
         /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
         this.disableScrollBefore = true;
-        /**
-         * Whether pagination should be disabled. This can be used to avoid unnecessary
-         * layout recalculations if it's known that pagination won't be required.
-         */
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
-        this.disablePagination = false;
+        this._disablePagination = false;
         this._vertical = false;
+        /** `disablePagination` as of the last content check — see `ngAfterContentChecked`. */
+        this.previousDisablePagination = 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;
+        /** Whether DOM focus currently sits on one of the items. */
+        this.focusWasInside = false;
+        /**
+         * Index of the item that last took DOM focus, or `-1`. Recorded from the `focusin` target rather
+         * than read back from `keyManager.activeItemIndex`, because the `selectedIndex` setter writes that
+         * field too — and on an `items.changes` tick a subscriber registered earlier (`KbqTabNavBar`'s
+         * `updateActiveLink`) repoints it at the *active* item before focus restoration gets to run.
+         */
+        this.focusedItemIndex = -1;
         /** State of the in-progress mouse/pen drag gesture, if any. */
         this.dragState = null;
         /** `requestAnimationFrame` handle for an in-progress inertia coast, if any. */
@@ -351,6 +185,12 @@ class KbqPaginatedTabHeader {
          * doesn't exist yet when it's emitted.
          */
         this.scrollCorrectionRequest = new ReplaySubject(1);
+        /**
+         * The latest scroll-correction request, repeated once webfonts finish loading: a label measured in the
+         * fallback face moves when the real one swaps in. Dropped once a correction has measured with no font
+         * loading, and as soon as the user moves the strip, so the repeat never pulls it back from where they took it.
+         */
+        this.lastScrollCorrection = null;
         this.destroyRef = inject(DestroyRef);
         this.elementRef = inject(ElementRef);
         this.changeDetectorRef = inject(ChangeDetectorRef);
@@ -359,13 +199,49 @@ class KbqPaginatedTabHeader {
         this.dir = inject(Directionality, { optional: true });
         this.window = inject(KBQ_WINDOW);
         this.sharedResizeObserver = inject(SharedResizeObserver);
-        // Bind the `mouseleave` event on the outside since it doesn't change anything in the view.
+        this.document = inject(DOCUMENT);
+        this.scrollbarOptions = inject(KBQ_SCROLLBAR_OPTIONS);
+        this.injector = inject(Injector);
+        /** Whether the underline of the active tab moves without motion. */
+        this.animationsDisabled = kbqAnimationsDisabled();
+        const nativeElement = this.elementRef.nativeElement;
+        // Bind these on the outside since they don't change anything in the view.
         this.ngZone.runOutsideAngular(() => {
-            fromEvent(this.elementRef.nativeElement, 'mouseleave')
+            fromEvent(nativeElement, 'mouseleave')
                 .pipe(takeUntilDestroyed())
                 .subscribe(() => this.stopInterval());
+            fromEvent(nativeElement, 'focusin')
+                .pipe(takeUntilDestroyed())
+                .subscribe(({ target }) => {
+                this.focusWasInside = true;
+                this.focusedItemIndex = this.indexOfItemContaining(target);
+            });
+            // Only a move onto a known element outside gives up ownership: a destroyed item reports
+            // no `relatedTarget` at all, and that case is what the restore below exists for.
+            fromEvent(nativeElement, 'focusout')
+                .pipe(takeUntilDestroyed())
+                .subscribe(({ relatedTarget }) => {
+                if (relatedTarget && !nativeElement.contains(relatedTarget)) {
+                    this.focusWasInside = false;
+                }
+            });
         });
     }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        if (changes['selectedIndexInput'])
+            this.selectedIndex = this.selectedIndexInput() ?? 0;
+        if (changes['disablePaginationInput']) {
+            const disablePagination = this.disablePaginationInput();
+            if (disablePagination !== undefined)
+                this.disablePagination = disablePagination;
+        }
+        if (changes['verticalInput']) {
+            const vertical = this.verticalInput();
+            if (vertical !== undefined)
+                this.vertical = vertical;
+        }
+    }
     /** Called when the user has selected an item via the keyboard. */
     ngAfterViewInit() {
         // We need to handle these events manually, because we want to bind passive event listeners.
@@ -390,10 +266,14 @@ class KbqPaginatedTabHeader {
                 this.updateScrollState();
                 this.scrollProgress.next();
             });
-            // Any wheel/trackpad input should immediately take over from a running inertia coast.
+            // Any wheel/trackpad input should immediately take over from a running inertia coast, and from
+            // a correction waiting to be repeated.
             fromEvent(container, 'wheel', passiveEventListenerOptions)
                 .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => this.cancelInertia());
+                .subscribe(() => {
+                this.cancelInertia();
+                this.lastScrollCorrection = null;
+            });
             fromEvent(container, 'pointerdown')
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe((event) => this.handlePointerDown(event));
@@ -435,15 +315,40 @@ class KbqPaginatedTabHeader {
             .subscribe(() => this.updatePagination());
         this.scrollCorrectionRequest
             .pipe(debounceTime(SCROLL_CORRECTION_DEBOUNCE), takeUntilDestroyed(this.destroyRef))
-            .subscribe(({ index, behavior }) => this.scrollCorrection(index, behavior));
+            .subscribe(({ index, behavior }) => {
+            this.scrollCorrection(index, behavior);
+            // Measured with no font left loading, the labels are in their final faces. Kept any longer, the
+            // request would let a font loaded later for unrelated text pull the strip back to the selection.
+            if (this.document.fonts?.status !== 'loading')
+                this.lastScrollCorrection = null;
+        });
+        // A webfont that arrives after the strip was measured resizes the labels without resizing the scroll
+        // box or changing the text, so neither observer above sees it. Re-measuring also re-renders the
+        // underline, which reads the selected label's offsets from the template.
+        if (this.platform.isBrowser && this.document.fonts) {
+            const fonts = this.document.fonts;
+            // Audited like a resize: faces arrive in bursts, and every header on the page measures on each one.
+            this.ngZone.runOutsideAngular(() => fromEvent(fonts, 'loadingdone')
+                .pipe(auditTime(RESIZE_AUDIT_TIME), takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                if (this.disablePagination)
+                    return;
+                this.ngZone.run(() => this.updatePagination());
+                if (this.lastScrollCorrection)
+                    this.scrollCorrectionRequest.next(this.lastScrollCorrection);
+            }));
+        }
     }
     ngAfterContentInit() {
         const dirChange = this.dir ? this.dir.change : of('ltr');
         const realign = () => {
             this.updatePagination();
+            // The ink bar reads `offsetLeft`/`offsetWidth` from the template, so the deferred first
+            // measurement only reaches the DOM if the view is re-checked after it.
+            this.changeDetectorRef.markForCheck();
         };
         this.keyManager = new FocusKeyManager(this.items).withHorizontalOrientation(this.getLayoutDirection());
-        this.keyManager.updateActiveItem(this._selectedIndex);
+        this.keyManager.updateActiveItem(this.selectedIndex);
         // Defer the first call in order to allow for slower browsers to lay out the elements.
         // This helps in cases where the user lands directly on a page with paginated tabs.
         if (typeof this.window.requestAnimationFrame !== 'undefined') {
@@ -467,22 +372,48 @@ class KbqPaginatedTabHeader {
         // event in order to provide a public event that notifies about focus changes. Also we realign
         // the tabs container by scrolling the new focused tab into the visible section.
         this.keyManager.change.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((newFocusIndex) => {
+            // `change` only fires for deliberate focus moves (`setActiveItem`), never for the
+            // bookkeeping `updateActiveItem` the `selectedIndex` setter does — which is exactly the
+            // distinction `focusedItemIndex` has to preserve.
+            this.focusedItemIndex = newFocusIndex;
             this.indexFocused.emit(newFocusIndex);
             this.setTabFocus(newFocusIndex);
         });
+        this.items.changes
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.restoreFocusAfterItemsChange());
     }
     ngAfterContentChecked() {
+        // Diff the derived value rather than a flag on one of its two inputs: `disablePagination` is
+        // `_disablePagination || _vertical`, so watching only `vertical` left a header whose
+        // `[disablePagination]` binding was toggled at runtime with stale paginator state.
+        const disablePagination = this.disablePagination;
         // If the number of tab labels have changed, check if scrolling should be enabled
-        if (this.tabLabelCount !== this.items.length) {
+        if (this.tabLabelCount !== this.items.length || this.previousDisablePagination !== disablePagination) {
+            this.previousDisablePagination = disablePagination;
+            // Read before `tabLabelCount` moves. Gated on growth rather than on any change: losing a tab
+            // cannot start the strip scrolling, so re-announcing it there would be noise.
+            const gainedTabs = this.items.length > (this.tabLabelCount ?? 0);
             this.updatePagination();
             this.tabLabelCount = this.items.length;
-            this.changeDetectorRef.markForCheck();
+            // Briefly reveals the scrollbar when the strip arrives or gains tabs, so whether it scrolls
+            // is answered on sight rather than only once the pointer enters it. Vertical only: a
+            // horizontal strip is paginated and dragged, runs in `hidden` mode and has no scrollbar to
+            // announce.
+            //
+            // Deferred to after the render: the viewport builds its track from an effect, and effects
+            // flush after this hook, so flashing here directly would push into a subject nothing is
+            // listening to yet and the very first reveal — the one that matters — would be dropped.
+            if (gainedTabs && this.vertical && this.platform.isBrowser) {
+                afterNextRender(() => this.scrollbarViewport.flashScrollIndicators(), {
+                    injector: this.injector
+                });
+            }
         }
         // If the selected index has changed, scroll to the label.
         if (this.selectedIndexChanged) {
             this.selectedIndexChanged = false;
-            this.scrollCorrectionRequest.next({ index: this._selectedIndex, behavior: 'smooth' });
-            this.changeDetectorRef.markForCheck();
+            this.requestScrollCorrection(this.selectedIndex, 'smooth');
         }
     }
     ngOnDestroy() {
@@ -536,10 +467,7 @@ class KbqPaginatedTabHeader {
             this.currentTextContent = textContent || '';
             // The content observer runs outside the `NgZone` by default, which
             // means that we need to bring the callback back in ourselves.
-            this.ngZone.run(() => {
-                this.updatePagination();
-                this.changeDetectorRef.markForCheck();
-            });
+            this.ngZone.run(() => this.updatePagination());
         }
     }
     /**
@@ -579,7 +507,7 @@ class KbqPaginatedTabHeader {
         // below is the only thing driving the scroll position.
         item.elementRef.nativeElement.focus({ preventScroll: true });
         if (this.showPaginationControls) {
-            this.scrollCorrectionRequest.next({ index: tabIndex, behavior: 'auto' });
+            this.requestScrollCorrection(tabIndex, 'auto');
         }
     }
     /** The layout direction of the containing app. */
@@ -594,6 +522,7 @@ class KbqPaginatedTabHeader {
      * should be called sparingly.
      */
     scrollHeader(direction) {
+        this.lastScrollCorrection = null;
         const container = this.tabListContainer.nativeElement;
         const viewLength = container.clientWidth;
         const amount = (direction === 'before' ? -1 : 1) * viewLength * SCROLL_DISTANCE;
@@ -640,6 +569,7 @@ class KbqPaginatedTabHeader {
     /**
      * Handles the user pressing down on one of the paginators.
      * Starts scrolling the header after a certain amount of time.
+     *
      * @param direction In which direction the paginator should be scrolled.
      */
     handlePaginatorPress(direction, mouseEvent) {
@@ -668,6 +598,40 @@ class KbqPaginatedTabHeader {
             this.scrollHeader(direction);
         });
     }
+    /** Index of the item owning `target`, or `-1` — `target` is the item itself or something inside it. */
+    indexOfItemContaining(target) {
+        if (!target || !this.items) {
+            return -1;
+        }
+        return this.items.toArray().findIndex(({ elementRef }) => elementRef.nativeElement.contains(target));
+    }
+    /**
+     * Moves focus onto the neighbouring item when the one that held it was removed. Without this the
+     * destroyed element takes focus down to `<body>` and a keyboard user has to tab in from the top of
+     * the document again (WCAG 2.4.3).
+     */
+    restoreFocusAfterItemsChange() {
+        if (!this.focusWasInside || !this.keyManager) {
+            return;
+        }
+        const items = this.items.toArray();
+        const { activeElement } = this.document;
+        // The element holding focus is still one of the items, so nothing was lost. Testing against the
+        // query list rather than `document.activeElement === body` because the query list is updated
+        // before the removed element is actually detached.
+        if (activeElement && items.some(({ elementRef }) => elementRef.nativeElement === activeElement)) {
+            return;
+        }
+        const previousIndex = Math.max(0, Math.min(items.length - 1, this.focusedItemIndex));
+        const index = items[previousIndex] && !items[previousIndex].disabled
+            ? previousIndex
+            : items.findIndex((item) => !item.disabled);
+        if (index === -1) {
+            this.focusWasInside = false;
+            return;
+        }
+        this.keyManager.setActiveItem(index);
+    }
     /**
      * The tab list's scroll position expressed independently of reading direction: `0` at the
      * start of the tab list, growing towards the end — mirrors native `scrollLeft`'s RTL-dependent
@@ -679,6 +643,7 @@ class KbqPaginatedTabHeader {
     }
     /**
      * Scrolls the header to a given logical position (see {@link logicalScrollPosition}).
+     *
      * @param value Logical position to scroll to.
      * @param behavior Scroll animation behavior; `'auto'` jumps instantly, `'smooth'` animates.
      */
@@ -689,6 +654,11 @@ class KbqPaginatedTabHeader {
         const left = this.getLayoutDirection() === 'rtl' ? -value : value;
         this.tabListContainer.nativeElement.scrollTo({ left, behavior });
     }
+    /** Queues a {@link scrollCorrection} behind the debounce, and keeps it to repeat once webfonts load. */
+    requestScrollCorrection(index, behavior) {
+        this.lastScrollCorrection = { index, behavior };
+        this.scrollCorrectionRequest.next(this.lastScrollCorrection);
+    }
     /**
      * Moves the tab list such that the desired tab label (marked by index) is moved into view.
      *
@@ -763,8 +733,10 @@ class KbqPaginatedTabHeader {
             return;
         // Any press on the strip takes over from a running inertia coast, whatever the pointer
         // type — otherwise a tap on a touch-panning device, or a press on a nested control, would
-        // leave the previous coast running underneath it.
+        // leave the previous coast running underneath it. The same goes for a correction waiting to
+        // be repeated; a press that changes the selection queues a fresh one.
         this.cancelInertia();
+        this.lastScrollCorrection = null;
         // Touch keeps its existing interaction model (pagination arrows); only mouse/pen drag here.
         if (this.dragState || event.pointerType === 'touch' || event.button !== 0)
             return;
@@ -935,189 +907,261 @@ class KbqPaginatedTabHeader {
     clampVelocity(velocity) {
         return Math.max(-MAX_INERTIA_VELOCITY, Math.min(MAX_INERTIA_VELOCITY, velocity));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPaginatedTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.30", type: KbqPaginatedTabHeader, isStandalone: true, inputs: { selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], disablePagination: ["disablePagination", "disablePagination", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute] }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqPaginatedTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqPaginatedTabHeader, isStandalone: true, inputs: { selectedIndexInput: { classPropertyName: "selectedIndexInput", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, disablePaginationInput: { classPropertyName: "disablePaginationInput", publicName: "disablePagination", isSignal: true, isRequired: false, transformFunction: null }, verticalInput: { classPropertyName: "verticalInput", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPaginatedTabHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqPaginatedTabHeader, decorators: [{
             type: Directive
-        }], ctorParameters: () => [], propDecorators: { selectedIndex: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], disablePagination: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], vertical: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { selectedIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], disablePaginationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePagination", required: false }] }], verticalInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }] } });
 
-const KBQ_TAB_LABEL = new InjectionToken('KbqTabLabel');
-/** Used to flag tab labels for use with the portal directive */
-class KbqTabLabel extends CdkPortal {
-    constructor() {
-        super(...arguments);
-        /** Whether the tab contains only an icon without a label. */
-        this.iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+/**
+ * Wrapper for the contents of a tab.
+ *
+ * @docs-private
+ */
+class KbqTabBody {
+    /** The shifted index position of the tab body, where zero represents the active center tab. */
+    set position(position) {
+        this.positionIndex = position;
+        this.computePositionAnimationState();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqTabLabel, isStandalone: true, selector: "[kbq-tab-label], [kbqTabLabel]", inputs: { iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: KBQ_TAB_LABEL, useExisting: KbqTabLabel }], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabLabel, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kbq-tab-label], [kbqTabLabel]',
-                    providers: [{ provide: KBQ_TAB_LABEL, useExisting: KbqTabLabel }]
-                }]
-        }], propDecorators: { iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
-
-class KbqTab {
     constructor() {
-        this.viewContainerRef = inject(ViewContainerRef);
-        /**
-         * Template provided in the tab content that will be used if present, used to enable lazy-loading
-         */
-        this.explicitContent = contentChild(KbqTabContent, ...(ngDevMode ? [{ debugName: "explicitContent", read: TemplateRef }] : [{ read: TemplateRef }]));
-        /** Template inside the KbqTab view that contains an `<ng-content>`. */
-        this.implicitContent = viewChild.required(TemplateRef);
-        this._tooltipTitle = '';
-        this._disabled = false;
-        this.tooltipPlacement = input(PopUpPlacements.Right, ...(ngDevMode ? [{ debugName: "tooltipPlacement" }] : []));
-        /** Plain text label for the tab, used when there is no template label. */
-        this.textLabel = input('', ...(ngDevMode ? [{ debugName: "textLabel", alias: 'label' }] : [{ alias: 'label' }]));
-        this.empty = input(false, ...(ngDevMode ? [{ debugName: "empty", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.tabId = input(undefined, ...(ngDevMode ? [{ debugName: "tabId" }] : []));
-        /** Emits whenever the internal state of the tab changes. */
-        this.stateChanges = new Subject();
-        /**
-         * The relatively indexed position where 0 represents the center, negative is left, and positive
-         * represents the right.
-         */
-        this.position = null;
-        /**
-         * The initial relatively index origin of the tab if it was created and selected after there
-         * was already a selected tab. Provides context of what position the tab should originate from.
-         */
-        this.origin = null;
-        /**
-         * Whether the tab is currently active.
-         */
-        this.isActive = false;
-        this._overflowTooltipTitle = '';
-        /** Portal that will be the hosted content of the tab */
-        this.contentPortal = null;
-    }
-    /** @docs-private */
-    get content() {
-        return this.contentPortal;
+        this.elementRef = inject(ElementRef);
+        this.dir = inject(Directionality, { optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.injector = inject(Injector);
+        /** Whether the tab body translates without motion. */
+        this.animationsDisabled = kbqAnimationsDisabled();
+        /** @docs-private */
+        this.positionInput = input(undefined, { ...(ngDevMode ? { debugName: "positionInput" } : /* istanbul ignore next */ {}), alias: 'position' });
+        /** @docs-private */
+        this.originInput = input(undefined, { ...(ngDevMode ? { debugName: "originInput" } : /* istanbul ignore next */ {}), alias: 'origin' });
+        /** Event emitted when the tab begins to animate towards the center as the active tab. */
+        this.onCentering = output();
+        /** Event emitted before the centering of the tab begins. */
+        this.beforeCentering = new EventEmitter();
+        /** @docs-private */
+        this.beforeCenteringOutput = outputFromObservable(this.beforeCentering, { alias: 'beforeCentering' });
+        /** Event emitted once the tab has finished moving away from the center. Carries no payload. */
+        this.afterLeavingCenter = new EventEmitter();
+        /** @docs-private */
+        this.afterLeavingCenterOutput = outputFromObservable(this.afterLeavingCenter, { alias: 'afterLeavingCenter' });
+        /** Event emitted when the tab completes its animation towards the center. */
+        this.onCentered = output();
+        /** The portal host inside of this container into which the tab body content will be loaded. */
+        this.portalHost = viewChild.required(CdkPortalOutlet);
+        /** The tab body content to display. */
+        this.content = input(undefined, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        /** Duration for the tab's animation. */
+        this.animationDuration = input('0ms', ...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
+        /** The duration as CSS time: a bare number, which CSS rejects, is taken as milliseconds. */
+        this.cssAnimationDuration = computed(() => {
+            const duration = this.animationDuration();
+            return /^\d+$/.test(duration) ? `${duration}ms` : duration;
+        }, ...(ngDevMode ? [{ debugName: "cssAnimationDuration" }] : /* istanbul ignore next */ []));
+        /** Subscription to the directionality change observable. */
+        this.dirChangeSubscription = Subscription.EMPTY;
+        this.contentElement = viewChild.required('content', { read: ElementRef });
+        const changeDetectorRef = inject(ChangeDetectorRef);
+        if (this.dir && changeDetectorRef) {
+            this.dirChangeSubscription = this.dir.change.subscribe((direction) => {
+                this.computePositionAnimationState(direction);
+                changeDetectorRef.markForCheck();
+            });
+        }
     }
-    get templateLabel() {
-        return this._templateLabel;
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        if (changes['positionInput']) {
+            const position = this.positionInput();
+            if (position !== undefined)
+                this.position = position;
+        }
+        if (changes['originInput']) {
+            const origin = this.originInput();
+            if (origin !== undefined)
+                this.origin = origin;
+        }
     }
-    set templateLabel(value) {
-        this.setTemplateLabelInput(value);
+    /**
+     * After initialized, check if the content is centered and has an origin. If so, set the
+     * special position states that transition the tab from the left or right before centering.
+     */
+    ngOnInit() {
+        if (this.bodyPosition === 'center' && this.origin != null) {
+            this.bodyPosition = this.computePositionFromOrigin();
+        }
+        this.initialPosition = this.bodyPosition;
+        this.translateOnRender();
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get tooltipTitle() {
-        return this.overflowTooltipTitle + this._tooltipTitle;
+    ngOnDestroy() {
+        this.dirChangeSubscription.unsubscribe();
     }
-    set tooltipTitle(value) {
-        this._tooltipTitle = value;
+    /** The text direction of the containing app. */
+    getLayoutDirection() {
+        return this.dir && this.dir.value === 'rtl' ? 'rtl' : 'ltr';
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get disabled() {
-        return this._disabled;
+    /** Whether the provided position state is considered center, regardless of origin. */
+    isCenterPosition(position) {
+        return position === 'center' || position === 'left-origin-center' || position === 'right-origin-center';
     }
-    set disabled(value) {
-        if (value !== this.disabled) {
-            this._disabled = value;
+    /** Computes the position state that the tab body translates to. */
+    computePositionAnimationState(dir = this.getLayoutDirection()) {
+        if (this.positionIndex < 0) {
+            this.bodyPosition = dir === 'ltr' ? 'left' : 'right';
         }
+        else if (this.positionIndex > 0) {
+            this.bodyPosition = dir === 'ltr' ? 'right' : 'left';
+        }
+        else {
+            this.bodyPosition = 'center';
+        }
+        this.translateOnRender();
     }
-    /** Whether the tab label contains only an icon (no text). */
-    get iconOnlyLabel() {
-        return this.templateLabel?.iconOnly() ?? false;
-    }
-    get isOverflown() {
-        return !!this._overflowTooltipTitle;
+    /**
+     * Starts the translation to the current position once it has rendered, and ends it once its transition
+     * has: the content is attached as the body starts centering and detached once it has left the center.
+     * Positions set within one frame translate once, from the last rendered one. The first frame starts from the
+     * position the body was created at when it has moved on from it: the content of a body created centered is
+     * attached at once, rendered or not.
+     */
+    translateOnRender() {
+        if (this.translationRender)
+            return;
+        this.translationRender = afterNextRender(() => {
+            this.translationRender = undefined;
+            const to = this.bodyPosition;
+            const from = this.renderedPosition ?? (to === this.initialPosition ? undefined : this.initialPosition);
+            if (from === to)
+                return;
+            this.renderedPosition = to;
+            this.translationStarted(to);
+            const settled = kbqAnimationsSettled(this.contentElement().nativeElement, this.injector.get(MAX_ANIMATION_TIMEOUT));
+            if (!settled)
+                return this.translationDone(from, to);
+            settled.then(() => {
+                if (!this.destroyRef.destroyed)
+                    this.translationDone(from, to);
+            });
+        }, { injector: this.injector });
     }
-    get overflowTooltipTitle() {
-        if (this.isOverflown) {
-            return `${this._overflowTooltipTitle}\n`;
+    translationStarted(to) {
+        const isCentering = this.isCenterPosition(to);
+        this.beforeCentering.emit(isCentering);
+        if (isCentering) {
+            this.onCentering.emit(this.elementRef.nativeElement.clientHeight);
         }
-        return '';
     }
-    set overflowTooltipTitle(value) {
-        this._overflowTooltipTitle = value;
+    translationDone(from, to) {
+        // A later translation may have started since, so the current position has the last word.
+        if (this.isCenterPosition(to) && this.isCenterPosition(this.bodyPosition)) {
+            this.onCentered.emit();
+        }
+        if (from !== undefined && this.isCenterPosition(from) && !this.isCenterPosition(this.bodyPosition)) {
+            this.afterLeavingCenter.emit();
+        }
     }
-    ngOnChanges(changes) {
-        if (changes.hasOwnProperty('textLabel') || changes.hasOwnProperty('disabled')) {
-            this.stateChanges.next();
+    /**
+     * Computes the position state based on the specified origin position. This is used if the
+     * tab is becoming visible immediately after creation.
+     */
+    computePositionFromOrigin() {
+        const dir = this.getLayoutDirection();
+        if ((dir === 'ltr' && this.origin <= 0) || (dir === 'rtl' && this.origin > 0)) {
+            return 'left-origin-center';
         }
+        return 'right-origin-center';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqTabBody, isStandalone: true, selector: "kbq-tab-body", inputs: { positionInput: { classPropertyName: "positionInput", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, originInput: { classPropertyName: "originInput", publicName: "origin", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCentering: "onCentering", beforeCenteringOutput: "beforeCentering", afterLeavingCenterOutput: "afterLeavingCenter", onCentered: "onCentered" }, host: { classAttribute: "kbq-tab-body" }, viewQueries: [{ propertyName: "portalHost", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }, { propertyName: "contentElement", first: true, predicate: ["content"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    #content\n    kbqScrollbarViewport\n    class=\"kbq-tab-body__content kbq-hide-nested-popup\"\n    [class]=\"`kbq-tab-body__content_${bodyPosition}`\"\n    [class.kbq-animations-disabled]=\"animationsDisabled\"\n    [style.--kbq-tab-body-animation-duration]=\"cssAnimationDuration()\"\n>\n    <ng-template kbqTabBodyHost />\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-tab-body__content{height:100%;overflow:auto;transform:none;transition:transform var(--kbq-tab-body-animation-duration) cubic-bezier(.35,0,.25,1)}.kbq-tab-group_dynamic-height .kbq-tab-body__content{overflow:hidden}.kbq-tab-body__content.kbq-tab-body__content_left{transform:translate3d(-100%,0,0);min-height:1px}.kbq-tab-body__content.kbq-tab-body__content_right{transform:translate3d(100%,0,0);min-height:1px}.kbq-tab-body__content.kbq-tab-body__content_left-origin-center{animation:kbq-tab-body-from-left var(--kbq-tab-body-animation-duration) cubic-bezier(.35,0,.25,1)}.kbq-tab-body__content.kbq-tab-body__content_right-origin-center{animation:kbq-tab-body-from-right var(--kbq-tab-body-animation-duration) cubic-bezier(.35,0,.25,1)}.kbq-tab-body__content.kbq-tab-body__content_left.kbq-animations-disabled,.kbq-tab-body__content.kbq-tab-body__content_right.kbq-animations-disabled,.kbq-tab-body__content.kbq-tab-body__content_left-origin-center.kbq-animations-disabled,.kbq-tab-body__content.kbq-tab-body__content_right-origin-center.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-body__content.kbq-tab-body__content_left,.kbq-tab-body__content.kbq-tab-body__content_right,.kbq-tab-body__content.kbq-tab-body__content_left-origin-center,.kbq-tab-body__content.kbq-tab-body__content_right-origin-center{animation:none;transition:none}}.kbq-tab-body__content.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-body__content{animation:none;transition:none}}@keyframes kbq-tab-body-from-left{0%{transform:translate3d(-100%,0,0)}}@keyframes kbq-tab-body-from-right{0%{transform:translate3d(100%,0,0)}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => KbqScrollbarViewport), selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }, { kind: "directive", type: i0.forwardRef(() => KbqTabBodyPortal), selector: "[kbqTabBodyHost]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabBody, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-tab-body', imports: [KbqScrollbarViewport, forwardRef((() => KbqTabBodyPortal))], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'kbq-tab-body'
+                    }, template: "<div\n    #content\n    kbqScrollbarViewport\n    class=\"kbq-tab-body__content kbq-hide-nested-popup\"\n    [class]=\"`kbq-tab-body__content_${bodyPosition}`\"\n    [class.kbq-animations-disabled]=\"animationsDisabled\"\n    [style.--kbq-tab-body-animation-duration]=\"cssAnimationDuration()\"\n>\n    <ng-template kbqTabBodyHost />\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-tab-body__content{height:100%;overflow:auto;transform:none;transition:transform var(--kbq-tab-body-animation-duration) cubic-bezier(.35,0,.25,1)}.kbq-tab-group_dynamic-height .kbq-tab-body__content{overflow:hidden}.kbq-tab-body__content.kbq-tab-body__content_left{transform:translate3d(-100%,0,0);min-height:1px}.kbq-tab-body__content.kbq-tab-body__content_right{transform:translate3d(100%,0,0);min-height:1px}.kbq-tab-body__content.kbq-tab-body__content_left-origin-center{animation:kbq-tab-body-from-left var(--kbq-tab-body-animation-duration) cubic-bezier(.35,0,.25,1)}.kbq-tab-body__content.kbq-tab-body__content_right-origin-center{animation:kbq-tab-body-from-right var(--kbq-tab-body-animation-duration) cubic-bezier(.35,0,.25,1)}.kbq-tab-body__content.kbq-tab-body__content_left.kbq-animations-disabled,.kbq-tab-body__content.kbq-tab-body__content_right.kbq-animations-disabled,.kbq-tab-body__content.kbq-tab-body__content_left-origin-center.kbq-animations-disabled,.kbq-tab-body__content.kbq-tab-body__content_right-origin-center.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-body__content.kbq-tab-body__content_left,.kbq-tab-body__content.kbq-tab-body__content_right,.kbq-tab-body__content.kbq-tab-body__content_left-origin-center,.kbq-tab-body__content.kbq-tab-body__content_right-origin-center{animation:none;transition:none}}.kbq-tab-body__content.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-body__content{animation:none;transition:none}}@keyframes kbq-tab-body-from-left{0%{transform:translate3d(-100%,0,0)}}@keyframes kbq-tab-body-from-right{0%{transform:translate3d(100%,0,0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { positionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], originInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: false }] }], onCentering: [{ type: i0.Output, args: ["onCentering"] }], beforeCenteringOutput: [{ type: i0.Output, args: ["beforeCentering"] }], afterLeavingCenterOutput: [{ type: i0.Output, args: ["afterLeavingCenter"] }], onCentered: [{ type: i0.Output, args: ["onCentered"] }], portalHost: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], contentElement: [{ type: i0.ViewChild, args: ['content', { ...{ read: ElementRef }, isSignal: true }] }] } });
+/**
+ * The portal host directive for the contents of the tab.
+ *
+ * @docs-private
+ */
+class KbqTabBodyPortal extends CdkPortalOutlet {
+    constructor() {
+        super(...arguments);
+        this.host = inject(KbqTabBody);
+        /** Subscription to events for when the tab body begins centering. */
+        this.centeringSub = Subscription.EMPTY;
+        /** Subscription to events for when the tab body finishes leaving from center position. */
+        this.leavingSub = Subscription.EMPTY;
     }
+    /** Set initial visibility or set up subscription for changing visibility. */
     ngOnInit() {
-        this.contentPortal = new TemplatePortal(this.explicitContent() || this.implicitContent(), this.viewContainerRef);
+        super.ngOnInit();
+        this.centeringSub = this.host.beforeCentering
+            .pipe(startWith(this.host.isCenterPosition(this.host.bodyPosition)))
+            .subscribe((isCentering) => {
+            if (isCentering && !this.hasAttached()) {
+                this.attach(this.host.content());
+            }
+        });
+        this.leavingSub = this.host.afterLeavingCenter.subscribe(() => {
+            this.detach();
+        });
     }
+    /** Clean up centering subscription. */
     ngOnDestroy() {
-        this.stateChanges.complete();
+        super.ngOnDestroy();
+        this.centeringSub.unsubscribe();
+        this.leavingSub.unsubscribe();
     }
-    /**
-     * This has been extracted to a util because of TS 4 and VE.
-     * View Engine doesn't support property rename inheritance.
-     * TS 4.0 doesn't allow properties to override accessors or vice-versa.
-     * @docs-private
-     */
-    setTemplateLabelInput(value) {
-        // Only update the templateLabel via query if there is actually
-        // a KbqTabLabel found. This works around an issue where a user may have
-        // manually set `templateLabel` during creation mode, which would then get clobbered
-        // by `undefined` when this query resolves.
-        if (value) {
-            this._templateLabel = value;
-        }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabBodyPortal, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqTabBodyPortal, isStandalone: true, selector: "[kbqTabBodyHost]", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabBodyPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqTabBodyHost]'
+                }]
+        }] });
+
+/** Decorates the `ng-template` tags and reads out the template from it. */
+class KbqTabContent {
+    constructor() {
+        // TODO: the library reads the template with `{ read: TemplateRef }`; kept as public API at the DS-2196 review.
+        this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqTab, isStandalone: true, selector: "kbq-tab", inputs: { tooltipTitle: { classPropertyName: "tooltipTitle", publicName: "tooltipTitle", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, textLabel: { classPropertyName: "textLabel", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            ...[KBQ_SELECT_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY].map(((token) => KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER(token, ((overlay) => (() => overlay.scrollStrategies.close())))))
-        ], queries: [{ propertyName: "explicitContent", first: true, predicate: KbqTabContent, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "templateLabel", first: true, predicate: KBQ_TAB_LABEL, descendants: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["kbqTab"], usesOnChanges: true, ngImport: i0, template: '<ng-template><ng-content /></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqTabContent, isStandalone: true, selector: "[kbqTabContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTab, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabContent, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'kbq-tab',
-                    // Create a template for the content of the <kbq-tab> so that we can grab a reference to this
-                    // TemplateRef and use it in a Portal to render the tab content in the appropriate place in the
-                    // tab-group.
-                    template: '<ng-template><ng-content /></ng-template>',
-                    providers: [
-                        ...[KBQ_SELECT_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY].map(((token) => KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER(token, ((overlay) => (() => overlay.scrollStrategies.close())))))
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    exportAs: 'kbqTab'
+                    selector: '[kbqTabContent]'
                 }]
-        }], propDecorators: { templateLabel: [{
-                type: ContentChild,
-                args: [KBQ_TAB_LABEL]
-            }], explicitContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTabContent), { ...{ read: TemplateRef }, isSignal: true }] }], implicitContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], tooltipTitle: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], textLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabId", required: false }] }] } });
+        }] });
 
 /**
  * Used in the `kbq-tab-group` view to display tab labels.
+ *
  * @docs-private
  */
 class KbqTabLabelWrapper {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
+        this.labelContentQuery = contentChild('labelContent', ...(ngDevMode ? [{ debugName: "labelContentQuery" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.tabInput = input(undefined, { ...(ngDevMode ? { debugName: "tabInput" } : /* istanbul ignore next */ {}), alias: 'tab' });
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
         this._disabled = false;
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** The element of the label content, measured to tell whether the label overflows. */
+    get labelContent() {
+        return this.labelContentQuery();
+    }
     get disabled() {
         return this._disabled;
     }
@@ -1126,6 +1170,19 @@ class KbqTabLabelWrapper {
             this._disabled = value;
         }
     }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        if (changes['tabInput']) {
+            const tab = this.tabInput();
+            if (tab !== undefined)
+                this.tab = tab;
+        }
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
+        }
+    }
     ngAfterViewInit() {
         this.addClassModifierForIcons(Array.from(this.elementRef.nativeElement.querySelectorAll('.kbq-icon')));
     }
@@ -1141,6 +1198,7 @@ class KbqTabLabelWrapper {
     focus() {
         this.elementRef.nativeElement.focus({ preventScroll: true });
     }
+    // TODO: nothing in the library uses it; kept as public API at the DS-2196 review. Document or deprecate it.
     getOffsetLeft() {
         return this.elementRef.nativeElement.offsetLeft;
     }
@@ -1154,7 +1212,9 @@ class KbqTabLabelWrapper {
         return this.labelContent.nativeElement.scrollWidth > this.labelContent.nativeElement.clientWidth;
     }
     getInnerText() {
-        return this.labelContent.nativeElement.innerText;
+        // `textContent` rather than `innerText`, which jsdom does not implement. Trimmed, because it keeps the
+        // whitespace the template puts around the label text.
+        return this.labelContent.nativeElement.textContent?.trim() || '';
     }
     addClassModifierForIcons(icons) {
         const twoIcons = 2;
@@ -1177,27 +1237,21 @@ class KbqTabLabelWrapper {
             this.renderer.addClass(this.elementRef.nativeElement, 'kbq-tab-label_with-icon-right');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabLabelWrapper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.30", type: KbqTabLabelWrapper, isStandalone: true, selector: "[kbqTabLabelWrapper]", inputs: { tab: "tab", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class.kbq-disabled": "disabled", "attr.disabled": "disabled || null" } }, queries: [{ propertyName: "labelContent", first: true, predicate: ["labelContent"], descendants: true }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabLabelWrapper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.25", type: KbqTabLabelWrapper, isStandalone: true, selector: "[kbqTabLabelWrapper]", inputs: { tabInput: { classPropertyName: "tabInput", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-disabled": "disabled", "attr.aria-disabled": "disabled" } }, queries: [{ propertyName: "labelContentQuery", first: true, predicate: ["labelContent"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabLabelWrapper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabLabelWrapper, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTabLabelWrapper]',
                     host: {
                         '[class.kbq-disabled]': 'disabled',
-                        '[attr.disabled]': 'disabled || null'
+                        // A bare `disabled` attribute is only defined for form controls and is read by no assistive
+                        // technology; the CSS hook is `.kbq-disabled`.
+                        '[attr.aria-disabled]': 'disabled'
                     }
                 }]
-        }], propDecorators: { labelContent: [{
-                type: ContentChild,
-                args: ['labelContent']
-            }], tab: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+        }], propDecorators: { labelContentQuery: [{ type: i0.ContentChild, args: ['labelContent', { isSignal: true }] }], tabInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tab", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /** Corresponds to `--kbq-tabs-size-tab-item-padding-horizontal` on text/icon+text tabs. */
 const TAB_PADDING$1 = 12;
@@ -1206,15 +1260,46 @@ const TAB_PADDING$1 = 12;
  * When the tabs list's width exceeds the width of the header container,
  * then arrows will be displayed to allow the user to scroll
  * left and right across the header.
+ *
  * @docs-private
  */
 class KbqTabHeader extends KbqPaginatedTabHeader {
     constructor() {
         super(...arguments);
         /** Whether the tabs are underlined. */
-        this.underlined = input(false, ...(ngDevMode ? [{ debugName: "underlined", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.underlined = input(false, { ...(ngDevMode ? { debugName: "underlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.itemsQuery = contentChildren(KbqTabLabelWrapper, { ...(ngDevMode ? { debugName: "itemsQuery" } : /* istanbul ignore next */ {}), descendants: false });
+        this.itemsList = kbqQueryListFrom(this.itemsQuery);
+        this.tabListContainerQuery = viewChild.required('tabListContainer');
+        this.scrollbarViewportQuery = viewChild.required('tabListContainer', { read: KbqScrollbarViewport });
+        this.tabListQuery = viewChild.required('tabList');
+        this.nextPaginatorQuery = viewChild.required('nextPaginator');
+        this.previousPaginatorQuery = viewChild.required('previousPaginator');
         this.isBrowser = inject(Platform).isBrowser;
     }
+    /** The label wrappers of the tabs. */
+    get items() {
+        return this.itemsList();
+    }
+    /** The scroll container of the tab labels. */
+    get tabListContainer() {
+        return this.tabListContainerQuery();
+    }
+    get scrollbarViewport() {
+        return this.scrollbarViewportQuery();
+    }
+    /** The element that holds the tab labels. */
+    get tabList() {
+        return this.tabListQuery();
+    }
+    /** The pagination arrow towards the end of the tab list. */
+    get nextPaginator() {
+        return this.nextPaginatorQuery();
+    }
+    /** The pagination arrow towards the beginning of the tab list. */
+    get previousPaginator() {
+        return this.previousPaginatorQuery();
+    }
     get activeTabOffsetWidth() {
         if (!this.isBrowser)
             return undefined;
@@ -1236,43 +1321,200 @@ class KbqTabHeader extends KbqPaginatedTabHeader {
     get activeTabDisabled() {
         return !!this.items.get(this.selectedIndex)?.disabled;
     }
+    ngAfterContentChecked() {
+        super.ngAfterContentChecked();
+        // The labels belong to the view of the tab group, so a change of their size or state gives this view no
+        // notice: the underline is measured again whenever the group is checked, as it was before OnPush.
+        const underline = `${this.activeTabOffsetLeft}:${this.activeTabOffsetWidth}:${this.activeTabDisabled}`;
+        if (underline !== this.checkedUnderline) {
+            this.checkedUnderline = underline;
+            this.changeDetectorRef.markForCheck();
+        }
+    }
     itemSelected(event) {
         event.preventDefault();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", type: KbqTabHeader, isStandalone: true, selector: "kbq-tab-header", inputs: { underlined: { classPropertyName: "underlined", publicName: "underlined", isSignal: true, isRequired: false, transformFunction: null } }, 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\" color=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    class=\"kbq-tab-header__container kbq-tab-header__scroll-container\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"!disableScrollBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"!disableScrollAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\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                [class.kbq-disabled]=\"activeTabDisabled\"\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\" color=\"contrast\"></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:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.kbq-tab-header__scroll-container::-webkit-scrollbar{display:none}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto;scrollbar-width:auto}.kbq-tab-group_vertical .kbq-tab-header__scroll-container::-webkit-scrollbar{display:block}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0;border-radius:var(--kbq-tabs-size-tab-stack-horizontal-border-radius)}.kbq-tab-group:not(.kbq-tab-group_on-surface) .kbq-tab-header.kbq-tab-header_underlined{border-radius:0}.kbq-tab-header.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled){overflow:visible}.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__container{display:flex;flex-grow:1;z-index:1}.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-header__container{overflow:visible}.kbq-tab-list{position:relative;width:100%}.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}.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;overflow:hidden;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-label.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0!important;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-label.kbq-tab-label_icon-only:not(.kbq-tab-label_vertical):after{content:\"\";display:block;position:absolute;top:0;bottom:0;left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));background:transparent}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-label.kbq-tab-label_vertical.kbq-tab-label_icon-only{margin-inline:0;justify-content:center}.kbq-tab-label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqTabHeader, isStandalone: true, selector: "kbq-tab-header", inputs: { underlined: { classPropertyName: "underlined", publicName: "underlined", isSignal: true, isRequired: false, transformFunction: null } }, 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: "itemsQuery", predicate: KbqTabLabelWrapper, isSignal: true }], viewQueries: [{ propertyName: "tabListContainerQuery", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "scrollbarViewportQuery", first: true, predicate: ["tabListContainer"], descendants: true, read: KbqScrollbarViewport, isSignal: true }, { propertyName: "tabListQuery", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "nextPaginatorQuery", first: true, predicate: ["nextPaginator"], descendants: true, isSignal: true }, { propertyName: "previousPaginatorQuery", first: true, predicate: ["previousPaginator"], descendants: true, isSignal: 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\" color=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    kbqScrollbarViewport\n    class=\"kbq-tab-header__container kbq-tab-header__scroll-container\"\n    [kbqScrollbarMode]=\"scrollbarMode\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"!disableScrollBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"!disableScrollAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\" role=\"tablist\" [attr.aria-orientation]=\"vertical ? 'vertical' : null\">\n            <ng-content />\n            <div\n                aria-hidden=\"true\"\n                class=\"kbq-tab-list__active-tab-underline\"\n                [class.kbq-animations-disabled]=\"animationsDisabled\"\n                [class.kbq-disabled]=\"activeTabDisabled\"\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\" color=\"contrast\"></i>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{animation:none;transition:none}}.kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0;border-radius:var(--kbq-tabs-size-tab-stack-horizontal-border-radius)}@supports (corner-shape: squircle){.kbq-tab-header{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 1.85,var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 2)}}.kbq-tab-group:not(.kbq-tab-group_on-surface) .kbq-tab-header.kbq-tab-header_underlined{border-radius:0}.kbq-tab-header.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled){overflow:visible}.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__container{display:flex;flex-grow:1;z-index:1}.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-header__container{overflow:visible}.kbq-tab-list{position:relative;width:100%}.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)}@supports (corner-shape: squircle){.kbq-tab-label{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-item-border-radius) * 1.85,var(--kbq-tabs-size-tab-item-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-item-border-radius) * 2)}}.kbq-tab-label{outline:none}.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;overflow:hidden;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-label.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-label.kbq-tab-label_icon-only:not(.kbq-tab-label_vertical):after{content:\"\";display:block;position:absolute;top:0;bottom:0;left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));background:transparent}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-label.kbq-tab-label_vertical.kbq-tab-label_icon-only{margin-inline:0;justify-content:center}.kbq-tab-label{-webkit-user-select:none;user-select:none}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tab-header', imports: [KbqIconModule, CdkObserveContent], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'kbq-tab-header', imports: [KbqIconModule, CdkObserveContent, KbqScrollbarViewport], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tab-header',
                         '[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'"
-                    }, outputs: ['selectFocusedIndex', 'indexFocused'], 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\" color=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    class=\"kbq-tab-header__container kbq-tab-header__scroll-container\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"!disableScrollBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"!disableScrollAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\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                [class.kbq-disabled]=\"activeTabDisabled\"\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\" color=\"contrast\"></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:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.kbq-tab-header__scroll-container::-webkit-scrollbar{display:none}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto;scrollbar-width:auto}.kbq-tab-group_vertical .kbq-tab-header__scroll-container::-webkit-scrollbar{display:block}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0;border-radius:var(--kbq-tabs-size-tab-stack-horizontal-border-radius)}.kbq-tab-group:not(.kbq-tab-group_on-surface) .kbq-tab-header.kbq-tab-header_underlined{border-radius:0}.kbq-tab-header.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled){overflow:visible}.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__container{display:flex;flex-grow:1;z-index:1}.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-header__container{overflow:visible}.kbq-tab-list{position:relative;width:100%}.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}.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;overflow:hidden;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-label.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0!important;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-label.kbq-tab-label_icon-only:not(.kbq-tab-label_vertical):after{content:\"\";display:block;position:absolute;top:0;bottom:0;left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));background:transparent}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-label.kbq-tab-label_vertical.kbq-tab-label_icon-only{margin-inline:0;justify-content:center}.kbq-tab-label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"] }]
-        }], propDecorators: { underlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlined", required: false }] }], items: [{
-                type: ContentChildren,
-                args: [KbqTabLabelWrapper, { descendants: false }]
-            }], tabListContainer: [{
-                type: ViewChild,
-                args: ['tabListContainer', { static: true }]
-            }], tabList: [{
-                type: ViewChild,
-                args: ['tabList', { static: true }]
-            }], nextPaginator: [{
-                type: ViewChild,
-                args: ['nextPaginator']
-            }], previousPaginator: [{
-                type: ViewChild,
-                args: ['previousPaginator']
-            }] } });
+                    }, outputs: ['selectFocusedIndex', 'indexFocused'], 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\" color=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    kbqScrollbarViewport\n    class=\"kbq-tab-header__container kbq-tab-header__scroll-container\"\n    [kbqScrollbarMode]=\"scrollbarMode\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"!disableScrollBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"!disableScrollAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\" role=\"tablist\" [attr.aria-orientation]=\"vertical ? 'vertical' : null\">\n            <ng-content />\n            <div\n                aria-hidden=\"true\"\n                class=\"kbq-tab-list__active-tab-underline\"\n                [class.kbq-animations-disabled]=\"animationsDisabled\"\n                [class.kbq-disabled]=\"activeTabDisabled\"\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\" color=\"contrast\"></i>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{animation:none;transition:none}}.kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0;border-radius:var(--kbq-tabs-size-tab-stack-horizontal-border-radius)}@supports (corner-shape: squircle){.kbq-tab-header{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 1.85,var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 2)}}.kbq-tab-group:not(.kbq-tab-group_on-surface) .kbq-tab-header.kbq-tab-header_underlined{border-radius:0}.kbq-tab-header.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled){overflow:visible}.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__container{display:flex;flex-grow:1;z-index:1}.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-header__container{overflow:visible}.kbq-tab-list{position:relative;width:100%}.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)}@supports (corner-shape: squircle){.kbq-tab-label{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-item-border-radius) * 1.85,var(--kbq-tabs-size-tab-item-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-item-border-radius) * 2)}}.kbq-tab-label{outline:none}.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;overflow:hidden;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-label.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-label.kbq-tab-label_icon-only:not(.kbq-tab-label_vertical):after{content:\"\";display:block;position:absolute;top:0;bottom:0;left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));background:transparent}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-label.kbq-tab-label_vertical.kbq-tab-label_icon-only{margin-inline:0;justify-content:center}.kbq-tab-label{-webkit-user-select:none;user-select:none}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"] }]
+        }], propDecorators: { underlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlined", required: false }] }], itemsQuery: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqTabLabelWrapper), { ...{ descendants: false }, isSignal: true }] }], tabListContainerQuery: [{ type: i0.ViewChild, args: ['tabListContainer', { isSignal: true }] }], scrollbarViewportQuery: [{ type: i0.ViewChild, args: ['tabListContainer', { ...{ read: KbqScrollbarViewport }, isSignal: true }] }], tabListQuery: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], nextPaginatorQuery: [{ type: i0.ViewChild, args: ['nextPaginator', { isSignal: true }] }], previousPaginatorQuery: [{ type: i0.ViewChild, args: ['previousPaginator', { isSignal: true }] }] } });
+
+const KBQ_TAB_LABEL = new InjectionToken('KbqTabLabel');
+/** Used to flag tab labels for use with the portal directive */
+class KbqTabLabel extends CdkPortal {
+    constructor() {
+        super(...arguments);
+        /** Whether the tab contains only an icon without a label. */
+        this.iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqTabLabel, isStandalone: true, selector: "[kbq-tab-label], [kbqTabLabel]", inputs: { iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: KBQ_TAB_LABEL, useExisting: KbqTabLabel }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbq-tab-label], [kbqTabLabel]',
+                    providers: [{ provide: KBQ_TAB_LABEL, useExisting: KbqTabLabel }]
+                }]
+        }], propDecorators: { iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
+
+class KbqTab {
+    constructor() {
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.templateLabelQuery = contentChild(KBQ_TAB_LABEL, ...(ngDevMode ? [{ debugName: "templateLabelQuery" }] : /* istanbul ignore next */ []));
+        /**
+         * Template provided in the tab content that will be used if present, used to enable lazy-loading
+         */
+        this.explicitContent = contentChild(KbqTabContent, { ...(ngDevMode ? { debugName: "explicitContent" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /** Template inside the KbqTab view that contains an `<ng-content>`. */
+        this.implicitContent = viewChild.required(TemplateRef);
+        /** @docs-private */
+        this.tooltipTitleInput = input(undefined, { ...(ngDevMode ? { debugName: "tooltipTitleInput" } : /* istanbul ignore next */ {}), alias: 'tooltipTitle' });
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        this._tooltipTitle = '';
+        this._disabled = false;
+        /** Placement of the tooltip shown for a truncated or empty label. */
+        this.tooltipPlacement = input(PopUpPlacements.Right, ...(ngDevMode ? [{ debugName: "tooltipPlacement" }] : /* istanbul ignore next */ []));
+        /** Plain text label for the tab, used when there is no template label. */
+        this.textLabel = input('', { ...(ngDevMode ? { debugName: "textLabel" } : /* istanbul ignore next */ {}), alias: 'label' });
+        this.empty = input(false, { ...(ngDevMode ? { debugName: "empty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.tabId = input(undefined, ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
+        /** Emits whenever the internal state of the tab changes. */
+        this.stateChanges = new Subject();
+        /**
+         * The relatively indexed position where 0 represents the center, negative is left, and positive
+         * represents the right.
+         */
+        this.position = null;
+        /**
+         * The initial relatively index origin of the tab if it was created and selected after there
+         * was already a selected tab. Provides context of what position the tab should originate from.
+         */
+        this.origin = null;
+        this.activeState = signal(false, ...(ngDevMode ? [{ debugName: "activeState" }] : /* istanbul ignore next */ []));
+        this._overflowTooltipTitle = '';
+        /** Portal that will be the hosted content of the tab */
+        this.contentPortal = null;
+    }
+    /** @docs-private */
+    get content() {
+        return this.contentPortal;
+    }
+    /** The label template of the tab: the `kbqTabLabel` in its content, or else the one assigned in code. */
+    get templateLabel() {
+        return this.templateLabelQuery() ?? this._templateLabel;
+    }
+    set templateLabel(value) {
+        this.setTemplateLabelInput(value);
+    }
+    get tooltipTitle() {
+        return this.overflowTooltipTitle + this._tooltipTitle;
+    }
+    set tooltipTitle(value) {
+        this._tooltipTitle = value;
+    }
+    /** Whether the tab is disabled: it cannot be selected and has no interactive states. */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (value !== this.disabled) {
+            this._disabled = value;
+        }
+    }
+    /** Whether the tab label contains only an icon (no text). */
+    get iconOnlyLabel() {
+        return this.templateLabel?.iconOnly() ?? false;
+    }
+    /** Whether the tab is currently active. A template that reads it is updated when it changes. */
+    get isActive() {
+        return this.activeState();
+    }
+    set isActive(value) {
+        this.activeState.set(value);
+    }
+    get isOverflown() {
+        return !!this._overflowTooltipTitle;
+    }
+    get overflowTooltipTitle() {
+        if (this.isOverflown) {
+            return `${this._overflowTooltipTitle}\n`;
+        }
+        return '';
+    }
+    set overflowTooltipTitle(value) {
+        this._overflowTooltipTitle = value;
+    }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member, except that `undefined` resets a member
+        // typed without it to its default; unbound, it leaves what code wrote.
+        if (changes['tooltipTitleInput']) {
+            this.tooltipTitle = this.tooltipTitleInput() ?? '';
+        }
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
+        }
+        if (changes['textLabel'] || changes['disabledInput'] || changes['tooltipTitleInput']) {
+            this.stateChanges.next();
+        }
+    }
+    ngOnInit() {
+        this.contentPortal = new TemplatePortal(this.explicitContent() || this.implicitContent(), this.viewContainerRef);
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    /**
+     * Keeps a label template assigned in code, used while the content of the tab has none. A falsy value is
+     * ignored.
+     *
+     * @docs-private
+     */
+    setTemplateLabelInput(value) {
+        if (value) {
+            this._templateLabel = value;
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqTab, isStandalone: true, selector: "kbq-tab", inputs: { tooltipTitleInput: { classPropertyName: "tooltipTitleInput", publicName: "tooltipTitle", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, textLabel: { classPropertyName: "textLabel", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            ...[KBQ_SELECT_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY].map(((token) => KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER(token, ((overlay) => (() => overlay.scrollStrategies.close())))))
+        ], queries: [{ propertyName: "templateLabelQuery", first: true, predicate: KBQ_TAB_LABEL, descendants: true, isSignal: true }, { propertyName: "explicitContent", first: true, predicate: KbqTabContent, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["kbqTab"], usesOnChanges: true, ngImport: i0, template: '<ng-template><ng-content /></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-tab',
+                    // Create a template for the content of the <kbq-tab> so that we can grab a reference to this
+                    // TemplateRef and use it in a Portal to render the tab content in the appropriate place in the
+                    // tab-group.
+                    template: '<ng-template><ng-content /></ng-template>',
+                    providers: [
+                        ...[KBQ_SELECT_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY].map(((token) => KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER(token, ((overlay) => (() => overlay.scrollStrategies.close())))))
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    exportAs: 'kbqTab'
+                }]
+        }], propDecorators: { templateLabelQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KBQ_TAB_LABEL), { isSignal: true }] }], explicitContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTabContent), { ...{ read: TemplateRef }, isSignal: true }] }], implicitContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], tooltipTitleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTitle", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], textLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabId", required: false }] }] } });
 
 class KbqAlignTabsCenterCssStyler {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAlignTabsCenterCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqAlignTabsCenterCssStyler, isStandalone: true, 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAlignTabsCenterCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqAlignTabsCenterCssStyler, isStandalone: true, 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: "20.3.30", ngImport: i0, type: KbqAlignTabsCenterCssStyler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAlignTabsCenterCssStyler, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tab-group[kbq-align-tabs-center], [kbq-tab-nav-bar][kbq-align-tabs-center], [kbqTabNavBar][kbq-align-tabs-center]',
@@ -1280,10 +1522,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                 }]
         }] });
 class KbqAlignTabsEndCssStyler {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAlignTabsEndCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqAlignTabsEndCssStyler, isStandalone: true, 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAlignTabsEndCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqAlignTabsEndCssStyler, isStandalone: true, 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: "20.3.30", ngImport: i0, type: KbqAlignTabsEndCssStyler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAlignTabsEndCssStyler, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tab-group[kbq-align-tabs-end], [kbq-tab-nav-bar][kbq-align-tabs-end], [kbqTabNavBar][kbq-align-tabs-end]',
@@ -1291,49 +1533,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                 }]
         }] });
 class KbqStretchTabsCssStyler {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqStretchTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqStretchTabsCssStyler, isStandalone: true, 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqStretchTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqStretchTabsCssStyler, isStandalone: true, 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: "20.3.30", ngImport: i0, type: KbqStretchTabsCssStyler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqStretchTabsCssStyler, decorators: [{
             type: Directive,
             args: [{
                     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' }
                 }]
         }] });
+/**
+ * @deprecated No-op. The vertical layout class is bound from `KbqTabGroup`/`KbqTabNavBar` themselves,
+ *  so it follows the `vertical` value instead of merely the presence of the attribute. Will be removed
+ *  in a future major version — stop importing it.
+ */
 class KbqVerticalTabsCssStyler {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqVerticalTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqVerticalTabsCssStyler, isStandalone: true, selector: "kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical], [kbqTabNavBar][vertical]", host: { classAttribute: "kbq-tab-group_vertical" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqVerticalTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqVerticalTabsCssStyler, isStandalone: true, selector: "kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical], [kbqTabNavBar][vertical]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqVerticalTabsCssStyler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqVerticalTabsCssStyler, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical], [kbqTabNavBar][vertical]',
-                    host: { class: 'kbq-tab-group_vertical' }
+                    selector: 'kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical], [kbqTabNavBar][vertical]'
                 }]
         }] });
 /** Used to generate unique ID's for each tab component */
 let nextId = 0;
+/** Debounce applied to header resizes before the tab labels are re-measured for overflow. */
+const RESIZE_DEBOUNCE_INTERVAL = 100;
 /** A simple change event emitted on focus or selection changes. */
 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');
+/**
+ * Coerces a raw persisted payload into a `KbqTabsState`, returning `null` for anything unrecognizable.
+ *
+ * Web storage is origin-wide and user-writable, so a payload is never trusted — without this, an entry
+ * such as `{"index": "first"}` would reach `clampTabIndex` and select nothing.
+ */
+const normalizeTabsState = (parsed) => {
+    if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed))
+        return null;
+    const { tabId, index } = parsed;
+    if (typeof index !== 'number' || !Number.isInteger(index) || index < 0)
+        return null;
+    return { tabId: typeof tabId === 'string' ? tabId : null, index };
+};
 /**
  * Tab-group component.  Supports basic tab pairs (label + content) and includes keyboard navigation.
  */
 class KbqTabGroup {
+    /** The tabs of the group. */
+    get tabs() {
+        return this.tabsList();
+    }
     /** The index of the active tab. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get selectedIndex() {
-        return this._selectedIndex;
+        return this.selectedIndexState();
     }
     set selectedIndex(value) {
         this.activeTab = value;
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get activeTab() {
         switch (typeof this.attributeToSelectBy) {
             case 'number':
@@ -1348,38 +1610,50 @@ class KbqTabGroup {
             case 'function':
                 return this.attributeToSelectBy(this.tabs.toArray());
             default:
-                return this.tabs.get(0) || null;
+                return this.getDefaultTab();
         }
     }
     set activeTab(value) {
+        // `selectedIndex` assigns through here too, so this one flag covers both inputs.
+        this.attributeWritten = true;
         this.attributeToSelectBy = value;
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        if (value !== this.disabled) {
-            this._disabled = value;
-        }
-    }
     constructor() {
         this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.resizeStream = new Subject();
+        this.destroyRef = inject(DestroyRef);
+        this.resizeObserver = inject(SharedResizeObserver);
+        this.platform = inject(Platform);
+        /**
+         * Persistence of the selected tab, applied as a host directive. `useStateSaving` and `stateSavingKey`
+         * are its inputs, forwarded onto the tab group.
+         */
+        this.stateSaving = inject(KbqStateSaving);
+        this.tabsQuery = contentChildren(KbqTab, ...(ngDevMode ? [{ debugName: "tabsQuery" }] : /* istanbul ignore next */ []));
+        this.tabsList = kbqQueryListFrom(this.tabsQuery);
         this.tabBodyWrapper = viewChild.required('tabBodyWrapper');
         this.tabHeader = viewChild.required('tabHeader');
-        this.transparent = input(false, ...(ngDevMode ? [{ debugName: "transparent", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.onSurface = input(false, ...(ngDevMode ? [{ debugName: "onSurface", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.underlined = input(false, ...(ngDevMode ? [{ debugName: "underlined", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Whether the tab strip background should be transparent. */
+        this.transparent = input(false, { ...(ngDevMode ? { debugName: "transparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the group is rendered on a surface rather than on the page background. */
+        this.onSurface = input(false, { ...(ngDevMode ? { debugName: "onSurface" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the selected tab is marked with an underline instead of a filled background. */
+        this.underlined = input(false, { ...(ngDevMode ? { debugName: "underlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the tab strip is laid out vertically, alongside the content instead of above it. */
+        this.vertical = input(false, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether the tab group should grow to the size of the active tab. */
-        this.dynamicHeight = input(false, ...(ngDevMode ? [{ debugName: "dynamicHeight", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.dynamicHeight = input(false, { ...(ngDevMode ? { debugName: "dynamicHeight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.selectedIndexInput = input(undefined, { ...(ngDevMode ? { debugName: "selectedIndexInput" } : /* istanbul ignore next */ {}), alias: 'selectedIndex',
+            transform: kbqOptionalNumberAttribute });
+        /** @docs-private */
+        this.activeTabInput = input(undefined, { ...(ngDevMode ? { debugName: "activeTabInput" } : /* istanbul ignore next */ {}), alias: 'activeTab' });
+        /** @docs-private */
+        this.headerPositionInput = input(undefined, { ...(ngDevMode ? { debugName: "headerPositionInput" } : /* istanbul ignore next */ {}), alias: 'headerPosition' });
+        /** @docs-private */
+        this.animationDurationInput = input(undefined, { ...(ngDevMode ? { debugName: "animationDurationInput" } : /* istanbul ignore next */ {}), alias: 'animationDuration' });
+        this.selectedIndexState = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedIndexState" }] : /* istanbul ignore next */ []));
         /** Position of the tab header. */
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
         this.headerPosition = 'above';
-        this._disabled = false;
         /** Output to enable support for two-way binding on `[(selectedIndex)]` */
         this.selectedIndexChange = output();
         /** Event emitted when the tab selection has changed. */
@@ -1391,45 +1665,76 @@ class KbqTabGroup {
         /** Event emitted when the tab selection has changed. */
         this.selectedTabChange = output();
         this.attributeToSelectBy = null;
+        /**
+         * Whether anything has assigned `activeTab` or `selectedIndex`. Snapshotted while initializing, where
+         * only an input binding can have done so, and read from then on as "the application drives the
+         * selection" — which suppresses persistence.
+         */
+        this.attributeWritten = false;
+        this.controlled = false;
+        /** Whether the dev-mode warning about a tab with no `tabId` has already been logged. */
+        this.warnedAboutTabId = false;
         /** Snapshot of the height of the tab body wrapper before another tab is activated. */
         this.tabBodyWrapperHeight = 0;
         /** Subscription to tabs being added/removed. */
         this.tabsSubscription = Subscription.EMPTY;
         /** Subscription to changes in the tab labels. */
         this.tabLabelSubscription = Subscription.EMPTY;
-        this.resizeSubscription = Subscription.EMPTY;
-        this.resizeDebounceInterval = 100;
-        this.checkOverflow = () => {
-            this.tabHeader().items.forEach((headerTab) => headerTab.checkOverflow());
-        };
-        const defaultConfig = inject(KBQ_TABS_CONFIG, { optional: true });
+        this.defaultAnimationDuration = inject(KBQ_TABS_CONFIG, { optional: true })?.animationDuration || '0ms';
         this.groupId = nextId++;
-        this.animationDuration = defaultConfig?.animationDuration || '0ms';
-        this.subscribeToResize();
+        this.animationDuration = this.defaultAnimationDuration;
+        // The state lives under the new key now, so restore from it.
+        this.stateSaving.keyChanges.subscribe(() => this.applySavedState());
+        // `checkOverflow` writes `tab.overflowTooltipTitle`, which the same view reads through
+        // `[kbqTooltipDisabled]`. Deferring it past the render keeps the write out of the checked cycle.
+        afterNextRender(() => {
+            this.checkOverflow();
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member, except that `undefined` resets a member
+        // typed without it to its default; unbound, it leaves what code wrote.
+        // Assigned through `activeTab`, because the `selectedIndex` setter takes no `null` — the default, which selects
+        // the first enabled tab.
+        if (changes['selectedIndexInput'])
+            this.activeTab = this.selectedIndexInput() ?? null;
+        // A bound `undefined` is handed over too: binding `activeTab` at all lets the application drive the
+        // selection, which turns the state saving off.
+        if (changes['activeTabInput']) {
+            this.activeTab = this.activeTabInput() ?? null;
+        }
+        if (changes['headerPositionInput']) {
+            this.headerPosition = this.headerPositionInput() ?? 'above';
+        }
+        if (changes['animationDurationInput']) {
+            this.animationDuration = this.animationDurationInput() ?? this.defaultAnimationDuration;
+        }
     }
     ngAfterContentInit() {
         this.subscribeToTabLabels();
+        this.restoreState();
         // Subscribe to changes in the amount of tabs, in order to be
         // able to re-render the content as new tabs are added or removed.
         this.tabsSubscription = this.tabs.changes.subscribe(() => {
-            // const indexToSelect = this.clampTabIndex(this.indexToSelect);
             const indexToSelect = this.getTabIndexToSelect();
             // Maintain the previously-selected tab if a new tab is added or removed and there is no
             // explicit change that selects a different tab.
-            if (indexToSelect === this._selectedIndex) {
+            if (indexToSelect === this.selectedIndexState()) {
                 const tabs = this.tabs.toArray();
                 for (let i = 0; i < tabs.length; i++) {
                     if (tabs[i].isActive) {
-                        // Assign both to the `activeTab` and `_selectedIndex` so we don't fire a changed
+                        // Assign both to the `activeTab` and the selected index so we don't fire a changed
                         // event, otherwise the consumer may end up in an infinite loop in some edge cases like
                         // adding a tab within the `selectedIndexChange` event.
-                        this._selectedIndex = i;
+                        this.selectedIndexState.set(i);
                         this.onSelectFocusedIndex(i);
                         break;
                     }
                 }
             }
             this.subscribeToTabLabels();
+            // Also marks the ancestors, whose check runs `ngAfterContentChecked` and positions the tabs.
             this.changeDetectorRef.markForCheck();
         });
     }
@@ -1440,13 +1745,16 @@ class KbqTabGroup {
      * a new selected tab should transition in (from the left or right).
      */
     ngAfterContentChecked() {
+        // Brings `tabs` up to date first, so that its `changes` subscribers, which keep the selected tab when tabs are
+        // added or removed, run before the selection is computed.
+        this.tabsList();
         // Don't clamp the `indexToSelect` immediately in the setter because it can happen that
         // the amount of tabs changes before the actual change detection runs.
         const indexToSelect = this.getTabIndexToSelect();
         // If there is a change in selected index, emit a change event. Should not trigger if
         // the selected index has not yet been initialized.
-        if (this._selectedIndex !== indexToSelect) {
-            const isFirstRun = this._selectedIndex == null;
+        if (this.selectedIndexState() !== indexToSelect) {
+            const isFirstRun = this.selectedIndexState() == null;
             if (!isFirstRun) {
                 this.selectedTabChange.emit(this.createChangeEvent(indexToSelect));
             }
@@ -1463,27 +1771,36 @@ class KbqTabGroup {
                 }
             });
         }
+        const selectedIndex = this.selectedIndexState();
         // Setup the position for each tab and optionally setup an origin on the next selected tab.
         this.tabs.forEach((tab, index) => {
             tab.position = index - indexToSelect;
             // If there is already a selected tab, then set up an origin for the next selected tab
             // if it doesn't have one already.
-            if (this._selectedIndex != null && tab.position === 0 && !tab.origin) {
-                tab.origin = indexToSelect - this._selectedIndex;
+            if (selectedIndex != null && tab.position === 0 && !tab.origin) {
+                tab.origin = indexToSelect - selectedIndex;
             }
         });
-        if (this._selectedIndex !== indexToSelect) {
-            this._selectedIndex = indexToSelect;
-            this.changeDetectorRef.markForCheck();
-        }
+        this.selectedIndexState.set(indexToSelect);
     }
     ngAfterViewInit() {
-        this.checkOverflow();
+        if (!this.platform.isBrowser)
+            return;
+        // An element observer also catches container resizes, which no window resize event reports.
+        this.resizeObserver
+            .observe(this.tabHeader().elementRef.nativeElement)
+            .pipe(debounceTime(RESIZE_DEBOUNCE_INTERVAL), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            // Read the current value: only vertical labels are truncated, and `vertical` can change.
+            if (!this.vertical())
+                return;
+            this.checkOverflow();
+            this.changeDetectorRef.markForCheck();
+        });
     }
     ngOnDestroy() {
         this.tabsSubscription.unsubscribe();
         this.tabLabelSubscription.unsubscribe();
-        this.resizeSubscription.unsubscribe();
     }
     focusChanged(index) {
         this.focusChange.emit(this.createChangeEvent(index));
@@ -1516,30 +1833,122 @@ class KbqTabGroup {
     removeTabBodyWrapperHeight() {
         this.tabBodyWrapperHeight = this.tabBodyWrapper().nativeElement.clientHeight;
         this.tabBodyWrapper().nativeElement.style.height = '';
-        // TODO: The 'emit' function requires a mandatory void argument
         this.animationDone.emit();
     }
     /** Handle click events, setting new selected index if appropriate. */
     handleClick(tab, tabHeader, index) {
-        if (tab.disabled) {
-            return;
-        }
-        this.onSelectFocusedIndex(index);
-        tabHeader.focusIndex = index;
+        // Untracked, as `onSelectFocusedIndex()`, `saveState()` and `clearSavedState()`: called from a consumer's
+        // `effect()`, the state read on the way — the tabs and their inputs, the selection, the state saving inputs —
+        // would make the effect run again whenever it changes.
+        untracked(() => {
+            if (tab.disabled) {
+                return;
+            }
+            this.onSelectFocusedIndex(index);
+            tabHeader.focusIndex = index;
+        });
     }
-    /** Retrieves the tabindex for the tab. */
-    getTabIndex(tab, index) {
+    /**
+     * Retrieves the tabindex for the tab. The single `0` follows the header's focus position rather
+     * than the selection, so that a disabled selected tab cannot take the whole strip out of the tab
+     * order — a disabled tab is `-1`, never absent, so it stays a roving-tabindex participant.
+     */
+    getTabIndex(tab, tabHeader, index) {
         if (tab.disabled) {
-            return null;
+            return -1;
         }
-        return this.selectedIndex === index ? 0 : -1;
+        return this.getRovingTabIndex(tabHeader) === index ? 0 : -1;
     }
     onSelectFocusedIndex($event) {
-        if (typeof this.attributeToSelectBy === 'string') {
-            this.activeTab = this.tabs.get($event)?.tabId() || null;
+        untracked(() => {
+            if (typeof this.attributeToSelectBy === 'string') {
+                this.activeTab = this.tabs.get($event)?.tabId() || null;
+            }
+            else {
+                this.activeTab = $event;
+            }
+            this.saveState();
+        });
+    }
+    /**
+     * Persists which tab is selected.
+     *
+     * Called for every selection a user makes. Both the tab's `tabId` and its position are stored: the
+     * `tabId` is the only one that survives the tabs being reordered, and the position is all there is
+     * when the tabs carry none.
+     */
+    saveState() {
+        untracked(() => {
+            if (!this.persists)
+                return;
+            this.stateSaving.write(this.snapshot());
+        });
+    }
+    /**
+     * Removes the state persisted for this tab group.
+     *
+     * Persistence itself stays on — the next selection is written again. Unset `useStateSaving` to stop
+     * it.
+     */
+    clearSavedState() {
+        untracked(() => this.stateSaving.clear());
+    }
+    /**
+     * Whether state is currently persisted for this tab group — restored on init, or written since.
+     * Always `false` while `useStateSaving` is unset, and `false` again after `clearSavedState()`.
+     */
+    get hasSavedState() {
+        return this.stateSaving.state != null;
+    }
+    /** Whether this tab group reads and writes its selection at all. */
+    get persists() {
+        // A group that is not in the document has no stable key — the default resolver derives one from
+        // the path to `<body>` — which is the ordinary state of one projected into an overlay.
+        return this.stateSaving.useStateSaving() && !this.controlled && !!this.stateSaving.host?.isConnected;
+    }
+    /** Restores the persisted selection, unless the application drives it. */
+    restoreState() {
+        // Only an input binding can have assigned by now: `activeTab` needs a view query to reach, and a
+        // click needs a rendered header. Snapshotted here rather than in `applySavedState()`, which runs
+        // again after a key change — by then a click has assigned too, and would read as an application.
+        this.controlled = this.attributeWritten;
+        this.applySavedState();
+    }
+    /** Reads the persisted selection and applies it. Runs while initializing, and again on a key change. */
+    applySavedState() {
+        if (!this.persists)
             return;
-        }
-        this.activeTab = $event;
+        const savedState = this.stateSaving.read(normalizeTabsState);
+        if (!savedState)
+            return;
+        const tabs = this.tabs.toArray();
+        const byId = savedState.tabId === null ? -1 : tabs.findIndex((tab) => tab.tabId() === savedState.tabId);
+        // The id wins wherever it still names a tab, so a reordering does not select the wrong one. Its
+        // position is the fallback, and a payload naming neither is dropped rather than clamped — the
+        // group then keeps whatever it would have selected on its own.
+        if (byId < 0 && savedState.index >= tabs.length)
+            return;
+        this.stateSaving.applying(() => {
+            this.activeTab = byId < 0 ? savedState.index : savedState.tabId;
+        });
+    }
+    /** The whole selection, by id and by position. */
+    snapshot() {
+        const tabs = this.tabs?.toArray() ?? [];
+        const active = this.activeTab;
+        const index = active ? tabs.indexOf(active) : -1;
+        const tabId = active?.tabId() || null;
+        if (!tabId && isDevMode() && !this.warnedAboutTabId) {
+            this.warnedAboutTabId = true;
+            // eslint-disable-next-line no-console
+            console.warn('kbq-tab-group: the selected tab has no `tabId`, so the selection is persisted by ' +
+                'position. A position survives a reload but not a reordering, and then restores the ' +
+                'wrong tab. Give the tabs a `tabId`, or unset `useStateSaving`.');
+        }
+        return { tabId, index: index < 0 ? 0 : index };
+    }
+    checkOverflow() {
+        this.tabHeader().items.forEach((headerTab) => headerTab.checkOverflow());
     }
     createChangeEvent(index) {
         const event = new KbqTabChangeEvent();
@@ -1550,7 +1959,7 @@ class KbqTabGroup {
         return event;
     }
     /**
-     * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is
+     * Subscribes to changes in the tab labels. This is needed, because the `@Input` for the label is
      * on the KbqTab component, whereas the data binding is inside the KbqTabGroup. In order for the
      * binding to be updated, we need to subscribe to changes in it and trigger change detection
      * manually.
@@ -1561,16 +1970,29 @@ class KbqTabGroup {
         }
         this.tabLabelSubscription = merge(...this.tabs.map((tab) => tab.stateChanges)).subscribe(() => this.changeDetectorRef.markForCheck());
     }
-    subscribeToResize() {
-        if (!this.vertical()) {
-            return;
-        }
-        if (this.resizeSubscription) {
-            this.resizeSubscription.unsubscribe();
+    /**
+     * Index that owns `tabindex="0"`, falling back to the first enabled tab when focus sits on a
+     * disabled one.
+     *
+     * The template calls this once per tab, so the common path stays allocation-free: `QueryList.get`
+     * indexes the backing array, where `toArray()` would copy it N times per check.
+     */
+    getRovingTabIndex(tabHeader) {
+        const { focusIndex } = tabHeader;
+        const focused = this.tabs.get(focusIndex);
+        if (focused && !focused.disabled) {
+            return focusIndex;
+        }
+        for (let index = 0; index < this.tabs.length; index++) {
+            if (!this.tabs.get(index).disabled) {
+                return index;
+            }
         }
-        this.resizeSubscription = this.resizeStream
-            .pipe(debounceTime(this.resizeDebounceInterval))
-            .subscribe(this.checkOverflow);
+        return -1;
+    }
+    /** First tab that can actually be selected, so that a leading disabled tab is not the default. */
+    getDefaultTab() {
+        return this.tabs.find((tab) => !tab.disabled) || this.tabs.get(0) || null;
     }
     /** Clamps the given index to the bounds of 0 and the tabs length. */
     clampTabIndex(index) {
@@ -1584,39 +2006,26 @@ class KbqTabGroup {
         if (currentSelectedTab === null) {
             return 0;
         }
-        return this.tabs?.toArray().indexOf(currentSelectedTab);
+        return this.tabs ? this.tabs.toArray().indexOf(currentSelectedTab) : 0;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqTabGroup, isStandalone: true, selector: "kbq-tab-group", inputs: { transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, onSurface: { classPropertyName: "onSurface", publicName: "onSurface", isSignal: true, isRequired: false, transformFunction: null }, underlined: { classPropertyName: "underlined", publicName: "underlined", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, dynamicHeight: { classPropertyName: "dynamicHeight", publicName: "dynamicHeight", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: false, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: false, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, 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, isSignal: true }, { propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true, isSignal: true }], exportAs: ["kbqTabGroup"], 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) {\n        <div\n            cdkMonitorElementFocus\n            kbqTabLabelWrapper\n            class=\"kbq-tab-label\"\n            [attr.tabindex]=\"getTabIndex(tab, $index)\"\n            [class.kbq-selected]=\"selectedIndex === $index\"\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            [class.kbq-tab-label_icon-only]=\"tab.iconOnlyLabel\"\n            [disabled]=\"tab.disabled\"\n            [id]=\"getTabLabelId($index)\"\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, $index)\"\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                @else {\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) {\n        <kbq-tab-body\n            [animationDuration]=\"animationDuration\"\n            [class.kbq-tab-body__active]=\"selectedIndex === $index\"\n            [content]=\"tab.content!\"\n            [id]=\"getTabContentId($index)\"\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-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-border-radius);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));--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: "component", type: KbqTabHeader, selector: "kbq-tab-header", inputs: ["underlined"], outputs: ["selectFocusedIndex", "indexFocused"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: KbqTabLabelWrapper, selector: "[kbqTabLabelWrapper]", inputs: ["tab", "disabled"] }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: KbqTabBody, selector: "kbq-tab-body", inputs: ["position", "content", "origin", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqTabGroup, isStandalone: true, selector: "kbq-tab-group", inputs: { transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, onSurface: { classPropertyName: "onSurface", publicName: "onSurface", isSignal: true, isRequired: false, transformFunction: null }, underlined: { classPropertyName: "underlined", publicName: "underlined", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, dynamicHeight: { classPropertyName: "dynamicHeight", publicName: "dynamicHeight", isSignal: true, isRequired: false, transformFunction: null }, selectedIndexInput: { classPropertyName: "selectedIndexInput", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, activeTabInput: { classPropertyName: "activeTabInput", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, headerPositionInput: { classPropertyName: "headerPositionInput", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, animationDurationInput: { classPropertyName: "animationDurationInput", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange", activeTabChange: "activeTabChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { 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_vertical": "vertical()", "class.kbq-tab-group_inverted-header": "headerPosition === \"below\"" }, classAttribute: "kbq-tab-group" }, providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => KbqTabGroup)) }], queries: [{ propertyName: "tabsQuery", predicate: KbqTab, isSignal: true }], viewQueries: [{ propertyName: "tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true, isSignal: true }], exportAs: ["kbqTabGroup"], usesOnChanges: true, hostDirectives: [{ directive: i1$1.KbqStateSaving, inputs: ["useStateSaving", "useStateSaving", "stateSavingKey", "stateSavingKey"] }], 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) {\n        <div\n            cdkMonitorElementFocus\n            kbqTabLabelWrapper\n            class=\"kbq-tab-label\"\n            role=\"tab\"\n            [attr.aria-controls]=\"getTabContentId($index)\"\n            [attr.aria-selected]=\"selectedIndex === $index\"\n            [attr.tabindex]=\"getTabIndex(tab, tabHeader, $index)\"\n            [class.kbq-selected]=\"selectedIndex === $index\"\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            [class.kbq-tab-label_icon-only]=\"tab.iconOnlyLabel\"\n            [disabled]=\"tab.disabled\"\n            [id]=\"getTabLabelId($index)\"\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, $index)\"\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                @else {\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) {\n        <kbq-tab-body\n            role=\"tabpanel\"\n            [animationDuration]=\"animationDuration\"\n            [attr.aria-labelledby]=\"getTabLabelId($index)\"\n            [attr.tabindex]=\"selectedIndex === $index ? 0 : null\"\n            [class.kbq-tab-body__active]=\"selectedIndex === $index\"\n            [content]=\"tab.content!\"\n            [id]=\"getTabContentId($index)\"\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-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-border-radius);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));--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: "component", type: KbqTabHeader, selector: "kbq-tab-header", inputs: ["underlined"], outputs: ["selectFocusedIndex", "indexFocused"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: KbqTabLabelWrapper, selector: "[kbqTabLabelWrapper]", inputs: ["tab", "disabled"] }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: KbqTabBody, selector: "kbq-tab-body", inputs: ["position", "origin", "content", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tab-group', imports: [KbqTabHeader, CdkMonitorFocus, KbqTabLabelWrapper, KbqTooltipTrigger, CdkPortalOutlet, KbqTabBody], providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => this)) }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'kbq-tab-group', imports: [KbqTabHeader, CdkMonitorFocus, KbqTabLabelWrapper, KbqTooltipTrigger, CdkPortalOutlet, KbqTabBody], providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => KbqTabGroup)) }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tab-group',
                         '[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"',
-                        '(window:resize)': 'resizeStream.next($event)'
-                    }, exportAs: 'kbqTabGroup', 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) {\n        <div\n            cdkMonitorElementFocus\n            kbqTabLabelWrapper\n            class=\"kbq-tab-label\"\n            [attr.tabindex]=\"getTabIndex(tab, $index)\"\n            [class.kbq-selected]=\"selectedIndex === $index\"\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            [class.kbq-tab-label_icon-only]=\"tab.iconOnlyLabel\"\n            [disabled]=\"tab.disabled\"\n            [id]=\"getTabLabelId($index)\"\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, $index)\"\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                @else {\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) {\n        <kbq-tab-body\n            [animationDuration]=\"animationDuration\"\n            [class.kbq-tab-body__active]=\"selectedIndex === $index\"\n            [content]=\"tab.content!\"\n            [id]=\"getTabContentId($index)\"\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-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-border-radius);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));--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: () => [], propDecorators: { tabs: [{
-                type: ContentChildren,
-                args: [KbqTab]
-            }], tabBodyWrapper: [{ type: i0.ViewChild, args: ['tabBodyWrapper', { isSignal: true }] }], tabHeader: [{ type: i0.ViewChild, args: ['tabHeader', { isSignal: true }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], onSurface: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSurface", required: false }] }], underlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlined", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], dynamicHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicHeight", required: false }] }], selectedIndex: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], activeTab: [{
-                type: Input
-            }], headerPosition: [{
-                type: Input
-            }], animationDuration: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], selectedIndexChange: [{ type: i0.Output, args: ["selectedIndexChange"] }], activeTabChange: [{ type: i0.Output, args: ["activeTabChange"] }], focusChange: [{ type: i0.Output, args: ["focusChange"] }], animationDone: [{ type: i0.Output, args: ["animationDone"] }], selectedTabChange: [{ type: i0.Output, args: ["selectedTabChange"] }] } });
+                        '[class.kbq-tab-group_vertical]': 'vertical()',
+                        '[class.kbq-tab-group_inverted-header]': 'headerPosition === "below"'
+                    }, hostDirectives: [
+                        { directive: KbqStateSaving, inputs: ['useStateSaving', 'stateSavingKey'] }
+                    ], exportAs: 'kbqTabGroup', 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) {\n        <div\n            cdkMonitorElementFocus\n            kbqTabLabelWrapper\n            class=\"kbq-tab-label\"\n            role=\"tab\"\n            [attr.aria-controls]=\"getTabContentId($index)\"\n            [attr.aria-selected]=\"selectedIndex === $index\"\n            [attr.tabindex]=\"getTabIndex(tab, tabHeader, $index)\"\n            [class.kbq-selected]=\"selectedIndex === $index\"\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            [class.kbq-tab-label_icon-only]=\"tab.iconOnlyLabel\"\n            [disabled]=\"tab.disabled\"\n            [id]=\"getTabLabelId($index)\"\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, $index)\"\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                @else {\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) {\n        <kbq-tab-body\n            role=\"tabpanel\"\n            [animationDuration]=\"animationDuration\"\n            [attr.aria-labelledby]=\"getTabLabelId($index)\"\n            [attr.tabindex]=\"selectedIndex === $index ? 0 : null\"\n            [class.kbq-tab-body__active]=\"selectedIndex === $index\"\n            [content]=\"tab.content!\"\n            [id]=\"getTabContentId($index)\"\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-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-border-radius);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));--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: () => [], propDecorators: { tabsQuery: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqTab), { isSignal: true }] }], tabBodyWrapper: [{ type: i0.ViewChild, args: ['tabBodyWrapper', { isSignal: true }] }], tabHeader: [{ type: i0.ViewChild, args: ['tabHeader', { isSignal: true }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], onSurface: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSurface", required: false }] }], underlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlined", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], dynamicHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicHeight", required: false }] }], selectedIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], activeTabInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], headerPositionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPosition", required: false }] }], animationDurationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], selectedIndexChange: [{ type: i0.Output, args: ["selectedIndexChange"] }], activeTabChange: [{ type: i0.Output, args: ["activeTabChange"] }], focusChange: [{ type: i0.Output, args: ["focusChange"] }], animationDone: [{ type: i0.Output, args: ["animationDone"] }], selectedTabChange: [{ type: i0.Output, args: ["selectedTabChange"] }] } });
 
 // Increasing integer for generating unique ids for tab nav components.
 let nextUniqueId = 0;
@@ -1628,20 +2037,59 @@ const TAB_PADDING = 12;
 class KbqTabNavBar extends KbqPaginatedTabHeader {
     constructor() {
         super(...arguments);
+        this.tabListContainerQuery = viewChild.required('tabListContainer');
+        this.scrollbarViewportQuery = viewChild.required('tabListContainer', { read: KbqScrollbarViewport });
+        this.tabListQuery = viewChild.required('tabList');
+        this.nextPaginatorQuery = viewChild.required('nextPaginator');
+        this.previousPaginatorQuery = viewChild.required('previousPaginator');
+        this.itemsQuery = contentChildren(forwardRef(() => KbqTabLink), { ...(ngDevMode ? { debugName: "itemsQuery" } : /* istanbul ignore next */ {}), descendants: true });
+        this.itemsList = kbqQueryListFrom(this.itemsQuery);
         this.isBrowser = inject(Platform).isBrowser;
         /** Whether the nav bar background should be transparent. */
-        this.transparent = input(false, ...(ngDevMode ? [{ debugName: "transparent", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.onSurface = input(false, ...(ngDevMode ? [{ debugName: "onSurface", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.transparent = input(false, { ...(ngDevMode ? { debugName: "transparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.onSurface = input(false, { ...(ngDevMode ? { debugName: "onSurface" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether the nav bar should be underlined. */
-        this.underlined = input(false, ...(ngDevMode ? [{ debugName: "underlined", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.underlined = input(false, { ...(ngDevMode ? { debugName: "underlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Associated tab panel controlled by the nav bar.
          */
-        this.tabNavPanel = input(...(ngDevMode ? [undefined, { debugName: "tabNavPanel" }] : []));
+        this.tabNavPanel = input(...(ngDevMode ? [undefined, { debugName: "tabNavPanel" }] : /* istanbul ignore next */ []));
+        /** `activeTabDisabled` as this view last rendered it: a link's `disabled` input gives this view no notice. */
+        this.checkedActiveTabDisabled = false;
+    }
+    /** The scroll container of the tab links. */
+    get tabListContainer() {
+        return this.tabListContainerQuery();
+    }
+    get scrollbarViewport() {
+        return this.scrollbarViewportQuery();
+    }
+    /** The element that holds the tab links. */
+    get tabList() {
+        return this.tabListQuery();
+    }
+    /** The pagination arrow towards the end of the tab list. */
+    get nextPaginator() {
+        return this.nextPaginatorQuery();
+    }
+    /** The pagination arrow towards the beginning of the tab list. */
+    get previousPaginator() {
+        return this.previousPaginatorQuery();
+    }
+    /** The tab links of the nav bar. */
+    get items() {
+        return this.itemsList();
     }
     get role() {
         return this.tabNavPanel() ? 'tablist' : this.elementRef.nativeElement.getAttribute('role');
     }
+    /**
+     * Vertical tablists are walked with ↑/↓ — ←/→ do nothing — so the orientation has to be announced.
+     * `aria-orientation` is only meaningful on a role that supports it, hence nothing without a panel.
+     */
+    get ariaOrientation() {
+        return this.role === 'tablist' && this.vertical ? 'vertical' : null;
+    }
     get activeTabOffsetWidth() {
         if (!this.isBrowser)
             return undefined;
@@ -1669,6 +2117,14 @@ class KbqTabNavBar extends KbqPaginatedTabHeader {
         });
         super.ngAfterContentInit();
     }
+    ngAfterContentChecked() {
+        super.ngAfterContentChecked();
+        const activeTabDisabled = this.activeTabDisabled;
+        if (activeTabDisabled !== this.checkedActiveTabDisabled) {
+            this.checkedActiveTabDisabled = activeTabDisabled;
+            this.changeDetectorRef.markForCheck();
+        }
+    }
     itemSelected() { }
     /** Notifies the component that the active link has been changed. */
     updateActiveLink() {
@@ -1679,6 +2135,7 @@ class KbqTabNavBar extends KbqPaginatedTabHeader {
         for (let i = 0; i < items.length; i++) {
             if (items[i].active) {
                 this.selectedIndex = i;
+                // Also marks the ancestors, whose check runs `ngAfterContentChecked` and scrolls to the link.
                 this.changeDetectorRef.markForCheck();
                 const tabNavPanel = this.tabNavPanel();
                 if (tabNavPanel) {
@@ -1690,14 +2147,15 @@ class KbqTabNavBar extends KbqPaginatedTabHeader {
         // 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: "20.3.30", ngImport: i0, type: KbqTabNavBar, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", type: KbqTabNavBar, isStandalone: true, selector: "[kbqTabNavBar], [kbq-tab-nav-bar]", inputs: { transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, onSurface: { classPropertyName: "onSurface", publicName: "onSurface", isSignal: true, isRequired: false, transformFunction: null }, underlined: { classPropertyName: "underlined", publicName: "underlined", isSignal: true, isRequired: false, transformFunction: null }, tabNavPanel: { classPropertyName: "tabNavPanel", publicName: "tabNavPanel", isSignal: true, isRequired: false, transformFunction: null } }, 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", "class.kbq-tab-header_rtl": "getLayoutDirection() == 'rtl'", "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\" color=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    class=\"kbq-tab-link__container kbq-tab-header__scroll-container\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"!disableScrollBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"!disableScrollAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\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                [class.kbq-disabled]=\"activeTabDisabled\"\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\" color=\"contrast\"></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:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.kbq-tab-header__scroll-container::-webkit-scrollbar{display:none}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto;scrollbar-width:auto}.kbq-tab-group_vertical .kbq-tab-header__scroll-container::-webkit-scrollbar{display:block}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1}.kbq-tab-nav-bar.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-link__container{overflow:visible}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.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-border-radius);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));--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-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;overflow:hidden;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-link.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0!important;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-link.kbq-tab-label_icon-only:not(.kbq-tab-label_vertical):after{content:\"\";display:block;position:absolute;top:0;bottom:0;left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));background:transparent}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link.kbq-tab-label_vertical.kbq-tab-label_icon-only{margin-inline:0;justify-content:center}.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.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabNavBar, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqTabNavBar, isStandalone: true, selector: "[kbqTabNavBar], [kbq-tab-nav-bar]", inputs: { transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, onSurface: { classPropertyName: "onSurface", publicName: "onSurface", isSignal: true, isRequired: false, transformFunction: null }, underlined: { classPropertyName: "underlined", publicName: "underlined", isSignal: true, isRequired: false, transformFunction: null }, tabNavPanel: { classPropertyName: "tabNavPanel", publicName: "tabNavPanel", isSignal: true, isRequired: false, transformFunction: null } }, 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-group_vertical": "vertical", "class.kbq-tab-header__pagination-controls_enabled": "showPaginationControls", "class.kbq-tab-header_rtl": "getLayoutDirection() == 'rtl'", "attr.role": "role", "attr.aria-orientation": "ariaOrientation" }, classAttribute: "kbq-tab-nav-bar" }, queries: [{ propertyName: "itemsQuery", predicate: i0.forwardRef(() => KbqTabLink), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tabListContainerQuery", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "scrollbarViewportQuery", first: true, predicate: ["tabListContainer"], descendants: true, read: KbqScrollbarViewport, isSignal: true }, { propertyName: "tabListQuery", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "nextPaginatorQuery", first: true, predicate: ["nextPaginator"], descendants: true, isSignal: true }, { propertyName: "previousPaginatorQuery", first: true, predicate: ["previousPaginator"], descendants: true, isSignal: 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\" color=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    kbqScrollbarViewport\n    class=\"kbq-tab-link__container kbq-tab-header__scroll-container\"\n    [kbqScrollbarMode]=\"scrollbarMode\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"!disableScrollBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"!disableScrollAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                aria-hidden=\"true\"\n                class=\"kbq-tab-list__active-tab-underline\"\n                [class.kbq-animations-disabled]=\"animationsDisabled\"\n                [class.kbq-disabled]=\"activeTabDisabled\"\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\" color=\"contrast\"></i>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{animation:none;transition:none}}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1}.kbq-tab-nav-bar.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-link__container{overflow:visible}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.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-border-radius);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));--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", "@charset \"UTF-8\";.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)}@supports (corner-shape: squircle){.kbq-tab-link{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-item-border-radius) * 1.85,var(--kbq-tabs-size-tab-item-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-item-border-radius) * 2)}}.kbq-tab-link{outline:none}.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;overflow:hidden;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-link.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-link.kbq-tab-label_icon-only:not(.kbq-tab-label_vertical):after{content:\"\";display:block;position:absolute;top:0;bottom:0;left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));background:transparent}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link.kbq-tab-label_vertical.kbq-tab-label_icon-only{margin-inline:0;justify-content:center}.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.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabNavBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabNavBar, decorators: [{
             type: Component,
             args: [{ selector: '[kbqTabNavBar], [kbq-tab-nav-bar]', imports: [
                         KbqIconModule,
-                        CdkObserveContent
+                        CdkObserveContent,
+                        KbqScrollbarViewport
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tab-nav-bar',
                         '[class.kbq-tab-nav-bar_filled]': '!transparent()',
@@ -1705,40 +2163,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[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-group_vertical]': 'vertical',
                         '[class.kbq-tab-header__pagination-controls_enabled]': 'showPaginationControls',
                         '[class.kbq-tab-header_rtl]': "getLayoutDirection() == 'rtl'",
-                        '[attr.role]': 'role'
-                    }, exportAs: 'kbqTabNavBar', 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\" color=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    class=\"kbq-tab-link__container kbq-tab-header__scroll-container\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"!disableScrollBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"!disableScrollAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\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                [class.kbq-disabled]=\"activeTabDisabled\"\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\" color=\"contrast\"></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:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.kbq-tab-header__scroll-container::-webkit-scrollbar{display:none}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto;scrollbar-width:auto}.kbq-tab-group_vertical .kbq-tab-header__scroll-container::-webkit-scrollbar{display:block}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1}.kbq-tab-nav-bar.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-link__container{overflow:visible}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.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-border-radius);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));--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-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;overflow:hidden;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-link.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0!important;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-link.kbq-tab-label_icon-only:not(.kbq-tab-label_vertical):after{content:\"\";display:block;position:absolute;top:0;bottom:0;left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));background:transparent}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link.kbq-tab-label_vertical.kbq-tab-label_icon-only{margin-inline:0;justify-content:center}.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: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], onSurface: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSurface", required: false }] }], underlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlined", required: false }] }], tabNavPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabNavPanel", required: false }] }] } });
+                        '[attr.role]': 'role',
+                        '[attr.aria-orientation]': 'ariaOrientation'
+                    }, exportAs: 'kbqTabNavBar', 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\" color=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    kbqScrollbarViewport\n    class=\"kbq-tab-link__container kbq-tab-header__scroll-container\"\n    [kbqScrollbarMode]=\"scrollbarMode\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"!disableScrollBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"!disableScrollAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                aria-hidden=\"true\"\n                class=\"kbq-tab-list__active-tab-underline\"\n                [class.kbq-animations-disabled]=\"animationsDisabled\"\n                [class.kbq-disabled]=\"activeTabDisabled\"\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\" color=\"contrast\"></i>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{animation:none;transition:none}}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1}.kbq-tab-nav-bar.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-link__container{overflow:visible}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.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-border-radius);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));--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", "@charset \"UTF-8\";.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)}@supports (corner-shape: squircle){.kbq-tab-link{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-item-border-radius) * 1.85,var(--kbq-tabs-size-tab-item-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-item-border-radius) * 2)}}.kbq-tab-link{outline:none}.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;overflow:hidden;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-link.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-link.kbq-tab-label_icon-only:not(.kbq-tab-label_vertical):after{content:\"\";display:block;position:absolute;top:0;bottom:0;left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));background:transparent}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link.kbq-tab-label_vertical.kbq-tab-label_icon-only{margin-inline:0;justify-content:center}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}\n"] }]
+        }], propDecorators: { tabListContainerQuery: [{ type: i0.ViewChild, args: ['tabListContainer', { isSignal: true }] }], scrollbarViewportQuery: [{ type: i0.ViewChild, args: ['tabListContainer', { ...{ read: KbqScrollbarViewport }, isSignal: true }] }], tabListQuery: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], nextPaginatorQuery: [{ type: i0.ViewChild, args: ['nextPaginator', { isSignal: true }] }], previousPaginatorQuery: [{ type: i0.ViewChild, args: ['previousPaginator', { isSignal: true }] }], itemsQuery: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqTabLink), { ...{ descendants: true }, isSignal: true }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], onSurface: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSurface", required: false }] }], underlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlined", required: false }] }], tabNavPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabNavPanel", required: false }] }] } });
 /**
  * Link inside of a KbqTabNavBar.
  */
 class KbqTabLink {
     constructor() {
+        /** @docs-private */
+        this.idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+        /** @docs-private */
+        this.activeInput = input(undefined, { ...(ngDevMode ? { debugName: "activeInput" } : /* istanbul ignore next */ {}), alias: 'active',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.tabIndexInput = input(undefined, { ...(ngDevMode ? { debugName: "tabIndexInput" } : /* istanbul ignore next */ {}), alias: 'tabIndex',
+            transform: kbqOptionalNumberAttribute });
+        this.uniqueId = `kbq-tab-link-${nextUniqueId++}`;
         /** Unique id for the link. */
-        // TODO: Skipped for migration because:
-        //  Class of this input is referenced in the signature of another class.
-        this.id = `kbq-tab-link-${nextUniqueId++}`;
+        this.id = this.uniqueId;
         /** Whether the tab link is active or not. */
         this._active = false;
         /** Whether the tab link is disabled. */
-        // TODO: Skipped for migration because:
-        //  Class of this input is referenced in the signature of another class.
         this.disabled = false;
         this._tabIndex = 0;
         this.elementRef = inject(ElementRef);
@@ -1747,8 +2200,6 @@ class KbqTabLink {
         this.tabNavBar = inject(KbqTabNavBar);
     }
     /** Whether the link is active. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get active() {
         return this._active;
     }
@@ -1765,8 +2216,6 @@ class KbqTabLink {
         return this.tabNavBar.underlined();
     }
     /** Link tab index. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get tabIndex() {
         if (this.tabNavBar.tabNavPanel()) {
             return this.active && !this.disabled ? this._tabIndex : -1;
@@ -1800,6 +2249,26 @@ class KbqTabLink {
     get ariaCurrent() {
         return this.active && !this.tabNavBar.tabNavPanel() ? 'page' : null;
     }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member, except that `undefined` resets a member
+        // typed without it to its default; unbound, it leaves what code wrote.
+        if (changes['idInput']) {
+            this.id = this.idInput() ?? this.uniqueId;
+        }
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
+        }
+        if (changes['tabIndexInput'])
+            this.tabIndex = this.tabIndexInput() ?? 0;
+        // Last: the nav bar reads the id of the link that becomes active.
+        if (changes['activeInput']) {
+            const active = this.activeInput();
+            if (active !== undefined)
+                this.active = active;
+        }
+    }
     ngAfterViewInit() {
         this.focusMonitor.monitor(this.elementRef.nativeElement);
         this.addClassModifierForIcons(Array.from(this.elementRef.nativeElement.querySelectorAll('.kbq-icon')));
@@ -1858,10 +2327,10 @@ class KbqTabLink {
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.30", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqTabLink, isStandalone: true, selector: "[kbqTabLink], [kbq-tab-link]", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, activeInput: { classPropertyName: "activeInput", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabIndexInput: { classPropertyName: "tabIndexInput", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, 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.aria-disabled": "disabled", "attr.aria-selected": "ariaSelected", "attr.role": "role", "attr.aria-controls": "ariaControls", "attr.aria-current": "ariaCurrent" }, classAttribute: "kbq-tab-link" }, exportAs: ["kbqTabLink"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabLink, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTabLink], [kbq-tab-link]',
@@ -1874,7 +2343,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[class.kbq-disabled]': 'disabled',
                         '[attr.id]': 'id',
                         '[attr.tabindex]': 'tabIndex',
-                        '[attr.disabled]': 'disabled || null',
+                        // No `[attr.disabled]`: the directive sits on an `<a>`, where `disabled` is not a valid
+                        // attribute and no assistive technology reads it. Styling goes through `.kbq-disabled`.
                         '[attr.aria-disabled]': 'disabled',
                         '[attr.aria-selected]': 'ariaSelected',
                         '[attr.role]': 'role',
@@ -1885,30 +2355,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     },
                     exportAs: 'kbqTabLink'
                 }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], active: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], tabIndex: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }] } });
+        }], propDecorators: { idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], activeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }] } });
 /**
  * Tab panel component associated with KbqTabNav.
  */
 class KbqTabNavPanel {
     constructor() {
         /** Unique id for the tab panel. */
-        this.id = input(`kbq-tab-nav-panel-${nextUniqueId++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.id = input(`kbq-tab-nav-panel-${nextUniqueId++}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabNavPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqTabNavPanel, isStandalone: true, selector: "[kbqTabNavPanel]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.id": "id()", "attr.aria-labelledby": "activeTabId" }, classAttribute: "kbq-tab-nav-panel" }, exportAs: ["kbqTabNavPanel"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabNavPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqTabNavPanel, isStandalone: true, selector: "[kbqTabNavPanel]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, 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: "20.3.30", ngImport: i0, type: KbqTabNavPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabNavPanel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTabNavPanel]',
@@ -1942,8 +2401,8 @@ const COMPONENTS = [
     KbqVerticalTabsCssStyler
 ];
 class KbqTabsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqTabsModule, imports: [PortalModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqTabsModule, imports: [PortalModule,
             A11yModule,
             CdkScrollableModule,
             KbqIconModule,
@@ -1975,14 +2434,14 @@ class KbqTabsModule {
             KbqVerticalTabsCssStyler, KbqTabNavBar,
             KbqTabLink,
             KbqTabNavPanel] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabsModule, imports: [PortalModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabsModule, imports: [PortalModule,
             A11yModule,
             CdkScrollableModule,
             KbqIconModule,
             KbqToolTipModule, KbqTabNavBar, KbqTabGroup,
             KbqTabHeader] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2006,5 +2465,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_TABS_CONFIG, KBQ_TAB_LABEL, KbqAlignTabsCenterCssStyler, KbqAlignTabsEndCssStyler, KbqStretchTabsCssStyler, KbqTab, KbqTabBody, KbqTabBodyPortal, KbqTabChangeEvent, KbqTabContent, KbqTabGroup, KbqTabHeader, KbqTabLabel, KbqTabLabelWrapper, KbqTabLink, KbqTabNavBar, KbqTabNavPanel, KbqTabsModule, KbqVerticalTabsCssStyler, kbqTabsAnimations };
+export { KBQ_TABS_CONFIG, KBQ_TAB_LABEL, KbqAlignTabsCenterCssStyler, KbqAlignTabsEndCssStyler, KbqPaginatedTabHeader, KbqStretchTabsCssStyler, KbqTab, KbqTabBody, KbqTabBodyPortal, KbqTabChangeEvent, KbqTabContent, KbqTabGroup, KbqTabHeader, KbqTabLabel, KbqTabLabelWrapper, KbqTabLink, KbqTabNavBar, KbqTabNavPanel, KbqTabsModule, KbqVerticalTabsCssStyler };
 //# sourceMappingURL=koobiq-components-tabs.mjs.map