@koobiq/components 17.6.0 → 17.7.0

package/tags/tag-tokens.scss

@@ -0,0 +1,151 @@
+.kbq-tag,
+.kbq-tag-list,
+.kbq-tag-input {
+    --kbq-tag-input-font-default-font-size: 14px;
+    --kbq-tag-input-font-default-line-height: 20px;
+    --kbq-tag-input-font-default-letter-spacing: -0.006em;
+    --kbq-tag-input-font-default-font-weight: normal;
+    --kbq-tag-input-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-tag-input-font-default-text-transform: null;
+    --kbq-tag-input-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-tag-list-size-content-gap: 4px;
+    --kbq-tag-size-padding-horizontal: 4px;
+    --kbq-tag-size-padding-vertical: 2px;
+    --kbq-tag-size-content-gap-horizontal: 2px;
+    --kbq-tag-size-icon-margin-left: 2px;
+    --kbq-tag-size-close-button-margin-right: 2px;
+    --kbq-tag-font-default-font-size: 14px;
+    --kbq-tag-font-default-line-height: 20px;
+    --kbq-tag-font-default-letter-spacing: -0.006em;
+    --kbq-tag-font-default-font-weight: 500;
+    --kbq-tag-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-tag-font-default-text-transform: null;
+    --kbq-tag-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-tag-theme-fade-on-default-background: hsla(216, 100%, 85%, 100%);
+    --kbq-tag-theme-fade-on-default-text: hsla(216, 100%, 50%, 100%);
+    --kbq-tag-theme-fade-on-default-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-tag-theme-fade-on-default-close-button: hsla(216, 100%, 50%, 100%);
+    --kbq-tag-theme-fade-on-states-hover-background: hsla(216, 100%, 91%, 100%);
+    --kbq-tag-theme-fade-on-states-hover-text: hsla(216, 100%, 50%, 100%);
+    --kbq-tag-theme-fade-on-states-hover-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-tag-theme-fade-on-states-hover-close-button: hsla(216, 100%, 50%, 100%);
+    --kbq-tag-theme-fade-on-states-focus-background: hsla(216, 100%, 85%, 100%);
+    --kbq-tag-theme-fade-on-states-focus-text: hsla(216, 100%, 50%, 100%);
+    --kbq-tag-theme-fade-on-states-focus-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-tag-theme-fade-on-states-focus-close-button: hsla(216, 100%, 50%, 100%);
+    --kbq-tag-theme-fade-on-states-focus-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-tag-theme-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-tag-theme-fade-on-states-disabled-text: hsla(229, 15%, 15%, 32%);
+    --kbq-tag-theme-fade-on-states-disabled-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-tag-theme-fade-on-states-disabled-close-button: hsla(229, 15%, 15%, 32%);
+    --kbq-tag-contrast-fade-on-default-background: hsla(229, 15%, 92%, 100%);
+    --kbq-tag-contrast-fade-on-default-text: hsla(229, 15%, 15%, 100%);
+    --kbq-tag-contrast-fade-on-default-icon: hsla(229, 15%, 60%, 100%);
+    --kbq-tag-contrast-fade-on-default-close-button: hsla(229, 15%, 60%, 100%);
+    --kbq-tag-contrast-fade-on-states-hover-background: hsla(229, 15%, 88%, 100%);
+    --kbq-tag-contrast-fade-on-states-hover-text: hsla(229, 15%, 15%, 100%);
+    --kbq-tag-contrast-fade-on-states-hover-icon: hsla(229, 15%, 60%, 100%);
+    --kbq-tag-contrast-fade-on-states-hover-close-button: hsla(229, 15%, 60%, 100%);
+    --kbq-tag-contrast-fade-on-states-focus-background: hsla(229, 15%, 92%, 100%);
+    --kbq-tag-contrast-fade-on-states-focus-text: hsla(229, 15%, 15%, 100%);
+    --kbq-tag-contrast-fade-on-states-focus-icon: hsla(229, 15%, 60%, 100%);
+    --kbq-tag-contrast-fade-on-states-focus-close-button: hsla(229, 15%, 60%, 100%);
+    --kbq-tag-contrast-fade-on-states-focus-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-tag-contrast-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-tag-contrast-fade-on-states-disabled-text: hsla(229, 15%, 15%, 32%);
+    --kbq-tag-contrast-fade-on-states-disabled-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-tag-contrast-fade-on-states-disabled-close-button: hsla(229, 15%, 15%, 32%);
+    --kbq-tag-error-fade-on-default-background: hsla(7, 97%, 90%, 100%);
+    --kbq-tag-error-fade-on-default-text: hsla(7, 97%, 40%, 100%);
+    --kbq-tag-error-fade-on-default-icon: hsla(7, 97%, 45%, 100%);
+    --kbq-tag-error-fade-on-default-close-button: hsla(7, 97%, 45%, 100%);
+    --kbq-tag-error-fade-on-states-hover-background: hsla(7, 97%, 92%, 100%);
+    --kbq-tag-error-fade-on-states-hover-text: hsla(7, 97%, 40%, 100%);
+    --kbq-tag-error-fade-on-states-hover-icon: hsla(7, 97%, 45%, 100%);
+    --kbq-tag-error-fade-on-states-hover-close-button: hsla(7, 97%, 45%, 100%);
+    --kbq-tag-error-fade-on-states-focus-background: hsla(7, 97%, 90%, 100%);
+    --kbq-tag-error-fade-on-states-focus-text: hsla(7, 97%, 40%, 100%);
+    --kbq-tag-error-fade-on-states-focus-icon: hsla(7, 97%, 45%, 100%);
+    --kbq-tag-error-fade-on-states-focus-close-button: hsla(7, 97%, 45%, 100%);
+    --kbq-tag-error-fade-on-states-focus-outline: hsla(7, 97%, 45%, 100%);
+    --kbq-tag-error-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-tag-error-fade-on-states-disabled-text: hsla(229, 15%, 15%, 32%);
+    --kbq-tag-error-fade-on-states-disabled-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-tag-error-fade-on-states-disabled-close-button: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-tag-theme-fade-on-default-background: hsla(216, 100%, 20%, 100%);
+    --kbq-tag-theme-fade-on-default-text: hsla(216, 100%, 65%, 100%);
+    --kbq-tag-theme-fade-on-default-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-tag-theme-fade-on-default-close-button: hsla(216, 100%, 65%, 100%);
+    --kbq-tag-theme-fade-on-states-hover-background: hsla(216, 100%, 18%, 100%);
+    --kbq-tag-theme-fade-on-states-hover-text: hsla(216, 100%, 65%, 100%);
+    --kbq-tag-theme-fade-on-states-hover-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-tag-theme-fade-on-states-hover-close-button: hsla(216, 100%, 65%, 100%);
+    --kbq-tag-theme-fade-on-states-focus-background: hsla(216, 100%, 20%, 100%);
+    --kbq-tag-theme-fade-on-states-focus-text: hsla(216, 100%, 65%, 100%);
+    --kbq-tag-theme-fade-on-states-focus-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-tag-theme-fade-on-states-focus-close-button: hsla(216, 100%, 65%, 100%);
+    --kbq-tag-theme-fade-on-states-focus-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-tag-theme-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-tag-theme-fade-on-states-disabled-text: hsla(229, 15%, 40%, 100%);
+    --kbq-tag-theme-fade-on-states-disabled-icon: hsla(229, 15%, 30%, 100%);
+    --kbq-tag-theme-fade-on-states-disabled-close-button: hsla(229, 15%, 30%, 100%);
+    --kbq-tag-contrast-fade-on-default-background: hsla(229, 15%, 25%, 100%);
+    --kbq-tag-contrast-fade-on-default-text: hsla(229, 15%, 80%, 100%);
+    --kbq-tag-contrast-fade-on-default-icon: hsla(229, 15%, 45%, 100%);
+    --kbq-tag-contrast-fade-on-default-close-button: hsla(229, 15%, 45%, 100%);
+    --kbq-tag-contrast-fade-on-states-hover-background: hsla(229, 15%, 25%, 100%);
+    --kbq-tag-contrast-fade-on-states-hover-text: hsla(229, 15%, 80%, 100%);
+    --kbq-tag-contrast-fade-on-states-hover-icon: hsla(229, 15%, 45%, 100%);
+    --kbq-tag-contrast-fade-on-states-hover-close-button: hsla(229, 15%, 45%, 100%);
+    --kbq-tag-contrast-fade-on-states-focus-background: hsla(229, 15%, 25%, 100%);
+    --kbq-tag-contrast-fade-on-states-focus-text: hsla(229, 15%, 80%, 100%);
+    --kbq-tag-contrast-fade-on-states-focus-icon: hsla(229, 15%, 45%, 100%);
+    --kbq-tag-contrast-fade-on-states-focus-close-button: hsla(229, 15%, 45%, 100%);
+    --kbq-tag-contrast-fade-on-states-focus-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-tag-contrast-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-tag-contrast-fade-on-states-disabled-text: hsla(229, 15%, 40%, 100%);
+    --kbq-tag-contrast-fade-on-states-disabled-icon: hsla(229, 15%, 30%, 100%);
+    --kbq-tag-contrast-fade-on-states-disabled-close-button: hsla(229, 15%, 30%, 100%);
+    --kbq-tag-error-fade-on-default-background: hsla(7, 97%, 15%, 100%);
+    --kbq-tag-error-fade-on-default-text: hsla(7, 97%, 60%, 100%);
+    --kbq-tag-error-fade-on-default-icon: hsla(7, 97%, 60%, 100%);
+    --kbq-tag-error-fade-on-default-close-button: hsla(7, 97%, 60%, 100%);
+    --kbq-tag-error-fade-on-states-hover-background: hsla(7, 97%, 13%, 100%);
+    --kbq-tag-error-fade-on-states-hover-text: hsla(7, 97%, 60%, 100%);
+    --kbq-tag-error-fade-on-states-hover-icon: hsla(7, 97%, 60%, 100%);
+    --kbq-tag-error-fade-on-states-hover-close-button: hsla(7, 97%, 60%, 100%);
+    --kbq-tag-error-fade-on-states-focus-background: hsla(7, 97%, 15%, 100%);
+    --kbq-tag-error-fade-on-states-focus-text: hsla(7, 97%, 60%, 100%);
+    --kbq-tag-error-fade-on-states-focus-icon: hsla(7, 97%, 60%, 100%);
+    --kbq-tag-error-fade-on-states-focus-close-button: hsla(7, 97%, 60%, 100%);
+    --kbq-tag-error-fade-on-states-focus-outline: hsla(7, 97%, 45%, 100%);
+    --kbq-tag-error-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-tag-error-fade-on-states-disabled-text: hsla(229, 15%, 40%, 100%);
+    --kbq-tag-error-fade-on-states-disabled-icon: hsla(229, 15%, 30%, 100%);
+    --kbq-tag-error-fade-on-states-disabled-close-button: hsla(229, 15%, 30%, 100%);
+    --kbq-tag-warning-fade-on-default-background: hsla(38, 100%, 14%, 100%);
+    --kbq-tag-warning-fade-on-default-text: hsla(38, 100%, 60%, 100%);
+    --kbq-tag-warning-fade-on-default-icon: hsla(38, 100%, 60%, 100%);
+    --kbq-tag-warning-fade-on-default-close-button: hsla(38, 100%, 60%, 100%);
+    --kbq-tag-warning-fade-on-states-hover-background: hsla(38, 100%, 13%, 100%);
+    --kbq-tag-warning-fade-on-states-hover-text: hsla(38, 100%, 60%, 100%);
+    --kbq-tag-warning-fade-on-states-hover-icon: hsla(38, 100%, 60%, 100%);
+    --kbq-tag-warning-fade-on-states-hover-close-button: hsla(38, 100%, 60%, 100%);
+    --kbq-tag-warning-fade-on-states-focus-background: hsla(38, 100%, 14%, 100%);
+    --kbq-tag-warning-fade-on-states-focus-text: hsla(38, 100%, 60%, 100%);
+    --kbq-tag-warning-fade-on-states-focus-icon: hsla(38, 100%, 60%, 100%);
+    --kbq-tag-warning-fade-on-states-focus-close-button: hsla(38, 100%, 60%, 100%);
+    --kbq-tag-warning-fade-on-states-focus-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-tag-warning-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-tag-warning-fade-on-states-disabled-text: hsla(229, 15%, 40%, 100%);
+    --kbq-tag-warning-fade-on-states-disabled-icon: hsla(229, 15%, 30%, 100%);
+    --kbq-tag-warning-fade-on-states-disabled-close-button: hsla(229, 15%, 30%, 100%);
+}

