@koobiq/components 20.3.2 → 20.4.0

package/fesm2022/koobiq-components-tabs.mjs

@@ -1,13 +1,13 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { CdkPortalOutlet, CdkPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
-import { CdkScrollable, ViewportRuler, CdkScrollableModule } from '@angular/cdk/scrolling';
+import { CdkScrollable, CdkScrollableModule } from '@angular/cdk/scrolling';
 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, fromEvent, of, merge, timer } from 'rxjs';
-import { startWith, takeUntil, debounceTime } from 'rxjs/operators';
+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, PopUpPlacements, KBQ_SELECT_SCROLL_STRATEGY, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, isUndefined, KBQ_PARENT_ANIMATION_COMPONENT } from '@koobiq/components/core';
+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 { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
 import { CdkObserveContent } from '@angular/cdk/observers';
 import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
@@ -15,6 +15,7 @@ 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';
 
@@ -225,11 +226,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
 
 /** Config used to bind passive event listeners */
 const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
-/**
- * The distance in pixels that will be overshot when scrolling a tab label into view. This helps
- * provide a small affordance to the label next to it.
- */
-const EXAGGERATED_OVERSCROLL = 60;
 /**
  * Amount of milliseconds to wait before starting to scroll the header automatically.
  * Set a little conservatively in order to handle fake events dispatched on touch devices.
@@ -240,8 +236,32 @@ const HEADER_SCROLL_DELAY = 650;
  * while the user is holding their pointer.
  */
 const HEADER_SCROLL_INTERVAL = 100;
-const VIEWPORT_THROTTLE_TIME = 150;
+/** Fraction of the viewport width scrolled per arrow click/press tick. */
 const SCROLL_DISTANCE = 0.8;
+/** Minimum horizontal pointer movement (px) before a pointerdown is treated as a drag rather than a click. */
+const DRAG_THRESHOLD = 4;
+/** Below this speed (px/ms) an inertia coast stops. */
+const MIN_INERTIA_VELOCITY = 0.02;
+/** Clamp applied to the smoothed drag velocity so a jittery fast flick can't launch a huge coast. */
+const MAX_INERTIA_VELOCITY = 3;
+/** Clamp on a single inertia animation frame's elapsed time, guarding against dropped frames/backgrounded tabs. */
+const MAX_FRAME_DURATION = 32;
+/** Per-millisecond exponential decay rate applied to the inertia velocity. */
+const FRICTION_PER_MILLISECOND = 0.003;
+/** Audit interval (ms) for the scroll-box `ResizeObserver` — see the `auditTime` usage below. */
+const RESIZE_AUDIT_TIME = 100;
+/** Debounce (ms) for scroll-correction requests, so a burst of focus/selection changes settles before scrolling. */
+const SCROLL_CORRECTION_DEBOUNCE = 100;
+/** How often (ms) scroll/drag updates are allowed to trigger Angular change detection (arrow visibility, mask). */
+const SCROLL_CD_THROTTLE = 48;
+/** Applied to the scroll container while a drag gesture is in progress. */
+const DRAGGING_CLASS = 'kbq-tab-header__scroll-container_dragging';
+/**
+ * Matches nested interactive controls (e.g. a tab's remove button) that have their own click
+ * behavior and are too small to reliably press without a few stray pixels of movement — a drag
+ * should never start on them, since crossing `DRAG_THRESHOLD` by accident would swallow their click.
+ */
+const NON_DRAGGABLE_TARGET_SELECTOR = 'button, [kbq-icon-button], input, select, textarea';
 /**
  * Base class for a tab header that supported pagination.
  * @docs-private
@@ -270,17 +290,6 @@ class KbqPaginatedTabHeader {
         }
         this.keyManager.setActiveItem(value);
     }
-    /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
-    get scrollDistance() {
-        return this._scrollDistance;
-    }
-    set scrollDistance(v) {
-        this._scrollDistance = Math.max(0, Math.min(this.getMaxScrollDistance(), v));
-        // Mark that the scroll distance has changed so that after the view is checked, the CSS
-        // transformation can move the header.
-        this.scrollDistanceChanged = true;
-        this.checkScrollingControls();
-    }
     /** Whether the tabs should be displayed vertically. */
     // TODO: Skipped for migration because:
     //  Accessor inputs cannot be migrated as they are too complex.
@@ -295,8 +304,6 @@ class KbqPaginatedTabHeader {
     }
     constructor() {
         this._selectedIndex = 0;
-        /** The distance in pixels that the tab labels should be translated to the left. */
-        this._scrollDistance = 0;
         /** Event emitted when the option is selected. */
         this.selectFocusedIndex = new EventEmitter();
         /** Event emitted when a label is focused. */
@@ -319,14 +326,39 @@ class KbqPaginatedTabHeader {
         this.stopScrolling = new Subject();
         /** Whether the header should scroll to the selected index after the view has been checked. */
         this.selectedIndexChanged = false;
+        /** State of the in-progress mouse/pen drag gesture, if any. */
+        this.dragState = null;
+        /** `requestAnimationFrame` handle for an in-progress inertia coast, if any. */
+        this.inertiaFrameId = null;
+        /** Set after a drag gesture so the click it would otherwise trigger on a tab is suppressed. */
+        this.suppressNextClick = false;
+        /** Handle of the timer that clears {@link suppressNextClick}, so it can be cancelled on destroy. */
+        this.suppressClickTimeoutId = null;
+        // Attached only while a drag is possibly in progress (from `pointerdown` to `pointerup`/
+        // `pointercancel`) rather than for the component's whole lifetime: bound to `ownerDocument`,
+        // so every pointer move anywhere on the page would otherwise run this handler for every
+        // paginated tab header on the page, whether or not any of them is actually being dragged.
+        this.documentPointerMoveListener = (event) => this.handlePointerMove(event);
+        this.documentPointerUpListener = (event) => this.endDrag(event, true);
+        this.documentPointerCancelListener = (event) => this.endDrag(event, false);
+        /** Emits on every native `scroll` event and drag/inertia frame; throttled to limit change detection. */
+        this.scrollProgress = new Subject();
+        /**
+         * Emits scroll-correction requests (from focus or selection changes); debounced so a burst
+         * settles once. `ReplaySubject(1)`, not `Subject`: content hooks (where the very first request,
+         * from `ngAfterContentChecked`, is sent) run before view hooks in the same initial change-
+         * detection pass, so a plain `Subject` would drop it — the `ngAfterViewInit` subscription below
+         * doesn't exist yet when it's emitted.
+         */
+        this.scrollCorrectionRequest = new ReplaySubject(1);
         this.destroyRef = inject(DestroyRef);
         this.elementRef = inject(ElementRef);
         this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.viewportRuler = inject(ViewportRuler);
         this.ngZone = inject(NgZone);
         this.platform = inject(Platform);
         this.dir = inject(Directionality, { optional: true });
         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.ngZone.runOutsideAngular(() => {
             fromEvent(this.elementRef.nativeElement, 'mouseleave')
@@ -343,10 +375,70 @@ class KbqPaginatedTabHeader {
         fromEvent(this.nextPaginator.nativeElement, 'touchstart', passiveEventListenerOptions)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.handlePaginatorPress('after'));
+        this.ngZone.runOutsideAngular(() => {
+            const container = this.tabListContainer.nativeElement;
+            fromEvent(container, 'scroll', passiveEventListenerOptions)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                // A `vertical`/`disablePagination` header still fires native `scroll` events
+                // (e.g. `kbq-tab-group_vertical`'s own `overflow-y: auto`); without this guard
+                // every one of them would still throttle-trigger a whole-app change-detection
+                // tick for four booleans that `updateScrollState` has already pinned to a
+                // constant and can never change.
+                if (this.disablePagination)
+                    return;
+                this.updateScrollState();
+                this.scrollProgress.next();
+            });
+            // Any wheel/trackpad input should immediately take over from a running inertia coast.
+            fromEvent(container, 'wheel', passiveEventListenerOptions)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.cancelInertia());
+            fromEvent(container, 'pointerdown')
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((event) => this.handlePointerDown(event));
+            // A native drag-and-drop gesture (e.g. starting on a `kbqTabLink`'s `<a href>`) would
+            // otherwise hijack our own pointer-based drag partway through, aborting the gesture via
+            // a `pointercancel` while a browser-native drag ghost follows the cursor instead.
+            fromEvent(container, 'dragstart')
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((event) => {
+                if (this.dragState?.didDrag)
+                    event.preventDefault();
+            });
+            // Fallback for when capture is lost without a `pointerup`/`pointercancel` of its own
+            // reaching us (e.g. the element is detached, or another element steals capture).
+            fromEvent(container, 'lostpointercapture')
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((event) => this.endDrag(event, true));
+            fromEvent(container, 'click', { capture: true })
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((event) => {
+                if (this.suppressNextClick) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.suppressNextClick = false;
+                }
+            });
+            this.scrollProgress
+                .pipe(auditTime(SCROLL_CD_THROTTLE), takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.ngZone.run(() => this.changeDetectorRef.markForCheck()));
+        });
+        // Covers layout changes that resize the scroll box without a `scroll` event of their own
+        // (e.g. a sidebar toggling, not just the window resizing). `auditTime`, not `debounceTime`:
+        // a `debounceTime` only emits once a live resize (e.g. dragging a window edge or a splitter
+        // pane) has stopped for a full `RESIZE_AUDIT_TIME`, so pagination stays frozen — arrows
+        // hidden, drag-scroll dead, no edge mask — for the whole drag instead of updating as it goes.
+        this.sharedResizeObserver
+            .observe(this.tabListContainer.nativeElement)
+            .pipe(auditTime(RESIZE_AUDIT_TIME), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.updatePagination());
+        this.scrollCorrectionRequest
+            .pipe(debounceTime(SCROLL_CORRECTION_DEBOUNCE), takeUntilDestroyed(this.destroyRef))
+            .subscribe(({ index, behavior }) => this.scrollCorrection(index, behavior));
     }
     ngAfterContentInit() {
         const dirChange = this.dir ? this.dir.change : of('ltr');
-        const resize = this.viewportRuler.change(VIEWPORT_THROTTLE_TIME);
         const realign = () => {
             this.updatePagination();
         };
@@ -360,18 +452,15 @@ class KbqPaginatedTabHeader {
         else {
             realign();
         }
-        // On dir change or window resize, realign the ink bar and update the orientation of
-        // the key manager if the direction has changed.
-        merge(dirChange, resize, this.items.changes)
+        // On dir change or content change, realign and update the orientation of the key manager
+        // if the direction has changed. Container resize is handled separately by the `ResizeObserver`.
+        merge(dirChange, this.items.changes)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             // We need to defer this to give the browser some time to recalculate
             // the element dimensions. The call has to be wrapped in `NgZone.run`,
-            // because the viewport change handler runs outside of Angular.
-            this.ngZone.run(() => Promise.resolve().then(() => {
-                this.updateScrollPosition();
-                realign();
-            }));
+            // because the direction change handler can run outside of Angular.
+            this.ngZone.run(() => Promise.resolve().then(realign));
             this.keyManager.withHorizontalOrientation(this.getLayoutDirection());
         });
         // If there is a change in the focus key manager we need to emit the `indexFocused`
