@koobiq/components 16.0.0-beta.2 → 16.0.0-beta.6

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

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

package/tags/tag-list.component.d.ts

@@ -241,6 +241,7 @@ export declare class KbqTagList extends KbqTagListMixinBase implements KbqFormFi
     private syncTagsDisabledState;
     /** Revalidate control. */
     private revalidate;
+    private propagateSelectableToChildren;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagList, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqTagList, "kbq-tag-list", ["mcTagList"], { "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], 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

@@ -111,7 +111,7 @@ export declare class KbqTag extends KbqTagMixinBase implements IFocusableOption,
      * Informs any listeners of the removal request. Does not remove the tag from the DOM.
      */
     remove(): void;
-    handleClick(event: Event): void;
+    handleMousedown(event: Event): void;
     handleKeydown(event: KeyboardEvent): void;
     blur(): void;
     private dispatchSelectionChange;

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