package/tags/tag.module.d.ts

@@ -2,10 +2,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "./tag-list.component";
 import * as i2 from "./tag.component";
 import * as i3 from "./tag-input";
-import * as i4 from "@angular/common";
-import * as i5 from "@angular/cdk/platform";
+import * as i4 from "@angular/cdk/platform";
 export declare class KbqTagsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTagsModule, [typeof i1.KbqTagList, typeof i2.KbqTag, typeof i3.KbqTagInput, typeof i2.KbqTagTrailingIcon, typeof i2.KbqTagAvatar, typeof i2.KbqTagRemove], [typeof i4.CommonModule, typeof i5.PlatformModule], [typeof i1.KbqTagList, typeof i2.KbqTag, typeof i3.KbqTagInput, typeof i2.KbqTagTrailingIcon, typeof i2.KbqTagAvatar, typeof i2.KbqTagRemove]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTagsModule, [typeof i1.KbqTagList, typeof i2.KbqTag, typeof i3.KbqTagInput, typeof i2.KbqTagTrailingIcon, typeof i2.KbqTagAvatar, typeof i2.KbqTagRemove], [typeof i4.PlatformModule], [typeof i1.KbqTagList, typeof i2.KbqTag, typeof i3.KbqTagInput, typeof i2.KbqTagTrailingIcon, typeof i2.KbqTagAvatar, typeof i2.KbqTagRemove]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTagsModule>;
 }