@@ -389,23 +478,19 @@ class KbqPaginatedTabHeader {
             this.tabLabelCount = this.items.length;
             this.changeDetectorRef.markForCheck();
         }
-        // If the selected index has changed, scroll to the label and check if the scrolling controls
-        // should be disabled.
+        // If the selected index has changed, scroll to the label.
         if (this.selectedIndexChanged) {
-            this.scrollToLabel(this._selectedIndex);
-            this.checkScrollingControls();
             this.selectedIndexChanged = false;
-            this.changeDetectorRef.markForCheck();
-        }
-        // If the scroll distance has been changed (tab selected, focused, scroll controls activated),
-        // then translate the header to reflect this.
-        if (this.scrollDistanceChanged) {
-            this.updateTabScrollPosition();
-            this.scrollDistanceChanged = false;
+            this.scrollCorrectionRequest.next({ index: this._selectedIndex, behavior: 'smooth' });
             this.changeDetectorRef.markForCheck();
         }
     }
     ngOnDestroy() {
+        this.cancelDrag();
+        this.cancelInertia();
+        if (this.suppressClickTimeoutId !== null) {
+            this.window.clearTimeout(this.suppressClickTimeoutId);
+        }
         this.stopScrolling.complete();
     }
     handleKeydown(event) {
@@ -468,8 +553,8 @@ class KbqPaginatedTabHeader {
         if (!this.platform.isBrowser)
             return;
         this.checkPaginationEnabled();
-        this.checkScrollingControls();
-        this.updateTabScrollPosition();
+        this.updateScrollState();
+        this.changeDetectorRef.markForCheck();
     }
     /**
      * Determines if an index is valid.  If the tabs are not ready yet, we assume that the user is
@@ -487,107 +572,38 @@ class KbqPaginatedTabHeader {
      * scrolling is enabled.
      */
     setTabFocus(tabIndex) {
+        if (!this.items?.length)
+            return;
+        const item = this.items.toArray()[tabIndex];
+        // Prevent the browser's own scroll-into-view behavior so the scroll-correction request
+        // below is the only thing driving the scroll position.
+        item.elementRef.nativeElement.focus({ preventScroll: true });
         if (this.showPaginationControls) {
-            this.scrollToLabel(tabIndex);
-        }
-        if (this.items?.length) {
-            this.items.toArray()[tabIndex].focus();
-            // Do not let the browser manage scrolling to focus the element, this will be handled
-            // by using translation. In LTR, the scroll left should be 0. In RTL, the scroll width
-            // should be the full width minus the offset width.
-            const containerEl = this.tabListContainer.nativeElement;
-            const dir = this.getLayoutDirection();
-            if (dir === 'ltr') {
-                containerEl.scrollLeft = 0;
-            }
-            else {
-                containerEl.scrollLeft = containerEl.scrollWidth - containerEl.offsetWidth;
-            }
+            this.scrollCorrectionRequest.next({ index: tabIndex, behavior: 'auto' });
         }
     }
     /** The layout direction of the containing app. */
     getLayoutDirection() {
         return this.dir?.value === 'rtl' ? 'rtl' : 'ltr';
     }
-    /** Performs the CSS transformation on the tab list that will cause the list to scroll. */
-    updateTabScrollPosition() {
-        if (this.disablePagination) {
-            return;
-        }
-        const scrollDistance = this.scrollDistance;
-        const translateX = this.getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance;
-        // Don't use `translate3d` here because we don't want to create a new layer. A new layer
-        // seems to cause flickering and overflow in Internet Explorer. For example, the ink bar
-        // and ripples will exceed the boundaries of the visible tab bar.
-        // See: https://github.com/angular/components/issues/10276
-        // We round the `transform` here, because transforms with sub-pixel precision cause some
-        // browsers to blur the content of the element.
-        this.tabList.nativeElement.style.transform = `translateX(${Math.round(translateX)}px)`;
-        // Setting the `transform` on IE will change the scroll offset of the parent, causing the
-        // position to be thrown off in some cases. We have to reset it ourselves to ensure that
-        // it doesn't get thrown off. Note that we scope it only to IE and Edge, because messing
-        // with the scroll position throws off Chrome 71+ in RTL mode (see #14689).
-        if (this.platform.TRIDENT || this.platform.EDGE) {
-            this.tabListContainer.nativeElement.scrollLeft = 0;
-        }
-    }
     /**
      * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
-     * the end of the list, respectively). The distance to scroll is computed to be a third of the
-     * length of the tab list view window.
+     * the end of the list, respectively).
      *
      * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
      * should be called sparingly.
      */
     scrollHeader(direction) {
-        const viewLength = this.tabListContainer.nativeElement.offsetWidth;
-        // Move the scroll distance one-third the length of the tab list's viewport.
-        const scrollAmount = (direction === 'before' ? -1 : 1) * viewLength * SCROLL_DISTANCE;
-        return this.scrollTo(this.scrollDistance + scrollAmount);
+        const container = this.tabListContainer.nativeElement;
+        const viewLength = container.clientWidth;
+        const amount = (direction === 'before' ? -1 : 1) * viewLength * SCROLL_DISTANCE;
+        this.scroll(this.logicalScrollPosition + amount);
     }
     /** Handles click events on the pagination arrows. */
     handlePaginatorClick(direction) {
         this.stopInterval();
         this.scrollHeader(direction);
     }
-    /**
-     * Moves the tab list such that the desired tab label (marked by index) is moved into view.
-     *
-     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
-     * should be called sparingly.
-     */
-    scrollToLabel(labelIndex) {
-        if (this.disablePagination) {
-            return;
-        }
-        const selectedLabel = this.items ? this.items.toArray()[labelIndex] : null;
-        if (!selectedLabel) {
-            return;
-        }
-        // The view length is the visible width of the tab labels.
-        const viewLength = this.tabListContainer.nativeElement.offsetWidth;
-        const { offsetLeft, offsetWidth } = selectedLabel.elementRef.nativeElement;
-        let labelBeforePos;
-        let labelAfterPos;
-        if (this.getLayoutDirection() === 'ltr') {
-            labelBeforePos = offsetLeft;
-            labelAfterPos = labelBeforePos + offsetWidth;
-        }
-        else {
-            labelAfterPos = this.tabList.nativeElement.offsetWidth - offsetLeft;
-            labelBeforePos = labelAfterPos - offsetWidth;
-        }
-        const beforeVisiblePos = this.scrollDistance;
-        const afterVisiblePos = this.scrollDistance + viewLength;
-        if (labelBeforePos < beforeVisiblePos) {
-            // Scroll header to move label to the before direction
-            this.scrollDistance -= beforeVisiblePos - labelBeforePos + EXAGGERATED_OVERSCROLL;
-        }
-        else if (labelAfterPos > afterVisiblePos) {
-            // Scroll header to move label to the after direction
-            this.scrollDistance += labelAfterPos - afterVisiblePos + EXAGGERATED_OVERSCROLL;
-        }
-    }
     /**
      * Evaluate whether the pagination controls should be displayed. If the scroll width of the
      * tab list is wider than the size of the header container, then the pagination controls should
@@ -599,49 +615,23 @@ class KbqPaginatedTabHeader {
     checkPaginationEnabled() {
         if (this.disablePagination) {
             this.showPaginationControls = false;
+            return;
         }
-        else {
-            const isEnabled = this.tabList.nativeElement.scrollWidth > this.elementRef.nativeElement.offsetWidth;
-            if (!isEnabled) {
-                this.scrollDistance = 0;
-            }
-            if (isEnabled !== this.showPaginationControls) {
-                this.changeDetectorRef.markForCheck();
-            }
-            this.showPaginationControls = isEnabled;
-        }
-    }
-    /**
-     * Evaluate whether the before and after controls should be enabled or disabled.
-     * If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
-     * before button. If the header is at the end of the list (scroll distance is equal to the
-     * maximum distance we can scroll), then disable the after button.
-     *
-     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
-     * should be called sparingly.
-     */
-    checkScrollingControls() {
-        if (this.disablePagination) {
-            this.disableScrollAfter = this.disableScrollBefore = true;
-        }
-        else {
-            // Check if the pagination arrows should be activated.
-            this.disableScrollBefore = this.scrollDistance === 0;
-            this.disableScrollAfter = this.scrollDistance === this.getMaxScrollDistance();
+        const container = this.tabListContainer.nativeElement;
+        // Tolerated rather than an exact `>`: an overflow no larger than the metrics' own measurement
+        // error is not scrollable, and mounting arrows for it would put the header on both bounds at
+        // once. `updateScrollState` spends the same tolerance on the far bound only, so anything that
+        // does mount here has a scroll range wider than that bound.
+        const isEnabled = kbqHasScrollOverflow(container);
+        if (!isEnabled) {
+            this.cancelDrag();
+            this.cancelInertia();
+            container.scrollLeft = 0;
+        }
+        if (isEnabled !== this.showPaginationControls) {
             this.changeDetectorRef.markForCheck();
         }
-    }
-    /**
-     * Determines what is the maximum length in pixels that can be set for the scroll distance. This
-     * is equal to the difference in width between the tab list container and tab header container.
-     *
-     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
-     * should be called sparingly.
-     */
-    getMaxScrollDistance() {
-        const lengthOfTabList = this.tabList.nativeElement.scrollWidth;
-        const viewLength = this.tabListContainer.nativeElement.offsetWidth;
-        return lengthOfTabList - viewLength || 0;
+        this.showPaginationControls = isEnabled;
     }
     /** Stops the currently-running paginator interval.  */
     stopInterval() {
@@ -665,35 +655,285 @@ class KbqPaginatedTabHeader {
             // Keep the timer going until something tells it to stop or the component is destroyed.
             .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.stopScrolling))
             .subscribe(() => {
-            const { maxScrollDistance, distance } = this.scrollHeader(direction);
-            // Stop the timer if we've reached the start or the end.
-            if (distance === 0 || distance >= maxScrollDistance) {
+            // Read live scroll metrics rather than `disableScrollBefore`/`disableScrollAfter`:
+            // those are only refreshed by the native `scroll` event, which lags a `smooth`
+            // `scrollHeader` write by more than one `HEADER_SCROLL_INTERVAL` tick. Checking the
+            // bound matching `direction` (not either bound) also stops the repeat exactly once
+            // that side is reached, instead of the moment the *other* side happens to be at rest.
+            this.updateScrollState();
+            if (direction === 'before' ? this.disableScrollBefore : this.disableScrollAfter) {
                 this.stopInterval();
+                return;
             }
+            this.scrollHeader(direction);
         });
     }
     /**
-     * Scrolls the header to a given position.
-     * @param position Position to which to scroll.
-     * @returns Information on the current scroll distance and the maximum.
+     * 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
+     * sign so callers can reason about "before"/"after" without checking direction themselves.
+     */
+    get logicalScrollPosition() {
+        const scrollLeft = this.tabListContainer.nativeElement.scrollLeft;
+        return this.getLayoutDirection() === 'rtl' ? -scrollLeft : scrollLeft;
+    }
+    /**
+     * 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.
+     */
+    scroll(value, behavior = 'smooth') {
+        if (this.disablePagination)
+            return;
+        this.cancelInertia();
+        const left = this.getLayoutDirection() === 'rtl' ? -value : value;
+        this.tabListContainer.nativeElement.scrollTo({ left, behavior });
+    }
+    /**
+     * Moves the tab list such that the desired tab label (marked by index) is moved into view.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
      */
-    scrollTo(position) {
+    scrollCorrection(labelIndex, behavior = 'smooth') {
+        if (this.disablePagination)
+            return;
+        // A focus/selection change can queue a correction (debounced by `SCROLL_CORRECTION_DEBOUNCE`)
+        // that then fires in the middle of an unrelated drag or inertia coast — e.g. a `pointerdown`
+        // on a `kbqTabLink` focuses it before the drag threshold is crossed. Without this guard the
+        // correction teleports the strip back under the cursor mid-drag, or kills a running coast.
+        if (this.dragState || this.inertiaFrameId !== null)
+            return;
+        const selectedLabel = this.items ? this.items.toArray()[labelIndex] : null;
+        if (!selectedLabel)
+            return;
+        const container = this.tabListContainer.nativeElement;
+        const viewLength = container.clientWidth;
+        const { offsetLeft, offsetWidth } = selectedLabel.elementRef.nativeElement;
+        let labelBeforePos;
+        let labelAfterPos;
+        if (this.getLayoutDirection() === 'ltr') {
+            labelBeforePos = offsetLeft;
+            labelAfterPos = labelBeforePos + offsetWidth;
+        }
+        else {
+            labelAfterPos = this.tabList.nativeElement.offsetWidth - offsetLeft;
+            labelBeforePos = labelAfterPos - offsetWidth;
+        }
+        const scrollPosition = this.logicalScrollPosition;
+        const beforeVisiblePos = scrollPosition;
+        const afterVisiblePos = scrollPosition + viewLength;
+        if (labelBeforePos < beforeVisiblePos) {
+            // Overshoot by the real paginator button width, so the label isn't flush with the
+            // edge the arrow overlays.
+            const overscroll = this.previousPaginator.nativeElement.clientWidth || 0;
+            this.scroll(labelBeforePos - overscroll, behavior);
+        }
+        else if (labelAfterPos > afterVisiblePos) {
+            const overscroll = this.nextPaginator.nativeElement.clientWidth || 0;
+            this.scroll(scrollPosition + (labelAfterPos - afterVisiblePos + overscroll), behavior);
+        }
+    }
+    /**
+     * Recomputes the pagination arrow-enabled state from the container's real scroll metrics.
+     * Bound to the native `scroll` event — this is the sole source of truth, no imperative call
+     * is needed after drag/inertia/arrow-click scroll writes.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    updateScrollState() {
         if (this.disablePagination) {
-            return { maxScrollDistance: 0, distance: 0 };
+            this.disableScrollAfter = this.disableScrollBefore = true;
+            return;
         }
-        const maxScrollDistance = this.getMaxScrollDistance();
-        this.scrollDistance = Math.max(0, Math.min(maxScrollDistance, position));
-        // Mark that the scroll distance has changed so that after the view is checked, the CSS
-        // transformation can move the header.
-        this.scrollDistanceChanged = true;
-        this.checkScrollingControls();
-        return { maxScrollDistance, distance: this.scrollDistance };
+        const container = this.tabListContainer.nativeElement;
+        const position = this.logicalScrollPosition;
+        const maxScrollPosition = container.scrollWidth - container.clientWidth;
+        // The start of the range is exactly `0` in both directions — `logicalScrollPosition` negates
+        // `scrollLeft` for RTL — and no box metric takes part in that comparison, so it stays exact.
+        // The far bound is derived from `scrollWidth`/`clientWidth`, which overstate the largest offset
+        // the browser hands out: without the tolerance that reads as remaining scroll distance and
+        // leaves the arrow and its edge mask enabled with nowhere left to scroll.
+        this.disableScrollBefore = position <= 0;
+        this.disableScrollAfter = position >= maxScrollPosition - kbqGetScrollOverflowTolerance(container);
+    }
+    handlePointerDown(event) {
+        if (!this.platform.isBrowser || this.disablePagination || !this.showPaginationControls)
+            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.
+        this.cancelInertia();
+        // Touch keeps its existing interaction model (pagination arrows); only mouse/pen drag here.
+        if (this.dragState || event.pointerType === 'touch' || event.button !== 0)
+            return;
+        // Don't hijack presses on nested controls (e.g. a tab's remove button) into a drag.
+        if (event.target.closest?.(NON_DRAGGABLE_TARGET_SELECTOR))
+            return;
+        this.attachDocumentDragListeners();
+        this.dragState = {
+            pointerId: event.pointerId,
+            didDrag: false,
+            startX: event.clientX,
+            lastX: event.clientX,
+            lastTimestamp: event.timeStamp,
+            velocity: 0
+        };
     }
-    updateScrollPosition() {
-        const maxScrollDistance = this.getMaxScrollDistance();
-        if (this.scrollDistance > maxScrollDistance) {
-            this.scrollTo(maxScrollDistance);
+    handlePointerMove(event) {
+        const state = this.dragState;
+        if (!state || event.pointerId !== state.pointerId)
+            return;
+        // A release outside the window/document never reaches `ownerDocument` as a `pointerup` —
+        // a buttonless move is the only signal that the gesture already ended.
+        if (!event.buttons) {
+            this.endDrag(event, true);
+            return;
         }
+        if (!state.didDrag) {
+            if (Math.abs(event.clientX - state.startX) < DRAG_THRESHOLD)
+                return;
+            state.didDrag = true;
+            this.tabListContainer.nativeElement.classList.add(DRAGGING_CLASS);
+            try {
+                this.tabListContainer.nativeElement.setPointerCapture?.(state.pointerId);
+            }
+            catch {
+                // Pointer capture can fail if the pointer is no longer active — the drag still
+                // works via the document-level pointermove/pointerup listeners.
+            }
+        }
+        event.preventDefault();
+        const distance = event.clientX - state.lastX;
+        const elapsed = event.timeStamp - state.lastTimestamp;
+        const instantVelocity = elapsed > 0 ? this.clampVelocity(-distance / elapsed) : 0;
+        // Exponential moving average, not a windowed sample array — smooths out jittery per-move deltas.
+        state.velocity = state.velocity === 0 ? instantVelocity : state.velocity * 0.7 + instantVelocity * 0.3;
+        state.lastX = event.clientX;
+        state.lastTimestamp = event.timeStamp;
+        // The browser clamps this for free at the scroll bounds — no `getMaxScrollDistance()` needed.
+        this.tabListContainer.nativeElement.scrollLeft -= distance;
+    }
+    // Aborts an in-progress drag without applying inertia, e.g. when pagination is disabled mid-gesture.
+    cancelDrag() {
+        const state = this.dragState;
+        if (!state)
+            return;
+        this.tabListContainer.nativeElement.classList.remove(DRAGGING_CLASS);
+        this.dragState = null;
+        this.detachDocumentDragListeners();
+        // Only a gesture that actually became a drag captured the pointer / needs its resulting
+        // click suppressed — matches the same condition `endDrag` guards on below.
+        if (state.didDrag)
+            this.finishDrag(state);
+    }
+    // Ends a drag gesture; `applyInertia` is false for `pointercancel`, where no coast is expected.
+    endDrag(event, applyInertia) {
+        const state = this.dragState;
+        if (!state || event.pointerId !== state.pointerId)
+            return;
+        this.dragState = null;
+        this.tabListContainer.nativeElement.classList.remove(DRAGGING_CLASS);
+        this.detachDocumentDragListeners();
+        if (!state.didDrag)
+            return;
+        this.finishDrag(state);
+        const releaseDelay = event.timeStamp - state.lastTimestamp;
+        const releaseVelocity = applyInertia && releaseDelay <= 80
+            ? state.velocity * Math.exp(-FRICTION_PER_MILLISECOND * releaseDelay)
+            : 0;
+        if (Math.abs(releaseVelocity) >= MIN_INERTIA_VELOCITY) {
+            this.startInertia(releaseVelocity);
+        }
+    }
+    // Releases pointer capture and arms the click-suppression latch — shared by `endDrag`/`cancelDrag`
+    // so a drag aborted mid-gesture (e.g. by `checkPaginationEnabled`) doesn't strand capture or end
+    // in an unintended tab selection.
+    finishDrag(state) {
+        try {
+            this.tabListContainer.nativeElement.releasePointerCapture?.(state.pointerId);
+        }
+        catch {
+            // Capture may already be lost, e.g. if the element was detached mid-drag.
+        }
+        this.suppressNextClick = true;
+        if (this.suppressClickTimeoutId !== null)
+            this.window.clearTimeout(this.suppressClickTimeoutId);
+        // `pointercancel` never produces a trailing `click` — if it's the one that armed the
+        // suppression, it would otherwise stay stuck `true` forever and eat the next unrelated
+        // click. Reset unconditionally on a timer instead of only inside the click listener.
+        this.suppressClickTimeoutId = this.window.setTimeout(() => {
+            this.suppressNextClick = false;
+            this.suppressClickTimeoutId = null;
+        }, 0);
+    }
+    // Attached for the duration of a possible drag only — see the listener fields' doc comment.
+    attachDocumentDragListeners() {
+        const ownerDocument = this.elementRef.nativeElement.ownerDocument;
+        ownerDocument.addEventListener('pointermove', this.documentPointerMoveListener);
+        ownerDocument.addEventListener('pointerup', this.documentPointerUpListener);
+        ownerDocument.addEventListener('pointercancel', this.documentPointerCancelListener);
+    }
+    detachDocumentDragListeners() {
+        const ownerDocument = this.elementRef.nativeElement.ownerDocument;
+        ownerDocument.removeEventListener('pointermove', this.documentPointerMoveListener);
+        ownerDocument.removeEventListener('pointerup', this.documentPointerUpListener);
+        ownerDocument.removeEventListener('pointercancel', this.documentPointerCancelListener);
+    }
+    // Coasts the header from the release velocity, decaying it every frame — matches a natural flick.
+    startInertia(releaseVelocity) {
+        const container = this.tabListContainer.nativeElement;
+        const isRtl = this.getLayoutDirection() === 'rtl';
+        const maxScrollLeft = container.scrollWidth - container.clientWidth;
+        // `scrollLeft`'s native bounds, expressed in whichever direction is "positive" for this
+        // reading direction — RTL browsers run `scrollLeft` from 0 down to `-maxScrollLeft`.
+        const [minBound, maxBound] = isRtl ? [-maxScrollLeft, 0] : [0, maxScrollLeft];
+        // `maxScrollLeft` is derived from rounded box metrics, which overstate the largest offset the
+        // browser hands out, so the clamp below never fires at the far end of the range: the coast
+        // would keep requesting frames and writing offsets the browser silently drops until friction
+        // alone killed it, with `scrollCorrection` suppressed for that whole tail. The coast is
+        // finished on contact instead — writing a reduced bound would pull the strip back visibly.
+        // The near end is exactly `0` and needs no tolerance.
+        const farBoundTolerance = kbqGetScrollOverflowTolerance(container);
+        let velocity = releaseVelocity;
+        // Accumulated in a local rather than read back from `scrollLeft`: the browser snaps the
+        // stored offset to the device-pixel grid (e.g. 1/3 px steps at devicePixelRatio 1.5), so a
+        // sub-pixel-per-frame write at a high refresh rate would otherwise round away to nothing and
+        // the readback-equality boundary check below would mistake that for having hit a bound.
+        let position = container.scrollLeft;
+        let lastTimestamp = null;
+        const step = (timestamp) => {
+            const frameDuration = lastTimestamp === null ? 0 : Math.min(timestamp - lastTimestamp, MAX_FRAME_DURATION);
+            lastTimestamp = timestamp;
+            velocity *= Math.exp(-FRICTION_PER_MILLISECOND * frameDuration);
+            position += velocity * frameDuration;
+            const clamped = Math.max(minBound, Math.min(maxBound, position));
+            container.scrollLeft = clamped;
+            // The direction check keeps a flick back inwards from the far end alive: without it, a
+            // coast starting within `farBoundTolerance` of that bound would end on its first frame.
+            const reachedBoundary = clamped !== position ||
+                (isRtl
+                    ? velocity < 0 && clamped <= minBound + farBoundTolerance
+                    : velocity > 0 && clamped >= maxBound - farBoundTolerance);
+            position = clamped;
+            if (Math.abs(velocity) < MIN_INERTIA_VELOCITY || reachedBoundary) {
+                this.inertiaFrameId = null;
+                return;
+            }
+            this.inertiaFrameId = this.window.requestAnimationFrame(step);
+        };
+        this.inertiaFrameId = this.window.requestAnimationFrame(step);
+    }
+    // Stops an in-progress inertia coast, e.g. because a new gesture or scroll input took over.
+    cancelInertia() {
+        if (this.inertiaFrameId === null)
+            return;
+        this.window.cancelAnimationFrame(this.inertiaFrameId);
+        this.inertiaFrameId = null;
+    }
+    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 }); }
@@ -889,9 +1129,17 @@ class KbqTabLabelWrapper {
     ngAfterViewInit() {
         this.addClassModifierForIcons(Array.from(this.elementRef.nativeElement.querySelectorAll('.kbq-icon')));
     }
-    /** Sets focus on the wrapper element */
+    /**
+     * Sets focus on the wrapper element.
+     *
+     * `preventScroll: true`: `FocusKeyManager.setActiveItem` calls this itself, right after (and
+     * unconditionally on) the `change` emission that runs `KbqPaginatedTabHeader.setTabFocus` — so
+     * without the guard here too, that call's own `preventScroll: true` is immediately undone by
+     * this one, and an overflowing header double-jumps (native scroll-into-view, then the
+     * paginator-aware `scrollCorrection`) on every arrow-key press.
+     */
     focus() {
-        this.elementRef.nativeElement.focus();
+        this.elementRef.nativeElement.focus({ preventScroll: true });
     }
     getOffsetLeft() {
         return this.elementRef.nativeElement.offsetLeft;
@@ -992,7 +1240,7 @@ class KbqTabHeader extends KbqPaginatedTabHeader {
         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]=\"disableScrollBefore ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-header__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [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]=\"disableScrollAfter ? 'contrast-fade' : '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:relative;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.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;overflow:hidden}.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-header__container{overflow:visible}.kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabHeader, decorators: [{
             type: Component,
@@ -1002,7 +1250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[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]=\"disableScrollBefore ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-header__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [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]=\"disableScrollAfter ? 'contrast-fade' : '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:relative;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.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;overflow:hidden}.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-header__container{overflow:visible}.kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.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"] }]
+                    }, 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 }]
@@ -1339,7 +1587,7 @@ class KbqTabGroup {
         return this.tabs?.toArray().indexOf(currentSelectedTab);
     }
     /** @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-group_vertical .kbq-tab-header__container{overflow-y:auto}.kbq-tab-group .kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-group .kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-group .kbq-tab-body.kbq-tab-body__active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-group .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabGroup, decorators: [{
             type: Component,
@@ -1352,7 +1600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[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-group_vertical .kbq-tab-header__container{overflow-y:auto}.kbq-tab-group .kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-group .kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-group .kbq-tab-body.kbq-tab-body__active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-group .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-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"] }]
+                    }, 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]
@@ -1443,7 +1691,7 @@ class KbqTabNavBar extends KbqPaginatedTabHeader {
         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", "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]=\"disableScrollBefore ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-link__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [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]=\"disableScrollAfter ? 'contrast-fade' : '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:relative;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.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;overflow:hidden}.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%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-link__container{overflow-y:scroll}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-list__content{flex-direction:column;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical)}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTabNavBar, decorators: [{
             type: Component,
@@ -1458,8 +1706,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[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'
-                    }, 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]=\"disableScrollBefore ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-link__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [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]=\"disableScrollAfter ? 'contrast-fade' : '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:relative;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.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;overflow:hidden}.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%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-link__container{overflow-y:scroll}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-list__content{flex-direction:column;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical)}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-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"] }]
+                    }, 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 }]
@@ -1575,9 +1824,17 @@ class KbqTabLink {
             this.renderer.addClass(secondIconElement, 'kbq-icon_right');
         }
     }
-    /** Focuses the tab link. */
+    /**
+     * Focuses the tab link.
+     *
+     * `preventScroll: true`: `FocusKeyManager.setActiveItem` calls this itself, right after (and
+     * unconditionally on) the `change` emission that runs `KbqPaginatedTabHeader.setTabFocus` — so
+     * without the guard here too, that call's own `preventScroll: true` is immediately undone by
+     * this one, and an overflowing nav bar double-jumps (native scroll-into-view, then the
+     * paginator-aware `scrollCorrection`) on every arrow-key press.
+     */
     focus() {
-        this.elementRef.nativeElement.focus();
+        this.elementRef.nativeElement.focus({ preventScroll: true });
     }
     /** Handles the focus event. */
     handleFocus() {