@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.10

package/fesm2022/koobiq-components-tabs.mjs

@@ -8,7 +8,7 @@ import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Input, Output, ViewChild, forwardRef, Directive, Inject, InjectionToken, TemplateRef, ContentChild, ContentChildren, Attribute, NgModule } from '@angular/core';
-import { mixinDisabled, PopUpPlacements, mixinTabIndex, KbqCommonModule } from '@koobiq/components/core';
+import { mixinDisabled, PopUpPlacements, KBQ_SELECT_SCROLL_STRATEGY, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, mixinTabIndex, KbqCommonModule } from '@koobiq/components/core';
 import * as i4 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
 import * as i4$1 from '@koobiq/components/tooltip';
@@ -23,8 +23,10 @@ import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 import { hasModifierKey, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { HOME, END, UP_ARROW, DOWN_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@koobiq/cdk/keycodes';
+import { KBQ_DROPDOWN_SCROLL_STRATEGY } from '@koobiq/components/dropdown';
+import { KBQ_POPOVER_SCROLL_STRATEGY } from '@koobiq/components/popover';
 
-const mcTabsAnimations = {
+const kbqTabsAnimations = {
     /** Animation translates a tab along the X axis. */
     translateTab: trigger('translateTab', [
         // Note: transitions to `none` instead of 0, because some browsers might blur the content.
@@ -142,13 +144,13 @@ class KbqTabBody {
         return 'right-origin-center';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabBody, deps: [{ token: i0.ElementRef }, { token: i3.Directionality, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabBody, selector: "kbq-tab-body", inputs: { position: "position", content: "content", origin: "origin", animationDuration: "animationDuration" }, outputs: { onCentering: "onCentering", beforeCentering: "beforeCentering", afterLeavingCenter: "afterLeavingCenter", onCentered: "onCentered" }, host: { classAttribute: "kbq-tab-body" }, viewQueries: [{ propertyName: "portalHost", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<div class=\"kbq-tab-body__content\"\n     #content\n     [@translateTab]=\"{\n        value: bodyPosition,\n        params: {animationDuration: animationDuration}\n     }\"\n     (@translateTab.start)=\"onTranslateTabStarted($event)\"\n     (@translateTab.done)=\"onTranslateTabComplete($event)\"\n     cdk-scrollable>\n    <ng-template mcTabBodyHost></ng-template>\n</div>\n", styles: [".kbq-tab-body__content{height:100%;overflow:auto}.kbq-tab-body__content .kbq-tab-group_dynamic-height{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.CdkScrollable; }), selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i0.forwardRef(function () { return KbqTabBodyPortal; }), selector: "[mcTabBodyHost]" }], animations: [mcTabsAnimations.translateTab], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabBody, selector: "kbq-tab-body", inputs: { position: "position", content: "content", origin: "origin", animationDuration: "animationDuration" }, outputs: { onCentering: "onCentering", beforeCentering: "beforeCentering", afterLeavingCenter: "afterLeavingCenter", onCentered: "onCentered" }, host: { classAttribute: "kbq-tab-body" }, viewQueries: [{ propertyName: "portalHost", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<div class=\"kbq-tab-body__content\"\n     #content\n     [@translateTab]=\"{\n        value: bodyPosition,\n        params: {animationDuration: animationDuration}\n     }\"\n     (@translateTab.start)=\"onTranslateTabStarted($event)\"\n     (@translateTab.done)=\"onTranslateTabComplete($event)\"\n     cdk-scrollable>\n    <ng-template kbqTabBodyHost></ng-template>\n</div>\n", styles: [".kbq-tab-body__content{height:100%;overflow:auto}.kbq-tab-body__content .kbq-tab-group_dynamic-height{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.CdkScrollable; }), selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i0.forwardRef(function () { return KbqTabBodyPortal; }), selector: "[kbqTabBodyHost]" }], animations: [kbqTabsAnimations.translateTab], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabBody, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tab-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [mcTabsAnimations.translateTab], host: {
+            args: [{ selector: 'kbq-tab-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [kbqTabsAnimations.translateTab], host: {
                         class: 'kbq-tab-body'
-                    }, template: "<div class=\"kbq-tab-body__content\"\n     #content\n     [@translateTab]=\"{\n        value: bodyPosition,\n        params: {animationDuration: animationDuration}\n     }\"\n     (@translateTab.start)=\"onTranslateTabStarted($event)\"\n     (@translateTab.done)=\"onTranslateTabComplete($event)\"\n     cdk-scrollable>\n    <ng-template mcTabBodyHost></ng-template>\n</div>\n", styles: [".kbq-tab-body__content{height:100%;overflow:auto}.kbq-tab-body__content .kbq-tab-group_dynamic-height{overflow:hidden}\n"] }]
+                    }, template: "<div class=\"kbq-tab-body__content\"\n     #content\n     [@translateTab]=\"{\n        value: bodyPosition,\n        params: {animationDuration: animationDuration}\n     }\"\n     (@translateTab.start)=\"onTranslateTabStarted($event)\"\n     (@translateTab.done)=\"onTranslateTabComplete($event)\"\n     cdk-scrollable>\n    <ng-template kbqTabBodyHost></ng-template>\n</div>\n", styles: [".kbq-tab-body__content{height:100%;overflow:auto}.kbq-tab-body__content .kbq-tab-group_dynamic-height{overflow:hidden}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i3.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { position: [{
@@ -205,12 +207,12 @@ class KbqTabBodyPortal extends CdkPortalOutlet {
         this.leavingSub.unsubscribe();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabBodyPortal, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: forwardRef(() => KbqTabBody) }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabBodyPortal, selector: "[mcTabBodyHost]", usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabBodyPortal, selector: "[kbqTabBodyHost]", usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabBodyPortal, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[mcTabBodyHost]'
+                    selector: '[kbqTabBodyHost]'
                 }]
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: KbqTabBody, decorators: [{
                     type: Inject,
@@ -223,11 +225,11 @@ class KbqTabContent {
         this.template = template;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabContent, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabContent, selector: "[mcTabContent]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabContent, selector: "[kbqTabContent]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabContent, decorators: [{
             type: Directive,
-            args: [{ selector: '[mcTabContent]' }]
+            args: [{ selector: '[kbqTabContent]' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /* tslint:disable:naming-convention */
@@ -357,7 +359,10 @@ class KbqPaginatedTabHeader {
             // 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(realign));
+            this.ngZone.run(() => Promise.resolve().then(() => {
+                this.updateScrollPosition();
+                realign();
+            }));
             this.keyManager.withHorizontalOrientation(this.getLayoutDirection());
         });
         // If there is a change in the focus key manager we need to emit the `indexFocused`
@@ -678,6 +683,12 @@ class KbqPaginatedTabHeader {
         this.checkScrollingControls();
         return { maxScrollDistance, distance: this.scrollDistance };
     }
+    updateScrollPosition() {
+        const maxScrollDistance = this.getMaxScrollDistance();
+        if (this.scrollDistance > maxScrollDistance) {
+            this.scrollTo(maxScrollDistance);
+        }
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqPaginatedTabHeader, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ViewportRuler }, { token: i0.NgZone }, { token: i2.Platform }, { token: i3.Directionality, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqPaginatedTabHeader, inputs: { disablePagination: "disablePagination" }, ngImport: i0 }); }
 }
@@ -698,12 +709,12 @@ const KBQ_TAB_LABEL = new InjectionToken('KbqTabLabel');
 /** Used to flag tab labels for use with the portal directive */
 class KbqTabLabel extends CdkPortal {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabLabel, selector: "[kbq-tab-label], [mcTabLabel]", providers: [{ provide: KBQ_TAB_LABEL, useExisting: KbqTabLabel }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabLabel, selector: "[kbq-tab-label], [kbqTabLabel]", providers: [{ provide: KBQ_TAB_LABEL, useExisting: KbqTabLabel }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabLabel, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kbq-tab-label], [mcTabLabel]',
+                    selector: '[kbq-tab-label], [kbqTabLabel]',
                     providers: [{ provide: KBQ_TAB_LABEL, useExisting: KbqTabLabel }]
                 }]
         }] });
@@ -797,20 +808,27 @@ class KbqTab extends KbqTabMixinBase {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTab, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTab, selector: "kbq-tab", inputs: { disabled: "disabled", tooltipTitle: "tooltipTitle", tooltipPlacement: "tooltipPlacement", textLabel: ["label", "textLabel"], empty: "empty", tabId: "tabId" }, queries: [{ propertyName: "templateLabel", first: true, predicate: KBQ_TAB_LABEL, descendants: true }, { propertyName: "explicitContent", first: true, predicate: KbqTabContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["mcTab"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTab, selector: "kbq-tab", inputs: { disabled: "disabled", tooltipTitle: "tooltipTitle", tooltipPlacement: "tooltipPlacement", textLabel: ["label", "textLabel"], empty: "empty", tabId: "tabId" }, providers: [
+            ...[KBQ_SELECT_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY, KBQ_POPOVER_SCROLL_STRATEGY]
+                .map(((token) => KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER(token, ((overlay) => (() => overlay.scrollStrategies.close())))))
+        ], queries: [{ propertyName: "templateLabel", first: true, predicate: KBQ_TAB_LABEL, descendants: true }, { propertyName: "explicitContent", first: true, predicate: KbqTabContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["kbqTab"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTab, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-tab',
-                    exportAs: 'mcTab',
+                    exportAs: 'kbqTab',
                     // Create a template for the content of the <kbq-tab> so that we can grab a reference to this
                     // TemplateRef and use it in a Portal to render the tab content in the appropriate place in the
                     // tab-group.
                     template: '<ng-template><ng-content></ng-content></ng-template>',
                     inputs: ['disabled'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [
+                        ...[KBQ_SELECT_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY, KBQ_POPOVER_SCROLL_STRATEGY]
+                            .map(((token) => KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER(token, ((overlay) => (() => overlay.scrollStrategies.close())))))
+                    ]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { templateLabel: [{
                 type: ContentChild,
@@ -891,14 +909,15 @@ class KbqTabLabelWrapper extends KbqTabLabelWrapperMixinBase {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabLabelWrapper, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabLabelWrapper, selector: "[mcTabLabelWrapper]", inputs: { disabled: "disabled", tab: "tab" }, host: { properties: { "attr.disabled": "disabled || null" } }, queries: [{ propertyName: "labelContent", first: true, predicate: ["labelContent"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabLabelWrapper, selector: "[kbqTabLabelWrapper]", inputs: { disabled: "disabled", tab: "tab" }, host: { properties: { "class.kbq-disabled": "disabled", "attr.disabled": "disabled || null" } }, queries: [{ propertyName: "labelContent", first: true, predicate: ["labelContent"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabLabelWrapper, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[mcTabLabelWrapper]',
+                    selector: '[kbqTabLabelWrapper]',
                     inputs: ['disabled'],
                     host: {
+                        '[class.kbq-disabled]': 'disabled',
                         '[attr.disabled]': 'disabled || null'
                     }
                 }]
@@ -928,7 +947,7 @@ class KbqTabHeader extends KbqPaginatedTabHeader {
         event.preventDefault();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabHeader, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ViewportRuler }, { token: i0.NgZone }, { token: i2.Platform }, { token: i3.Directionality, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabHeader, selector: "kbq-tab-header", inputs: { selectedIndex: "selectedIndex", vertical: "vertical" }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, host: { properties: { "class.kbq-tab-header_vertical": "vertical", "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 class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n     #previousPaginator\n     [class.kbq-disabled]=\"disableScrollBefore\"\n     (click)=\"handlePaginatorClick('before')\"\n     (mousedown)=\"handlePaginatorPress('before', $event)\"\n     (touchend)=\"stopInterval()\">\n\n    <i kbq-icon=\"mc-angle-left-M_16\"></i>\n</div>\n\n<div class=\"kbq-tab-header__content\"\n     #tabListContainer\n     (keydown)=\"handleKeydown($event)\">\n\n    <div class=\"kbq-tab-list\"\n         #tabList\n         (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<div class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n     #nextPaginator\n     [class.kbq-disabled]=\"disableScrollAfter\"\n     (mousedown)=\"handlePaginatorPress('after', $event)\"\n     (click)=\"handlePaginatorClick('after')\"\n     (touchend)=\"stopInterval()\">\n\n    <i kbq-icon=\"mc-angle-right-M_16\"></i>\n</div>\n", styles: [".kbq-tab-label.cdk-keyboard-focused:after{display:block;content:\"\";position:absolute;top:0;right:calc(-1 * var(--kbq-tabs-size-border-width, 1px));bottom:calc(-1 * var(--kbq-tabs-size-border-width, 1px));left:calc(-1 * var(--kbq-tabs-size-border-width, 1px))}.kbq-tab-label.kbq-tab-label_horizontal.cdk-keyboard-focused:after,.kbq-tab-label_old.cdk-keyboard-focused:after{border-width:calc(var(--kbq-tabs-size-border-width, 1px) * 2);border-style:solid;border-top-left-radius:var(--kbq-tabs-size-border-radius, 8px);border-top-right-radius:var(--kbq-tabs-size-border-radius, 8px);border-bottom-color:transparent}.kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.kbq-tab-list__content{display:flex}.kbq-tab-group_align-labels-center .kbq-tab-list__content{justify-content:center}.kbq-tab-group_align-labels-end .kbq-tab-list__content{justify-content:flex-end}.kbq-tab-header_vertical .kbq-tab-list__content{flex-direction:column}.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding-left:12px;padding-right:12px;border-bottom-style:solid;border-bottom-width:var(--kbq-tabs-size-border-width, 1px)}.kbq-tab-header__pagination.kbq-tab-header__pagination_before{border-right-style:solid;border-right-width:var(--kbq-tabs-size-border-width, 1px)}.kbq-tab-header__pagination.kbq-tab-header__pagination_after{border-left-style:solid;border-left-width:var(--kbq-tabs-size-border-width, 1px)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__content{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;height:var(--kbq-tabs-size-height, 40px);text-align:center;white-space:nowrap;cursor:pointer;padding-right:var(--kbq-tabs-size-padding-horizontal, 16px);padding-left:var(--kbq-tabs-size-padding-horizontal, 16px);outline:none;-webkit-user-select:none;user-select:none}.kbq-tab-label.kbq-active{cursor:default}.kbq-tab-label.kbq-active:before{display:block;content:\"\";position:absolute}.kbq-tab-label.cdk-keyboard-focused{z-index:1}.kbq-tab-label:first-child.cdk-keyboard-focused:after{left:0}.kbq-tab-label:last-child.cdk-keyboard-focused:after{right:0}.kbq-tab-label[disabled]{pointer-events:none}.kbq-tab-label .kbq-tab-label__content>.kbq-icon.kbq-icon_left{margin-right:var(--kbq-tabs-size-label-icon-margin, 8px)}.kbq-tab-label .kbq-tab-label__content>.kbq-icon.kbq-icon_right{margin-left:var(--kbq-tabs-size-label-icon-margin, 8px)}.kbq-tab-label.kbq-tab-label_horizontal{border-bottom-width:var(--kbq-tabs-size-border-width, 1px);border-bottom-style:solid}.kbq-tab-label.kbq-tab-label_horizontal.kbq-active:before{bottom:calc(-1 * var(--kbq-tabs-size-border-width, 1px));left:0;right:0;height:var(--kbq-tabs-size-highlight-height, 4px)}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical.kbq-active:before{top:0;bottom:0;left:calc(-1 * var(--kbq-tabs-size-border-width, 1px));width:var(--kbq-tabs-size-highlight-height, 5px)}.kbq-tab-label.kbq-tab-label_vertical.cdk-keyboard-focused:after{right:0;left:0;border-width:calc(var(--kbq-tabs-size-border-width, 1px) * 2);border-style:solid}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-label_old{border-bottom-width:var(--kbq-tabs-size-border-width, 1px);border-bottom-style:solid;border-width:var(--kbq-tabs-size-border-width, 1px);border-style:solid;border-top-left-radius:var(--kbq-tabs-size-border-radius, 8px);border-top-right-radius:var(--kbq-tabs-size-border-radius, 8px);border-left:none;border-left-color:transparent;border-right:none;border-right-color:transparent}.kbq-tab-label_old.kbq-active{border-width:var(--kbq-tabs-size-border-width, 1px);border-style:solid;padding-right:calc(var(--kbq-tabs-size-padding-horizontal, 16px) - var(--kbq-tabs-size-border-width, 1px));padding-left:calc(var(--kbq-tabs-size-padding-horizontal, 16px) - var(--kbq-tabs-size-border-width, 1px))}.kbq-tab-label_old.kbq-active.cdk-keyboard-focused:after{right:calc(-2 * var(--kbq-tabs-size-border-width, 1px));left:calc(-2 * var(--kbq-tabs-size-border-width, 1px))}.kbq-tab-label_old.cdk-keyboard-focused:after{top:-1px}.kbq-tab-group_stretch-labels .kbq-tab-label,.kbq-tab-group_stretch-labels .kbq-tab-label_old{flex-basis:0;flex-grow:1}\n"], dependencies: [{ kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabHeader, selector: "kbq-tab-header", inputs: { selectedIndex: "selectedIndex", vertical: "vertical" }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, host: { properties: { "class.kbq-tab-header_vertical": "vertical", "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 class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n     #previousPaginator\n     [class.kbq-disabled]=\"disableScrollBefore\"\n     (click)=\"handlePaginatorClick('before')\"\n     (mousedown)=\"handlePaginatorPress('before', $event)\"\n     (touchend)=\"stopInterval()\">\n\n    <i kbq-icon=\"mc-angle-left-M_16\"></i>\n</div>\n\n<div class=\"kbq-tab-header__content\"\n     #tabListContainer\n     (keydown)=\"handleKeydown($event)\">\n\n    <div class=\"kbq-tab-list\"\n         #tabList\n         (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<div class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n     #nextPaginator\n     [class.kbq-disabled]=\"disableScrollAfter\"\n     (mousedown)=\"handlePaginatorPress('after', $event)\"\n     (click)=\"handlePaginatorClick('after')\"\n     (touchend)=\"stopInterval()\">\n\n    <i kbq-icon=\"mc-angle-right-M_16\"></i>\n</div>\n", styles: [".kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.kbq-tab-list__content{display:flex}.kbq-tab-group_align-labels-center .kbq-tab-list__content{justify-content:center}.kbq-tab-group_align-labels-end .kbq-tab-list__content{justify-content:flex-end}.kbq-tab-header_vertical .kbq-tab-list__content{flex-direction:column}.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding-left:12px;padding-right:12px}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__content{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical, 8px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal, 12px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width, 2px);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius, 8px);outline:none;-webkit-user-select:none;user-select: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;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal, 4px)}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"], dependencies: [{ kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabHeader, decorators: [{
             type: Component,
@@ -937,7 +956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         '[class.kbq-tab-header_vertical]': 'vertical',
                         '[class.kbq-tab-header__pagination-controls_enabled]': 'showPaginationControls',
                         '[class.kbq-tab-header_rtl]': 'getLayoutDirection() == \'rtl\''
-                    }, template: "<div class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n     #previousPaginator\n     [class.kbq-disabled]=\"disableScrollBefore\"\n     (click)=\"handlePaginatorClick('before')\"\n     (mousedown)=\"handlePaginatorPress('before', $event)\"\n     (touchend)=\"stopInterval()\">\n\n    <i kbq-icon=\"mc-angle-left-M_16\"></i>\n</div>\n\n<div class=\"kbq-tab-header__content\"\n     #tabListContainer\n     (keydown)=\"handleKeydown($event)\">\n\n    <div class=\"kbq-tab-list\"\n         #tabList\n         (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<div class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n     #nextPaginator\n     [class.kbq-disabled]=\"disableScrollAfter\"\n     (mousedown)=\"handlePaginatorPress('after', $event)\"\n     (click)=\"handlePaginatorClick('after')\"\n     (touchend)=\"stopInterval()\">\n\n    <i kbq-icon=\"mc-angle-right-M_16\"></i>\n</div>\n", styles: [".kbq-tab-label.cdk-keyboard-focused:after{display:block;content:\"\";position:absolute;top:0;right:calc(-1 * var(--kbq-tabs-size-border-width, 1px));bottom:calc(-1 * var(--kbq-tabs-size-border-width, 1px));left:calc(-1 * var(--kbq-tabs-size-border-width, 1px))}.kbq-tab-label.kbq-tab-label_horizontal.cdk-keyboard-focused:after,.kbq-tab-label_old.cdk-keyboard-focused:after{border-width:calc(var(--kbq-tabs-size-border-width, 1px) * 2);border-style:solid;border-top-left-radius:var(--kbq-tabs-size-border-radius, 8px);border-top-right-radius:var(--kbq-tabs-size-border-radius, 8px);border-bottom-color:transparent}.kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.kbq-tab-list__content{display:flex}.kbq-tab-group_align-labels-center .kbq-tab-list__content{justify-content:center}.kbq-tab-group_align-labels-end .kbq-tab-list__content{justify-content:flex-end}.kbq-tab-header_vertical .kbq-tab-list__content{flex-direction:column}.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding-left:12px;padding-right:12px;border-bottom-style:solid;border-bottom-width:var(--kbq-tabs-size-border-width, 1px)}.kbq-tab-header__pagination.kbq-tab-header__pagination_before{border-right-style:solid;border-right-width:var(--kbq-tabs-size-border-width, 1px)}.kbq-tab-header__pagination.kbq-tab-header__pagination_after{border-left-style:solid;border-left-width:var(--kbq-tabs-size-border-width, 1px)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__content{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;height:var(--kbq-tabs-size-height, 40px);text-align:center;white-space:nowrap;cursor:pointer;padding-right:var(--kbq-tabs-size-padding-horizontal, 16px);padding-left:var(--kbq-tabs-size-padding-horizontal, 16px);outline:none;-webkit-user-select:none;user-select:none}.kbq-tab-label.kbq-active{cursor:default}.kbq-tab-label.kbq-active:before{display:block;content:\"\";position:absolute}.kbq-tab-label.cdk-keyboard-focused{z-index:1}.kbq-tab-label:first-child.cdk-keyboard-focused:after{left:0}.kbq-tab-label:last-child.cdk-keyboard-focused:after{right:0}.kbq-tab-label[disabled]{pointer-events:none}.kbq-tab-label .kbq-tab-label__content>.kbq-icon.kbq-icon_left{margin-right:var(--kbq-tabs-size-label-icon-margin, 8px)}.kbq-tab-label .kbq-tab-label__content>.kbq-icon.kbq-icon_right{margin-left:var(--kbq-tabs-size-label-icon-margin, 8px)}.kbq-tab-label.kbq-tab-label_horizontal{border-bottom-width:var(--kbq-tabs-size-border-width, 1px);border-bottom-style:solid}.kbq-tab-label.kbq-tab-label_horizontal.kbq-active:before{bottom:calc(-1 * var(--kbq-tabs-size-border-width, 1px));left:0;right:0;height:var(--kbq-tabs-size-highlight-height, 4px)}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical.kbq-active:before{top:0;bottom:0;left:calc(-1 * var(--kbq-tabs-size-border-width, 1px));width:var(--kbq-tabs-size-highlight-height, 5px)}.kbq-tab-label.kbq-tab-label_vertical.cdk-keyboard-focused:after{right:0;left:0;border-width:calc(var(--kbq-tabs-size-border-width, 1px) * 2);border-style:solid}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-label_old{border-bottom-width:var(--kbq-tabs-size-border-width, 1px);border-bottom-style:solid;border-width:var(--kbq-tabs-size-border-width, 1px);border-style:solid;border-top-left-radius:var(--kbq-tabs-size-border-radius, 8px);border-top-right-radius:var(--kbq-tabs-size-border-radius, 8px);border-left:none;border-left-color:transparent;border-right:none;border-right-color:transparent}.kbq-tab-label_old.kbq-active{border-width:var(--kbq-tabs-size-border-width, 1px);border-style:solid;padding-right:calc(var(--kbq-tabs-size-padding-horizontal, 16px) - var(--kbq-tabs-size-border-width, 1px));padding-left:calc(var(--kbq-tabs-size-padding-horizontal, 16px) - var(--kbq-tabs-size-border-width, 1px))}.kbq-tab-label_old.kbq-active.cdk-keyboard-focused:after{right:calc(-2 * var(--kbq-tabs-size-border-width, 1px));left:calc(-2 * var(--kbq-tabs-size-border-width, 1px))}.kbq-tab-label_old.cdk-keyboard-focused:after{top:-1px}.kbq-tab-group_stretch-labels .kbq-tab-label,.kbq-tab-group_stretch-labels .kbq-tab-label_old{flex-basis:0;flex-grow:1}\n"] }]
+                    }, template: "<div class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n     #previousPaginator\n     [class.kbq-disabled]=\"disableScrollBefore\"\n     (click)=\"handlePaginatorClick('before')\"\n     (mousedown)=\"handlePaginatorPress('before', $event)\"\n     (touchend)=\"stopInterval()\">\n\n    <i kbq-icon=\"mc-angle-left-M_16\"></i>\n</div>\n\n<div class=\"kbq-tab-header__content\"\n     #tabListContainer\n     (keydown)=\"handleKeydown($event)\">\n\n    <div class=\"kbq-tab-list\"\n         #tabList\n         (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<div class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n     #nextPaginator\n     [class.kbq-disabled]=\"disableScrollAfter\"\n     (mousedown)=\"handlePaginatorPress('after', $event)\"\n     (click)=\"handlePaginatorClick('after')\"\n     (touchend)=\"stopInterval()\">\n\n    <i kbq-icon=\"mc-angle-right-M_16\"></i>\n</div>\n", styles: [".kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.kbq-tab-list__content{display:flex}.kbq-tab-group_align-labels-center .kbq-tab-list__content{justify-content:center}.kbq-tab-group_align-labels-end .kbq-tab-list__content{justify-content:flex-end}.kbq-tab-header_vertical .kbq-tab-list__content{flex-direction:column}.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding-left:12px;padding-right:12px}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__content{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical, 8px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal, 12px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width, 2px);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius, 8px);outline:none;-webkit-user-select:none;user-select: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;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal, 4px)}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ViewportRuler }, { type: i0.NgZone }, { type: i2.Platform }, { type: i3.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -964,17 +983,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 args: ['previousPaginator']
             }] } });
 
-class KbqOldTabsCssStyler {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqOldTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqOldTabsCssStyler, selector: "kbq-tab-group[kbq-old-tabs]", host: { classAttribute: "kbq-tab-group_old" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqOldTabsCssStyler, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kbq-tab-group[kbq-old-tabs]',
-                    host: { class: 'kbq-tab-group_old' }
-                }]
-        }] });
 class KbqAlignTabsCenterCssStyler {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqAlignTabsCenterCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqAlignTabsCenterCssStyler, selector: "kbq-tab-group[kbq-align-tabs-center], [kbq-tab-nav-bar][kbq-align-tabs-center]", host: { classAttribute: "kbq-tab-group_align-labels-center" }, ngImport: i0 }); }
@@ -1054,10 +1062,12 @@ class KbqTabGroup extends KbqTabGroupMixinBase {
     set selectedIndex(value) {
         this.indexToSelect = coerceNumberProperty(value, null);
     }
-    constructor(elementRef, changeDetectorRef, lightTabs, vertical, defaultConfig) {
+    constructor(elementRef, changeDetectorRef, vertical, defaultConfig) {
         super(elementRef);
         this.changeDetectorRef = changeDetectorRef;
         this.resizeStream = new Subject();
+        this.transparent = false;
+        this.onSurface = false;
         this._dynamicHeight = false;
         this._selectedIndex = null;
         /** Position of the tab header. */
@@ -1084,7 +1094,6 @@ class KbqTabGroup extends KbqTabGroupMixinBase {
             this.tabHeader.items
                 .forEach((headerTab) => headerTab.checkOverflow());
         };
-        this.oldTab = coerceBooleanProperty(lightTabs);
         this.vertical = coerceBooleanProperty(vertical);
         this.groupId = nextId++;
         this.animationDuration = defaultConfig?.animationDuration || '0ms';
@@ -1249,21 +1258,22 @@ class KbqTabGroup extends KbqTabGroupMixinBase {
         // (since Kbqh.max(NaN, 0) === NaN).
         return Math.min(this.tabs.length - 1, Math.max(index || 0, 0));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabGroup, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: 'kbq-old-tabs', attribute: true }, { token: 'vertical', attribute: true }, { token: KBQ_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabGroup, selector: "kbq-tab-group", inputs: { disabled: "disabled", dynamicHeight: "dynamicHeight", selectedIndex: "selectedIndex", headerPosition: "headerPosition", animationDuration: "animationDuration" }, outputs: { selectedIndexChange: "selectedIndexChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, properties: { "class.kbq-tab-group_dynamic-height": "dynamicHeight", "class.kbq-tab-group_inverted-header": "headerPosition === \"below\"" }, classAttribute: "kbq-tab-group" }, queries: [{ propertyName: "tabs", predicate: KbqTab }], viewQueries: [{ propertyName: "tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], exportAs: ["mcTabGroup"], usesInheritance: true, ngImport: i0, template: "<kbq-tab-header\n    #tabHeader\n    [vertical]=\"vertical\"\n    [selectedIndex]=\"selectedIndex\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"selectedIndex = $event\">\n\n    <div class=\"kbq-tab-label\"\n         mcTabLabelWrapper\n         cdkMonitorElementFocus\n         [attr.tabindex]=\"getTabIndex(tab, i)\"\n         [class.kbq-tab-label_old]=\"oldTab\"\n         [class.kbq-tab-label_horizontal]=\"!vertical && !oldTab\"\n         [class.kbq-tab-label_vertical]=\"vertical && !oldTab\"\n         [class.kbq-tab-label_empty]=\"tab.empty\"\n         [class.kbq-active]=\"selectedIndex == i\"\n         *ngFor=\"let tab of tabs; let i = index\"\n         [tab]=\"tab\"\n         [id]=\"getTabLabelId(i)\"\n         [disabled]=\"tab.disabled\"\n         (click)=\"handleClick(tab, tabHeader, i)\"\n\n         [mcTooltip]=\"tab.tooltipTitle\"\n         [mcTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n         [mcTrigger]=\"'hover, focus'\"\n         [mcPlacement]=\"tab.tooltipPlacement\">\n\n        <div #labelContent class=\"kbq-tab-label__content\"\n            [class.kbq-tab-label__template]=\"tab.templateLabel\">\n            <!-- If there is a label template, use it. -->\n            <ng-template [ngIf]=\"tab.templateLabel\">\n                <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n            </ng-template>\n\n            <!-- If there is not a label template, fall back to the text label. -->\n            <ng-template [ngIf]=\"!tab.templateLabel\">{{ tab.textLabel }}</ng-template>\n        </div>\n    </div>\n</kbq-tab-header>\n\n<div class=\"kbq-tab-body__wrapper\" #tabBodyWrapper>\n    <kbq-tab-body\n        *ngFor=\"let tab of tabs; let i = index\"\n        [id]=\"getTabContentId(i)\"\n        [class.kbq-tab-body__active]=\"selectedIndex == i\"\n        [content]=\"tab.content!\"\n        [position]=\"tab.position!\"\n        [origin]=\"tab.origin!\"\n        [animationDuration]=\"animationDuration\"\n        (onCentered)=\"removeTabBodyWrapperHeight()\"\n        (onCentering)=\"setTabBodyWrapperHeight($event)\">\n    </kbq-tab-body>\n</div>\n", styles: [".kbq-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:left}.kbq-tab-group.kbq-tab-group_inverted-header{flex-direction:column-reverse}.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group_vertical .kbq-tab-header__content{overflow-y:auto;padding-top:8px;padding-bottom:1px;border-right-width:var(--kbq-tabs-size-border-width, 1px);border-right-style:solid}.kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden;flex-basis:100%}.kbq-tab-body.kbq-tab-body__active{overflow-x:hidden;overflow-y:auto;position:relative;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i1$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i4$1.KbqTooltipTrigger, selector: "[mcTooltip]", inputs: ["mcVisible", "mcPlacement", "mcPlacementPriority", "mcTooltip", "mcTooltipDisabled", "mcEnterDelay", "mcLeaveDelay", "mcTrigger", "mcTooltipClass", "color"], outputs: ["mcPlacementChange", "mcVisibleChange"], exportAs: ["mcTooltip"] }, { kind: "directive", type: KbqTabLabelWrapper, selector: "[mcTabLabelWrapper]", inputs: ["disabled", "tab"] }, { kind: "component", type: KbqTabBody, selector: "kbq-tab-body", inputs: ["position", "content", "origin", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }, { kind: "component", type: KbqTabHeader, selector: "kbq-tab-header", inputs: ["selectedIndex", "vertical"], outputs: ["selectFocusedIndex", "indexFocused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabGroup, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: 'vertical', attribute: true }, { token: KBQ_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabGroup, selector: "kbq-tab-group", inputs: { disabled: "disabled", transparent: "transparent", onSurface: "onSurface", dynamicHeight: "dynamicHeight", selectedIndex: "selectedIndex", headerPosition: "headerPosition", animationDuration: "animationDuration" }, outputs: { selectedIndexChange: "selectedIndexChange", 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" }, queries: [{ propertyName: "tabs", predicate: KbqTab }], viewQueries: [{ propertyName: "tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], exportAs: ["kbqTabGroup"], usesInheritance: true, ngImport: i0, template: "<kbq-tab-header\n    #tabHeader\n    [vertical]=\"vertical\"\n    [selectedIndex]=\"selectedIndex\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"selectedIndex = $event\">\n\n    <div class=\"kbq-tab-label\"\n         kbqTabLabelWrapper\n         cdkMonitorElementFocus\n         [attr.tabindex]=\"getTabIndex(tab, i)\"\n         [class.kbq-tab-label_horizontal]=\"!vertical\"\n         [class.kbq-tab-label_vertical]=\"vertical\"\n         [class.kbq-tab-label_empty]=\"tab.empty\"\n         [class.kbq-selected]=\"selectedIndex == i\"\n         *ngFor=\"let tab of tabs; let i = index\"\n         [tab]=\"tab\"\n         [id]=\"getTabLabelId(i)\"\n         [disabled]=\"tab.disabled\"\n         (click)=\"handleClick(tab, tabHeader, i)\"\n\n         [kbqTooltip]=\"tab.tooltipTitle\"\n         [kbqTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n         [kbqTrigger]=\"'hover, focus'\"\n         [kbqPlacement]=\"tab.tooltipPlacement\">\n\n        <div #labelContent class=\"kbq-tab-label__content\"\n            [class.kbq-tab-label__template]=\"tab.templateLabel\">\n            <!-- If there is a label template, use it. -->\n            <ng-template [ngIf]=\"tab.templateLabel\">\n                <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n            </ng-template>\n\n            <!-- If there is not a label template, fall back to the text label. -->\n            <ng-template [ngIf]=\"!tab.templateLabel\">{{ tab.textLabel }}</ng-template>\n        </div>\n    </div>\n</kbq-tab-header>\n\n<div class=\"kbq-tab-body__wrapper\" #tabBodyWrapper>\n    <kbq-tab-body\n        *ngFor=\"let tab of tabs; let i = index\"\n        [id]=\"getTabContentId(i)\"\n        [class.kbq-tab-body__active]=\"selectedIndex == i\"\n        [content]=\"tab.content!\"\n        [position]=\"tab.position!\"\n        [origin]=\"tab.origin!\"\n        [animationDuration]=\"animationDuration\"\n        (onCentered)=\"removeTabBodyWrapperHeight()\"\n        (onCentering)=\"setTabBodyWrapperHeight($event)\">\n    </kbq-tab-body>\n</div>\n", styles: [".kbq-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:left}.kbq-tab-group.kbq-tab-group_inverted-header{flex-direction:column-reverse}.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vartical, 8px) 0}.kbq-tab-group_vertical .kbq-tab-header__content{overflow-y:auto}.kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-body.kbq-tab-body__active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i1$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i4$1.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqVisible", "kbqPlacement", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "mcEnterDelay", "mcLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipColor"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: KbqTabLabelWrapper, selector: "[kbqTabLabelWrapper]", inputs: ["disabled", "tab"] }, { kind: "component", type: KbqTabBody, selector: "kbq-tab-body", inputs: ["position", "content", "origin", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }, { kind: "component", type: KbqTabHeader, selector: "kbq-tab-header", inputs: ["selectedIndex", "vertical"], outputs: ["selectFocusedIndex", "indexFocused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tab-group', exportAs: 'mcTabGroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled'], host: {
+            args: [{ selector: 'kbq-tab-group', exportAs: 'kbqTabGroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled'], host: {
                         class: 'kbq-tab-group',
+                        '[class.kbq-tab-group_filled]': '!transparent',
+                        '[class.kbq-tab-group_transparent]': 'transparent',
+                        '[class.kbq-tab-group_on-background]': '!onSurface',
+                        '[class.kbq-tab-group_on-surface]': 'onSurface',
                         '[class.kbq-tab-group_dynamic-height]': 'dynamicHeight',
                         '[class.kbq-tab-group_inverted-header]': 'headerPosition === "below"',
                         '(window:resize)': 'resizeStream.next($event)'
-                    }, template: "<kbq-tab-header\n    #tabHeader\n    [vertical]=\"vertical\"\n    [selectedIndex]=\"selectedIndex\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"selectedIndex = $event\">\n\n    <div class=\"kbq-tab-label\"\n         mcTabLabelWrapper\n         cdkMonitorElementFocus\n         [attr.tabindex]=\"getTabIndex(tab, i)\"\n         [class.kbq-tab-label_old]=\"oldTab\"\n         [class.kbq-tab-label_horizontal]=\"!vertical && !oldTab\"\n         [class.kbq-tab-label_vertical]=\"vertical && !oldTab\"\n         [class.kbq-tab-label_empty]=\"tab.empty\"\n         [class.kbq-active]=\"selectedIndex == i\"\n         *ngFor=\"let tab of tabs; let i = index\"\n         [tab]=\"tab\"\n         [id]=\"getTabLabelId(i)\"\n         [disabled]=\"tab.disabled\"\n         (click)=\"handleClick(tab, tabHeader, i)\"\n\n         [mcTooltip]=\"tab.tooltipTitle\"\n         [mcTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n         [mcTrigger]=\"'hover, focus'\"\n         [mcPlacement]=\"tab.tooltipPlacement\">\n\n        <div #labelContent class=\"kbq-tab-label__content\"\n            [class.kbq-tab-label__template]=\"tab.templateLabel\">\n            <!-- If there is a label template, use it. -->\n            <ng-template [ngIf]=\"tab.templateLabel\">\n                <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n            </ng-template>\n\n            <!-- If there is not a label template, fall back to the text label. -->\n            <ng-template [ngIf]=\"!tab.templateLabel\">{{ tab.textLabel }}</ng-template>\n        </div>\n    </div>\n</kbq-tab-header>\n\n<div class=\"kbq-tab-body__wrapper\" #tabBodyWrapper>\n    <kbq-tab-body\n        *ngFor=\"let tab of tabs; let i = index\"\n        [id]=\"getTabContentId(i)\"\n        [class.kbq-tab-body__active]=\"selectedIndex == i\"\n        [content]=\"tab.content!\"\n        [position]=\"tab.position!\"\n        [origin]=\"tab.origin!\"\n        [animationDuration]=\"animationDuration\"\n        (onCentered)=\"removeTabBodyWrapperHeight()\"\n        (onCentering)=\"setTabBodyWrapperHeight($event)\">\n    </kbq-tab-body>\n</div>\n", styles: [".kbq-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:left}.kbq-tab-group.kbq-tab-group_inverted-header{flex-direction:column-reverse}.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group_vertical .kbq-tab-header__content{overflow-y:auto;padding-top:8px;padding-bottom:1px;border-right-width:var(--kbq-tabs-size-border-width, 1px);border-right-style:solid}.kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden;flex-basis:100%}.kbq-tab-body.kbq-tab-body__active{overflow-x:hidden;overflow-y:auto;position:relative;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n"] }]
+                    }, template: "<kbq-tab-header\n    #tabHeader\n    [vertical]=\"vertical\"\n    [selectedIndex]=\"selectedIndex\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"selectedIndex = $event\">\n\n    <div class=\"kbq-tab-label\"\n         kbqTabLabelWrapper\n         cdkMonitorElementFocus\n         [attr.tabindex]=\"getTabIndex(tab, i)\"\n         [class.kbq-tab-label_horizontal]=\"!vertical\"\n         [class.kbq-tab-label_vertical]=\"vertical\"\n         [class.kbq-tab-label_empty]=\"tab.empty\"\n         [class.kbq-selected]=\"selectedIndex == i\"\n         *ngFor=\"let tab of tabs; let i = index\"\n         [tab]=\"tab\"\n         [id]=\"getTabLabelId(i)\"\n         [disabled]=\"tab.disabled\"\n         (click)=\"handleClick(tab, tabHeader, i)\"\n\n         [kbqTooltip]=\"tab.tooltipTitle\"\n         [kbqTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n         [kbqTrigger]=\"'hover, focus'\"\n         [kbqPlacement]=\"tab.tooltipPlacement\">\n\n        <div #labelContent class=\"kbq-tab-label__content\"\n            [class.kbq-tab-label__template]=\"tab.templateLabel\">\n            <!-- If there is a label template, use it. -->\n            <ng-template [ngIf]=\"tab.templateLabel\">\n                <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n            </ng-template>\n\n            <!-- If there is not a label template, fall back to the text label. -->\n            <ng-template [ngIf]=\"!tab.templateLabel\">{{ tab.textLabel }}</ng-template>\n        </div>\n    </div>\n</kbq-tab-header>\n\n<div class=\"kbq-tab-body__wrapper\" #tabBodyWrapper>\n    <kbq-tab-body\n        *ngFor=\"let tab of tabs; let i = index\"\n        [id]=\"getTabContentId(i)\"\n        [class.kbq-tab-body__active]=\"selectedIndex == i\"\n        [content]=\"tab.content!\"\n        [position]=\"tab.position!\"\n        [origin]=\"tab.origin!\"\n        [animationDuration]=\"animationDuration\"\n        (onCentered)=\"removeTabBodyWrapperHeight()\"\n        (onCentering)=\"setTabBodyWrapperHeight($event)\">\n    </kbq-tab-body>\n</div>\n", styles: [".kbq-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:left}.kbq-tab-group.kbq-tab-group_inverted-header{flex-direction:column-reverse}.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vartical, 8px) 0}.kbq-tab-group_vertical .kbq-tab-header__content{overflow-y:auto}.kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-body.kbq-tab-body__active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['kbq-old-tabs']
-                }] }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['vertical']
                 }] }, { type: undefined, decorators: [{
@@ -1280,6 +1290,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
             }], tabHeader: [{
                 type: ViewChild,
                 args: ['tabHeader', { static: false }]
+            }], transparent: [{
+                type: Input
+            }], onSurface: [{
+                type: Input
             }], dynamicHeight: [{
                 type: Input
             }], selectedIndex: [{
@@ -1351,20 +1365,21 @@ class KbqTabLink extends KbqTabLinkMixinBase {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabLink, deps: [{ token: i0.ElementRef }, { token: i1$2.FocusMonitor }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabLink, selector: "a[kbq-tab-link], a[mcTabLink]", inputs: { disabled: "disabled", tabIndex: "tabIndex", active: "active" }, host: { properties: { "class.kbq-active": "active", "class.kbq-tab-label_vertical": "vertical", "class.kbq-tab-label_horizontal": "!vertical", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tab-link" }, exportAs: ["mcTabLink"], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabLink, selector: "a[kbq-tab-link], a[kbqTabLink]", inputs: { disabled: "disabled", tabIndex: "tabIndex", active: "active" }, host: { properties: { "class.kbq-selected": "active", "class.kbq-tab-label_vertical": "vertical", "class.kbq-tab-label_horizontal": "!vertical", "class.kbq-disabled": "disabled", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tab-link" }, exportAs: ["kbqTabLink"], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabLink, decorators: [{
             type: Component,
             args: [{
-                    selector: 'a[kbq-tab-link], a[mcTabLink]',
-                    exportAs: 'mcTabLink',
+                    selector: 'a[kbq-tab-link], a[kbqTabLink]',
+                    exportAs: 'kbqTabLink',
                     template: '<ng-content></ng-content>',
                     inputs: ['disabled', 'tabIndex'],
                     host: {
                         class: 'kbq-tab-link',
-                        '[class.kbq-active]': 'active',
+                        '[class.kbq-selected]': 'active',
                         '[class.kbq-tab-label_vertical]': 'vertical',
                         '[class.kbq-tab-label_horizontal]': '!vertical',
+                        '[class.kbq-disabled]': 'disabled',
                         '[attr.tabindex]': 'tabIndex',
                         '[attr.disabled]': 'disabled || null'
                     }
@@ -1378,6 +1393,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
 class KbqTabNav {
     constructor(vertical) {
         this.vertical = false;
+        this.transparent = false;
+        this.onSurface = false;
         this.vertical = coerceBooleanProperty(vertical);
     }
     ngAfterContentInit() {
@@ -1387,17 +1404,25 @@ class KbqTabNav {
         this.links.notifyOnChanges();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabNav, deps: [{ token: 'vertical', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabNav, selector: "[kbq-tab-nav-bar]", host: { classAttribute: "kbq-tab-nav-bar" }, queries: [{ propertyName: "links", predicate: KbqTabLink }], exportAs: ["mcTabNavBar", "mcTabNav"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".kbq-tab-link.cdk-keyboard-focused:after{display:block;content:\"\";position:absolute;top:0;right:calc(-1 * var(--kbq-tabs-size-border-width, 1px));bottom:calc(-1 * var(--kbq-tabs-size-border-width, 1px));left:calc(-1 * var(--kbq-tabs-size-border-width, 1px))}.kbq-tab-link.kbq-tab-label_horizontal.cdk-keyboard-focused:after{border-width:calc(var(--kbq-tabs-size-border-width, 1px) * 2);border-style:solid;border-top-left-radius:var(--kbq-tabs-size-border-radius, 8px);border-top-right-radius:var(--kbq-tabs-size-border-radius, 8px);border-bottom-color:transparent}.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;height:var(--kbq-tabs-size-height, 40px);text-align:center;white-space:nowrap;cursor:pointer;padding-right:var(--kbq-tabs-size-padding-horizontal, 16px);padding-left:var(--kbq-tabs-size-padding-horizontal, 16px);outline:none}.kbq-tab-link.kbq-active{cursor:default}.kbq-tab-link.kbq-active:before{display:block;content:\"\";position:absolute}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link:first-child.cdk-keyboard-focused:after{left:0}.kbq-tab-link:last-child.cdk-keyboard-focused:after{right:0}.kbq-tab-link[disabled]{pointer-events:none}.kbq-tab-link .kbq-tab-label__content>.kbq-icon.kbq-icon_left{margin-right:var(--kbq-tabs-size-label-icon-margin, 8px)}.kbq-tab-link .kbq-tab-label__content>.kbq-icon.kbq-icon_right{margin-left:var(--kbq-tabs-size-label-icon-margin, 8px)}.kbq-tab-link.kbq-tab-label_horizontal{border-bottom-width:var(--kbq-tabs-size-border-width, 1px);border-bottom-style:solid}.kbq-tab-link.kbq-tab-label_horizontal.kbq-active:before{bottom:calc(-1 * var(--kbq-tabs-size-border-width, 1px));left:0;right:0;height:var(--kbq-tabs-size-highlight-height, 4px)}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical.kbq-active:before{top:0;bottom:0;left:calc(-1 * var(--kbq-tabs-size-border-width, 1px));width:var(--kbq-tabs-size-highlight-height, 5px)}.kbq-tab-link.kbq-tab-label_vertical.cdk-keyboard-focused:after{right:0;left:0;border-width:calc(var(--kbq-tabs-size-border-width, 1px) * 2);border-style:solid}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}.kbq-tab-link>.kbq-icon.kbq-icon_left{margin-right:var(--kbq-tabs-size-label-icon-margin, 8px)}.kbq-tab-link>.kbq-icon.kbq-icon_right{margin-left:var(--kbq-tabs-size-label-icon-margin, 8px)}.kbq-tab-nav-bar{display:flex;flex-grow:1;position:relative;padding:1px 1px 0}.kbq-tab-nav-bar .kbq-tab-group_align-labels-center{justify-content:center}.kbq-tab-nav-bar .kbq-tab-group_align-labels-end{justify-content:flex-end}.kbq-tab-nav-bar.kbq-tab-group_vertical{flex-direction:column;flex-grow:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTabNav, selector: "[kbq-tab-nav-bar]", inputs: { transparent: "transparent", onSurface: "onSurface" }, host: { properties: { "class.kbq-tab-nav-bar_filled": "!transparent", "class.kbq-tab-nav-bar_transparent": "transparent", "class.kbq-tab-nav-bar_on-background": "!onSurface", "class.kbq-tab-nav-bar_on-surface": "onSurface" }, classAttribute: "kbq-tab-nav-bar" }, queries: [{ propertyName: "links", predicate: KbqTabLink }], exportAs: ["kbqTabNavBar", "kbqTabNav"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".kbq-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical, 8px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal, 12px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width, 2px);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius, 8px);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;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal, 4px)}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}.kbq-tab-nav-bar{display:flex;flex-grow:1;position:relative}.kbq-tab-nav-bar .kbq-tab-group_align-labels-center{justify-content:center}.kbq-tab-nav-bar .kbq-tab-group_align-labels-end{justify-content:flex-end}.kbq-tab-nav-bar.kbq-tab-group_vertical{flex-direction:column;flex-grow:0;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vartical, 8px) 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTabNav, decorators: [{
             type: Component,
-            args: [{ selector: '[kbq-tab-nav-bar]', exportAs: 'mcTabNavBar, mcTabNav', template: '<ng-content></ng-content>', host: {
-                        class: 'kbq-tab-nav-bar'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-tab-link.cdk-keyboard-focused:after{display:block;content:\"\";position:absolute;top:0;right:calc(-1 * var(--kbq-tabs-size-border-width, 1px));bottom:calc(-1 * var(--kbq-tabs-size-border-width, 1px));left:calc(-1 * var(--kbq-tabs-size-border-width, 1px))}.kbq-tab-link.kbq-tab-label_horizontal.cdk-keyboard-focused:after{border-width:calc(var(--kbq-tabs-size-border-width, 1px) * 2);border-style:solid;border-top-left-radius:var(--kbq-tabs-size-border-radius, 8px);border-top-right-radius:var(--kbq-tabs-size-border-radius, 8px);border-bottom-color:transparent}.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;height:var(--kbq-tabs-size-height, 40px);text-align:center;white-space:nowrap;cursor:pointer;padding-right:var(--kbq-tabs-size-padding-horizontal, 16px);padding-left:var(--kbq-tabs-size-padding-horizontal, 16px);outline:none}.kbq-tab-link.kbq-active{cursor:default}.kbq-tab-link.kbq-active:before{display:block;content:\"\";position:absolute}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link:first-child.cdk-keyboard-focused:after{left:0}.kbq-tab-link:last-child.cdk-keyboard-focused:after{right:0}.kbq-tab-link[disabled]{pointer-events:none}.kbq-tab-link .kbq-tab-label__content>.kbq-icon.kbq-icon_left{margin-right:var(--kbq-tabs-size-label-icon-margin, 8px)}.kbq-tab-link .kbq-tab-label__content>.kbq-icon.kbq-icon_right{margin-left:var(--kbq-tabs-size-label-icon-margin, 8px)}.kbq-tab-link.kbq-tab-label_horizontal{border-bottom-width:var(--kbq-tabs-size-border-width, 1px);border-bottom-style:solid}.kbq-tab-link.kbq-tab-label_horizontal.kbq-active:before{bottom:calc(-1 * var(--kbq-tabs-size-border-width, 1px));left:0;right:0;height:var(--kbq-tabs-size-highlight-height, 4px)}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical.kbq-active:before{top:0;bottom:0;left:calc(-1 * var(--kbq-tabs-size-border-width, 1px));width:var(--kbq-tabs-size-highlight-height, 5px)}.kbq-tab-link.kbq-tab-label_vertical.cdk-keyboard-focused:after{right:0;left:0;border-width:calc(var(--kbq-tabs-size-border-width, 1px) * 2);border-style:solid}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}.kbq-tab-link>.kbq-icon.kbq-icon_left{margin-right:var(--kbq-tabs-size-label-icon-margin, 8px)}.kbq-tab-link>.kbq-icon.kbq-icon_right{margin-left:var(--kbq-tabs-size-label-icon-margin, 8px)}.kbq-tab-nav-bar{display:flex;flex-grow:1;position:relative;padding:1px 1px 0}.kbq-tab-nav-bar .kbq-tab-group_align-labels-center{justify-content:center}.kbq-tab-nav-bar .kbq-tab-group_align-labels-end{justify-content:flex-end}.kbq-tab-nav-bar.kbq-tab-group_vertical{flex-direction:column;flex-grow:0}\n"] }]
+            args: [{ selector: '[kbq-tab-nav-bar]', exportAs: 'kbqTabNavBar, kbqTabNav', template: '<ng-content></ng-content>', host: {
+                        class: 'kbq-tab-nav-bar',
+                        '[class.kbq-tab-nav-bar_filled]': '!transparent',
+                        '[class.kbq-tab-nav-bar_transparent]': 'transparent',
+                        '[class.kbq-tab-nav-bar_on-background]': '!onSurface',
+                        '[class.kbq-tab-nav-bar_on-surface]': 'onSurface'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical, 8px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal, 12px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width, 2px);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius, 8px);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;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal, 4px)}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}.kbq-tab-nav-bar{display:flex;flex-grow:1;position:relative}.kbq-tab-nav-bar .kbq-tab-group_align-labels-center{justify-content:center}.kbq-tab-nav-bar .kbq-tab-group_align-labels-end{justify-content:flex-end}.kbq-tab-nav-bar.kbq-tab-group_vertical{flex-direction:column;flex-grow:0;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vartical, 8px) 0}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['vertical']
-                }] }]; }, propDecorators: { links: [{
+                }] }]; }, propDecorators: { transparent: [{
+                type: Input
+            }], onSurface: [{
+                type: Input
+            }], links: [{
                 type: ContentChildren,
                 args: [KbqTabLink]
             }] } });
@@ -1414,7 +1439,6 @@ class KbqTabsModule {
             KbqTabBodyPortal,
             KbqTabHeader,
             KbqTabContent,
-            KbqOldTabsCssStyler,
             KbqAlignTabsCenterCssStyler,
             KbqAlignTabsEndCssStyler,
             KbqStretchTabsCssStyler,
@@ -1431,7 +1455,6 @@ class KbqTabsModule {
             KbqTabNav,
             KbqTabLink,
             KbqTabContent,
-            KbqOldTabsCssStyler,
             KbqAlignTabsCenterCssStyler,
             KbqAlignTabsEndCssStyler,
             KbqStretchTabsCssStyler,
@@ -1465,7 +1488,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         KbqTabNav,
                         KbqTabLink,
                         KbqTabContent,
-                        KbqOldTabsCssStyler,
                         KbqAlignTabsCenterCssStyler,
                         KbqAlignTabsEndCssStyler,
                         KbqStretchTabsCssStyler,
@@ -1482,7 +1504,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         KbqTabBodyPortal,
                         KbqTabHeader,
                         KbqTabContent,
-                        KbqOldTabsCssStyler,
                         KbqAlignTabsCenterCssStyler,
                         KbqAlignTabsEndCssStyler,
                         KbqStretchTabsCssStyler,
@@ -1495,5 +1516,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_TABS_CONFIG, KbqAlignTabsCenterCssStyler, KbqAlignTabsEndCssStyler, KbqOldTabsCssStyler, KbqStretchTabsCssStyler, KbqTab, KbqTabBody, KbqTabBodyPortal, KbqTabChangeEvent, KbqTabContent, KbqTabGroup, KbqTabGroupBase, KbqTabGroupMixinBase, KbqTabHeader, KbqTabLabel, KbqTabLabelWrapper, KbqTabLink, KbqTabNav, KbqTabsModule, KbqVerticalTabsCssStyler, mcTabsAnimations };
+export { KBQ_TABS_CONFIG, KbqAlignTabsCenterCssStyler, KbqAlignTabsEndCssStyler, KbqStretchTabsCssStyler, KbqTab, KbqTabBody, KbqTabBodyPortal, KbqTabChangeEvent, KbqTabContent, KbqTabGroup, KbqTabGroupBase, KbqTabGroupMixinBase, KbqTabHeader, KbqTabLabel, KbqTabLabelWrapper, KbqTabLink, KbqTabNav, KbqTabsModule, KbqVerticalTabsCssStyler, kbqTabsAnimations };
 //# sourceMappingURL=koobiq-components-tabs.mjs.map