package/tags/tag.scss

@@ -1,6 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/tokens' as *;
 
 .kbq-tag {

package/textarea/textarea.module.d.ts

@@ -1,11 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./textarea.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/a11y";
-import * as i4 from "@koobiq/components/core";
-import * as i5 from "@angular/forms";
+import * as i2 from "@angular/cdk/a11y";
+import * as i3 from "@koobiq/components/core";
+import * as i4 from "@angular/forms";
 export declare class KbqTextareaModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTextareaModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTextareaModule, [typeof i1.KbqTextarea], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.KbqCommonModule, typeof i5.FormsModule], [typeof i1.KbqTextarea]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTextareaModule, [typeof i1.KbqTextarea], [typeof i2.A11yModule, typeof i3.KbqCommonModule, typeof i4.FormsModule], [typeof i1.KbqTextarea]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTextareaModule>;
 }

package/timepicker/timepicker.module.d.ts

@@ -1,11 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./timepicker.directive";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/a11y";
-import * as i4 from "@angular/cdk/platform";
-import * as i5 from "@angular/forms";
+import * as i2 from "@angular/cdk/a11y";
+import * as i3 from "@angular/cdk/platform";
+import * as i4 from "@angular/forms";
 export declare class KbqTimepickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimepickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimepickerModule, [typeof i1.KbqTimepicker], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule, typeof i5.FormsModule], [typeof i1.KbqTimepicker]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimepickerModule, [typeof i1.KbqTimepicker], [typeof i2.A11yModule, typeof i3.PlatformModule, typeof i4.FormsModule], [typeof i1.KbqTimepicker]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTimepickerModule>;
 }

