@koobiq/components 16.0.0-beta.2 → 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-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/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;

package/tree/tree-option.scss

@@ -1,43 +1,59 @@
 @use 'sass:meta';
 @use 'sass:map';
 
+@use '../core/styles/common';
 @use '../core/styles/tokens';
 
 
 $tokens: meta.module-variables(tokens) !default;
 
+
 .kbq-tree-option {
+    $padding-vertical: map.get($tokens, tree-size-container-padding-vertical);
+    $padding-right: map.get($tokens, tree-size-container-padding-right);
+
+    $outline-width: map.get($tokens, tree-size-container-focus-outline-width);
+
     box-sizing: border-box;
 
     display: flex;
     align-items: center;
 
-    height: var(--kbq-tree-size-node-height, map.get($tokens, tree-size-node-height));
+    min-height: 32px;
 
     word-wrap: break-word;
 
-    border: 2px solid transparent;
+    border-width: var(--kbq-tree-size-container-focus-outline-width, $outline-width);
+    border-style: solid;
+    border-color: transparent;
+
+    padding-top: calc(
+        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) -
+        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+    );
+    padding-right: calc(
+        var(--kbq-tree-size-container-padding-right, $padding-right) -
+        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+    );
+    padding-bottom: calc(
+        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) -
+        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+    );
+
+    gap: var(
+        --kbq-tree-size-container-content-gap-horizontal, map.get($tokens, tree-size-container-content-gap-horizontal)
+    );
 
     & .kbq-option-text {
-        display: inline-block;
-        flex-grow: 1;
+        $tokens: meta.module-variables(tokens) !default;
 
-        overflow: hidden;
-
-        white-space: nowrap;
-        text-overflow: ellipsis;
-
-        margin-right: var(--kbq-tree-size-padding-right, map.get($tokens, tree-size-padding-right));
-    }
-
-    & > .kbq-icon, > .toggle-wrapper > .kbq-icon {
-        margin-right: var(--kbq-tree-size-icon-padding, map.get($tokens, tree-size-icon-padding));
+        @include common.kbq-line-wrapper-base();
+        display: inline-block;
 
-        cursor: pointer;
-    }
+        @include common.kbq-truncate-line();
 
-    & > .kbq-progress-spinner {
-        margin-right: 8px;
+        padding-top: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
+        padding-bottom: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
     }
 
     &:focus {
@@ -48,11 +64,6 @@ $tokens: meta.module-variables(tokens) !default;
         cursor: pointer;
     }
 
-    & > .kbq-pseudo-checkbox,
-    & > .kbq-checkbox {
-        margin-right: var(--kbq-tree-size-icon-padding, map.get($tokens, tree-size-icon-padding));
-    }
-
     & .kbq-option-action {
         display: none;
     }

package/tree/tree.module.d.ts

@@ -9,8 +9,9 @@ import * as i7 from "./tree-option.component";
 import * as i8 from "./toggle";
 import * as i9 from "@angular/common";
 import * as i10 from "@koobiq/components/core";
+import * as i11 from "@koobiq/components/icon";
 export declare class KbqTreeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeModule, [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective], [typeof i9.CommonModule, typeof i10.KbqPseudoCheckboxModule], [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeModule, [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective], [typeof i9.CommonModule, typeof i10.KbqPseudoCheckboxModule, typeof i11.KbqIconModule], [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTreeModule>;
 }

package/tree-select/_tree-select-theme.scss

@@ -22,12 +22,20 @@
         }
     }
 
-    .kbq-tree-select__placeholder {
+    .kbq-select__placeholder {
+        text-overflow: ellipsis;
+
         color: map.get($foreground, text-disabled);
     }
 
     .kbq-tree-select__panel {
         @include popup-params($theme);
+
+        & .kbq-tree-select__footer {
+            $popup: map.get(map.get($theme, components), popup);
+
+            border-color: map.get($popup, border);
+        }
     }
 }