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

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

@@ -32,9 +32,11 @@ export declare class KbqTabLink extends KbqTabLinkMixinBase implements OnDestroy
  */
 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]", ["mcTabNavBar", "mcTabNav"], { "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/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

@@ -59,31 +59,7 @@
         &.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-input.d.ts

@@ -83,5 +83,5 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     /** Checks whether a keycode is one of the configured separators. */
     private isSeparatorKey;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagInput, [null, null, null, { optional: true; self: true; }, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagInput, "input[mcTagInputFor]", ["mcTagInput", "mcTagInputFor"], { "separatorKeyCodes": { "alias": "mcTagInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "mcTagInputFor"; "required": false; }; "addOnBlur": { "alias": "mcTagInputAddOnBlur"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "mcTagInputTokenEnd"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagInput, "input[kbqTagInputFor]", ["mcTagInput", "kbqTagInputFor"], { "separatorKeyCodes": { "alias": "kbqTagInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "kbqTagInputFor"; "required": false; }; "addOnBlur": { "alias": "kbqTagInputAddOnBlur"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "kbqTagInputTokenEnd"; }, never, never, false, never>;
 }

package/tags/tag-list.scss

@@ -18,7 +18,12 @@ $tokens: meta.module-variables(tokens) !default;
     outline: none;
     background: transparent;
 
-    min-height: 22px;
+    text-overflow: ellipsis;
+
+    min-height: unset;
+
+    padding-left: 4px;
+    padding-right: unset;
 }
 
 .kbq-tags-list__list-container {
@@ -36,8 +41,6 @@ $tokens: meta.module-variables(tokens) !default;
         max-width: 100%;
 
         flex: 1 1 auto;
-
-        margin-left: var(--kbq-tag-input-size-content-gap, map.get($tokens, tag-input-size-content-gap));
     }
 }
 
@@ -49,18 +52,19 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-form-field-type-tag-list {
     & .kbq-form-field__container {
-        padding-top: calc(
-            var(--kbq-tag-input-size-padding-vertical, map.get($tokens, tag-input-size-padding-vertical)) -
-            var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width))
-        );
-
-        padding-bottom: calc(
-            var(--kbq-tag-input-size-padding-vertical, map.get($tokens, tag-input-size-padding-vertical)) -
-            var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width))
-        );
-
-        padding-left: var(
-            --kbq-tag-input-size-padding-left, map.get($tokens, tag-input-size-padding-left)
-        );
+        $padding-vertical: map.get($tokens, tag-input-size-padding-vertical);
+        $border-width: map.get($tokens, form-field-size-border-width);
+
+        padding:
+            calc(
+                var(--kbq-tag-input-size-padding-vertical, #{$padding-vertical}) -
+                var(--kbq-form-field-size-border-width, $border-width)
+            )
+            var(--kbq-tag-input-size-padding-right, map.get($tokens, tag-input-size-padding-right))
+            calc(
+                var(--kbq-tag-input-size-padding-vertical, #{$padding-vertical}) -
+                var(--kbq-form-field-size-border-width, $border-width)
+            )
+            var(--kbq-tag-input-size-padding-left, map.get($tokens, tag-input-size-padding-left));
     }
 }

package/tags/tag.component.d.ts