package/timezone/timezone.module.d.ts

@@ -4,16 +4,16 @@ import * as i2 from "./cities-by-filter.pipe";
 import * as i3 from "./timezone-select.component";
 import * as i4 from "./timezone-option.component";
 import * as i5 from "./timezone-option.directive";
-import * as i6 from "@angular/common";
-import * as i7 from "@angular/cdk/overlay";
-import * as i8 from "@koobiq/components/form-field";
-import * as i9 from "@koobiq/components/core";
-import * as i10 from "@koobiq/components/select";
-import * as i11 from "@koobiq/components/icon";
-import * as i12 from "@koobiq/components/tags";
-import * as i13 from "@koobiq/components/tooltip";
+import * as i6 from "@angular/cdk/overlay";
+import * as i7 from "@koobiq/components/form-field";
+import * as i8 from "@koobiq/components/core";
+import * as i9 from "@koobiq/components/select";
+import * as i10 from "@koobiq/components/icon";
+import * as i11 from "@koobiq/components/tags";
+import * as i12 from "@koobiq/components/tooltip";
+import * as i13 from "@angular/common";
 export declare class KbqTimezoneModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimezoneModule, [typeof i1.UtcOffsetPipe, typeof i2.CitiesByFilterPipe, typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger], [typeof i6.CommonModule, typeof i7.OverlayModule, typeof i8.KbqFormFieldModule, typeof i9.KbqOptionModule, typeof i10.KbqSelectModule, typeof i11.KbqIconModule, typeof i12.KbqTagsModule, typeof i13.KbqToolTipModule, typeof i9.KbqHighlightModule], [typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimezoneModule, [typeof i1.UtcOffsetPipe, typeof i2.CitiesByFilterPipe, typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger], [typeof i6.OverlayModule, typeof i7.KbqFormFieldModule, typeof i8.KbqOptionModule, typeof i9.KbqSelectModule, typeof i10.KbqIconModule, typeof i11.KbqTagsModule, typeof i12.KbqToolTipModule, typeof i8.KbqHighlightModule, typeof i13.NgClass, typeof i13.KeyValuePipe], [typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTimezoneModule>;
 }

package/toast/toast.module.d.ts

@@ -1,14 +1,14 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./toast.component";
 import * as i2 from "./toast-container.component";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/cdk/overlay";
-import * as i5 from "@koobiq/components/title";
-import * as i6 from "@angular/cdk/a11y";
-import * as i7 from "@koobiq/components/icon";
-import * as i8 from "@koobiq/components/button";
+import * as i3 from "@angular/cdk/overlay";
+import * as i4 from "@koobiq/components/title";
+import * as i5 from "@angular/cdk/a11y";
+import * as i6 from "@koobiq/components/icon";
+import * as i7 from "@koobiq/components/button";
+import * as i8 from "@angular/common";
 export declare class KbqToastModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToastModule, [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent, typeof i1.KbqToastCloseButton], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.KbqTitleModule, typeof i6.A11yModule, typeof i7.KbqIconModule, typeof i8.KbqButtonModule], [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent, typeof i1.KbqToastCloseButton]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToastModule, [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent, typeof i1.KbqToastCloseButton], [typeof i3.OverlayModule, typeof i4.KbqTitleModule, typeof i5.A11yModule, typeof i6.KbqIconModule, typeof i7.KbqButtonModule, typeof i8.NgTemplateOutlet, typeof i8.NgClass], [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent, typeof i1.KbqToastCloseButton]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqToastModule>;
 }

