@koobiq/components 16.0.0-beta.9 → 17.0.0-beta.2

package/core/locales/ru-RU.d.ts

@@ -1,29 +1,31 @@
 export declare const ruRULocaleData: {
-    'ru-RU': {
-        select: {
-            hiddenItemsText: string;
-        };
-        datepicker: {
-            placeholder: string;
-            dateInput: string;
+    select: {
+        hiddenItemsText: string;
+    };
+    datepicker: {
+        placeholder: string;
+        dateInput: string;
+    };
+    timepicker: {
+        placeholder: {
+            full: string;
+            short: string;
         };
-        formatters: {
-            number: {
-                rounding: {
-                    separator: string;
-                    groupSeparator: string;
-                    thousand: string;
-                    million: string;
-                    billion: string;
-                    trillion: string;
-                };
-            };
+    };
+    fileUpload: {
+        single: {
+            captionText: string;
+            browseLink: string;
         };
-        input: {
-            number: {
-                groupSeparator: string[];
-                fractionSeparator: string;
-                startFormattingFrom: number;
+        multiple: {
+            captionText: string;
+            captionTextWhenSelected: string;
+            captionTextForCompactSize: string;
+            browseLink: string;
+            title: string;
+            gridHeaders: {
+                file: string;
+                size: string;
             };
         };
     };

package/core/locales/zh-CN.d.ts

@@ -1,32 +1,30 @@
-export declare const znCNLocaleData: {
-    'zh-CN': {
-        select: {
-            hiddenItemsText: string;
-        };
-        datepicker: {
-            placeholder: string;
-        };
-        timepicker: {
-            placeholder: {
-                full: string;
-                short: string;
-            };
+export declare const zhCNLocaleData: {
+    select: {
+        hiddenItemsText: string;
+    };
+    datepicker: {
+        placeholder: string;
+    };
+    timepicker: {
+        placeholder: {
+            full: string;
+            short: string;
         };
-        formatters: {
-            number: {
-                rounding: {
-                    separator: string;
-                    groupSeparator: string;
-                    tenThousand: string;
-                    oneHundredMillions: string;
-                    trillion: string;
-                };
-            };
+    };
+    fileUpload: {
+        single: {
+            captionText: string;
+            browseLink: string;
         };
-        input: {
-            number: {
-                groupSeparator: string[];
-                fractionSeparator: string;
+        multiple: {
+            captionText: string;
+            captionTextWhenSelected: string;
+            captionTextForCompactSize: string;
+            browseLink: string;
+            title: string;
+            gridHeaders: {
+                file: string;
+                size: string;
             };
         };
     };

package/core/option/_option-action-theme.scss

@@ -30,7 +30,7 @@
             color: kbq-color($secondary, if($is-dark, 70, 30));
         }
 
-        &[disabled] {
+        &.kbq-disabled {
             & .kbq-icon {
                 color: kbq-color($secondary, if($is-dark, 30, 70));
             }

package/core/option/_option-theme.scss

@@ -11,9 +11,10 @@
         color: map.get($state, text);
     }
 
-    .kbq-icon {
-        color: map.get($state, icon);
-    }
+    // todo выглядит как баг
+    //.kbq-icon {
+    //    color: map.get($state, icon);
+    //}
 
     .kbq-option-action .kbq-icon {
         color: map.get($state, icon-button);
@@ -47,8 +48,7 @@
             }
         }
 
-        &.kbq-disabled,
-        &[disabled] {
+        &.kbq-disabled {
             @include kbq-option(map.get($list-item, disabled));
         }
     }

package/core/option/action.scss

@@ -21,7 +21,7 @@
 
     background: transparent;
 
-    &[disabled] {
+    &.kbq-disabled {
         cursor: default;
     }
 }

package/core/pop-up/pop-up.d.ts

@@ -21,6 +21,13 @@ export declare abstract class KbqPopUp implements OnDestroy {
     ngOnDestroy(): void;
     isTemplateRef(value: any): boolean;
     show(delay: number): void;
+    /**
+     * Hides the popup after a specified delay.
+     *
+     * The hide timeout triggers the hiding of the popup by updating visibility and emitting relevant events.
+     * Also, it marks for check to ensure proper change detection, especially for parent components with OnPush strategy.
+     * @param delay - The delay in milliseconds before hiding the popup.
+     */
     hide(delay: number): void;
     isVisible(): boolean;
     updateClassMap(placement: string, customClass: string, classMap?: any): void;

package/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -8,9 +8,12 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-pseudo-checkbox {
     position: relative;
-    display: inline-block;
+    display: inline-flex;
     box-sizing: border-box;
 
+    align-items: center;
+    justify-content: center;
+
     width: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
     height: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
 
@@ -28,14 +31,6 @@ $tokens: meta.module-variables(tokens) !default;
     & .kbq-checkbox-checkmark,
     & .kbq-checkbox-mixedmark {
         display: none;
-
-        position: absolute;
-        top: calc(
-            -1 * var(--kbq-checkbox-size-normal-border-width, #{map.get($tokens, checkbox-size-normal-border-width)})
-        );
-        left: calc(
-            -1 * var(--kbq-checkbox-size-normal-border-width, #{map.get($tokens, checkbox-size-normal-border-width)})
-        );
     }
 
     &.kbq-pseudo-checkbox-checked,
@@ -68,10 +63,4 @@ $tokens: meta.module-variables(tokens) !default;
         radius: var(--kbq-checkbox-size-big-border-radius, map.get($tokens, checkbox-size-big-border-radius));
         width: var(--kbq-checkbox-size-big-border-width, map.get($tokens, checkbox-size-big-border-width));
     }
-
-    & .kbq-checkbox-checkmark,
-    & .kbq-checkbox-mixedmark {
-        top: calc(-1 * var(--kbq-checkbox-size-big-border-width, #{map.get($tokens, checkbox-size-big-border-width)}));
-        left: calc(-1 * var(--kbq-checkbox-size-big-border-width, #{map.get($tokens, checkbox-size-big-border-width)}));
-    }
 }

package/core/styles/_koobiq-theme.scss

@@ -3,7 +3,7 @@
 @use 'theming/theming' as *;
 @use 'typography/typography' as *;
 
-@use 'theming/scrollbars-theme' as *;
+@use 'theming/scrollbar-theme' as *;
 
 @use '../selection/pseudo-checkbox/pseudo-checkbox-theme' as *;
 @use '../../alert/alert-theme' as *;
@@ -37,6 +37,7 @@
 @use '../../risk-level/risk-level-theme' as *;
 @use '../../select/select-theme' as *;
 @use '../../sidepanel/sidepanel-theme' as *;
+@use '../../scrollbar/scrollbar-component-theme' as *;
 @use '../../splitter/splitter-theme' as *;
 @use '../../tabs/tabs-theme' as *;
 @use '../../tags/tag-theme' as *;
@@ -95,6 +96,7 @@
     @include kbq-radio-theme($theme);
     @include kbq-risk-level-theme($theme);
     @include kbq-scrollbar-theme($theme);
+    @include kbq-scrollbar-component-theme($theme);
     @include kbq-select-theme($theme);
     @include kbq-sidepanel-theme($theme);
     @include kbq-splitter-theme($theme);

package/core/styles/_variables.scss

@@ -1,10 +1 @@
-$z-index-modal-mask: 1000;
-$z-index-modal: 1000;
-$z-index-notification: 1010;
-$z-index-message: 1010;
-$z-index-popover: 1030;
-$z-index-picker: 1050;
-$z-index-dropdown: 1050;
-$z-index-tooltip: 1060;
-$z-index-toast: 1070;
-$z-index-loader-overlay: 1000;
+$z-index-loader-overlay: 10;

package/core/styles/common/_overlay.scss

@@ -41,6 +41,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
             // include overlays that have been detached, rather than disposed.
             display: none;
         }
+
+        &.cdk-overlay-container_dropdown {
+            z-index: calc($overlay-container-z-index - 1);
+        }
     }
 
     // We use an extra wrapper element in order to use make the overlay itself a flex item.

package/core/styles/common/_select.scss

@@ -50,7 +50,8 @@ $tokens: meta.module-variables(tokens) !default;
         );
     }
 
-    .kbq-select__trigger.kbq-select__trigger_single {
+    .kbq-select__trigger.kbq-select__trigger_single,
+    .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty {
         & .kbq-select__matcher {
             $padding-vertical: map.get($tokens, select-size-single-padding-vertical);
 

package/core/styles/theming/_components-theming.scss

@@ -28,6 +28,12 @@
     $badge: (
         filled: (
             fade-off: (
+                theme: (
+                    color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-theme-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-theme-background'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-theme-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-theme-icon')
+                ),
                 success: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-background'),
@@ -315,6 +321,11 @@
                 text: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-active-text'),
                 icon: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-active-icon')
             ),
+            selected-disabled: (
+                background: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-disabled-background'),
+                text: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-disabled-text'),
+                icon: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-disabled-icon')
+            ),
             disabled: (
                 background: map-get($tokens, 'button-toggle-#{$scheme}-item-states-disabled-background'),
                 text: map-get($tokens, 'button-toggle-#{$scheme}-item-states-disabled-text'),
@@ -352,6 +363,7 @@
             default: (
                 border: map-get($tokens, 'checkbox-#{$scheme}-theme-default-border'),
                 color: map-get($tokens, 'checkbox-#{$scheme}-theme-default-color'),
+                text: map-get($tokens, 'checkbox-#{$scheme}-theme-default-text'),
                 background: map-get($tokens, 'checkbox-#{$scheme}-theme-default-background'),
                 caption: map-get($tokens, 'checkbox-#{$scheme}-theme-default-caption')
             ),
@@ -380,6 +392,7 @@
             disabled: (
                 border: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-border'),
                 color: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-color'),
+                text: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-text'),
                 background: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-background'),
                 caption: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-caption')
             )
@@ -388,6 +401,7 @@
             default: (
                 border: map-get($tokens, 'checkbox-#{$scheme}-error-default-border'),
                 color: map-get($tokens, 'checkbox-#{$scheme}-error-default-color'),
+                text: map-get($tokens, 'checkbox-#{$scheme}-error-default-text'),
                 background: map-get($tokens, 'checkbox-#{$scheme}-error-default-background'),
             ),
 
@@ -416,22 +430,54 @@
             disabled: (
                 border: map-get($tokens, 'checkbox-#{$scheme}-error-states-disabled-border'),
                 color: map-get($tokens, 'checkbox-#{$scheme}-error-states-disabled-color'),
+                text: map-get($tokens, 'checkbox-#{$scheme}-error-states-disabled-text'),
                 background: map-get($tokens, 'checkbox-#{$scheme}-error-states-disabled-background')
             )
         )
     );
 
     $code-block: (
-        main-background: map-get($tokens, 'code-block-#{$scheme}-background'),
-        actionbar-background: map-get($tokens, 'code-block-#{$scheme}-actionbar-background'),
-        border: map-get($tokens, 'code-block-#{$scheme}-border'),
-        main-background-less-contrast: map-get($tokens, 'code-block-#{$scheme}-decoration-less-contrast-background'),
-        line-numbers-color: map-get($tokens, 'code-block-#{$scheme}-line-numbers-color'),
-        main-code-color: map-get($tokens, 'code-block-#{$scheme}-color'),
-
-        actionbar: (
-            bg: map-get($tokens, 'code-block-#{$scheme}-actionbar-background'),
-            bg-less-contrast: map-get($tokens, 'code-block-#{$scheme}-decoration-less-contrast-actionbar-background'),
+        filled: (
+            container: (
+                background: map-get($tokens, 'code-block-#{$scheme}-filled-container-background'),
+                border: map-get($tokens, 'code-block-#{$scheme}-filled-container-border-color'),
+            ),
+            header: (
+                background: map-get($tokens, 'code-block-#{$scheme}-filled-header-background'),
+                shadow: map-get($tokens, 'code-block-#{$scheme}-filled-header-shadow')
+            ),
+            actionbar: (
+                fade-gradient: map-get($tokens, 'code-block-#{$scheme}-filled-actionbar-fade-gradient'),
+                background: map-get($tokens, 'code-block-#{$scheme}-filled-actionbar-background')
+            ),
+            collapse: (
+                expanded-background: map-get($tokens, 'code-block-#{$scheme}-filled-collapse-expanded-background'),
+                collapsed-background: map-get($tokens, 'code-block-#{$scheme}-filled-collapse-collapsed-background'),
+                button-expand-background: map-get(
+                    $tokens, 'code-block-#{$scheme}-filled-collapse-button-expand-background'
+                )
+            )
+        ),
+        outline: (
+            container: (
+                background: map-get($tokens, 'code-block-#{$scheme}-outline-container-background'),
+                border: map-get($tokens, 'code-block-#{$scheme}-outline-container-border-color'),
+            ),
+            header: (
+                background: map-get($tokens, 'code-block-#{$scheme}-outline-header-background'),
+                shadow: map-get($tokens, 'code-block-#{$scheme}-outline-header-shadow')
+            ),
+            actionbar: (
+                fade-gradient: map-get($tokens, 'code-block-#{$scheme}-outline-actionbar-fade-gradient'),
+                background: map-get($tokens, 'code-block-#{$scheme}-outline-actionbar-background')
+            ),
+            collapse: (
+                expanded-background: map-get($tokens, 'code-block-#{$scheme}-outline-collapse-expanded-background'),
+                collapsed-background: map-get($tokens, 'code-block-#{$scheme}-outline-collapse-collapsed-background'),
+                button-expand-background: map-get(
+                    $tokens, 'code-block-#{$scheme}-outline-collapse-button-expand-background'
+                )
+            )
         ),
 
         hljs: (
@@ -465,6 +511,7 @@
             function-color: map-get($tokens, 'code-block-#{$scheme}-hljs-function-color'),
             keyword-background: map-get($tokens, 'code-block-#{$scheme}-hljs-keyword-background'),
             keyword-color: map-get($tokens, 'code-block-#{$scheme}-hljs-keyword-color'),
+            line-numbers-color: map-get($tokens, 'code-block-#{$scheme}-hljs-line-numbers-color'),
             link-background: map-get($tokens, 'code-block-#{$scheme}-hljs-link-background'),
             link-color: map-get($tokens, 'code-block-#{$scheme}-hljs-link-color'),
             literal-background: map-get($tokens, 'code-block-#{$scheme}-hljs-literal-background'),
@@ -622,7 +669,7 @@
             border: map-get($tokens, 'form-field-#{$scheme}-states-disabled-border-color'),
             background: map-get($tokens, 'form-field-#{$scheme}-states-disabled-background'),
             placeholder: map-get($tokens, 'form-field-#{$scheme}-states-disabled-placeholder'),
-            text: map-get($tokens, 'form-field-#{$scheme}-states--disabled-text')
+            text: map-get($tokens, 'form-field-#{$scheme}-states-disabled-text')
         )
     );
 
@@ -630,17 +677,6 @@
         text: map-get($tokens, 'form-field-hint-#{$scheme}-text')
     );
 
-    $form-field-password-hint: (
-        text-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-text-color'),
-        icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-text-color'),
-
-        state-invalid-text-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-invalid-text-color'),
-        state-invalid-icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-invalid-icon-color'),
-
-        state-valid-text-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-valid-text-color'),
-        state-valid-icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-valid-icon-color')
-    );
-
     $hint: (
         fill-text-on: (
             fade-contrast: (
@@ -985,19 +1021,40 @@
 
     $navbar: (
         background: map-get($tokens, 'navbar-#{$scheme}-background'),
+        border: map-get($tokens, 'navbar-#{$scheme}-border'),
 
-        divider-background: map-get($tokens, 'navbar-#{$scheme}-divider-background')
-    );
-
-    $navbar-item: (
-        color: map-get($tokens, 'navbar-item-#{$scheme}-text'),
-        icon-color: map-get($tokens, 'navbar-item-#{$scheme}-icon'),
-
-        state-active: map-get($tokens, 'navbar-item-#{$scheme}-states-active'),
-        state-selected: map-get($tokens, 'navbar-item-#{$scheme}-states-selected'),
-        state-hover: map-get($tokens, 'navbar-item-#{$scheme}-states-hover'),
-        state-progress: map-get($tokens, 'navbar-item-#{$scheme}-states-progress'),
-        state-disabled-opacity: map-get($tokens, 'navbar-item-#{$scheme}-states-disabled-opacity'),
+        item: (
+            default: (
+                background: map-get($tokens, 'navbar-item-#{$scheme}-default-content-background'),
+                text: map-get($tokens, 'navbar-item-#{$scheme}-default-content-text'),
+                icon-left: map-get($tokens, 'navbar-item-#{$scheme}-default-content-icon-left'),
+                icon-right: map-get($tokens, 'navbar-item-#{$scheme}-default-content-icon-right')
+            ),
+            hover: (
+                background: map-get($tokens, 'navbar-item-#{$scheme}-states-hover-content-background'),
+                text: map-get($tokens, 'navbar-item-#{$scheme}-states-hover-content-text'),
+                icon-left: map-get($tokens, 'navbar-item-#{$scheme}-states-hover-content-icon-left'),
+                icon-right: map-get($tokens, 'navbar-item-#{$scheme}-states-hover-content-icon-right')
+            ),
+            selected: (
+                background: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-content-background'),
+                text: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-content-text'),
+                icon-left: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-content-icon-left'),
+                icon-right: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-content-icon-right')
+            ),
+            selected-hover: (
+                background: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-background'),
+                text: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-text'),
+                icon-left: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-icon-left'),
+                icon-right: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-icon-right')
+            ),
+            disabled: (
+                background: map-get($tokens, 'navbar-item-#{$scheme}-states-disabled-content-background'),
+                text: map-get($tokens, 'navbar-item-#{$scheme}-states-disabled-content-text'),
+                icon-left: map-get($tokens, 'navbar-item-#{$scheme}-states-disabled-content-icon-left'),
+                icon-right: map-get($tokens, 'navbar-item-#{$scheme}-states-disabled-content-icon-right')
+            )
+        )
     );
 
     $popover: (
@@ -1673,7 +1730,8 @@
 
     $timezone: (
         text: map-get($tokens, 'timezone-option-#{$scheme}-text'),
-        caption: map-get($tokens, 'timezone-option-#{$scheme}-caption')
+        caption: map-get($tokens, 'timezone-option-#{$scheme}-caption'),
+        optgroup-label: map-get($tokens, 'timezone-option-#{$scheme}-optgroup-label')
     );
 
     $toast: (
@@ -1759,7 +1817,12 @@
         default: map-get($tokens, 'scrollbar-#{$scheme}-thumb-default-background'),
         hover: map-get($tokens, 'scrollbar-#{$scheme}-thumb-hover-background'),
         active: map-get($tokens, 'scrollbar-#{$scheme}-thumb-active-background'),
-        disabled: map-get($tokens, 'scrollbar-#{$scheme}-thumb-disabled-background')
+        disabled: map-get($tokens, 'scrollbar-#{$scheme}-thumb-disabled-background'),
+        track: (
+            default: map-get($tokens, 'scrollbar-#{$scheme}-track-default-background'),
+            hover: map-get($tokens, 'scrollbar-#{$scheme}-track-hover-background'),
+            active: map-get($tokens, 'scrollbar-#{$scheme}-track-active-background'),
+        )
     );
 
     @return (
@@ -1778,7 +1841,6 @@
         file-upload: $file-upload,
         form-field: $form-field,
         form-field-hint: $form-field-hint,
-        form-field-password-hint: $form-field-password-hint,
         hint: $hint,
         forms: $forms,
         icon: $icon,
@@ -1790,7 +1852,6 @@
         modal: $modal,
         markdown: $markdown,
         navbar: $navbar,
-        navbar-item: $navbar-item,
         popover: $popover,
         progress-bar: $progress-bar,
         progress-spinner: $progress-spinner,

package/core/styles/theming/{_scrollbars-theme.scss → _scrollbar-theme.scss}

@@ -6,20 +6,30 @@
 
 @mixin kbq-scrollbar($tokens) {
     $border-width: calc(
-        (var(--kbq-scrollbar-size-track-width, map.get($tokens, scrollbar-size-track-width)) -
+        (var(--kbq-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension)) -
         var(--kbq-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width))) / 2
     );
 
     //firefox
-    scrollbar-width: auto;
+    @supports not selector(::-webkit-scrollbar) {
+        scrollbar-width: thin;
+    }
 
     // webkit
     &::-webkit-scrollbar,
     ::-webkit-scrollbar {
         cursor: default;
-        width: var(--kbq-scrollbar-size-track-width, map.get($tokens, scrollbar-size-track-width));
+
+        &:vertical {
+            width: var(--kbq-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension));
+        }
+
+        &:horizontal {
+            height: var(--kbq-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension));
+        }
     }
 
+    /* stylelint-disable no-descending-specificity */
     &::-webkit-scrollbar-thumb,
     ::-webkit-scrollbar-thumb {
         width: var(--kbq-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width));
@@ -30,6 +40,15 @@
             --kbq-scrollbar-size-thumb-inset-border-radius,
             map.get($tokens, scrollbar-size-thumb-border-radius)
         );
+
+        // these props are used to set the user-friendly thumb for long content.
+        &:vertical {
+            min-height: var(--kbq-scrollbar-size-thumb-min-size, map.get($tokens, scrollbar-size-thumb-min-size));
+        }
+
+        &:horizontal {
+            min-width: var(--kbq-scrollbar-size-thumb-min-size, map.get($tokens, scrollbar-size-thumb-min-size));
+        }
     }
 
     &::-webkit-scrollbar-button,
@@ -46,7 +65,9 @@
         @include kbq-scrollbar(map.get($theme, tokens));
 
         // firefox
-        scrollbar-color: map.get($scrollbar, default) transparent;
+        @supports not selector(::-webkit-scrollbar) {
+            scrollbar-color: map.get($scrollbar, default) transparent;
+        }
 
         // webkit
         &::-webkit-scrollbar,

package/core/styles/theming/_theming.scss

@@ -84,6 +84,7 @@
     @return (
         bg: map.get($tokens, '#{$scheme}-background-bg'),
         bg-secondary: map.get($tokens, '#{$scheme}-background-bg-secondary'),
+        bg-tertiary: map.get($tokens, '#{$scheme}-background-bg-tertiary'),
         card: map.get($tokens, '#{$scheme}-background-card'),
         contrast: map.get($tokens, '#{$scheme}-background-contrast'),
         contrast-fade: map.get($tokens, '#{$scheme}-background-contrast-fade'),

package/core/styles/typography/_typography.scss

@@ -70,7 +70,10 @@
         italic-normal:           map.get($typography, italic-normal),
         italic-normal-strong:    map.get($typography, italic-normal-strong),
         italic-compact:          map.get($typography, italic-compact),
-        italic-compact-strong:   map.get($typography, italic-compact-strong)
+        italic-compact-strong:   map.get($typography, italic-compact-strong),
+        mono-codeblock:          map.get($typography, mono-codeblock),
+
+        navbar-title:          map.get($typography, navbar-title)
     );
 
     @each $key, $level in $config {
@@ -197,6 +200,10 @@
         @include kbq-typography-level-to-styles($config, extra-small-text);
     }
 
+    .kbq-extra-small-text-strong {
+        @include kbq-typography-level-to-styles($config, extra-small-text-strong);
+    }
+
     // new
     .kbq-display-big {
         @include kbq-typography-level-to-styles($config, display-big);

package/core/utils/data-size/data-size.pipe.d.ts

@@ -4,7 +4,7 @@ import * as i0 from "@angular/core";
 export declare class KbqDataSizePipe implements PipeTransform {
     transform(source: number, precision?: number, measurementSystem?: MeasurementSystem): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDataSizePipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<KbqDataSizePipe, "mcDataSize", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<KbqDataSizePipe, "kbqDataSize", false>;
 }
 export declare class KbqDataSizeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDataSizeModule, never>;

package/dropdown/_dropdown-theme.scss

@@ -45,8 +45,7 @@
             }
         }
 
-        &.kbq-disabled,
-        &[disabled] {
+        &.kbq-disabled {
             @include kbq-dropdown-item-state(map.get($dropdown-item, disabled));
         }
     }

package/ellipsis-center/ellipsis-center.directive.d.ts

@@ -6,10 +6,10 @@ import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnInit, AfterViewInit, OnDestroy {
     private renderer;
-    set mcEllipsisCenter(value: string);
+    set kbqEllipsisCenter(value: string);
     minVisibleLength: number;
     readonly resizeStream: Subject<Event>;
-    private _mcEllipsisCenter;
+    private _kbqEllipsisCenter;
     private resizeSubscription;
     private readonly debounceInterval;
     constructor(overlay: Overlay, elementRef: ElementRef<HTMLElement>, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, renderer: Renderer2);
@@ -18,7 +18,7 @@ export declare class KbqEllipsisCenterDirective extends KbqTooltipTrigger implem
     ngOnDestroy(): void;
     private refresh;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqEllipsisCenterDirective, [null, null, null, null, null, null, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEllipsisCenterDirective, "[mcEllipsisCenter]", never, { "mcEllipsisCenter": { "alias": "mcEllipsisCenter"; "required": false; }; "minVisibleLength": { "alias": "minVisibleLength"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEllipsisCenterDirective, "[kbqEllipsisCenter]", never, { "kbqEllipsisCenter": { "alias": "kbqEllipsisCenter"; "required": false; }; "minVisibleLength": { "alias": "minVisibleLength"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class KbqEllipsisCenterModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqEllipsisCenterModule, never>;