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

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(.kbq-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);
-            }
-        }
+    &.kbq-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/paginated-tab-header.d.ts

@@ -174,6 +174,7 @@ export declare abstract class KbqPaginatedTabHeader implements AfterContentCheck
      * @returns Information on the current scroll distance and the maximum.
      */
     private scrollTo;
+    private updateScrollPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPaginatedTabHeader, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPaginatedTabHeader, never, never, { "disablePagination": { "alias": "disablePagination"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -91,5 +91,5 @@ export declare class KbqTabBodyPortal extends CdkPortalOutlet implements OnInit,
     /** Clean up centering subscription. */
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabBodyPortal, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabBodyPortal, "[mcTabBodyHost]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabBodyPortal, "[kbqTabBodyHost]", never, {}, {}, never, never, false, never>;
 }

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

@@ -5,5 +5,5 @@ export declare class KbqTabContent {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabContent, "[mcTabContent]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabContent, "[kbqTabContent]", never, {}, {}, never, never, false, never>;
 }

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>;
 }

package/tabs/tab-nav-bar/tab-nav-bar.d.ts

@@ -25,16 +25,18 @@ export declare class KbqTabLink extends KbqTabLinkMixinBase implements OnDestroy
     ngOnDestroy(): void;
     private addClassModifierForIcons;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabLink, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabLink, "a[kbq-tab-link], a[mcTabLink]", ["mcTabLink"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabLink, "a[kbq-tab-link], a[kbqTabLink]", ["kbqTabLink"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 /**
  * Navigation component matching the styles of the tab group header.
  */
 export declare class KbqTabNav implements AfterContentInit {
     vertical: boolean;
+    transparent: boolean;
+    onSurface: boolean;
     links: QueryList<KbqTabLink>;
     constructor(vertical: string);
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabNav, [{ attribute: "vertical"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabNav, "[kbq-tab-nav-bar]", ["mcTabNavBar", "mcTabNav"], {}, {}, ["links"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabNav, "[kbq-tab-nav-bar]", ["kbqTabNavBar", "kbqTabNav"], { "transparent": { "alias": "transparent"; "required": false; }; "onSurface": { "alias": "onSurface"; "required": false; }; }, {}, ["links"], ["*"], false, never>;
 }

package/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -19,16 +19,6 @@ $tokens: meta.module-variables(tokens) !default;
         flex-basis: 0;
         flex-grow: 1;
     }
-
-    & > .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-nav-bar {
@@ -37,8 +27,6 @@ $tokens: meta.module-variables(tokens) !default;
 
     position: relative;
 
-    padding: 1px 1px 0 1px;
-
     & .kbq-tab-group_align-labels-center {
         justify-content: center;
     }
@@ -46,9 +34,14 @@ $tokens: meta.module-variables(tokens) !default;
     & .kbq-tab-group_align-labels-end {
         justify-content: flex-end;
     }
-}
 
-.kbq-tab-nav-bar.kbq-tab-group_vertical {
-    flex-direction: column;
-    flex-grow: 0;
+    &.kbq-tab-group_vertical {
+        flex-direction: column;
+        flex-grow: 0;
+
+        gap: var(
+            --kbq-tabs-size-tab-stack-vertical-content-gap-vartical,
+            map.get($tokens, tabs-size-tab-stack-vertical-content-gap-vertical)
+        ) 0;
+    }
 }

package/tabs/tab.component.d.ts

@@ -64,5 +64,5 @@ export declare class KbqTab extends KbqTabMixinBase implements OnInit, CanDisabl
      */
     protected setTemplateLabelInput(value: KbqTabLabel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTab, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTab, "kbq-tab", ["mcTab"], { "disabled": { "alias": "disabled"; "required": false; }; "tooltipTitle": { "alias": "tooltipTitle"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "textLabel": { "alias": "label"; "required": false; }; "empty": { "alias": "empty"; "required": false; }; "tabId": { "alias": "tabId"; "required": false; }; }, {}, ["templateLabel", "explicitContent"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTab, "kbq-tab", ["kbqTab"], { "disabled": { "alias": "disabled"; "required": false; }; "tooltipTitle": { "alias": "tooltipTitle"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "textLabel": { "alias": "label"; "required": false; }; "empty": { "alias": "empty"; "required": false; }; "tabId": { "alias": "tabId"; "required": false; }; }, {}, ["templateLabel", "explicitContent"], ["*"], false, never>;
 }

package/tabs/tabs-animations.d.ts

@@ -1,4 +1,4 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
-export declare const mcTabsAnimations: {
+export declare const kbqTabsAnimations: {
     readonly translateTab: AnimationTriggerMetadata;
 };

package/tabs/tabs.module.d.ts

@@ -16,6 +16,6 @@ import * as i14 from "@koobiq/components/icon";
 import * as i15 from "@koobiq/components/tooltip";
 export declare class KbqTabsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i6.KbqTabBody, typeof i6.KbqTabBodyPortal, typeof i7.KbqTabHeader, typeof i8.KbqTabContent, typeof i1.KbqOldTabsCssStyler, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i9.CommonModule, typeof i10.PortalModule, typeof i11.A11yModule, typeof i12.CdkScrollableModule, typeof i13.KbqCommonModule, typeof i14.KbqIconModule, typeof i15.KbqToolTipModule], [typeof i13.KbqCommonModule, typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i8.KbqTabContent, typeof i1.KbqOldTabsCssStyler, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i6.KbqTabBody, typeof i6.KbqTabBodyPortal, typeof i7.KbqTabHeader, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i9.CommonModule, typeof i10.PortalModule, typeof i11.A11yModule, typeof i12.CdkScrollableModule, typeof i13.KbqCommonModule, typeof i14.KbqIconModule, typeof i15.KbqToolTipModule], [typeof i13.KbqCommonModule, typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTabsModule>;
 }

package/tags/_tag-theme.scss

@@ -52,38 +52,14 @@
             @include kbq-tag-color(map.get($tag, theme-fade-on));
         }
 
-        &.kbq-contrast {
+        &.kbq-contrast-fade {
             @include kbq-tag-color(map.get($tag, contrast-fade-on));
         }
 
         &.kbq-error {
             @include kbq-tag-color(map.get($tag, error-fade-on));
         }
-
-        //&.kbq-disabled {
-        //    color: map.get($foreground, text-disabled);
-        //
-        //    border-color: transparent;
-        //
-        //    background-color: map.get($background, background-disabled);
-        //}
     }
-
-    //.kbq-tag-input {
-    //    color: map.get($foreground, text);
-    //
-    //    &::placeholder {
-    //        color: map.get($foreground, text-disabled);
-    //    }
-    //
-    //    &::-ms-input-placeholder {
-    //        color: map.get($foreground, text-disabled);
-    //    }
-    //
-    //    &::-webkit-input-placeholder {
-    //        color: map.get($foreground, text-disabled);
-    //    }
-    //}
 }
 
 @mixin kbq-tag-typography($config) {

package/tags/tag-default-options.d.ts

@@ -1,8 +1,12 @@
 import { InjectionToken } from '@angular/core';
+import { KbqTagSeparator } from './tag-input';
 /** Default options, for the chips module, that can be overridden. */
 export interface KbqTagsDefaultOptions {
     /** The list of key codes that will trigger a chipEnd event. */
     separatorKeyCodes: number[];
+    separators?: {
+        [key: number]: KbqTagSeparator;
+    };
 }
 /** Injection token to be used to override the default options for the chips module. */
 export declare const KBQ_TAGS_DEFAULT_OPTIONS: InjectionToken<KbqTagsDefaultOptions>;