package/toggle/toggle-tokens.scss

@@ -43,10 +43,10 @@
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
     --kbq-foreground-text-disabled: hsla(229, 15%, 70%, 100%);
-    --kbq-toggle-theme-default-border: hsla(229, 15%, 70%, 100%);
+    --kbq-toggle-theme-default-border: hsla(229, 15%, 80%, 100%);
     --kbq-toggle-theme-default-background: hsla(0, 0%, 100%, 100%);
     --kbq-toggle-theme-default-circle-background: hsla(229, 15%, 15%, 100%);
-    --kbq-toggle-theme-states-hover-border: hsla(229, 15%, 70%, 100%);
+    --kbq-toggle-theme-states-hover-border: hsla(229, 15%, 80%, 100%);
     --kbq-toggle-theme-states-hover-background: hsla(229, 15%, 50%, 8%);
     --kbq-toggle-theme-states-hover-circle-background: hsla(229, 15%, 15%, 100%);
     --kbq-toggle-theme-states-checked-border: transparent;
@@ -63,7 +63,7 @@
     --kbq-toggle-theme-states-checked-focused-background: hsla(216, 100%, 50%, 100%);
     --kbq-toggle-theme-states-checked-focused-circle-background: hsla(0, 0%, 100%, 100%);
     --kbq-toggle-theme-states-checked-focused-focus-outline: hsla(216, 100%, 60%, 100%);
-    --kbq-toggle-theme-states-disabled-border: hsla(229, 15%, 15%, 32%);
+    --kbq-toggle-theme-states-disabled-border: hsla(229, 15%, 50%, 32%);
     --kbq-toggle-theme-states-disabled-background: hsla(229, 15%, 50%, 16%);
     --kbq-toggle-theme-states-disabled-circle-background: hsla(229, 15%, 15%, 32%);
     --kbq-toggle-error-default-border: hsla(7, 97%, 45%, 100%);
