@koobiq/components 19.8.3 → 20.1.0

package/tabs/index.d.ts

@@ -1 +1,647 @@
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy, EventEmitter, TemplateRef, AfterContentChecked, AfterContentInit, AfterViewInit, QueryList, ElementRef, DestroyRef, ChangeDetectorRef, InjectionToken, OnChanges, SimpleChanges } from '@angular/core';
+import { AnimationEvent, AnimationTriggerMetadata } from '@angular/animations';
+import { Direction } from '@angular/cdk/bidi';
+import * as i1 from '@angular/cdk/portal';
+import { CdkPortalOutlet, TemplatePortal, CdkPortal } from '@angular/cdk/portal';
+import { Subject } from 'rxjs';
+import * as i2 from '@angular/cdk/a11y';
+import { FocusableOption } from '@angular/cdk/a11y';
+import * as i3 from '@angular/cdk/scrolling';
+import * as i4 from '@koobiq/components/icon';
+import * as i5 from '@koobiq/components/tooltip';
+import * as i6 from '@angular/cdk/observers';
+
+/**
+ * These position states are used internally as animation states for the tab body. Setting the
+ * position state to left, right, or center will transition the tab body from its current
+ * position to its respective state. If there is not current position (void, in the case of a new
+ * tab body), then there will be no transition animation to its state.
+ *
+ * In the case of a new tab body that should immediately be centered with an animating transition,
+ * then left-origin-center or right-origin-center can be used, which will use left or right as its
+ * pseudo-prior state.
+ */
+type KbqTabBodyPositionState = 'left' | 'center' | 'right' | 'left-origin-center' | 'right-origin-center';
+/**
+ * The origin state is an internally used state that is set on a new tab body indicating if it
+ * began to the left or right of the prior selected index. For example, if the selected index was
+ * set to 1, and a new tab is created and selected at index 2, then the tab body would have an
+ * origin of right because its index was greater than the prior selected index.
+ */
+type KbqTabBodyOriginState = 'left' | 'right';
+/**
+ * Wrapper for the contents of a tab.
+ * @docs-private
+ */
+declare class KbqTabBody implements OnInit, OnDestroy {
+    private readonly elementRef;
+    private readonly dir;
+    /** The shifted index position of the tab body, where zero represents the active center tab. */
+    set position(position: number);
+    /** Tab body position state. Used by the animation trigger for the current state. */
+    bodyPosition: KbqTabBodyPositionState;
+    /** Event emitted when the tab begins to animate towards the center as the active tab. */
+    readonly onCentering: i0.OutputEmitterRef<number>;
+    /** Event emitted before the centering of the tab begins. */
+    readonly beforeCentering: EventEmitter<boolean>;
+    /** Event emitted before the centering of the tab begins. */
+    readonly afterLeavingCenter: EventEmitter<boolean>;
+    /** Event emitted when the tab completes its animation towards the center. */
+    readonly onCentered: i0.OutputEmitterRef<void>;
+    /** The portal host inside of this container into which the tab body content will be loaded. */
+    readonly portalHost: i0.Signal<CdkPortalOutlet>;
+    /** The tab body content to display. */
+    readonly content: i0.InputSignal<TemplatePortal<any>>;
+    /** Position that will be used when the tab is immediately becoming visible after creation. */
+    origin: number;
+    /** Duration for the tab's animation. */
+    readonly animationDuration: i0.InputSignal<string>;
+    /** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */
+    private positionIndex;
+    /** Subscription to the directionality change observable. */
+    private readonly dirChangeSubscription;
+    constructor();
+    /**
+     * After initialized, check if the content is centered and has an origin. If so, set the
+     * special position states that transition the tab from the left or right before centering.
+     */
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onTranslateTabStarted(e: AnimationEvent): void;
+    onTranslateTabComplete(e: AnimationEvent): void;
+    /** The text direction of the containing app. */
+    getLayoutDirection(): Direction;
+    /** Whether the provided position state is considered center, regardless of origin. */
+    isCenterPosition(position: KbqTabBodyPositionState | string): boolean;
+    /** Computes the position state that will be used for the tab-body animation trigger. */
+    private computePositionAnimationState;
+    /**
+     * Computes the position state based on the specified origin position. This is used if the
+     * tab is becoming visible immediately after creation.
+     */
+    private computePositionFromOrigin;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabBody, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabBody, "kbq-tab-body", never, { "position": { "alias": "position"; "required": false; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "origin": { "alias": "origin"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; "isSignal": true; }; }, { "onCentering": "onCentering"; "beforeCentering": "beforeCentering"; "afterLeavingCenter": "afterLeavingCenter"; "onCentered": "onCentered"; }, never, never, true, never>;
+}
+/**
+ * The portal host directive for the contents of the tab.
+ * @docs-private
+ */
+declare class KbqTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestroy {
+    private readonly host;
+    /** Subscription to events for when the tab body begins centering. */
+    private centeringSub;
+    /** Subscription to events for when the tab body finishes leaving from center position. */
+    private leavingSub;
+    constructor();
+    /** Set initial visibility or set up subscription for changing visibility. */
+    ngOnInit(): void;
+    /** Clean up centering subscription. */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabBodyPortal, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabBodyPortal, "[kbqTabBodyHost]", never, {}, {}, never, never, true, never>;
+}
+
+/** Decorates the `ng-template` tags and reads out the template from it. */
+declare class KbqTabContent {
+    template: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabContent, "[kbqTabContent]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * The directions that scrolling can go in when the header's tabs exceed the header width. 'After'
+ * will scroll the header towards the end of the tabs list and 'before' will scroll towards the
+ * beginning of the list.
+ */
+type ScrollDirection$1 = 'after' | 'before';
+/** Item inside a paginated tab header. */
+type KbqPaginatedTabHeaderItem = FocusableOption & {
+    elementRef: ElementRef;
+};
+/**
+ * Base class for a tab header that supported pagination.
+ * @docs-private
+ */
+declare abstract class KbqPaginatedTabHeader implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy {
+    /** The index of the active tab. */
+    get selectedIndex(): number;
+    set selectedIndex(value: number);
+    private _selectedIndex;
+    /** Tracks which element has focus; used for keyboard navigation */
+    get focusIndex(): number;
+    /** When the focus index is set, we must manually send focus to the correct label */
+    set focusIndex(value: number);
+    /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
+    get scrollDistance(): number;
+    set scrollDistance(v: number);
+    /** The distance in pixels that the tab labels should be translated to the left. */
+    private _scrollDistance;
+    abstract readonly items: QueryList<KbqPaginatedTabHeaderItem>;
+    abstract readonly tabListContainer: ElementRef<HTMLElement>;
+    abstract readonly tabList: ElementRef<HTMLElement>;
+    abstract readonly nextPaginator: ElementRef<HTMLElement>;
+    abstract readonly previousPaginator: ElementRef<HTMLElement>;
+    /** Event emitted when the option is selected. */
+    readonly selectFocusedIndex: EventEmitter<number>;
+    /** Event emitted when a label is focused. */
+    readonly indexFocused: EventEmitter<number>;
+    /** Whether the controls for pagination should be displayed */
+    showPaginationControls: boolean;
+    /** Whether the tab list can be scrolled more towards the end of the tab label list. */
+    disableScrollAfter: boolean;
+    /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
+    disableScrollBefore: boolean;
+    /**
+     * Whether pagination should be disabled. This can be used to avoid unnecessary
+     * layout recalculations if it's known that pagination won't be required.
+     */
+    disablePagination: boolean;
+    /** Whether the tabs should be displayed vertically. */
+    set vertical(value: boolean);
+    get vertical(): boolean;
+    private _vertical;
+    /**
+     * The number of tab labels that are displayed on the header. When this changes, the header
+     * should re-evaluate the scroll position.
+     */
+    private tabLabelCount;
+    /** Whether the scroll distance has changed and should be applied after the view is checked. */
+    private scrollDistanceChanged;
+    /** Used to manage focus between the tabs. */
+    private keyManager;
+    /** Cached text content of the header. */
+    private currentTextContent;
+    /** Stream that will stop the automated scrolling. */
+    private stopScrolling;
+    /** Whether the header should scroll to the selected index after the view has been checked. */
+    private selectedIndexChanged;
+    protected readonly destroyRef: DestroyRef;
+    readonly elementRef: ElementRef<HTMLElement>;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    private readonly viewportRuler;
+    private readonly ngZone;
+    private readonly platform;
+    private readonly dir;
+    private readonly window;
+    constructor();
+    /** Called when the user has selected an item via the keyboard. */
+    ngAfterViewInit(): void;
+    ngAfterContentInit(): void;
+    ngAfterContentChecked(): void;
+    ngOnDestroy(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    /**
+     * Callback for when the MutationObserver detects that the content has changed.
+     */
+    onContentChanges(): void;
+    /**
+     * Updates the view whether pagination should be enabled or not.
+     *
+     * WARNING: Calling this method can be very costly in terms of performance. It should be called
+     * as infrequently as possible from outside of the Tabs component as it causes a reflow of the
+     * page.
+     */
+    updatePagination(): void;
+    /**
+     * Determines if an index is valid.  If the tabs are not ready yet, we assume that the user is
+     * providing a valid index and return true.
+     */
+    isValidIndex(index: number): boolean;
+    /**
+     * Sets focus on the HTML element for the label wrapper and scrolls it into the view if
+     * scrolling is enabled.
+     */
+    setTabFocus(tabIndex: number): void;
+    /** The layout direction of the containing app. */
+    getLayoutDirection(): Direction;
+    /** Performs the CSS transformation on the tab list that will cause the list to scroll. */
+    updateTabScrollPosition(): void;
+    /**
+     * 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.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    scrollHeader(direction: ScrollDirection$1): {
+        maxScrollDistance: number;
+        distance: number;
+    };
+    /** Handles click events on the pagination arrows. */
+    handlePaginatorClick(direction: ScrollDirection$1): void;
+    /**
+     * 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: number): void;
+    /**
+     * 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
+     * be shown.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    checkPaginationEnabled(): void;
+    /**
+     * 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(): void;
+    /**
+     * 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(): number;
+    /** Stops the currently-running paginator interval.  */
+    stopInterval(): void;
+    /**
+     * Handles the user pressing down on one of the paginators.
+     * Starts scrolling the header after a certain amount of time.
+     * @param direction In which direction the paginator should be scrolled.
+     */
+    handlePaginatorPress(direction: ScrollDirection$1, mouseEvent?: MouseEvent): void;
+    protected abstract itemSelected(event: KeyboardEvent): void;
+    /**
+     * Scrolls the header to a given position.
+     * @param position Position to which to scroll.
+     * @returns Information on the current scroll distance and the maximum.
+     */
+    private scrollTo;
+    private updateScrollPosition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPaginatedTabHeader, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPaginatedTabHeader, never, never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "disablePagination": { "alias": "disablePagination"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_selectedIndex: unknown;
+    static ngAcceptInputType_disablePagination: unknown;
+    static ngAcceptInputType_vertical: unknown;
+}
+
+declare const KBQ_TAB_LABEL: InjectionToken<KbqTabLabel>;
+/** Used to flag tab labels for use with the portal directive */
+declare class KbqTabLabel extends CdkPortal {
+    /** Whether the tab contains only an icon without a label. */
+    readonly iconOnly: i0.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabLabel, "[kbq-tab-label], [kbqTabLabel]", never, { "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class KbqTab implements OnInit, OnChanges, OnDestroy {
+    private readonly viewContainerRef;
+    /** @docs-private */
+    get content(): TemplatePortal | null;
+    get templateLabel(): KbqTabLabel;
+    set templateLabel(value: KbqTabLabel);
+    private _templateLabel;
+    /**
+     * Template provided in the tab content that will be used if present, used to enable lazy-loading
+     */
+    readonly explicitContent: i0.Signal<TemplateRef<any> | undefined>;
+    /** Template inside the KbqTab view that contains an `<ng-content>`. */
+    readonly implicitContent: i0.Signal<TemplateRef<any>>;
+    get tooltipTitle(): string;
+    set tooltipTitle(value: string);
+    private _tooltipTitle;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    readonly tooltipPlacement: i0.InputSignal<"left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "leftTop" | "leftBottom" | "bottom" | "bottomLeft" | "bottomRight">;
+    /** Plain text label for the tab, used when there is no template label. */
+    readonly textLabel: i0.InputSignal<string>;
+    readonly empty: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly tabId: i0.InputSignal<string>;
+    /** Whether the tab label contains only an icon (no text). */
+    get iconOnlyLabel(): boolean;
+    /** Emits whenever the internal state of the tab changes. */
+    readonly stateChanges: Subject<void>;
+    /**
+     * The relatively indexed position where 0 represents the center, negative is left, and positive
+     * represents the right.
+     */
+    position: number | null;
+    /**
+     * The initial relatively index origin of the tab if it was created and selected after there
+     * was already a selected tab. Provides context of what position the tab should originate from.
+     */
+    origin: number | null;
+    /**
+     * Whether the tab is currently active.
+     */
+    isActive: boolean;
+    get isOverflown(): boolean;
+    get overflowTooltipTitle(): string;
+    set overflowTooltipTitle(value: string);
+    private _overflowTooltipTitle;
+    /** Portal that will be the hosted content of the tab */
+    private contentPortal;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * This has been extracted to a util because of TS 4 and VE.
+     * View Engine doesn't support property rename inheritance.
+     * TS 4.0 doesn't allow properties to override accessors or vice-versa.
+     * @docs-private
+     */
+    protected setTemplateLabelInput(value: KbqTabLabel): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTab, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTab, "kbq-tab", ["kbqTab"], { "tooltipTitle": { "alias": "tooltipTitle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "textLabel": { "alias": "label"; "required": false; "isSignal": true; }; "empty": { "alias": "empty"; "required": false; "isSignal": true; }; "tabId": { "alias": "tabId"; "required": false; "isSignal": true; }; }, {}, ["explicitContent", "templateLabel"], ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}
+
+/**
+ * Used in the `kbq-tab-group` view to display tab labels.
+ * @docs-private
+ */
+declare class KbqTabLabelWrapper implements AfterViewInit {
+    elementRef: ElementRef<HTMLElement>;
+    private renderer;
+    labelContent: ElementRef;
+    tab: KbqTab;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    ngAfterViewInit(): void;
+    /** Sets focus on the wrapper element */
+    focus(): void;
+    getOffsetLeft(): number;
+    getOffsetWidth(): number;
+    checkOverflow(): void;
+    isOverflown(): boolean;
+    getInnerText(): any;
+    private addClassModifierForIcons;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabLabelWrapper, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabLabelWrapper, "[kbqTabLabelWrapper]", never, { "tab": { "alias": "tab"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["labelContent"], never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}
+
+/**
+ * The directions that scrolling can go in when the header's tabs exceed the header width. 'After'
+ * will scroll the header towards the end of the tabs list and 'before' will scroll towards the
+ * beginning of the list.
+ */
+type ScrollDirection = 'after' | 'before';
+/**
+ * The header of the tab group which displays a list of all the tabs in the tab group.
+ * When the tabs list's width exceeds the width of the header container,
+ * then arrows will be displayed to allow the user to scroll
+ * left and right across the header.
+ * @docs-private
+ */
+declare class KbqTabHeader extends KbqPaginatedTabHeader {
+    /** Whether the tabs are underlined. */
+    readonly underlined: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly items: QueryList<KbqTabLabelWrapper>;
+    readonly tabListContainer: ElementRef;
+    readonly tabList: ElementRef;
+    readonly nextPaginator: ElementRef<HTMLElement>;
+    readonly previousPaginator: ElementRef<HTMLElement>;
+    private readonly isBrowser;
+    /** Width of the active tab, adjusted for icon-only tab margins. */
+    protected get activeTabOffsetWidth(): number | undefined;
+    /** Left offset of the active tab, adjusted for icon-only tab margins. */
+    protected get activeTabOffsetLeft(): number | undefined;
+    protected itemSelected(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabHeader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "underlined": { "alias": "underlined"; "required": false; "isSignal": true; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], true, never>;
+}
+
+declare class KbqAlignTabsCenterCssStyler {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlignTabsCenterCssStyler, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlignTabsCenterCssStyler, "kbq-tab-group[kbq-align-tabs-center], [kbq-tab-nav-bar][kbq-align-tabs-center], [kbqTabNavBar][kbq-align-tabs-center]", never, {}, {}, never, never, true, never>;
+}
+declare class KbqAlignTabsEndCssStyler {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlignTabsEndCssStyler, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlignTabsEndCssStyler, "kbq-tab-group[kbq-align-tabs-end], [kbq-tab-nav-bar][kbq-align-tabs-end], [kbqTabNavBar][kbq-align-tabs-end]", never, {}, {}, never, never, true, never>;
+}
+declare class KbqStretchTabsCssStyler {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqStretchTabsCssStyler, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqStretchTabsCssStyler, "kbq-tab-group[kbq-stretch-tabs], [kbq-tab-nav-bar][kbq-stretch-tabs], [kbqTabNavBar][kbq-stretch-tabs]", never, {}, {}, never, never, true, never>;
+}
+declare class KbqVerticalTabsCssStyler {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqVerticalTabsCssStyler, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqVerticalTabsCssStyler, "kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical], [kbqTabNavBar][vertical]", never, {}, {}, never, never, true, never>;
+}
+/** A simple change event emitted on focus or selection changes. */
+declare class KbqTabChangeEvent {
+    /** Index of the currently-selected tab. */
+    index: number;
+    /** Reference to the currently-selected tab. */
+    tab: KbqTab;
+}
+/** Possible positions for the tab header. */
+type KbqTabHeaderPosition = 'above' | 'below';
+/** Object that can be used to configure the default options for the tabs module. */
+interface KbqTabsConfig {
+    /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */
+    animationDuration?: string;
+}
+/** Injection token that can be used to provide the default options the tabs module. */
+declare const KBQ_TABS_CONFIG: InjectionToken<KbqTabsConfig>;
+type KbqTabSelectBy = string | number | ((tabs: KbqTab[]) => KbqTab | null);
+/**
+ * Tab-group component.  Supports basic tab pairs (label + content) and includes keyboard navigation.
+ */
+declare class KbqTabGroup implements AfterContentInit, AfterViewInit, AfterContentChecked, OnDestroy {
+    private readonly changeDetectorRef;
+    readonly resizeStream: Subject<Event>;
+    tabs: QueryList<KbqTab>;
+    readonly tabBodyWrapper: i0.Signal<ElementRef<any>>;
+    readonly tabHeader: i0.Signal<KbqTabHeader>;
+    readonly transparent: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly onSurface: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly underlined: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly vertical: i0.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the tab group should grow to the size of the active tab. */
+    readonly dynamicHeight: i0.InputSignalWithTransform<boolean, unknown>;
+    /** The index of the active tab. */
+    get selectedIndex(): number;
+    set selectedIndex(value: number);
+    private _selectedIndex;
+    get activeTab(): KbqTab | null;
+    set activeTab(value: KbqTabSelectBy | null);
+    /** Position of the tab header. */
+    headerPosition: KbqTabHeaderPosition;
+    /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */
+    animationDuration: string;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /** Output to enable support for two-way binding on `[(selectedIndex)]` */
+    readonly selectedIndexChange: i0.OutputEmitterRef<number>;
+    /** Event emitted when the tab selection has changed. */
+    readonly activeTabChange: i0.OutputEmitterRef<string | number | KbqTab>;
+    /** Event emitted when focus has changed within a tab group. */
+    readonly focusChange: i0.OutputEmitterRef<KbqTabChangeEvent>;
+    /** Event emitted when the body animation has completed */
+    readonly animationDone: i0.OutputEmitterRef<void>;
+    /** Event emitted when the tab selection has changed. */
+    readonly selectedTabChange: i0.OutputEmitterRef<KbqTabChangeEvent>;
+    private attributeToSelectBy;
+    /** Snapshot of the height of the tab body wrapper before another tab is activated. */
+    private tabBodyWrapperHeight;
+    /** Subscription to tabs being added/removed. */
+    private tabsSubscription;
+    /** Subscription to changes in the tab labels. */
+    private tabLabelSubscription;
+    private resizeSubscription;
+    private readonly groupId;
+    private readonly resizeDebounceInterval;
+    constructor();
+    ngAfterContentInit(): void;
+    /**
+     * After the content is checked, this component knows what tabs have been defined
+     * and what the selected index should be. This is where we can know exactly what position
+     * each tab should be in according to the new selected index, and additionally we know how
+     * a new selected tab should transition in (from the left or right).
+     */
+    ngAfterContentChecked(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    focusChanged(index: number): void;
+    /** Returns a unique id for each tab label element */
+    getTabLabelId(i: number): string;
+    /** Returns a unique id for each tab content element */
+    getTabContentId(i: number): string;
+    /**
+     * Sets the height of the body wrapper to the height of the activating tab if dynamic
+     * height property is true.
+     */
+    setTabBodyWrapperHeight(tabHeight: number): void;
+    /** Removes the height of the tab body wrapper. */
+    removeTabBodyWrapperHeight(): void;
+    /** Handle click events, setting new selected index if appropriate. */
+    handleClick(tab: KbqTab, tabHeader: KbqTabHeader, index: number): void;
+    /** Retrieves the tabindex for the tab. */
+    getTabIndex(tab: KbqTab, index: number): number | null;
+    onSelectFocusedIndex($event: number): void;
+    private checkOverflow;
+    private createChangeEvent;
+    /**
+     * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is
+     * on the KbqTab component, whereas the data binding is inside the KbqTabGroup. In order for the
+     * binding to be updated, we need to subscribe to changes in it and trigger change detection
+     * manually.
+     */
+    private subscribeToTabLabels;
+    private subscribeToResize;
+    /** Clamps the given index to the bounds of 0 and the tabs length. */
+    private clampTabIndex;
+    private getTabIndexToSelect;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabGroup, "kbq-tab-group", ["kbqTabGroup"], { "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "onSurface": { "alias": "onSurface"; "required": false; "isSignal": true; }; "underlined": { "alias": "underlined"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "activeTab": { "alias": "activeTab"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "activeTabChange": "activeTabChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, true, never>;
+    static ngAcceptInputType_selectedIndex: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}
+
+/**
+ * Navigation component matching the styles of the tab group header.
+ */
+declare class KbqTabNavBar extends KbqPaginatedTabHeader implements AfterContentInit {
+    readonly tabListContainer: ElementRef;
+    readonly tabList: ElementRef;
+    readonly nextPaginator: ElementRef<HTMLElement>;
+    readonly previousPaginator: ElementRef<HTMLElement>;
+    readonly items: QueryList<KbqTabLink>;
+    private readonly isBrowser;
+    /** Whether the nav bar background should be transparent. */
+    readonly transparent: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly onSurface: i0.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the nav bar should be underlined. */
+    readonly underlined: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Associated tab panel controlled by the nav bar.
+     */
+    readonly tabNavPanel: i0.InputSignal<KbqTabNavPanel | undefined>;
+    get role(): string | null;
+    protected get activeTabOffsetWidth(): number | undefined;
+    protected get activeTabOffsetLeft(): number | undefined;
+    ngAfterContentInit(): void;
+    protected itemSelected(): void;
+    /** Notifies the component that the active link has been changed. */
+    updateActiveLink(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabNavBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabNavBar, "[kbqTabNavBar], [kbq-tab-nav-bar]", ["kbqTabNavBar"], { "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "onSurface": { "alias": "onSurface"; "required": false; "isSignal": true; }; "underlined": { "alias": "underlined"; "required": false; "isSignal": true; }; "tabNavPanel": { "alias": "tabNavPanel"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
+}
+/**
+ * Link inside of a KbqTabNavBar.
+ */
+declare class KbqTabLink implements OnDestroy, AfterViewInit {
+    /** Unique id for the link. */
+    id: string;
+    /** Whether the link is active. */
+    get active(): boolean;
+    set active(value: boolean);
+    /** Whether the tab link is active or not. */
+    private _active;
+    get vertical(): boolean;
+    get underlined(): boolean;
+    /** Whether the tab link is disabled. */
+    disabled: boolean;
+    /** Link tab index. */
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
+    /** Link aria-selected attribute value. */
+    protected get ariaSelected(): string | null;
+    /** Link role attribute value. */
+    protected get role(): string | null;
+    /** Link aria-controls attribute value. */
+    protected get ariaControls(): string | null;
+    /** Link aria-current attribute value. */
+    protected get ariaCurrent(): string | null;
+    readonly elementRef: ElementRef<HTMLElement>;
+    private readonly focusMonitor;
+    private readonly renderer;
+    private readonly tabNavBar;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private addClassModifierForIcons;
+    /** Focuses the tab link. */
+    focus(): void;
+    /** Handles the focus event. */
+    protected handleFocus(): void;
+    /** Handles the keydown event. */
+    protected handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabLink, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabLink, "[kbqTabLink], [kbq-tab-link]", ["kbqTabLink"], { "id": { "alias": "id"; "required": false; }; "active": { "alias": "active"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_active: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+}
+/**
+ * Tab panel component associated with KbqTabNav.
+ */
+declare class KbqTabNavPanel {
+    /** Unique id for the tab panel. */
+    readonly id: i0.InputSignal<string>;
+    /** Id of the active tab in the nav bar. */
+    activeTabId?: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabNavPanel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabNavPanel, "[kbqTabNavPanel]", ["kbqTabNavPanel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const kbqTabsAnimations: {
+    readonly translateTab: AnimationTriggerMetadata;
+};
+
+declare class KbqTabsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, never, [typeof i1.PortalModule, typeof i2.A11yModule, typeof i3.CdkScrollableModule, typeof i4.KbqIconModule, typeof i5.KbqToolTipModule, typeof i6.CdkObserveContent, typeof KbqTabNavBar, typeof KbqTabLink, typeof KbqTabNavPanel, typeof KbqTabGroup, typeof KbqTabLabel, typeof KbqTab, typeof KbqTabLabelWrapper, typeof KbqTabBody, typeof KbqTabBodyPortal, typeof KbqTabHeader, typeof KbqTabContent, typeof KbqAlignTabsCenterCssStyler, typeof KbqAlignTabsEndCssStyler, typeof KbqStretchTabsCssStyler, typeof KbqVerticalTabsCssStyler], [typeof KbqTabGroup, typeof KbqTabLabel, typeof KbqTab, typeof KbqTabLabelWrapper, typeof KbqTabBody, typeof KbqTabBodyPortal, typeof KbqTabHeader, typeof KbqTabContent, typeof KbqAlignTabsCenterCssStyler, typeof KbqAlignTabsEndCssStyler, typeof KbqStretchTabsCssStyler, typeof KbqVerticalTabsCssStyler, typeof KbqTabNavBar, typeof KbqTabLink, typeof KbqTabNavPanel]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqTabsModule>;
+}
+
+export { KBQ_TABS_CONFIG, KBQ_TAB_LABEL, KbqAlignTabsCenterCssStyler, KbqAlignTabsEndCssStyler, KbqStretchTabsCssStyler, KbqTab, KbqTabBody, KbqTabBodyPortal, KbqTabChangeEvent, KbqTabContent, KbqTabGroup, KbqTabHeader, KbqTabLabel, KbqTabLabelWrapper, KbqTabLink, KbqTabNavBar, KbqTabNavPanel, KbqTabsModule, KbqVerticalTabsCssStyler, kbqTabsAnimations };
+export type { KbqTabBodyOriginState, KbqTabBodyPositionState, KbqTabHeaderPosition, KbqTabSelectBy, KbqTabsConfig, ScrollDirection };

package/tabs/tab-header.scss

@@ -8,6 +8,7 @@
     overflow: hidden;
     position: relative;
     flex-shrink: 0;
+    border-radius: var(--kbq-tabs-size-tab-stack-horizontal-border-radius);
 }
 
 .kbq-tab-list__content {

package/tabs/tabs-tokens.scss

@@ -5,7 +5,7 @@
     --kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);
     --kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);
     --kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);
-    --kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);
+    --kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-border-radius);
     --kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);
     /* THEME TOKENS */
     --kbq-tabs-tab-item-filled-on-background-default-background: transparent;