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

package/tabs/_tabs-common.scss

@@ -6,33 +6,6 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
-%base-focus-frame {
-    display: block;
-    content: "";
-
-    position: absolute;
-
-    top: 0;
-    right: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
-    bottom: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
-    left: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
-}
-
-%horizontal-focus {
-    &:after {
-        border: {
-            width: calc(var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}) * 2);
-            style: solid;
-            top: {
-                left-radius: var(--kbq-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
-                right-radius: var(--kbq-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
-            }
-        };
-
-        border-bottom-color: transparent;
-    }
-}
-
 
 @mixin tab-label {
     position: relative;
@@ -43,101 +16,59 @@ $tokens: meta.module-variables(tokens) !default;
     justify-content: center;
     align-items: center;
 
-    height: var(--kbq-tabs-size-height, map.get($tokens, tabs-size-height));
-
     text-align: center;
     white-space: nowrap;
 
     cursor: pointer;
 
-    padding: {
-        right: var(--kbq-tabs-size-padding-horizontal, map.get($tokens, tabs-size-padding-horizontal));
-        left: var(--kbq-tabs-size-padding-horizontal, map.get($tokens, tabs-size-padding-horizontal));
+    $padding-vertical: map.get($tokens, tabs-size-tab-item-padding-vertical);
+    $padding-horizontal: map.get($tokens, tabs-size-tab-item-padding-horizontal);
+    $border-width: map.get($tokens, tabs-size-tab-item-focus-outline-width);
+
+    padding:
+        calc(
+            var(--kbq-tabs-size-tab-item-padding-vertical, $padding-vertical) -
+            var(--kbq-tabs-size-tab-item-focus-outline-width, $border-width)
+        )
+        calc(
+            var(--kbq-tabs-size-tab-item-padding-horizontal, $padding-horizontal) -
+            var(--kbq-tabs-size-tab-item-focus-outline-width, $border-width)
+        );
+
+    border: {
+        width: var(--kbq-tabs-size-tab-item-focus-outline-width, $border-width);
+        style: solid;
+        color: transparent;
+        radius: var(
+            --kbq-tabs-size-tab-item-border-radius, map.get($tokens, tabs-size-tab-item-border-radius)
+        );
     }
 
     outline: none;
 
-    &.kbq-active {
+    &.kbq-selected {
         cursor: default;
-
-        &:before {
-            display: block;
-            content: "";
-
-            position: absolute;
-        }
     }
 
     &.cdk-keyboard-focused {
         z-index: 1;
-
-        &:after {
-            @extend %base-focus-frame;
-        }
-    }
-
-    &:first-child.cdk-keyboard-focused:after {
-        left: 0;
-    }
-
-    &:last-child.cdk-keyboard-focused:after {
-        right: 0;
     }
 
     &[disabled] {
         pointer-events: none;
     }
 
-    & .kbq-tab-label__content > .kbq-icon {
-        &.kbq-icon_left {
-            margin-right: var(--kbq-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
-        }
-
-        &.kbq-icon_right {
-            margin-left: var(--kbq-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
-        }
-    }
-
-    &.kbq-tab-label_horizontal {
-        border-bottom: {
-            width: var(--kbq-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
-            style: solid;
-        }
-
-        &.kbq-active:before {
-            bottom: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
-            left: 0;
-            right: 0;
-
-            height: var(--kbq-tabs-size-highlight-height, #{map.get($tokens, tabs-size-highlight-height)});
-        }
+    & .kbq-tab-label__content {
+        display: flex;
 
-        &.cdk-keyboard-focused:after {
-            @extend %horizontal-focus;
-        }
+        gap: var(
+            --kbq-tabs-size-tab-item-content-gap-horizontal, map.get($tokens, tabs-size-tab-item-content-gap-horizontal)
+        );
     }
 
     &.kbq-tab-label_vertical {
         justify-content: flex-start;
 
-        &.kbq-active:before {
-            top: 0;
-            bottom: 0;
-            left: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
-
-            width: var(--kbq-tabs-size-highlight-height, #{map.get($tokens, tabs-size-highlight-height) + 1px});
-        }
-
-        &.cdk-keyboard-focused:after {
-            right: 0;
-            left: 0;
-
-            border: {
-                width: calc(var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}) * 2);
-                style: solid;
-            }
-        }
-
         & .kbq-tab-label__content {
             overflow: hidden;
             text-overflow: ellipsis;
@@ -145,53 +76,3 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
-
-@mixin tab-label-old {
-    border-bottom: {
-        width: var(--kbq-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
-        style: solid;
-    }
-
-    border: {
-        width: var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)});
-        style: solid;
-
-        top: {
-            left-radius: var(--kbq-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
-            right-radius: var(--kbq-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
-        }
-
-        left: none;
-        left-color: transparent;
-        right: none;
-        right-color: transparent;
-    }
-
-    &.kbq-active {
-        border: {
-            width: var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)});
-            style: solid;
-        }
-
-        padding-right: calc(
-            var(--kbq-tabs-size-padding-horizontal, #{map.get($tokens, tabs-size-padding-horizontal)}) -
-            var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)})
-        );
-
-        padding-left: calc(
-            var(--kbq-tabs-size-padding-horizontal, #{map.get($tokens, tabs-size-padding-horizontal)}) -
-            var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)})
-        );
-
-        &.cdk-keyboard-focused:after {
-            right: calc(-2 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
-            left: calc(-2 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
-        }
-    }
-
-    &.cdk-keyboard-focused:after {
-        @extend %horizontal-focus;
-
-        top: -1px
-    }
-}

package/tabs/_tabs-theme.scss

@@ -4,237 +4,143 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
-//noinspection ALL
-@mixin kbq-tabs-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
+@mixin kbq-tab-item-state($state) {
+    background: map.get($state, background);
+    color: map.get($state, text);
 
-    $states: map.get($theme, states);
+    & .kbq-icon {
+        color: map.get($state, icon);
+    }
+}
 
-    $tabs: map.get(map.get($theme, components), tabs);
-    $vertical-tabs: map.get(map.get($theme, components), vertical-tabs);
+@mixin kbq-tab-item-style($tab-item) {
+    @include kbq-tab-item-state(map.get($tab-item, default));
 
-    .kbq-tab-group_vertical .kbq-tab-header__content {
-        border-right-color: map.get($foreground, divider);
+    &:hover:not([disabled]) {
+        @include kbq-tab-item-state(map.get($tab-item, hover));
     }
 
-    .kbq-tab-header__pagination {
-        border-bottom-color: map.get($tabs, border);
+    &.kbq-selected {
+        @include kbq-tab-item-state(map.get($tab-item, selected));
 
         &:hover {
-            background: map.get($background, overlay-hover);
-
-            & .kbq-icon {
-                color: map.get($foreground, text);
-            }
-        }
-
-        &:active {
-            background: map.get($foreground, divider);
-        }
-
-        &.kbq-tab-header__pagination_before {
-            border-right-color: map.get($foreground, divider);
-        }
-
-        &.kbq-tab-header__pagination_after {
-            border-left-color: map.get($foreground, divider);
-        }
-
-        &[disabled],
-        &.kbq-disabled {
-            pointer-events: none;
-
-            & .kbq-icon {
-                color: map.get($foreground, text-disabled);
-            }
+            @include kbq-tab-item-state(map.get($tab-item, selected-hover));
         }
     }
 
-    /* stylelint-disable no-descending-specificity */
-    .kbq-tab-label_old {
-        color: map.get($foreground, text);
-
-        border-top-color: transparent;
-        border-bottom-color: map.get($tabs, border);
-
-        &.cdk-keyboard-focused:after {
-            border-color: map.get(map.get($theme, states), focused-color);
-            border-bottom-color: transparent;
-        }
-
-        &.kbq-tab-label_empty {
-            color: map.get($tabs, state-empty-text);
-
-            & .kbq-icon {
-                color: map.get($tabs, state-empty-icon);
-            }
-        }
-
-        &:hover {
-            background: map.get($background, overlay-hover);
-
-            color: map.get($tabs, state-hover-text);
+    &.cdk-keyboard-focused {
+        border-color: map.get(map.get($tab-item, focused), border-color);
+    }
 
-            & .kbq-icon {
-                color: map.get($tabs, state-hover-icon);
-            }
-        }
+    &[disabled] {
+        @include kbq-tab-item-state(map.get($tab-item, disabled));
 
-        &.kbq-active {
-            border: {
-                color: map.get($tabs, border);
-                bottom-color: transparent;
-            }
+        &.kbq-selected {
+            @include kbq-tab-item-state(map.get($tab-item, selected-disabled));
         }
+    }
+}
 
-        &[disabled],
-        &.kbq-disabled {
-            cursor: default;
-
-            color: map.get($tabs, state-disabled-text);
-
-            & .kbq-icon {
-                color: map.get($tabs, state-disabled-icon);
-            }
-        }
+@mixin kbq-tab-stack-style($tab-stack) {
+    .kbq-tab-header {
+        background: map.get($tab-stack, background);
     }
+}
 
-    .kbq-tab-link,
-    .kbq-tab-label_horizontal {
-        color: map.get($tabs, state-normal-text);
+//noinspection ALL
+@mixin kbq-tabs-theme($theme) {
+    $tab-item: map.get(map.get($theme, components), tab-item);
 
-        & .kbq-icon {
-            color: map.get($tabs, state-normal-icon);
-        }
+    $tab-stack: map.get(map.get($theme, components), tab-stack);
 
-        border-bottom-color: map.get($tabs, border);
+    $tab-stack_filled: map.get($tab-stack, filled);
+    $tab-item_filled: map.get($tab-item, filled);
 
-        &.cdk-keyboard-focused:after {
-            border-color: map.get(map.get($theme, states), focused-color);
-            border-bottom-color: transparent;
-        }
+    $tab-stack_transparent: map.get($tab-stack, transparent);
+    $tab-item_transparent: map.get($tab-item, transparent);
 
-        &.kbq-tab-label_empty {
-            color: map.get($tabs, state-empty-text);
+    .kbq-tab-group {
+        &.kbq-tab-group_filled {
+            &.kbq-tab-group_on-background {
+                @include kbq-tab-stack-style(map.get($tab-stack_filled, on-background));
 
-            & .kbq-icon {
-                color: map.get($tabs, state-empty-icon);
+                & .kbq-tab-label {
+                    @include kbq-tab-item-style(map.get($tab-item_filled, on-background));
+                }
             }
-        }
-
-        &.kbq-active {
-            border-bottom-color: transparent;
 
-            color: map.get($tabs, state-normal-text);
-
-            & .kbq-icon {
-                color: map.get($tabs, state-normal-icon);
-            }
+            &.kbq-tab-group_on-surface {
+                @include kbq-tab-stack-style(map.get($tab-stack_filled, on-surface));
 
-            &:before {
-                background-color: map.get($tabs, state-active-marker);
+                & .kbq-tab-label {
+                    @include kbq-tab-item-style(map.get($tab-item_filled, on-background));
+                }
             }
         }
 
-        &:hover {
-            background: map.get($background, overlay-hover);
-
-            color: map.get($tabs, state-hover-text);
+        &.kbq-tab-group_transparent {
+            &.kbq-tab-group_on-background {
+                @include kbq-tab-stack-style(map.get($tab-stack_transparent, on-background));
 
-            & .kbq-icon {
-                color: map.get($tabs, state-hover-icon);
+                & .kbq-tab-label {
+                    @include kbq-tab-item-style(map.get($tab-item_transparent, on-background));
+                }
             }
-        }
 
-        &[disabled],
-        &.kbq-disabled {
-            cursor: default;
+            &.kbq-tab-group_on-surface {
+                @include kbq-tab-stack-style(map.get($tab-stack_transparent, on-surface));
 
-            color: map.get($tabs, state-disabled-text);
-
-            &:before {
-                opacity: map.get($tabs, state-disabled-marker-opacity);
-            }
-
-            & .kbq-icon {
-                color: map.get($tabs, state-disabled-icon);
+                & .kbq-tab-label {
+                    @include kbq-tab-item-style(map.get($tab-item_transparent, on-background));
+                }
             }
         }
     }
 
-    .kbq-tab-label_vertical {
-        background: map.get($vertical-tabs, state-normal-background);
-        color: map.get($tabs, state-normal-text);
+    .kbq-tab-nav-bar {
+        &.kbq-tab-nav-bar_filled {
+            &.kbq-tab-nav-bar_on-background {
+                @include kbq-tab-stack-style(map.get($tab-stack_filled, on-background));
 
-        & .kbq-icon {
-            color: map.get($tabs, state-normal-icon);
-        }
-
-        &.cdk-keyboard-focused:after {
-            border-color: map.get(map.get($theme, states), focused-color);
-        }
-
-        &.kbq-tab-label_empty {
-            color: map.get($tabs, state-empty-text);
-
-            & .kbq-icon {
-                color: map.get($tabs, state-empty-icon);
+                & .kbq-tab-link {
+                    @include kbq-tab-item-style(map.get($tab-item_filled, on-background));
+                }
             }
-        }
-
-        &:hover {
-            background: map.get($vertical-tabs, state-hover-background);
 
-            color: map.get($tabs, state-hover-text);
+            &.kbq-tab-nav-bar_on-surface {
+                @include kbq-tab-stack-style(map.get($tab-stack_filled, on-surface));
 
-            & .kbq-icon {
-                color: map.get($tabs, state-hover-icon);
+                & .kbq-tab-link {
+                    @include kbq-tab-item-style(map.get($tab-item_filled, on-background));
+                }
             }
         }
 
-        &.kbq-active {
-            color: map.get($tabs, state-normal-text);
-            background: map.get($states, selected-color);
-
-            & .kbq-icon {
-                color: map.get($tabs, state-normal-icon);
-            }
-
-            &:before {
-                background-color: map.get($tabs, state-active-marker);
-            }
+        &.kbq-tab-nav-bar_transparent {
+            &.kbq-tab-nav-bar_on-background {
+                @include kbq-tab-stack-style(map.get($tab-stack_transparent, on-background));
 
-            &:hover {
-                background: map.get($vertical-tabs, state-hover-selected-background);
-
-                & .kbq-icon {
-                    color: map.get($tabs, state-hover-icon);
+                & .kbq-tab-link {
+                    @include kbq-tab-item-style(map.get($tab-item_transparent, on-background));
                 }
             }
-        }
 
-        &[disabled],
-        &.kbq-disabled {
-            cursor: default;
-            background: map.get($vertical-tabs, state-normal-background);
+            &.kbq-tab-nav-bar_on-surface {
+                @include kbq-tab-stack-style(map.get($tab-stack_transparent, on-surface));
 
-            color: map.get($tabs, state-disabled-text);
-
-            & .kbq-icon {
-                color: map.get($tabs, state-disabled-icon);
+                & .kbq-tab-link {
+                    @include kbq-tab-item-style(map.get($tab-item_transparent, on-background));
+                }
             }
         }
     }
-    /* stylelint-enable no-descending-specificity */
 }
 
 @mixin kbq-tabs-typography($config) {
     $tokens: map.get($config, tokens);
 
     .kbq-tab-label,
-    .kbq-tab-label_old,
     .kbq-tab-link {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tabs-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, tabs-font-text));
     }
 }

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

@@ -4,10 +4,6 @@ import { Subject } from 'rxjs';
 import { KbqTabHeader } from './tab-header.component';
 import { KbqTab } from './tab.component';
 import * as i0 from "@angular/core";
-export declare class KbqOldTabsCssStyler {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqOldTabsCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOldTabsCssStyler, "kbq-tab-group[kbq-old-tabs]", never, {}, {}, never, never, false, never>;
-}
 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>;
@@ -54,11 +50,12 @@ export declare const KbqTabGroupMixinBase: CanDisableCtor & typeof KbqTabGroupBa
 export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterContentInit, AfterViewInit, AfterContentChecked, OnDestroy {
     private readonly changeDetectorRef;
     readonly resizeStream: Subject<Event>;
-    oldTab: boolean;
     vertical: boolean;
     tabs: QueryList<KbqTab>;
     tabBodyWrapper: ElementRef;
     tabHeader: KbqTabHeader;
+    transparent: boolean;
+    onSurface: boolean;
     /** Whether the tab group should grow to the size of the active tab. */
     get dynamicHeight(): boolean;
     set dynamicHeight(value: boolean);
@@ -90,7 +87,7 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     private resizeSubscription;
     private readonly groupId;
     private readonly resizeDebounceInterval;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, lightTabs: string, vertical: string, defaultConfig?: IKbqTabsConfig);
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, vertical: string, defaultConfig?: IKbqTabsConfig);
     /**
      * 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
@@ -129,6 +126,6 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     private subscribeToResize;
     /** Clamps the given index to the bounds of 0 and the tabs length. */
     private clampTabIndex;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabGroup, [null, null, { attribute: "kbq-old-tabs"; }, { attribute: "vertical"; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabGroup, "kbq-tab-group", ["mcTabGroup"], { "disabled": { "alias": "disabled"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabGroup, [null, null, { attribute: "vertical"; }, { 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; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, false, never>;
 }

package/tabs/tab-group.scss

@@ -23,14 +23,15 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-tab-group_vertical {
     flex-direction: row;
 
+    .kbq-tab-list__content {
+        gap: var(
+            --kbq-tabs-size-tab-stack-vertical-content-gap-vartical,
+            map.get($tokens, tabs-size-tab-stack-vertical-content-gap-vertical)
+        ) 0;
+    }
+
     & .kbq-tab-header__content {
         overflow-y: auto;
-
-        padding-top: 8px;
-        padding-bottom: 1px;
-
-        border-right-width: var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)});
-        border-right-style: solid;
     }
 }
 
@@ -46,13 +47,12 @@ $tokens: meta.module-variables(tokens) !default;
     display: block;
     overflow: hidden;
 
-    // Fix for auto content wrapping in IE11
-    flex-basis: 100%;
-
     &.kbq-tab-body__active {
+        position: relative;
+
         overflow-x: hidden;
         overflow-y: auto;
-        position: relative;
+
         z-index: 1;
         flex-grow: 1;
     }

package/tabs/tab-header.scss

@@ -47,24 +47,9 @@ $tokens: meta.module-variables(tokens) !default;
     padding-left: 12px;
     padding-right: 12px;
 
-    border: {
-        bottom-style: solid;
-        bottom-width: var(--kbq-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
-    };
-
-    &.kbq-tab-header__pagination_before {
-        border: {
-            right-style: solid;
-            right-width: var(--kbq-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
-        };
-    }
+    &.kbq-tab-header__pagination_before {}
 
-    &.kbq-tab-header__pagination_after {
-        border: {
-            left-style: solid;
-            left-width: var(--kbq-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
-        };
-    }
+    &.kbq-tab-header__pagination_after {}
 
     .kbq-tab-header__pagination-controls_enabled & {
         display: flex;
@@ -91,14 +76,7 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-tab-label {
     @include tab-label;
     @include vendor-prefixes.user-select(none);
-}
-
-.kbq-tab-label_old {
-    @include tab-label-old;
-}
 
-.kbq-tab-label,
-.kbq-tab-label_old {
     .kbq-tab-group_stretch-labels & {
         flex-basis: 0;
         flex-grow: 1;

package/tabs/tab-label-wrapper.directive.d.ts

@@ -27,5 +27,5 @@ export declare class KbqTabLabelWrapper extends KbqTabLabelWrapperMixinBase impl
     getInnerText(): any;
     private addClassModifierForIcons;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabLabelWrapper, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabLabelWrapper, "[mcTabLabelWrapper]", never, { "disabled": { "alias": "disabled"; "required": false; }; "tab": { "alias": "tab"; "required": false; }; }, {}, ["labelContent"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabLabelWrapper, "[kbqTabLabelWrapper]", never, { "disabled": { "alias": "disabled"; "required": false; }; "tab": { "alias": "tab"; "required": false; }; }, {}, ["labelContent"], never, false, never>;
 }

package/tabs/tab-label.directive.d.ts

@@ -5,5 +5,5 @@ export declare const KBQ_TAB_LABEL: InjectionToken<KbqTabLabel>;
 /** Used to flag tab labels for use with the portal directive */
 export declare class KbqTabLabel extends CdkPortal {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabLabel, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabLabel, "[kbq-tab-label], [mcTabLabel]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabLabel, "[kbq-tab-label], [kbqTabLabel]", never, {}, {}, never, never, false, never>;
 }