@@ -86,7 +86,7 @@
     --kbq-toggle-error-states-checked-focused-background: hsla(7, 97%, 60%, 100%);
     --kbq-toggle-error-states-checked-focused-circle-background: hsla(0, 0%, 100%, 100%);
     --kbq-toggle-error-states-checked-focused-focus-outline: hsla(7, 97%, 45%, 100%);
-    --kbq-toggle-error-states-disabled-border: hsla(229, 15%, 15%, 32%);
+    --kbq-toggle-error-states-disabled-border: hsla(229, 15%, 50%, 32%);
     --kbq-toggle-error-states-disabled-background: hsla(229, 15%, 50%, 16%);
     --kbq-toggle-error-states-disabled-circle-background: hsla(229, 15%, 15%, 32%);
 }

package/toggle/toggle.module.d.ts

@@ -1,10 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./toggle.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/a11y";
-import * as i4 from "@koobiq/components/core";
+import * as i2 from "@angular/cdk/a11y";
+import * as i3 from "@koobiq/components/core";
 export declare class KbqToggleModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToggleModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToggleModule, [typeof i1.KbqToggleComponent], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.KbqCommonModule], [typeof i1.KbqToggleComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToggleModule, [typeof i1.KbqToggleComponent], [typeof i2.A11yModule, typeof i3.KbqCommonModule], [typeof i1.KbqToggleComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqToggleModule>;
 }

package/tooltip/tooltip.module.d.ts

@@ -1,9 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./tooltip.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/overlay";
+import * as i2 from "@angular/cdk/overlay";
+import * as i3 from "@angular/common";
 export declare class KbqToolTipModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToolTipModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToolTipModule, [typeof i1.KbqTooltipComponent, typeof i1.KbqTooltipTrigger, typeof i1.KbqExtendedTooltipTrigger, typeof i1.KbqWarningTooltipTrigger], [typeof i2.CommonModule, typeof i3.OverlayModule], [typeof i1.KbqTooltipComponent, typeof i1.KbqTooltipTrigger, typeof i1.KbqExtendedTooltipTrigger, typeof i1.KbqWarningTooltipTrigger]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToolTipModule, [typeof i1.KbqTooltipComponent, typeof i1.KbqTooltipTrigger, typeof i1.KbqExtendedTooltipTrigger, typeof i1.KbqWarningTooltipTrigger], [typeof i2.OverlayModule, typeof i3.NgClass, typeof i3.NgTemplateOutlet], [typeof i1.KbqTooltipComponent, typeof i1.KbqTooltipTrigger, typeof i1.KbqExtendedTooltipTrigger, typeof i1.KbqWarningTooltipTrigger]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqToolTipModule>;
 }

package/tree/tree-tokens.scss

@@ -39,13 +39,13 @@
     --kbq-tree-states-hover-action-button-color: hsla(229, 15%, 60%, 100%);
     --kbq-tree-states-hover-caption-color: hsla(229, 15%, 50%, 100%);
     --kbq-tree-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
-    --kbq-tree-states-selected-container-background: hsla(216, 100%, 85%, 100%);
+    --kbq-tree-states-selected-container-background: hsla(216, 100%, 94%, 100%);
     --kbq-tree-states-selected-text-color: hsla(229, 15%, 15%, 100%);
     --kbq-tree-states-selected-icon-color: hsla(229, 15%, 15%, 100%);
     --kbq-tree-states-selected-tree-toggle-color: hsla(229, 15%, 60%, 100%);
     --kbq-tree-states-selected-action-button-color: hsla(229, 15%, 60%, 100%);
     --kbq-tree-states-selected-caption-color: hsla(229, 15%, 50%, 100%);
-    --kbq-tree-states-selected-hover-container-background: hsla(216, 100%, 91%, 100%);
+    --kbq-tree-states-selected-hover-container-background: hsla(216, 100%, 90%, 100%);
     --kbq-tree-states-selected-hover-text-color: hsla(229, 15%, 15%, 100%);
     --kbq-tree-states-selected-hover-icon-color: hsla(229, 15%, 15%, 100%);
     --kbq-tree-states-selected-hover-tree-toggle-color: hsla(229, 15%, 60%, 100%);
