@koobiq/components 17.1.0 → 17.3.0

package/progress-bar/_progress-bar-theme.scss

@@ -18,11 +18,11 @@
     }
 
     .kbq-progress-bar-text {
-        color: kbq-css-variable(progress-bar-text, map.get($progress-bar, text));
+        color: kbq-css-variable(progress-bar-text-color, map.get($progress-bar, text));
     }
 
     .kbq-progress-bar-caption {
-        color: kbq-css-variable(progress-bar-caption, map.get($progress-bar, caption));
+        color: kbq-css-variable(progress-bar-caption-color, map.get($progress-bar, caption));
     }
 }
 

package/progress-spinner/_progress-spinner-theme.scss

@@ -9,16 +9,16 @@
 
     .kbq-progress-spinner {
         .kbq-progress-spinner__circle {
-            stroke: kbq-css-variable(progress-spinner-circle, map.get($progress-spinner, circle));
+            stroke: kbq-css-variable(progress-spinner-circle-background, map.get($progress-spinner, circle));
         }
     }
 
     .kbq-progress-spinner-text {
-        color: kbq-css-variable(progress-spinner-text, map.get($progress-spinner, text));
+        color: kbq-css-variable(progress-spinner-text-color, map.get($progress-spinner, text));
     }
 
     .kbq-progress-spinner-caption {
-        color: kbq-css-variable(progress-spinner-caption, map.get($progress-spinner, caption));
+        color: kbq-css-variable(progress-spinner-caption-color, map.get($progress-spinner, caption));
     }
 }
 

package/radio/_radio-theme.scss

