@koobiq/components 18.7.0 → 18.8.0

package/schematics/utils/package-config.js

@@ -1,11 +1,62 @@
 'use strict';
 
-require('@angular-devkit/schematics');
-require('@schematics/angular/utility');
-var utils_packageConfig = require('../package-config-D0ROjo4J.js');
+var schematics = require('@angular-devkit/schematics');
+var utility = require('@schematics/angular/utility');
+var utils_messages = require('./messages.js');
 
+/**
+ * Sorts the keys of the given object.
+ * @returns A new object instance with sorted keys
+ */
+function sortObjectByKeys(obj) {
+    return Object.keys(obj)
+        .sort()
+        .reduce((result, key) => (result[key] = obj[key]) && result, {});
+}
+/**
+ * Adds a package to the package.json in the given tree
+ */
+function addPackageToPackageJson(tree, pkg, version, devDependency = false) {
+    if (tree.exists('package.json')) {
+        const sourceText = tree.read('package.json').toString('utf-8');
+        const json = JSON.parse(sourceText);
+        const dependenciesType = devDependency ? 'devDependencies' : 'dependencies';
+        const dependencies = json[dependenciesType] || {};
+        if (!dependencies[pkg]) {
+            dependencies[pkg] = version;
+            json[dependenciesType] = sortObjectByKeys(dependencies);
+        }
+        tree.overwrite('package.json', JSON.stringify(json, null, 2));
+    }
+    return tree;
+}
+/**
+ * Gets the version of the specified package by looking at the package.json in the given tree
+ */
+function getPackageVersionFromPackageJson(tree, name, includeDevDependencies = false) {
+    if (!tree.exists('package.json')) {
+        return null;
+    }
+    const packageJson = JSON.parse(tree.read('package.json').toString('utf8'));
+    if (packageJson.dependencies && packageJson.dependencies[name]) {
+        return packageJson.dependencies[name];
+    }
+    if (includeDevDependencies && packageJson.devDependencies && packageJson.devDependencies[name]) {
+        return packageJson.devDependencies[name];
+    }
+    return null;
+}
+async function setupOptions(project, tree) {
+    if (project) {
+        const workspace = await utility.readWorkspace(tree);
+        const projectWorkspace = workspace.projects.get(project);
+        if (!projectWorkspace) {
+            throw new schematics.SchematicsException(utils_messages.noProject(project));
+        }
+        return projectWorkspace;
+    }
+}
 
-
-exports.addPackageToPackageJson = utils_packageConfig.addPackageToPackageJson;
-exports.getPackageVersionFromPackageJson = utils_packageConfig.getPackageVersionFromPackageJson;
-exports.setupOptions = utils_packageConfig.setupOptions;
+exports.addPackageToPackageJson = addPackageToPackageJson;
+exports.getPackageVersionFromPackageJson = getPackageVersionFromPackageJson;
+exports.setupOptions = setupOptions;

package/tabs/_tabs-common.scss