@@ -73,13 +73,13 @@
     --kbq-tree-states-hover-action-button-color: hsla(229, 15%, 45%, 100%);
     --kbq-tree-states-hover-caption-color: hsla(229, 15%, 60%, 100%);
     --kbq-tree-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
-    --kbq-tree-states-selected-container-background: hsla(216, 100%, 20%, 100%);
+    --kbq-tree-states-selected-container-background: hsla(216, 100%, 18%, 100%);
     --kbq-tree-states-selected-text-color: hsla(229, 15%, 80%, 100%);
     --kbq-tree-states-selected-icon-color: hsla(229, 15%, 80%, 100%);
     --kbq-tree-states-selected-tree-toggle-color: hsla(229, 15%, 45%, 100%);
     --kbq-tree-states-selected-action-button-color: hsla(229, 15%, 45%, 100%);
     --kbq-tree-states-selected-caption-color: hsla(229, 15%, 60%, 100%);
-    --kbq-tree-states-selected-hover-container-background: hsla(216, 100%, 18%, 100%);
+    --kbq-tree-states-selected-hover-container-background: hsla(216, 100%, 15%, 100%);
     --kbq-tree-states-selected-hover-text-color: hsla(229, 15%, 80%, 100%);
     --kbq-tree-states-selected-hover-icon-color: hsla(229, 15%, 80%, 100%);
     --kbq-tree-states-selected-hover-tree-toggle-color: hsla(229, 15%, 45%, 100%);

package/tree/tree.module.d.ts

@@ -7,11 +7,10 @@ import * as i5 from "./tree";
 import * as i6 from "./tree-selection.component";
 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";
+import * as i9 from "@koobiq/components/core";
+import * as i10 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 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 ɵ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.KbqPseudoCheckboxModule, typeof i10.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.component.d.ts

@@ -277,6 +277,6 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     private _compareWith;
     private subscribeOnSearchChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-trigger", "kbq-cleaner", "kbq-select-matcher, [kbq-select-matcher]", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
 }
 export {};

package/tree-select/tree-select.module.d.ts

@@ -1,13 +1,13 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./tree-select.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/overlay";
-import * as i4 from "@koobiq/components/tree";
-import * as i5 from "@koobiq/components/icon";
-import * as i6 from "@koobiq/components/tags";
-import * as i7 from "@koobiq/components/core";
+import * as i2 from "@angular/cdk/overlay";
+import * as i3 from "@koobiq/components/tree";
+import * as i4 from "@koobiq/components/icon";
+import * as i5 from "@koobiq/components/tags";
+import * as i6 from "@koobiq/components/core";
+import * as i7 from "@angular/common";
 export declare class KbqTreeSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeSelectModule, [typeof i1.KbqTreeSelect], [typeof i2.CommonModule, typeof i3.OverlayModule, typeof i4.KbqTreeModule, typeof i5.KbqIconModule, typeof i6.KbqTagsModule, typeof i7.KbqPseudoCheckboxModule, typeof i7.KbqSelectSearch, typeof i7.KbqSelectFooter, typeof i7.KbqSelectMatcher, typeof i7.KbqSelectTrigger, typeof i7.KbqSelectSearchEmptyResult], [typeof i1.KbqTreeSelect, typeof i2.CommonModule, typeof i7.KbqSelectSearch, typeof i7.KbqSelectFooter, typeof i7.KbqSelectMatcher, typeof i7.KbqSelectTrigger, typeof i7.KbqSelectSearchEmptyResult]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeSelectModule, [typeof i1.KbqTreeSelect], [typeof i2.OverlayModule, typeof i3.KbqTreeModule, typeof i4.KbqIconModule, typeof i5.KbqTagsModule, typeof i6.KbqPseudoCheckboxModule, typeof i6.KbqSelectSearch, typeof i6.KbqSelectFooter, typeof i6.KbqSelectMatcher, typeof i6.KbqSelectTrigger, typeof i6.KbqSelectSearchEmptyResult, typeof i7.NgClass, typeof i7.NgTemplateOutlet], [typeof i1.KbqTreeSelect, typeof i6.KbqSelectSearch, typeof i6.KbqSelectFooter, typeof i6.KbqSelectMatcher, typeof i6.KbqSelectTrigger, typeof i6.KbqSelectSearchEmptyResult]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTreeSelectModule>;
 }