@@ -6,27 +6,17 @@
 
 @mixin kbq-radio-state($component, $type, $state-name) {
     $state: map.get($component, $type, $state-name);
+    $base-path: radio-#{$type}-#{$state-name};
 
     & .kbq-radio-button__outer-circle {
-        border-color: kbq-css-variable(
-            radio-#{$type}-#{$state-name}-outer-circle-border,
-            map.get($state, outer-circle-border)
-        );
-        background: kbq-css-variable(
-            radio-#{$type}-#{$state-name}-outer-circle-background,
-            map.get($state, outer-circle-background)
-        );
-        box-shadow: kbq-css-variable(
-            radio-#{$type}-#{$state-name}-outer-circle-shadow,
-            map.get($state, outer-circle-shadow)
-        );
+        border-color: kbq-css-variable(#{$base-path}-outer-circle-border, map.get($state, outer-circle-border));
+        background: kbq-css-variable(#{$base-path}-outer-circle-background, map.get($state, outer-circle-background));
+        // FIXME: move under &.cdk-keyboard-focused, because used only for focused state.
+        box-shadow: kbq-css-variable(#{$base-path}-outer-circle-shadow, map.get($state, outer-circle-shadow));
     }
 
     & .kbq-radio-button__inner-circle {
-        background: kbq-css-variable(
-            radio-#{$type}-#{$state-name}-inner-circle-background,
-            map.get($state, inner-circle-background)
-        );
+        background: kbq-css-variable(#{$base-path}-inner-circle-background, map.get($state, inner-circle-background));
     }
 }
 
@@ -34,7 +24,7 @@
     @include kbq-radio-state($component, $type-name, default);
 
     & .kbq-hint .kbq-hint__text {
-        color: map.get($component, $type-name, default, caption);
+        color: kbq-css-variable(radio-#{$type-name}-default-caption, map.get($component, $type-name, default, caption));
     }
 
     &:hover {
@@ -58,11 +48,17 @@
 
         & .kbq-radio-label {
             cursor: default;
-            color: map.get($component, $type-name, states-disabled, caption);
+            color: kbq-css-variable(
+                radio-#{$type-name}-states-disabled-caption,
+                map.get($component, $type-name, states-disabled, caption)
+            );
         }
 
         & .kbq-hint .kbq-hint__text {
-            color: map.get($component, $type-name, states-disabled, caption);
+            color: kbq-css-variable(
+                radio-#{$type-name}-states-disabled-caption,
+                map.get($component, $type-name, states-disabled, caption)
+            );
         }
     }
 }

package/schematics/ng-add/index.js

@@ -52,13 +52,13 @@ function ngAdd(options) {
         }
         // Installing dependencies
         addPackageToPackageJson(tree, '@angular/cdk', "^17.2.0");
-        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.1.0");
-        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.1.0");
+        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.3.0");
+        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.3.0");
         addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.2");
         addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.2");
         addPackageToPackageJson(tree, '@koobiq/icons', "^7.1.1");
-        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.0.0");
-        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.0.0");
+        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.3.1");
+        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.3.1");
         addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
         addPackageToPackageJson(tree, 'luxon', "^3.4.4");
         addPackageToPackageJson(tree, 'marked', "^9.0.0");

package/scrollbar/_scrollbar-component-theme.scss

@@ -8,21 +8,30 @@
         .os-scrollbar {
             .os-scrollbar-handle {
                 &::before {
-                    border-color: kbq-css-variable(scrollbar-default, map.get($scrollbar, default));
-                    background-color: kbq-css-variable(scrollbar-default, map.get($scrollbar, default));
+                    border-color: kbq-css-variable(scrollbar-thumb-default-background, map.get($scrollbar, default));
+                    background-color: kbq-css-variable(
+                        scrollbar-thumb-default-background,
+                        map.get($scrollbar, default)
+                    );
                 }
 
                 &:hover {
                     &::before {
-                        border-color: kbq-css-variable(scrollbar-hover, map.get($scrollbar, hover));
-                        background-color: kbq-css-variable(scrollbar-hover, map.get($scrollbar, hover));
+                        border-color: kbq-css-variable(scrollbar-thumb-hover-background, map.get($scrollbar, hover));
+                        background-color: kbq-css-variable(
+                            scrollbar-thumb-hover-background,
+                            map.get($scrollbar, hover)
+                        );
                     }
                 }
 
                 &:active {
                     &::before {
-                        border-color: kbq-css-variable(scrollbar-active, map.get($scrollbar, active));
-                        background-color: kbq-css-variable(scrollbar-active, map.get($scrollbar, active));
+                        border-color: kbq-css-variable(scrollbar-thumb-active-background, map.get($scrollbar, active));
+                        background-color: kbq-css-variable(
+                            scrollbar-thumb-active-background,
+                            map.get($scrollbar, active)
+                        );
                     }
                 }
             }
@@ -30,17 +39,23 @@
             .os-scrollbar-track,
             .os-scrollbar-handle {
                 border-style: solid;
-                border-color: kbq-css-variable(scrollbar-track-default, map.get($scrollbar, track, default)) !important;
-                background-color: kbq-css-variable(scrollbar-track-default, map.get($scrollbar, track, default));
+                border-color: kbq-css-variable(
+                    scrollbar-track-default-border,
+                    map.get($scrollbar, track, default)
+                ) !important;
+                background-color: kbq-css-variable(
+                    scrollbar-track-default-background,
+                    map.get($scrollbar, track, default)
+                );
 
                 &:hover {
-                    border-color: kbq-css-variable(scrollbar-track-hover, map.get($scrollbar, track, hover));
-                    background: kbq-css-variable(scrollbar-track-hover, map.get($scrollbar, track, hover));
+                    border-color: kbq-css-variable(scrollbar-track-hover-border, map.get($scrollbar, track, hover));
+                    background: kbq-css-variable(scrollbar-track-hover-background, map.get($scrollbar, track, hover));
                 }
 
                 &:active {
-                    border-color: kbq-css-variable(scrollbar-track-active, map.get($scrollbar, track, active));
-                    background: kbq-css-variable(scrollbar-track-active, map.get($scrollbar, track, active));
+                    border-color: kbq-css-variable(scrollbar-track-active-border, map.get($scrollbar, track, active));
+                    background: kbq-css-variable(scrollbar-track-active-background, map.get($scrollbar, track, active));
                 }
             }
         }

package/select/_select-theme.scss

@@ -33,8 +33,8 @@
     }
 
     .kbq-select__panel {
-        box-shadow: kbq-css-variable(select-panel-shadow, map.get($select-panel, shadow));
-        background: kbq-css-variable(select-panel-background, map.get($select-panel, background));
+        box-shadow: kbq-css-variable(select-panel-dropdown-shadow, map.get($select-panel, shadow));
+        background: kbq-css-variable(select-panel-dropdown-background, map.get($select-panel, background));
 
         & .kbq-select__footer {
             border-color: kbq-css-variable(divider-color, map.get($divider, color));

package/sidepanel/_sidepanel-theme.scss

@@ -8,17 +8,17 @@
     $sidepanel: map.get($theme, components, sidepanel);
 
     .kbq-sidepanel-title {
-        color: kbq-css-variable(sidepanel-header-text, map.get($sidepanel, header-text));
+        color: kbq-css-variable(sidepanel-header-text-color, map.get($sidepanel, header-text));
     }
 
     .kbq-sidepanel-content {
-        background-color: kbq-css-variable(sidepanel-background, map.get($sidepanel, background));
-        color: kbq-css-variable(sidepanel-content-text, map.get($sidepanel, content-text));
+        background-color: kbq-css-variable(sidepanel-container-background, map.get($sidepanel, background));
+        color: kbq-css-variable(sidepanel-content-text-color, map.get($sidepanel, content-text));
     }
 
     .kbq-sidepanel-container_shadowed {
         .kbq-sidepanel-content {
-            box-shadow: kbq-css-variable(sidepanel-box-shadow, map.get($sidepanel, box-shadow));
+            box-shadow: kbq-css-variable(sidepanel-container-box-shadow, map.get($sidepanel, box-shadow));
         }
     }
 }

package/splitter/_splitter-theme.scss

@@ -17,9 +17,8 @@
             cursor: row-resize;
         }
 
-        // todo
         &[disabled] {
-            background-color: kbq-css-variable(background-disabled, map.get($background, disabled));
+            background-color: kbq-css-variable(background-background-disabled, map.get($background, disabled));
 
             cursor: default;
         }

package/tabs/_tabs-theme.scss

@@ -10,10 +10,10 @@
     $base: tabs-tab-item-#{$type}-#{$sub-type}-#{$style-name};
 
     background: kbq-css-variable(#{$base}-background, map.get($style, background));
-    color: kbq-css-variable(#{$base}-text, map.get($style, text));
+    color: kbq-css-variable(#{$base}-text-color, map.get($style, text));
 
     & .kbq-icon {
-        color: kbq-css-variable(#{$base}-icon, map.get($style, icon));
+        color: kbq-css-variable(#{$base}-icon-color, map.get($style, icon));
     }
 }
 
@@ -34,7 +34,7 @@
 
     &.cdk-keyboard-focused {
         border-color: kbq-css-variable(
-            tabs-tab-item-#{$type}-#{$sub-type}-states-focused-border-color,
+            tabs-tab-item-#{$type}-#{$sub-type}-states-focused-focus-outline-color,
             map.get($component, $type, $sub-type, states-focused, border-color)
         );
     }
@@ -76,6 +76,7 @@
                     );
                 }
 
+                // FIXME: need check, tab-group has different subtype
                 & .kbq-tab-label {
                     @include kbq-tab-item-style($tab-item, filled, on-background);
                 }

package/tags/_tag-theme.scss

@@ -26,19 +26,21 @@
 
     &:hover,
     &.kbq-hovered {
-        @include kbq-tag-state($component, $type, hover);
+        @include kbq-tag-state($component, $type, states-hover);
     }
 
     &.kbq-focused {
-        @include kbq-tag-state($component, $type, focus);
+        @include kbq-tag-state($component, $type, states-focus);
 
         box-shadow:
-            inset 0 0 0.1px 1px kbq-css-variable(tag-#{$type}-focus-outline, map.get($component, $type, focus, outline)),
-            0 0 0.1px 1px kbq-css-variable(tag-#{$type}-focus-outline, map.get($component, $type, focus, outline));
+            inset 0 0 0.1px 1px
+                kbq-css-variable(tag-#{$type}-states-focus-outline, map.get($component, $type, focus, outline)),
+            0 0 0.1px 1px
+                kbq-css-variable(tag-#{$type}-states-focus-outline, map.get($component, $type, focus, outline));
     }
 
     &.kbq-disabled {
-        @include kbq-tag-state($component, $type, disabled);
+        @include kbq-tag-state($component, $type, states-disabled);
     }
 }
 

package/timepicker/timepicker.scss

@@ -4,6 +4,7 @@
 @use '../core/styles/common/tokens' as *;
 
 .kbq-timepicker {
+    // FIXME: default token doesn't exist
     padding-right: kbq-css-variable(timepicker-size-padding-right);
 }
 

package/timezone/_timezone-option-theme.scss

@@ -9,15 +9,15 @@
 
     .kbq-timezone-option__offset,
     .kbq-timezone-option__city {
-        color: kbq-css-variable(timezone-text, map.get($timezone, text));
+        color: kbq-css-variable(timezone-option-text, map.get($timezone, text));
     }
 
     .kbq-timezone-option__cities {
-        color: kbq-css-variable(timezone-caption, map.get($timezone, caption));
+        color: kbq-css-variable(timezone-option-caption, map.get($timezone, caption));
     }
 
     .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
-        color: kbq-css-variable(timezone-optgroup-label, map.get($timezone, optgroup-label));
+        color: kbq-css-variable(timezone-option-optgroup-label, map.get($timezone, optgroup-label));
     }
 }
 

package/toast/_toast-theme.scss

@@ -33,7 +33,7 @@
         }
 
         &.kbq-toast_warning {
-            @include kbq-toast($toast, success);
+            @include kbq-toast($toast, warning);
         }
 
         &.kbq-toast_error {

package/toast/toast.component.scss

@@ -26,7 +26,7 @@ $tokens: meta.module-variables(tokens) !default;
     height: kbq-css-variable(toast-size-icon-height);
     max-height: kbq-css-variable(toast-size-icon-height);
 
-    border-radius: kbq-css-variable(toast-size-border-radius);
+    border-radius: kbq-css-variable(toast-size-container-border-radius);
 
     margin-right: kbq-css-variable(toast-size-icon-margin-right);
 
@@ -84,6 +84,17 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-toast__close-button {
-    margin-top: kbq-css-variable(toast-size-close-button-margin-top);
+    margin-top: kbq-difference-series-css-variables(
+        [toast-size-content-padding-top,
+        calc(
+                kbq-difference-series-css-variables(
+                        [kbq-sum-series-css-variables(
+                            [calc(kbq-css-variable(icon-button-size-small-vertical-padding) * 2),
+                            16px]
+                        ),
+                        toast-font-title-line-height]
+                    ) / 2
+            )]
+    );
     margin-right: kbq-css-variable(toast-size-close-button-margin-right);
 }

package/toggle/_toggle-theme.scss

@@ -84,7 +84,7 @@
         }
 
         &.kbq-disabled {
-            color: map.get($foreground, text-disabled);
+            color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
         }
     }
 }

package/tooltip/_tooltip-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
+// FIXME: @use properties are used, which are most likely not applied. Need to check
 @use '../core/pop-up/pop-up' as *;
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
@@ -36,10 +37,22 @@
     .kbq-tooltip.kbq-contrast-fade {
         @include kbq-tooltip-color($tooltip, contrast-fade-on);
     }
+
+    .kbq-tooltip.kbq-warning {
+        @include kbq-tooltip-color($tooltip, warning-fade-off);
+    }
+
+    .kbq-tooltip.kbq-error {
+        @include kbq-tooltip-color($tooltip, error-fade-off);
+    }
 }
 
 @mixin kbq-tooltip-typography($config) {
     .kbq-tooltip {
         @include kbq-typography-css-variables(tooltip, default);
+
+        .kbq-tooltip__header {
+            @include kbq-typography-css-variables(tooltip, title);
+        }
     }
 }

package/tooltip/tooltip.component.d.ts

@@ -1,7 +1,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, OverlayConfig, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
-import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, TemplateRef, Type, ViewContainerRef } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, Injector, NgZone, OnDestroy, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { KbqComponentColors, KbqPopUp, KbqPopUpTrigger, PopUpPlacements } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare enum TooltipModifier {
@@ -19,9 +19,11 @@ export declare const KBQ_TOOLTIP_OPEN_TIME_PROVIDER: {
 };
 export declare const MIN_TIME_FOR_DELAY = 2000;
 export declare class KbqTooltipComponent extends KbqPopUp {
+    private injector;
     private openTime;
     prefix: string;
-    constructor(changeDetectorRef: ChangeDetectorRef, openTime: any);
+    elementRef: ElementRef;
+    constructor(changeDetectorRef: ChangeDetectorRef, injector: Injector, openTime: any);
     show(delay: number): void;
     updateClassMap(placement: string, customClass: string, { modifier }: {
         modifier: any;
@@ -57,9 +59,14 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     protected _trigger: string;
     get customClass(): string;
     set customClass(value: string);
+    get context(): any;
+    set context(ctx: any);
+    private _context;
     get color(): string;
     set color(value: KbqComponentColors | string);
     private _color;
+    arrow: boolean;
+    offset: number | null;
     placementChange: EventEmitter<any>;
     visibleChange: EventEmitter<boolean>;
     private get hasClickInTrigger();
@@ -74,7 +81,9 @@ 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; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, false, never>;
+    static ngAcceptInputType_arrow: unknown;
+    static ngAcceptInputType_offset: unknown;
 }
 export declare class KbqWarningTooltipTrigger extends KbqTooltipTrigger {
     get content(): string | TemplateRef<any>;

package/tooltip/tooltip.scss

@@ -6,6 +6,7 @@
 @use '../core/styles/common/tokens' as *;
 
 $trigger-margin: 8px;
+$trigger-margin_without-arrow: 4px;
 
 .kbq-tooltip__inner {
     border-radius: kbq-css-variable(tooltip-size-border-radius);
@@ -26,6 +27,10 @@ $trigger-margin: 8px;
     .kbq-tooltip__inner {
         padding: kbq-css-variable(tooltip-size-padding-vertical) kbq-css-variable(tooltip-size-padding-horizontal);
     }
+
+    &.kbq-tooltip_arrowless {
+        @include pop-up.popup-margins(kbq-tooltip, $trigger-margin_without-arrow);
+    }
 }
 
 .kbq-tooltip__arrow {

package/tree/_tree-theme.scss

@@ -11,19 +11,19 @@
     background: kbq-css-variable(tree-#{$state-name}-container-background, map.get($state, container-background));
 
     .kbq-option-text {
-        color: kbq-css-variable(tree-#{$state-name}-text, map.get($state, text));
+        color: kbq-css-variable(tree-#{$state-name}-text-color, map.get($state, text));
     }
 
     .kbq-tree-node-toggle .kbq-icon {
-        color: kbq-css-variable(tree-#{$state-name}-tree-toggle, map.get($state, tree-toggle));
+        color: kbq-css-variable(tree-#{$state-name}-tree-toggle-color, map.get($state, tree-toggle));
     }
 
     .kbq-option-action .kbq-icon {
-        color: kbq-css-variable(tree-#{$state-name}-action-button, map.get($state, action-button));
+        color: kbq-css-variable(tree-#{$state-name}-action-button-color, map.get($state, action-button));
     }
 
     .kbq-option-caption {
-        color: kbq-css-variable(tree-#{$state-name}-caption, map.get($state, caption));
+        color: kbq-css-variable(tree-#{$state-name}-caption-color, map.get($state, caption));
     }
 }
 
@@ -44,7 +44,7 @@
         &.kbq-focused,
         &.kbq-active {
             border-color: kbq-css-variable(
-                tree-states-focused-focus-outline,
+                tree-states-focused-focus-outline-color,
                 map.get($tree-item, states-focused, focus-outline)
             );
         }

package/tree/toggle.scss

@@ -10,7 +10,7 @@
     flex-shrink: 0;
 
     height: 100%;
-
+    // FIXME: default token doesn't exist
     padding-left: kbq-css-variable(tree-size-toggle-padding);
     padding-right: kbq-css-variable(tree-size-toggle-padding);
 

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

@@ -31,8 +31,8 @@
     }
 
     .kbq-tree-select__panel {
-        box-shadow: kbq-css-variable(select-panel-shadow, map.get($select-panel, shadow));
-        background: kbq-css-variable(select-panel-background, map.get($select-panel, background));
+        box-shadow: kbq-css-variable(select-panel-dropdown-shadow, map.get($select-panel, shadow));
+        background: kbq-css-variable(select-panel-dropdown-background, map.get($select-panel, background));
 
         & .kbq-select__footer {
             border-color: kbq-css-variable(divider-color, map.get($divider, color));

package/card/_card-theme.scss

@@ -1,62 +0,0 @@
-@use 'sass:map';
-
-@use '../core/styles/common/tokens' as *;
-
-@mixin kbq-card-style($component, $style-name) {
-    $style: map.get($component, $style-name);
-
-    box-shadow:
-        inset -1px 0 0 0 kbq-css-variable(card-#{$style-name}-shadow, map.get($style, shadow)),
-        inset 0 1px 0 0 kbq-css-variable(card-#{$style-name}-shadow, map.get($style, shadow)),
-        inset 0 -1px 0 0 kbq-css-variable(card-#{$style-name}-shadow, map.get($style, shadow));
-
-    background-color: kbq-css-variable(card-#{$style-name}-background, map.get($style, background));
-
-    border-left-color: kbq-css-variable(card-#{$style-name}-vertical-line, map.get($style, vertical-line));
-}
-
-@mixin kbq-card-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
-    $card: map.get(map.get($theme, components), card);
-    $popup: map.get(map.get($theme, components), popup);
-
-    .kbq-card {
-        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
-
-        &.kbq-card_error {
-            @include kbq-card-style($card, error);
-        }
-
-        &.kbq-card_warning {
-            @include kbq-card-style($card, warning);
-        }
-
-        &.kbq-card_success {
-            @include kbq-card-style($card, success);
-        }
-
-        &.kbq-card_info {
-            @include kbq-card-style($card, info);
-        }
-
-        &.kbq-card_white {
-            background-color: kbq-css-variable(popup-background, map.get($popup, background));
-        }
-
-        &.kbq-selected {
-            background-color: kbq-css-variable(states-selected-color, map.get($theme, states, selected-color));
-        }
-
-        &:not(.kbq-card_readonly):hover {
-            .kbq-card__overlay {
-                background: kbq-css-variable(background-overlay-hover, map.get($background, overlay-hover));
-            }
-        }
-
-        &.cdk-keyboard-focused {
-            box-shadow: 0 0 0.1px 2px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
-        }
-    }
-}

package/card/card.component.d.ts

@@ -1,28 +0,0 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { ElementRef, EventEmitter, OnDestroy } from '@angular/core';
-import { CanColorCtor } from '@koobiq/components/core';
-import * as i0 from "@angular/core";
-/** @docs-private */
-export declare class KbqCardBase {
-    elementRef: ElementRef;
-    constructor(elementRef: ElementRef);
-}
-/** @docs-private */
-export declare const KbqCardBaseMixin: CanColorCtor & typeof KbqCardBase;
-export declare class KbqCard extends KbqCardBaseMixin implements OnDestroy {
-    private _focusMonitor;
-    readonly: boolean;
-    selected: boolean;
-    selectedChange: EventEmitter<boolean>;
-    get tabIndex(): number | null;
-    set tabIndex(value: number | null);
-    private _tabIndex;
-    constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor);
-    ngOnDestroy(): void;
-    focus(): void;
-    onClick($event: MouseEvent): void;
-    onKeyDown($event: KeyboardEvent): void;
-    private get hostElement();
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCard, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCard, "kbq-card", never, { "color": { "alias": "color"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "selectedChange": "selectedChange"; }, never, ["*"], false, never>;
-}