@@ -1,4 +1,5 @@
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
+@use '../core/styles/common/vendor-prefixes';
 
 @mixin tab-label {
     position: relative;
@@ -14,11 +15,11 @@
 
     cursor: pointer;
 
-    padding: kbq-difference-series-css-variables(
+    padding: tokens.kbq-difference-series-css-variables(
             [tabs-size-tab-item-padding-vertical,
             tabs-size-tab-item-focus-outline-width]
         )
-        kbq-difference-series-css-variables(
+        tokens.kbq-difference-series-css-variables(
             [tabs-size-tab-item-padding-horizontal,
             tabs-size-tab-item-focus-outline-width]
         );
@@ -38,14 +39,14 @@
     }
 
     &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left {
-        padding-left: kbq-difference-series-css-variables(
+        padding-left: tokens.kbq-difference-series-css-variables(
             [tabs-size-tab-item-padding-horizontal,
             tabs-size-tab-item-focus-outline-width]
         );
     }
 
     &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right {
-        padding-right: kbq-difference-series-css-variables(
+        padding-right: tokens.kbq-difference-series-css-variables(
             [tabs-size-tab-item-padding-horizontal,
             tabs-size-tab-item-focus-outline-width]
         );
@@ -90,3 +91,24 @@
         }
     }
 }
+
+// Common styles for paginated tabs, used by `.kbq-tab-header` and `.kbq-tab-nav-bar`
+@mixin paginated-tab-header {
+    .kbq-tab-header__pagination {
+        @include vendor-prefixes.user-select(none);
+
+        position: relative;
+        display: none;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        z-index: 2;
+        -webkit-tap-highlight-color: transparent;
+        touch-action: none;
+        padding: 0 var(--kbq-size-m);
+
+        .kbq-tab-header__pagination-controls_enabled & {
+            display: flex;
+        }
+    }
+}

package/tabs/_tabs-theme.scss

@@ -1,5 +1,4 @@
-@use '../core/styles/typography/typography-utils' as *;
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
 
 @mixin kbq-tab-item-state($type, $sub-type, $style-name) {
     $base: tabs-tab-item-#{$type}-#{$sub-type}-#{$style-name};
@@ -52,7 +51,6 @@
     }
 }
 
-//noinspection ALL
 @mixin kbq-tabs-theme() {
     .kbq-tab-group {
         &.kbq-tab-group_filled {
@@ -104,9 +102,7 @@
     .kbq-tab-nav-bar {
         &.kbq-tab-nav-bar_filled {
             &.kbq-tab-nav-bar_on-background {
-                .kbq-tab-header {
-                    background: var(--kbq-tabs-tab-stack-filled-on-background-background);
-                }
+                background: var(--kbq-tabs-tab-stack-filled-on-background-background);
 
                 & .kbq-tab-link {
                     @include kbq-tab-item-style(filled, on-background);
@@ -114,9 +110,7 @@
             }
 
             &.kbq-tab-nav-bar_on-surface {
-                .kbq-tab-header {
-                    background: var(--kbq-tabs-tab-stack-filled-on-surface-background);
-                }
+                background: var(--kbq-tabs-tab-stack-filled-on-surface-background);
 
                 & .kbq-tab-link {
                     @include kbq-tab-item-style(filled, on-background);
@@ -126,9 +120,7 @@
 
         &.kbq-tab-nav-bar_transparent {
             &.kbq-tab-nav-bar_on-background {
-                .kbq-tab-header {
-                    background: var(--kbq-tabs-tab-stack-transparent-on-background-background);
-                }
+                background: var(--kbq-tabs-tab-stack-transparent-on-background-background);
 
                 & .kbq-tab-link {
                     @include kbq-tab-item-style(transparent, on-background);
@@ -136,9 +128,7 @@
             }
 
             &.kbq-tab-nav-bar_on-surface {
-                .kbq-tab-header {
-                    background: var(--kbq-tabs-tab-stack-transparent-on-surface-background);
-                }
+                background: var(--kbq-tabs-tab-stack-transparent-on-surface-background);
 
                 & .kbq-tab-link {
                     @include kbq-tab-item-style(transparent, on-background);
@@ -151,6 +141,6 @@
 @mixin kbq-tabs-typography() {
     .kbq-tab-label,
     .kbq-tab-link {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
     }
 }

package/tabs/paginated-tab-header.d.ts

@@ -1,8 +1,6 @@
 import { FocusableOption } from '@angular/cdk/a11y';
-import { Direction, Directionality } from '@angular/cdk/bidi';
-import { Platform } from '@angular/cdk/platform';
-import { ViewportRuler } from '@angular/cdk/scrolling';
-import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, QueryList } from '@angular/core';
+import { Direction } from '@angular/cdk/bidi';
+import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, DestroyRef, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * The directions that scrolling can go in when the header's tabs exceed the header width. 'After'
@@ -19,13 +17,6 @@ export type KbqPaginatedTabHeaderItem = FocusableOption & {
  * @docs-private
  */
 export declare abstract class KbqPaginatedTabHeader implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy {
-    protected elementRef: ElementRef<HTMLElement>;
-    protected changeDetectorRef: ChangeDetectorRef;
-    private viewportRuler;
-    private ngZone;
-    private platform;
-    private dir;
-    animationMode?: string | undefined;
     /** The index of the active tab. */
     get selectedIndex(): number;
     set selectedIndex(value: number);
@@ -39,11 +30,11 @@ export declare abstract class KbqPaginatedTabHeader implements AfterContentCheck
     set scrollDistance(v: number);
     /** The distance in pixels that the tab labels should be translated to the left. */
     private _scrollDistance;
-    abstract items: QueryList<KbqPaginatedTabHeaderItem>;
-    abstract tabListContainer: ElementRef<HTMLElement>;
-    abstract tabList: ElementRef<HTMLElement>;
-    abstract nextPaginator: ElementRef<HTMLElement>;
-    abstract previousPaginator: ElementRef<HTMLElement>;
+    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. */
@@ -59,8 +50,10 @@ export declare abstract class KbqPaginatedTabHeader implements AfterContentCheck
      * layout recalculations if it's known that pagination won't be required.
      */
     disablePagination: boolean;
-    private readonly destroyRef;
-    protected vertical: 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.
@@ -76,7 +69,14 @@ export declare abstract class KbqPaginatedTabHeader implements AfterContentCheck
     private stopScrolling;
     /** Whether the header should scroll to the selected index after the view has been checked. */
     private selectedIndexChanged;
-    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, platform: Platform, dir: Directionality, animationMode?: string | undefined);
+    protected readonly destroyRef: DestroyRef;
+    readonly elementRef: ElementRef<any>;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    private readonly viewportRuler;
+    private readonly ngZone;
+    private readonly platform;
+    private readonly dir;
+    constructor();
     /** Called when the user has selected an item via the keyboard. */
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
@@ -173,6 +173,8 @@ export declare abstract class KbqPaginatedTabHeader implements AfterContentCheck
      */
     private scrollTo;
     private updateScrollPosition;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPaginatedTabHeader, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPaginatedTabHeader, never, never, { "disablePagination": { "alias": "disablePagination"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPaginatedTabHeader, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPaginatedTabHeader, never, never, { "disablePagination": { "alias": "disablePagination"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_disablePagination: unknown;
+    static ngAcceptInputType_vertical: unknown;
 }

package/tabs/public-api.d.ts

@@ -1,10 +1,10 @@
-export { KbqTabBody, KbqTabBodyOriginState, KbqTabBodyPortal, KbqTabBodyPositionState } from './tab-body.component';
-export { KbqTabContent } from './tab-content.directive';
+export * from './tab-body.component';
+export * from './tab-content.directive';
 export * from './tab-group.component';
-export { KbqTabHeader, ScrollDirection } from './tab-header.component';
-export { KbqTabLabelWrapper } from './tab-label-wrapper.directive';
-export { KbqTabLabel } from './tab-label.directive';
-export { KbqTabLink, KbqTabNav } from './tab-nav-bar/index';
-export { KbqTab } from './tab.component';
+export * from './tab-header.component';
+export * from './tab-label-wrapper.directive';
+export * from './tab-label.directive';
+export * from './tab-nav-bar';
+export * from './tab.component';
 export * from './tabs-animations';
 export * from './tabs.module';

package/tabs/tab-group.component.d.ts

@@ -6,23 +6,19 @@ import { KbqTab } from './tab.component';
 import * as i0 from "@angular/core";
 export 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]", never, {}, {}, never, never, false, 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, false, never>;
 }
 export 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]", never, {}, {}, never, never, false, 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, false, never>;
 }
 export 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]", never, {}, {}, never, never, false, 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, false, never>;
 }
 export declare class KbqVerticalTabsCssStyler {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqVerticalTabsCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqVerticalTabsCssStyler, "kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical]", never, {}, {}, never, never, false, never>;
-}
-export declare class KbqUnderlinedTabsCssStyler {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUnderlinedTabsCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqUnderlinedTabsCssStyler, "kbq-tab-group[underlined], [kbq-tab-nav-bar][underlined]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqVerticalTabsCssStyler, "kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical], [kbqTabNavBar][vertical]", never, {}, {}, never, never, false, never>;
 }
 /** A simple change event emitted on focus or selection changes. */
 export declare class KbqTabChangeEvent {
@@ -34,38 +30,33 @@ export declare class KbqTabChangeEvent {
 /** Possible positions for the tab header. */
 export type KbqTabHeaderPosition = 'above' | 'below';
 /** Object that can be used to configure the default options for the tabs module. */
-export interface IKbqTabsConfig {
+export 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. */
-export declare const KBQ_TABS_CONFIG: InjectionToken<string>;
-/** @docs-private */
-export declare class KbqTabGroupBase {
+export declare const KBQ_TABS_CONFIG: InjectionToken<KbqTabsConfig>;
+declare class KbqTabGroupBase {
     elementRef: ElementRef;
     constructor(elementRef: ElementRef);
 }
-/** @docs-private */
-export declare const KbqTabGroupMixinBase: CanDisableCtor & typeof KbqTabGroupBase;
+declare const KbqTabGroupMixinBase: CanDisableCtor & typeof KbqTabGroupBase;
 export type KbqTabSelectBy = string | number | ((tabs: KbqTab[]) => KbqTab | null);
 /**
- * Tab-group component.  Supports basic tab pairs (label + content) and includes
- * keyboard navigation.
+ * Tab-group component.  Supports basic tab pairs (label + content) and includes keyboard navigation.
  */
 export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterContentInit, AfterViewInit, AfterContentChecked, OnDestroy {
     private readonly changeDetectorRef;
     readonly resizeStream: Subject<Event>;
-    vertical: boolean;
-    underlined: boolean;
     tabs: QueryList<KbqTab>;
     tabBodyWrapper: ElementRef;
     tabHeader: KbqTabHeader;
     transparent: boolean;
     onSurface: boolean;
+    underlined: boolean;
+    vertical: boolean;
     /** Whether the tab group should grow to the size of the active tab. */
-    get dynamicHeight(): boolean;
-    set dynamicHeight(value: boolean);
-    private _dynamicHeight;
+    dynamicHeight: boolean;
     /** The index of the active tab. */
     get selectedIndex(): number | null;
     set selectedIndex(value: number | null);
@@ -96,7 +87,7 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     private resizeSubscription;
     private readonly groupId;
     private readonly resizeDebounceInterval;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, vertical: string, underlined: string, defaultConfig?: IKbqTabsConfig);
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, defaultConfig?: KbqTabsConfig);
     /**
      * 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
@@ -137,6 +128,12 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     /** Clamps the given index to the bounds of 0 and the tabs length. */
     private clampTabIndex;
     private getTabIndexToSelect;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabGroup, [null, null, { attribute: "vertical"; }, { attribute: "underlined"; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabGroup, "kbq-tab-group", ["kbqTabGroup"], { "disabled": { "alias": "disabled"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; "onSurface": { "alias": "onSurface"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "activeTab": { "alias": "activeTab"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "activeTabChange": "activeTabChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabGroup, [null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabGroup, "kbq-tab-group", ["kbqTabGroup"], { "disabled": { "alias": "disabled"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; "onSurface": { "alias": "onSurface"; "required": false; }; "underlined": { "alias": "underlined"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "activeTab": { "alias": "activeTab"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "activeTabChange": "activeTabChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, false, never>;
+    static ngAcceptInputType_transparent: unknown;
+    static ngAcceptInputType_onSurface: unknown;
+    static ngAcceptInputType_underlined: unknown;
+    static ngAcceptInputType_vertical: unknown;
+    static ngAcceptInputType_dynamicHeight: unknown;
 }
+export {};

package/tabs/tab-group.scss

@@ -1,7 +1,5 @@
 @use '../core/styles/common/layout';
 
-@use '../core/styles/common/tokens' as *;
-
 .kbq-tab-group {
     display: flex;
     flex-direction: column;
@@ -12,43 +10,43 @@
     &.kbq-tab-group_inverted-header {
         flex-direction: column-reverse;
     }
-}
 
-.kbq-tab-group_vertical {
-    flex-direction: row;
+    &.kbq-tab-group_vertical {
+        flex-direction: row;
 
-    .kbq-tab-list__content {
-        gap: var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0;
-    }
+        .kbq-tab-list__content {
+            gap: var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0;
+        }
 
-    & .kbq-tab-header__content {
-        overflow-y: auto;
+        & .kbq-tab-header__container {
+            overflow-y: auto;
+        }
     }
-}
 
-.kbq-tab-body__wrapper {
-    display: flex;
-    overflow: hidden;
-    position: relative;
-}
+    .kbq-tab-body__wrapper {
+        display: flex;
+        overflow: hidden;
+        position: relative;
+    }
 
-.kbq-tab-body {
-    @include layout.kbq-fill;
+    .kbq-tab-body {
+        @include layout.kbq-fill;
 
-    display: block;
-    overflow: hidden;
+        display: block;
+        overflow: hidden;
 
-    &.kbq-tab-body__active {
-        position: relative;
+        &.kbq-tab-body__active {
+            position: relative;
 
-        overflow-x: hidden;
-        overflow-y: auto;
+            overflow-x: hidden;
+            overflow-y: auto;
 
-        z-index: 1;
-        flex-grow: 1;
-    }
+            z-index: 1;
+            flex-grow: 1;
+        }
 
-    .kbq-tab-group.kbq-tab-group_dynamic-height &.kbq-tab-body__active {
-        overflow-y: hidden;
+        .kbq-tab-group.kbq-tab-group_dynamic-height &.kbq-tab-body__active {
+            overflow-y: hidden;
+        }
     }
 }

package/tabs/tab-header.component.d.ts

@@ -1,7 +1,4 @@
-import { Directionality } from '@angular/cdk/bidi';
-import { Platform } from '@angular/cdk/platform';
-import { ViewportRuler } from '@angular/cdk/scrolling';
-import { ChangeDetectorRef, ElementRef, NgZone, QueryList } from '@angular/core';
+import { ElementRef, QueryList } from '@angular/core';
 import { KbqPaginatedTabHeader } from './paginated-tab-header';
 import { KbqTabLabelWrapper } from './tab-label-wrapper.directive';
 import * as i0 from "@angular/core";
@@ -19,20 +16,17 @@ export type ScrollDirection = 'after' | 'before';
  * @docs-private
  */
 export declare class KbqTabHeader extends KbqPaginatedTabHeader {
-    readonly elementRef: ElementRef;
-    readonly changeDetectorRef: ChangeDetectorRef;
-    /** The index of the active tab. */
-    vertical: boolean;
+    /** Whether the tabs are underlined. */
     underlined: boolean;
-    items: QueryList<KbqTabLabelWrapper>;
-    tabListContainer: ElementRef;
-    tabList: ElementRef;
-    nextPaginator: ElementRef<HTMLElement>;
-    previousPaginator: ElementRef<HTMLElement>;
-    get activeTabOffsetWidth(): string;
-    get activeTabOffsetLeft(): string;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, platform: Platform, dir: Directionality, animationMode?: string);
-    itemSelected(event: KeyboardEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabHeader, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "underlined": { "alias": "underlined"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false, never>;
+    readonly items: QueryList<KbqTabLabelWrapper>;
+    readonly tabListContainer: ElementRef;
+    readonly tabList: ElementRef;
+    readonly nextPaginator: ElementRef<HTMLElement>;
+    readonly previousPaginator: ElementRef<HTMLElement>;
+    protected get activeTabOffsetWidth(): string | null;
+    protected get activeTabOffsetLeft(): string | null;
+    protected itemSelected(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabHeader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "underlined": { "alias": "underlined"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false, never>;
+    static ngAcceptInputType_underlined: unknown;
 }

package/tabs/tab-header.scss

@@ -1,6 +1,7 @@
 @use '../core/styles/common/vendor-prefixes';
-@use 'tabs-common' as *;
-@use '../core/styles/common/tokens' as *;
+@use './tabs-common';
+
+@include tabs-common.paginated-tab-header;
 
 .kbq-tab-header {
     display: flex;
@@ -53,44 +54,21 @@
     transition: all 0.2s ease-in-out;
 }
 
-.kbq-tab-header__pagination {
-    @include vendor-prefixes.user-select(none);
-
-    position: relative;
-    display: none;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    z-index: 2;
-    -webkit-tap-highlight-color: transparent;
-    touch-action: none;
-
-    padding-left: 12px;
-    padding-right: 12px;
-
-    .kbq-tab-header__pagination-controls_enabled & {
-        display: flex;
-    }
-}
-
-.kbq-tab-header__content {
+.kbq-tab-header__container {
     display: flex;
     flex-grow: 1;
-
     z-index: 1;
     overflow: hidden;
 }
 
 .kbq-tab-list {
     position: relative;
-
     width: 100%;
-
     transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
 }
 
 .kbq-tab-label {
-    @include tab-label;
+    @include tabs-common.tab-label;
     @include vendor-prefixes.user-select(none);
 
     .kbq-tab-group_stretch-labels & {

package/tabs/tab-link.scss

@@ -0,0 +1,14 @@
+@use './tabs-common';
+
+.kbq-tab-link {
+    vertical-align: top;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+
+    @include tabs-common.tab-label;
+
+    & .kbq-tab-group_stretch-labels & {
+        flex-basis: 0;
+        flex-grow: 1;
+    }
+}