@@ -116,14 +116,14 @@ export declare class KbqTag extends KbqTagMixinBase implements IFocusableOption,
     blur(): void;
     private dispatchSelectionChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTag, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTag, "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", ["mcTag"], { "color": { "alias": "color"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[kbq-icon]:not([mcTagRemove])", "*", "[mcTagRemove]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTag, "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", ["mcTag"], { "color": { "alias": "color"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[kbq-icon]:not([kbqTagRemove])", "*", "[kbqTagRemove]"], false, never>;
 }
 /**
  *
  * Example:
  *
  *     `<kbq-tag>
- *       <kbq-icon mcTagRemove>cancel</kbq-icon>
+ *       <kbq-icon kbqTagRemove>cancel</kbq-icon>
  *     </kbq-tag>`
  *
  * You *may* use a custom icon, but you may need to override the `kbq-tag-remove` positioning
@@ -136,5 +136,5 @@ export declare class KbqTagRemove {
     /** Calls the parent tag's public `remove()` method if applicable. */
     handleClick(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagRemove, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagRemove, "[mcTagRemove]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagRemove, "[kbqTagRemove]", never, {}, {}, never, never, false, never>;
 }

package/textarea/textarea.component.d.ts

@@ -110,5 +110,5 @@ export declare class KbqTextarea extends KbqTextareaMixinBase implements KbqForm
     /** Checks whether the textarea is invalid based on the native validation. */
     protected isBadInput(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTextarea, [null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTextarea, "textarea[mcTextarea]", ["mcTextarea"], { "canGrow": { "alias": "canGrow"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTextarea, "textarea[kbqTextarea]", ["kbqTextarea"], { "canGrow": { "alias": "canGrow"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
 }

package/toast/_toast-theme.scss

@@ -4,43 +4,35 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
-@mixin kbq-toast-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
-    $toast: map.get(map.get($theme, components), toast);
-
-    .kbq-toast {
-        &.kbq-toast_info .kbq-toast__icon {
-            color: map.get($toast, icon_info);
-        }
+@mixin kbq-toast($toast) {
+    box-shadow: map.get($toast, box-shadow);
 
-        &.kbq-toast_success .kbq-toast__icon {
-            color: map.get($toast, icon_success);
-        }
+    background: map.get($toast, background);
 
-        &.kbq-toast_warning .kbq-toast__icon {
-            color: map.get($toast, icon_warning);
-        }
+    .kbq-toast__title {
+        color: map.get($toast, title);
+    }
 
-        &.kbq-toast_error .kbq-toast__icon {
-            color: map.get($toast, icon_error);
-        }
+    .kbq-toast__text {
+        color: map.get($toast, text);
     }
+}
 
-    .kbq-toast__wrapper {
-        border-color: map.get($toast, border);
 
-        background: map.get($toast, background);
+@mixin kbq-toast-theme($theme) {
+    $toast: map.get(map.get($theme, components), toast);
 
-        box-shadow: map.get($toast, shadow);
-    }
+    $contrast: map.get($toast, contrast);
+    $error: map.get($toast, error);
 
-    .kbq-toast__title {
-        color: map.get($toast, text);
-    }
+    .kbq-toast {
+        &.kbq-toast_contrast {
+            @include kbq-toast($contrast);
+        }
 
-    .kbq-toast__caption {
-        color: map.get($toast, text-caption);
+        &.kbq-toast_error {
+            @include kbq-toast($error);
+        }
     }
 }
 
@@ -48,14 +40,10 @@
     $tokens: map.get($config, tokens);
 
     .kbq-toast {
-        @include kbq-typography-level-to-styles($config, body);
+        @include kbq-typography-level-to-styles($config, map.get($tokens, toast-font-text));
     }
 
     .kbq-toast__title {
         @include kbq-typography-level-to-styles($config, map.get($tokens, toast-font-title));
     }
-
-    .kbq-toast__caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, toast-font-caption));
-    }
 }

package/toast/toast-container.component.scss

@@ -11,8 +11,9 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-toast-container {
     display: flex;
     flex-direction: column;
+    align-items: flex-end;
 
-    gap: var(--kbq-toast-size-gap, map.get($tokens, toast-size-gap));
+    gap: 12px;
 }
 
 .cdk-overlay-container {

package/toast/toast.component.d.ts

@@ -5,6 +5,10 @@ import { BehaviorSubject } from 'rxjs';
 import { KbqToastService } from './toast.service';
 import { KbqToastData } from './toast.type';
 import * as i0 from "@angular/core";
+export declare class KbqToastCloseButton {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastCloseButton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqToastCloseButton, "[kbq-toast-close-button]", never, {}, {}, never, never, false, never>;
+}
 export declare class KbqToastComponent implements OnDestroy {
     readonly data: KbqToastData;
     readonly service: KbqToastService;
@@ -21,7 +25,6 @@ export declare class KbqToastComponent implements OnDestroy {
     get toastStyle(): {
         [x: string]: boolean;
     };
-    get hasDismiss(): boolean;
     get isFocusedOrHovered(): boolean;
     private destroyed;
     constructor(data: KbqToastData, service: KbqToastService, elementRef: ElementRef, focusMonitor: FocusMonitor);

package/toast/toast.component.scss

@@ -9,42 +9,38 @@
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-toast {
+    display: flex;
     box-sizing: border-box;
 
     z-index: $z-index-toast;
 
-    max-height: 200px;
-    height: auto;
-}
-
-.kbq-toast__wrapper {
-    box-sizing: border-box;
+    min-width: var(--kbq-toast-size-container-min-width, map.get($tokens, toast-size-container-min-width));
+    max-width: 480px;
 
-    display: flex;
-    flex: 1 1 auto;
+    height: auto;
 
-    width: var(--kbq-toast-size-width, map.get($tokens, toast-size-width));
+    border-radius: var(--kbq-toast-size-container-border-radius, map.get($tokens, toast-size-container-border-radius));
 
-    padding-right: var(--kbq-toast-size-padding-right, map.get($tokens, toast-size-padding-right));
-    padding-left: var(--kbq-toast-size-padding-left, map.get($tokens, toast-size-padding-left));
+    padding:
+        var(--kbq-toast-size-container-padding-vertical, map.get($tokens, toast-size-container-padding-vertical))
+        var(--kbq-toast-size-container-padding-horizontal, map.get($tokens, toast-size-container-padding-horizontal));
 
-    border-width: var(--kbq-toast-size-border-width, map.get($tokens, toast-size-border-width));
-    border-style: solid;
-    border-radius: var(--kbq-toast-size-border-radius, map.get($tokens, toast-size-border-radius));
-}
-
-.kbq-toast__icon-container {
-    padding-right: var(--kbq-toast-size-icon-margin, map.get($tokens, toast-size-icon-margin));
-
-    padding-top: var(--kbq-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
-    padding-bottom: var(--kbq-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
+    gap: var(
+        --kbq-toast-size-container-content-gap-horizontal,
+        map.get($tokens, toast-size-container-content-gap-horizontal)
+    );
 }
 
 .kbq-toast__container {
-    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    flex: 1;
 
-    padding-top: var(--kbq-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
-    padding-bottom: var(--kbq-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
+    gap: var(
+        --kbq-toast-size-container-content-gap-vertical,
+        map.get($tokens, toast-size-container-content-gap-vertical)
+    )
 }
 
 .kbq-toast__title {
@@ -53,24 +49,35 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
+.kbq-toast__text {
+    display: flex;
+    flex: 1;
+    align-items: center;
+}
+
 .kbq-toast__content {
     display: flex;
     flex-direction: column;
 }
 
 .kbq-toast__actions {
-    margin-top: var(--kbq-toast-size-actionbar-margin, map.get($tokens, toast-size-actionbar-margin));
+    display: flex;
 
-    & > * {
-        margin-right: var(--kbq-toast-size-actionbar-gap, map.get($tokens, toast-size-actionbar-gap));
-    }
-}
+    padding-top: var(--kbq-toast-size-button-stack-padding-top, map.get($tokens, toast-size-button-stack-padding-top));
 
-.kbq-toast__close {
-    float: right;
+    gap: var(
+        --kbq-toast-size-button-stack-content-gap-horizontal,
+        map.get($tokens, toast-size-button-stack-content-gap-horizontal)
+    );
 
-    width: var(--kbq-toast-size-close-button-width, map.get($tokens, toast-size-close-button-width));
-    height: var(--kbq-toast-size-close-button-width, map.get($tokens, toast-size-close-button-width));
+    & * + .kbq-link {
+        margin-left: 12px;
+    }
+}
 
-    margin: -6px -8px -6px 8px;
+.kbq-toast__close-button {
+    margin-top: var(--kbq-toast-size-close-button-margin-top, map.get($tokens, toast-size-close-button-margin-top));
+    margin-right: var(
+        --kbq-toast-size-close-button-margin-right, map.get($tokens, toast-size-close-button-margin-right)
+    );
 }

package/toast/toast.module.d.ts

@@ -8,6 +8,6 @@ import * as i6 from "@koobiq/components/icon";
 import * as i7 from "@koobiq/components/button";
 export declare class KbqToastModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToastModule, [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.A11yModule, typeof i6.KbqIconModule, typeof i7.KbqButtonModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToastModule, [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent, typeof i1.KbqToastCloseButton], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.A11yModule, typeof i6.KbqIconModule, typeof i7.KbqButtonModule], [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent, typeof i1.KbqToastCloseButton]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqToastModule>;
 }

package/toast/toast.type.d.ts

@@ -1,5 +1,8 @@
 import { TemplateRef, InjectionToken } from '@angular/core';
-export type KbqToastStyle = 'default' | 'confirm' | 'custom' | 'success' | 'error' | 'warning' | 'info';
+export declare enum KbqToastStyle {
+    Contrast = "contrast",
+    Error = "error"
+}
 export declare enum KbqToastPosition {
     TOP_RIGHT = "top-right",
     TOP_LEFT = "top-left",
@@ -10,13 +13,13 @@ export declare enum KbqToastPosition {
     CENTER = "center"
 }
 export declare class KbqToastData {
-    style: KbqToastStyle;
-    title: string | TemplateRef<any>;
-    icon?: TemplateRef<any>;
+    title?: string | TemplateRef<any>;
+    style?: KbqToastStyle | string;
+    icon?: TemplateRef<any> | boolean;
     caption?: string | TemplateRef<any>;
     content?: string | TemplateRef<any>;
     actions?: TemplateRef<any>;
-    hasDismiss?: boolean;
+    closeButton?: TemplateRef<any> | boolean;
 }
 export interface KbqToastConfig {
     position: KbqToastPosition;

package/tooltip/tooltip.animations.d.ts

@@ -3,6 +3,6 @@ import { AnimationTriggerMetadata } from '@angular/animations';
  * Animations used by KbqTooltip.
  * @docs-private
  */
-export declare const mcTooltipAnimations: {
+export declare const kbqTooltipAnimations: {
     readonly tooltipState: AnimationTriggerMetadata;
 };

package/tooltip/tooltip.component.d.ts

@@ -30,12 +30,12 @@ export declare class KbqTooltipComponent extends KbqPopUp {
 }
 export declare const KBQ_TOOLTIP_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 /** @docs-private */
-export declare function mcTooltipScrollStrategyFactory(overlay: Overlay): () => ScrollStrategy;
+export declare function kbqTooltipScrollStrategyFactory(overlay: Overlay): () => ScrollStrategy;
 /** @docs-private */
 export declare const KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     provide: InjectionToken<() => ScrollStrategy>;
     deps: (typeof Overlay)[];
-    useFactory: typeof mcTooltipScrollStrategyFactory;
+    useFactory: typeof kbqTooltipScrollStrategyFactory;
 };
 export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> {
     get tooltipVisible(): boolean;
@@ -70,7 +70,7 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     getOverlayHandleComponentType(): Type<KbqTooltipComponent>;
     updateClassMap(newPlacement?: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[mcTooltip]", ["mcTooltip"], { "tooltipVisible": { "alias": "mcVisible"; "required": false; }; "tooltipPlacement": { "alias": "mcPlacement"; "required": false; }; "tooltipPlacementPriority": { "alias": "mcPlacementPriority"; "required": false; }; "content": { "alias": "mcTooltip"; "required": false; }; "disabled": { "alias": "mcTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "mcEnterDelay"; "required": false; }; "leaveDelay": { "alias": "mcLeaveDelay"; "required": false; }; "trigger": { "alias": "mcTrigger"; "required": false; }; "customClass": { "alias": "mcTooltipClass"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, { "placementChange": "mcPlacementChange"; "visibleChange": "mcVisibleChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "tooltipVisible": { "alias": "mcVisible"; "required": false; }; "tooltipPlacement": { "alias": "mcPlacement"; "required": false; }; "tooltipPlacementPriority": { "alias": "mcPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "mcEnterDelay"; "required": false; }; "leaveDelay": { "alias": "mcLeaveDelay"; "required": false; }; "trigger": { "alias": "mcTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, { "placementChange": "mcPlacementChange"; "visibleChange": "mcVisibleChange"; }, never, never, false, never>;
 }
 export declare class KbqWarningTooltipTrigger extends KbqTooltipTrigger {
     get content(): string | TemplateRef<any>;
@@ -90,5 +90,5 @@ export declare class KbqExtendedTooltipTrigger extends KbqTooltipTrigger {
     constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
     updateData(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqExtendedTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqExtendedTooltipTrigger, "[mcExtendedTooltip]", ["mcExtendedTooltip"], { "content": { "alias": "mcExtendedTooltip"; "required": false; }; "header": { "alias": "mcTooltipHeader"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqExtendedTooltipTrigger, "[mcExtendedTooltip]", ["mcExtendedTooltip"], { "content": { "alias": "mcExtendedTooltip"; "required": false; }; "header": { "alias": "kbqTooltipHeader"; "required": false; }; }, {}, never, never, false, never>;
 }

package/tree/_tree-theme.scss

@@ -5,65 +5,77 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
-@mixin kbq-tree-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
+@mixin kbq-tree-option($state) {
+    background: map.get($state, container-background);
+
+    .kbq-option-text {
+        color: map.get($state, text);
+    }
+
+    .kbq-icon {
+        color: map.get($state, icon);
+    }
+
+    .kbq-tree-node-toggle .kbq-icon {
+        color: map.get($state, tree-toggle);
+    }
 
-    $secondary: map.get($theme, secondary);
+    .kbq-option-action .kbq-icon {
+        color: map.get($state, action-button);
+    }
+
+    .kbq-option-caption {
+        color: map.get($state, caption);
+    }
+}
 
-    $is-dark: map.get($theme, is-dark);
 
+@mixin kbq-tree-theme($theme) {
     .kbq-tree-selection:focus {
         outline: none;
     }
 
     .kbq-tree-option {
-        color: map.get($foreground, text);
-
-        &:hover {
-            background-color: map.get($background, overlay-hover);
-        }
+        $tree-item: map.get(map.get($theme, components), tree-item);
 
-        &.kbq-focused {
-            border-color: map.get(map.get($theme, states), focused-color);
+        @include kbq-tree-option(map.get($tree-item, default));
 
-            & .kbq-tree-node-toggle:not([disabled]) .kbq-icon {
-                color: kbq-color($secondary, if($is-dark, 70, 30));
-            }
+        &:hover:not(.kbq-disabled):not([disabled]) {
+            @include kbq-tree-option(map.get($tree-item, hover));
         }
 
-        &.kbq-selected {
-            background: map.get(map.get($theme, states), selected-color);
+        &.kbq-focused,
+        &.kbq-active {
+            border-color: map.get(map.get($tree-item, focused), focus-outline);
         }
 
-        &[disabled] {
-            background-color: transparent;
-
-            color: map.get($foreground, text-disabled);
-        }
-    }
+        &.kbq-selected {
+            @include kbq-tree-option(map.get($tree-item, selected));
 
-    /* stylelint-disable no-descending-specificity */
-    .kbq-tree-node-toggle {
-        & .kbq-icon {
-            color: kbq-color($secondary, 10);
+            &:hover:not(.kbq-disabled):not([disabled]) {
+                @include kbq-tree-option(map.get($tree-item, selected-hover));
+            }
         }
 
-        &:hover .kbq-icon {
-            color: kbq-color($secondary, if($is-dark, 70, 30));
-        }
+        &.kbq-disabled,
+        &[disabled] {
+            @include kbq-tree-option(map.get($tree-item, disabled));
 
-        &[disabled] .kbq-icon {
-            color: kbq-color($secondary, if($is-dark, 30, 70));
+            & .kbq-icon {
+                cursor: default;
+            }
         }
     }
-    /* stylelint-enable no-descending-specificity */
 }
 
 @mixin kbq-tree-typography($config) {
     $tokens: map.get($config, tokens);
 
     .kbq-tree-option {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tree-font-node));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, tree-font-text));
+    }
+
+    .kbq-tree-option-caption {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, tree-font-caption));
     }
 }

package/tree/tree-option.component.d.ts

@@ -27,7 +27,6 @@ export declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements
     readonly onBlur: Subject<KbqTreeOptionEvent>;
     preventBlur: boolean;
     parentTextElement: ElementRef;
-    toggleWrapper: ElementRef;
     toggleElementDirective: KbqTreeNodeToggleBaseDirective<KbqTreeOption>;
     toggleElementComponent: KbqTreeNodeToggleBaseDirective<KbqTreeOption>;
     pseudoCheckbox: KbqPseudoCheckbox;