@koobiq/components 17.0.2 → 17.1.0

package/badge/badge.component.scss

@@ -8,7 +8,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    height: var(--kbq-badge-size-normal-height, map.get($tokens, badge-size-normal-height));
+    height: kbq-css-variable(badge-size-normal-height);
     text-align: center;
     white-space: nowrap;
 
@@ -37,7 +37,7 @@
     }
 
     &.kbq-badge_compact {
-        height: var(--kbq-badge-size-compact-height, map.get($tokens, badge-size-compact-height));
+        height: kbq-css-variable(badge-size-compact-height);
 
         padding-right: kbq-css-variable(badge-size-compact-horizontal-padding);
         padding-left: kbq-css-variable(badge-size-compact-horizontal-padding);

package/button/button.scss

@@ -12,12 +12,8 @@ $tokens: meta.module-variables(tokens) !default;
     @extend %kbq-button-base;
 
     // base padding + compensation (4px) - border-width (2px)
-    padding-left: calc(
-        var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) + 4px
-    );
-    padding-right: calc(
-        var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) + 4px
-    );
+    padding-left: kbq-sum-series-css-variables([button-size-horizontal-padding, 4px]);
+    padding-right: kbq-sum-series-css-variables([button-size-horizontal-padding, 4px]);
 
     &.kbq-button-icon_left {
         padding-left: kbq-css-variable(button-size-horizontal-padding);

package/button-toggle/button-toggle.scss

@@ -29,18 +29,20 @@ $tokens: meta.module-variables(tokens) !default;
 
         height: kbq-css-variable(button-toggle-size-item-height);
 
-        $padding-vertical: map.get($tokens, button-toggle-size-item-padding-vertical);
-        $padding-horizontal: map.get($tokens, button-toggle-size-item-padding-horizontal);
-        $outline-width: map.get($tokens, button-toggle-size-item-focus-outline-width);
-
         border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
 
         > .kbq-button,
         > .kbq-button-icon {
             border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
 
-            padding: calc(var(--kbq-button-toggle-size-item-padding-vertical, $padding-vertical) - $outline-width)
-                calc(var(--kbq-button-toggle-size-item-padding-horizontal, $padding-horizontal) - $outline-width);
+            padding: kbq-difference-series-css-variables(
+                    [ button-toggle-size-item-padding-vertical,
+                    button-toggle-size-item-focus-outline-width]
+                )
+                kbq-difference-series-css-variables(
+                    [ button-toggle-size-item-padding-horizontal,
+                    button-toggle-size-item-focus-outline-width]
+                );
 
             & .kbq-button-wrapper {
                 width: 100%;

package/checkbox/checkbox.scss

@@ -47,12 +47,9 @@ $tokens: meta.module-variables(tokens) !default;
 
     padding-bottom: kbq-css-variable(checkbox-size-normal-paddding-bottom);
 
-    padding-left: calc(
-        var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
-            var(
-                --kbq-checkbox-size-normal-horizontal-content-padding,
-                map.get($tokens, checkbox-size-normal-horizontal-content-padding)
-            )
+    padding-left: kbq-sum-series-css-variables(
+        [checkbox-size-normal-width,
+        checkbox-size-normal-horizontal-content-padding]
     );
 
     vertical-align: top;
@@ -110,12 +107,9 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-checkbox.kbq-checkbox_big {
     & .kbq-checkbox__layout {
-        padding-left: calc(
-            var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
-                var(
-                    --kbq-checkbox-size-normal-horizontal-content-padding,
-                    map.get($tokens, checkbox-size-normal-horizontal-content-padding)
-                )
+        padding-left: kbq-sum-series-css-variables(
+            [ checkbox-size-normal-width,
+            checkbox-size-normal-horizontal-content-padding]
         );
     }
 
@@ -154,12 +148,9 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-checkbox_label-before {
     .kbq-checkbox__layout {
         padding-left: 0;
-        padding-right: calc(
-            var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
-                var(
-                    --kbq-checkbox-size-normal-horizontal-content-padding,
-                    map.get($tokens, checkbox-size-normal-horizontal-content-padding)
-                )
+        padding-right: kbq-sum-series-css-variables(
+            [ checkbox-size-normal-width,
+            checkbox-size-normal-horizontal-content-padding]
         );
     }
 

package/code-block/_code-block-theme.scss

@@ -28,6 +28,12 @@
 
     & .kbq-code-block-actionbar {
         background: kbq-css-variable(#{$base}-actionbar-background, map.get($style, actionbar, background));
+
+        &.kbq-actionbar-block_floating {
+            .kbq-actionbar-block__button-stack {
+                background: kbq-css-variable(#{$base}-actionbar-background, map.get($style, actionbar, background));
+            }
+        }
     }
 
     &.kbq-code-block_header-with-shadow {
@@ -38,8 +44,6 @@
 
     &.kbq-code-block_no-header {
         & .kbq-code-block__fade-gradient {
-            display: block;
-
             background: kbq-css-variable(#{$base}-actionbar-fade-gradient, map.get($style, actionbar, fade-gradient));
         }
     }
@@ -361,7 +365,7 @@
         .kbq-tab-group.kbq-focused {
             // paint focus border from the top since because of border constraints
             .kbq-tab-header {
-                box-shadow: 0 3px 0 -1px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
+                box-shadow: 0 2px 0 -1px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
             }
 
             .kbq-tab-body__wrapper {
@@ -371,19 +375,6 @@
             }
         }
     }
-
-    .kbq-code-block-actionbar {
-        .kbq-code-block-actionbar_less-contrast {
-            background-color: kbq-css-variable(
-                code-block-actionbar-bg-less-contrast,
-                map.get($code-block, actionbar, bg-less-contrast)
-            );
-        }
-
-        &.kbq-actionbar-block_floating {
-            background-color: kbq-css-variable(code-block-actionbar-bg, map.get($code-block, actionbar, bg));
-        }
-    }
 }
 
 @mixin kbq-code-block-typography($config) {

package/code-block/actionbar.component.d.ts

@@ -6,7 +6,6 @@ export declare class KbqActionBarComponent implements AfterViewInit {
     copyTooltip: KbqTooltipTrigger;
     config: KbqCodeBlockConfiguration;
     codeFiles: KbqCodeFile[];
-    lessContrast: boolean;
     selectedTabIndex: number;
     multiLine: boolean;
     softWrap: boolean;
@@ -19,5 +18,5 @@ export declare class KbqActionBarComponent implements AfterViewInit {
     ngAfterViewInit(): void;
     onCopy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqActionBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqActionBarComponent, "kbq-actionbar-block", never, { "config": { "alias": "config"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "lessContrast": { "alias": "lessContrast"; "required": false; }; "selectedTabIndex": { "alias": "selectedTabIndex"; "required": false; }; "multiLine": { "alias": "multiLine"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; }, { "toggleSoftWrap": "toggleSoftWrap"; "downloadCode": "downloadCode"; "copyCode": "copyCode"; "openExternalSystem": "openExternalSystem"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqActionBarComponent, "kbq-actionbar-block", never, { "config": { "alias": "config"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "selectedTabIndex": { "alias": "selectedTabIndex"; "required": false; }; "multiLine": { "alias": "multiLine"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; }, { "toggleSoftWrap": "toggleSoftWrap"; "downloadCode": "downloadCode"; "copyCode": "copyCode"; "openExternalSystem": "openExternalSystem"; }, never, never, false, never>;
 }

package/code-block/actionbar.component.scss

@@ -4,6 +4,8 @@
 @use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
+$actionbar-indents: kbq-css-variable(code-block-size-actionbar-padding-vertical)
+    kbq-css-variable(code-block-size-actionbar-padding-horizontal);
 
 .kbq-code-block-actionbar {
     display: flex;
@@ -12,25 +14,34 @@ $tokens: meta.module-variables(tokens) !default;
 
     position: absolute;
 
-    top: 0;
+    // position to top to the height of tab-header
+    top: -48px;
     right: 0;
 
-    margin: kbq-css-variable(code-block-size-actionbar-padding-vertical)
-        kbq-css-variable(code-block-size-actionbar-padding-horizontal);
+    margin: $actionbar-indents;
 
-    gap: kbq-css-variable(code-block-size-actionbar-content-gap-horizontal);
+    .kbq-actionbar-block__button-stack {
+        gap: kbq-css-variable(code-block-size-actionbar-content-gap-horizontal);
+    }
 
-    & .kbq-code-block__fade-gradient {
+    .kbq-code-block__fade-gradient {
         display: none;
 
         width: kbq-css-variable(code-block-size-actionbar-fade-gradient-width);
-        height: 32px;
-
-        margin-top: calc(
-            var(
-                    --kbq-code-block-size-actionbar-padding-vertical,
-                    map.get($tokens, code-block-size-actionbar-padding-vertical)
-                ) * -1
-        );
+    }
+
+    &.kbq-actionbar-block_floating {
+        top: 0;
+        margin: unset;
+        background: transparent !important;
+
+        .kbq-code-block__fade-gradient {
+            display: block;
+            align-self: stretch;
+        }
+
+        .kbq-actionbar-block__button-stack {
+            padding: $actionbar-indents;
+        }
     }
 }

package/code-block/code-block.component.d.ts

@@ -45,11 +45,13 @@ export declare class KbqCodeBlockComponent implements AfterViewInit, OnDestroy {
     config: KbqCodeBlockConfiguration;
     tabGroup: KbqTabGroup;
     lineNumbers: boolean;
-    codeFiles: KbqCodeFile[];
     filled: boolean;
     maxHeight: number;
     softWrap: boolean;
     canLoad: boolean;
+    get codeFiles(): KbqCodeFile[];
+    set codeFiles(files: KbqCodeFile[]);
+    private _codeFiles;
     get noHeader(): any;
     get singleFile(): boolean;
     selectedTabIndex: number;
@@ -57,12 +59,17 @@ export declare class KbqCodeBlockComponent implements AfterViewInit, OnDestroy {
     viewAll: boolean;
     multiLine: boolean;
     isTopOverflow: boolean;
-    hasFocus: boolean;
+    hasKeyboardFocus: boolean;
+    /**
+     * @docs-private
+     */
+    actionbarHidden?: boolean;
     readonly resizeStream: Subject<Event>;
     readonly currentCodeBlock: Subject<HTMLElement>;
     private readonly resizeDebounceInterval;
     private resizeSubscription;
     private codeBlockSubscription;
+    private hoverSubscription;
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, clipboard: Clipboard, renderer: Renderer2, focusMonitor: FocusMonitor, config: KbqCodeBlockConfiguration);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -78,9 +85,14 @@ export declare class KbqCodeBlockComponent implements AfterViewInit, OnDestroy {
     checkOverflow(currentCodeContentElement: HTMLElement): void;
     onShowMoreClick(currentCodeContentElement: HTMLPreElement): void;
     canShowFocus(currentCodeContent: HTMLPreElement): boolean;
+    onEnter(currentCodeBlock: HTMLPreElement): void;
+    /** @docs-private */
+    showActionBarIfNecessary(): void;
+    /** @docs-private */
+    hideActionBarIfNoHeader(event?: FocusEvent | null): void;
     private updateMultiline;
     private getFullFileName;
-    onEnter(currentCodeBlock: HTMLPreElement): void;
+    private subscribeToHover;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockComponent, [null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; }, {}, never, never, false, never>;
 }

package/code-block/code-block.scss

@@ -27,11 +27,8 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
         // 4 buttons + margin
         $buttons-margin: calc(32 * 4) + 24px;
 
-        padding: kbq-css-variable(code-block-size-header-padding-vertical)
-            calc(
-                var(--kbq-code-block-size-header-padding-right, map.get($tokens, code-block-size-header-padding-right)) +
-                    $buttons-margin
-            )
+        padding: calc(kbq-css-variable(code-block-size-header-padding-vertical) - $border-width)
+            kbq-sum-series-css-variables([code-block-size-header-padding-right, $buttons-margin])
             kbq-css-variable(code-block-size-header-padding-vertical)
             kbq-css-variable(code-block-size-header-padding-left);
 
@@ -47,6 +44,14 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
                 overflow-x: scroll;
             }
         }
+
+        &:has(.kbq-code-block__show-more_collapsed) {
+            .kbq-code-block__code {
+                & > code {
+                    overflow-x: hidden;
+                }
+            }
+        }
     }
 
     .kbq-code-block__code {
@@ -87,6 +92,8 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
     &:not(.kbq-code-block_no-header) {
         .kbq-tab-body__wrapper {
             border-top-width: 0;
+            // actionbar can be visible when positioned in the header
+            overflow: visible;
         }
     }
 
@@ -126,8 +133,6 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
 
     .kbq-tab-body__wrapper {
         flex-direction: column;
-        position: unset;
-
         border-width: $border-width;
         border-style: solid;
         border-radius: 0 0 $border-radius $border-radius;
@@ -171,12 +176,11 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
 .kbq-code-block__show-more {
     display: flex;
     justify-content: center;
-    overflow: hidden;
 
-    width: calc(100% - $border-width * 2);
+    width: 100%;
 
     position: absolute;
-    bottom: $border-width;
+    bottom: 0;
     border-radius: $border-radius;
 
     &.kbq-code-block__show-more_collapsed {

package/core/styles/common/_groups.scss

@@ -45,7 +45,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-group-item + .kbq-group-item {
-        margin-left: calc(-1 * var(--kbq-button-size-border-width, #{map.get($tokens, button-size-border-width)}));
+        margin-left: calc(-1 * #{kbq-css-variable(button-size-border-width)});
     }
 
     & > .kbq-group-item:first-child:not(:last-child) {
@@ -108,6 +108,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-group-item + .kbq-group-item {
-        margin-top: calc(-1 * var(--kbq-button-size-border-width, #{map.get($tokens, button-size-border-width)}));
+        margin-top: calc(-1 * #{kbq-css-variable(button-size-border-width)});
     }
 }

package/core/styles/common/_select.scss

@@ -33,9 +33,6 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 
-    $border-width: map.get($tokens, form-field-size-border-width);
-    $height: map.get($tokens, form-field-size-height);
-
     .kbq-select__trigger {
         display: flex;
         box-sizing: border-box;
@@ -43,71 +40,37 @@ $tokens: meta.module-variables(tokens) !default;
 
         cursor: pointer;
 
-        height: calc(
-            var(--kbq-form-field-size-height, $height) - (var(--kbq-form-field-size-border-width, $border-width) * 2)
+        height: kbq-difference-series-css-variables(
+            [form-field-size-height,
+            calc(kbq-css-variable(form-field-size-border-width) * 2)]
         );
     }
 
     .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);
-
-            padding: calc(
-                    var(--kbq-select-size-single-padding-vertical, $padding-vertical) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
-                )
-                calc(
-                    var(--kbq-select-size-single-padding-right, map.get($tokens, select-size-single-padding-right)) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
-                )
-                calc(
-                    var(--kbq-select-size-single-padding-vertical, $padding-vertical) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
+            padding: kbq-difference-series-css-variables(
+                    [select-size-single-padding-vertical,
+                    form-field-size-border-width]
                 )
-                calc(
-                    var(--kbq-select-size-single-padding-left, map.get($tokens, select-size-single-padding-left)) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
-                );
+                kbq-difference-series-css-variables([select-size-single-padding-right, form-field-size-border-width])
+                kbq-difference-series-css-variables([select-size-single-padding-vertical, form-field-size-border-width])
+                kbq-difference-series-css-variables([select-size-single-padding-left, form-field-size-border-width]);
         }
     }
 
     .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) {
         & .kbq-select__matcher {
-            $padding-vertical: map.get($tokens, select-size-multiple-padding-vertical);
-
-            padding: calc(
-                    var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
+            padding: kbq-difference-series-css-variables(
+                    [select-size-multiple-padding-vertical,
+                    form-field-size-border-width]
                 )
-                calc(
-                    var(--kbq-select-size-multiple-padding-right, map.get($tokens, select-size-multiple-padding-right)) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
+                kbq-difference-series-css-variables([select-size-multiple-padding-right, form-field-size-border-width])
+                kbq-difference-series-css-variables(
+                    [select-size-multiple-padding-vertical,
+                    form-field-size-border-width]
                 )
-                calc(
-                    var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
-                )
-                calc(
-                    var(--kbq-select-size-multiple-padding-left, map.get($tokens, select-size-multiple-padding-left)) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
-                );
+                kbq-difference-series-css-variables([select-size-multiple-padding-left, form-field-size-border-width]);
 
             .kbq-select__match-container {
                 display: flex;
@@ -118,14 +81,14 @@ $tokens: meta.module-variables(tokens) !default;
                 flex-wrap: wrap;
                 overflow: hidden;
 
-                height: calc(
-                    var(--kbq-form-field-size-height, $height) -
-                        (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
+                height: kbq-difference-series-css-variables(
+                    [form-field-size-height,
+                    calc(kbq-css-variable(select-size-multiple-padding-vertical) * 2)]
                 );
 
-                max-height: calc(
-                    var(--kbq-form-field-size-height, $height) -
-                        (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
+                max-height: kbq-difference-series-css-variables(
+                    [form-field-size-height,
+                    calc(kbq-css-variable(select-size-multiple-padding-vertical) * 2)]
                 );
 
                 gap: kbq-css-variable(select-size-multiple-content-gap);

package/core/styles/common/_tokens.scss

@@ -45,3 +45,55 @@ $tokens: meta.module-variables(tokens) !default;
     @include kbq-css-font-variable($component, $property, font-feature-settings, '');
     @include kbq-css-font-variable($component, $property, letter-spacing, '');
 }
+
+@function kbq-sum-series-css-variables($variables) {
+    $sum: 0;
+    @each $variable in $variables {
+        @if ($sum == 0) {
+            @if (meta.type-of($variable) == number or meta.type-of($variable) == calculation) {
+                $sum: $variable;
+            } @else {
+                $sum: kbq-css-variable($variable);
+            }
+        } @else {
+            @if (meta.type-of($variable) == number or meta.type-of($variable) == calculation) {
+                $sum: calc($sum + $variable);
+            } @else {
+                $sum: calc($sum + kbq-css-variable($variable));
+            }
+        }
+    }
+    @return $sum;
+}
+
+@function kbq-difference-series-css-variables($variables) {
+    $difference: 0;
+    @each $variable in $variables {
+        @if ($difference == 0) {
+            @if (meta.type-of($variable) == number or meta.type-of($variable) == calculation) {
+                $difference: $variable;
+            } @else {
+                $difference: kbq-css-variable($variable);
+            }
+        } @else {
+            @if (meta.type-of($variable) == number or meta.type-of($variable) == calculation) {
+                $difference: calc($difference - $variable);
+            } @else {
+                $difference: calc($difference - kbq-css-variable($variable));
+            }
+        }
+    }
+    @return $difference;
+}
+
+@function kbq-css-half-difference($outer, $inner, $border: null) {
+    @if $border {
+        @if (meta.type-of($border) == number or meta.type-of($border) == calculation) {
+            @return calc((kbq-css-variable($outer) - kbq-css-variable($inner) - $border * 2) / 2);
+        } @else {
+            @return calc((kbq-css-variable($outer) - kbq-css-variable($inner) - kbq-css-variable($border * 2)) / 2);
+        }
+    } @else {
+        @return calc((kbq-css-variable($outer) - kbq-css-variable($inner)) / 2);
+    }
+}

package/core/styles/theming/_scrollbar-theme.scss

@@ -3,18 +3,10 @@
 @use 'sass:meta';
 @use 'sass:map';
 
+@use '../common/tokens' as *;
 @use '../functions/string' as *;
 
 @mixin kbq-scrollbar($tokens) {
-    $border-width: calc(
-        (
-                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
     @supports not selector(::-webkit-scrollbar) {
         scrollbar-width: thin;
@@ -26,32 +18,29 @@
         cursor: default;
 
         &:vertical {
-            width: var(--kbq-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension));
+            width: kbq-css-variable(scrollbar-size-track-dimension);
         }
 
         &:horizontal {
-            height: var(--kbq-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension));
+            height: kbq-css-variable(scrollbar-size-track-dimension);
         }
     }
 
     &::-webkit-scrollbar-thumb,
     ::-webkit-scrollbar-thumb {
-        width: var(--kbq-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width));
+        width: kbq-css-variable(scrollbar-size-thumb-width);
         border-style: solid;
-        border-width: $border-width;
+        border-width: kbq-css-half-difference(scrollbar-size-track-dimension, scrollbar-size-thumb-width);
 
-        border-radius: var(
-            --kbq-scrollbar-size-thumb-inset-border-radius,
-            map.get($tokens, scrollbar-size-thumb-border-radius)
-        );
+        border-radius: kbq-css-variable(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));
+            min-height: kbq-css-variable(scrollbar-size-thumb-min-size);
         }
 
         &:horizontal {
-            min-width: var(--kbq-scrollbar-size-thumb-min-size, map.get($tokens, scrollbar-size-thumb-min-size));
+            min-width: kbq-css-variable(scrollbar-size-thumb-min-size);
         }
     }
 

package/datepicker/_datepicker-theme.scss

@@ -66,6 +66,7 @@
         }
 
         &.kbq-disabled {
+            color: kbq-css-variable(states-foreground-disabled, map.get($theme, states, foreground, disabled));
             background: kbq-css-variable(
                 datepicker-cell-disabled-background,
                 map.get($datepicker, cell, disabled, background)

package/datepicker/calendar-header.component.d.ts

@@ -1,14 +1,16 @@
 import { AfterContentInit, EventEmitter } from '@angular/core';
 import { DateAdapter } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
+export type MonthName = {
+    name: string;
+    nameShort: string;
+    value: number;
+    disabled: boolean;
+};
 /** Default header for KbqCalendar */
 export declare class KbqCalendarHeader<D> implements AfterContentInit {
     private readonly adapter;
-    monthNames: {
-        name: string;
-        nameShort: string;
-        value: number;
-    }[];
+    monthNames: MonthName[];
     selectedMonth: number;
     years: {
         name: number;
@@ -46,7 +48,9 @@ export declare class KbqCalendarHeader<D> implements AfterContentInit {
     selectNextMonth(): void;
     private compareDate;
     private updateSelectedValues;
-    private updateYearsArray;
+    private updateSelectionOptions;
+    private updateYearsOptions;
+    private updateMonthOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCalendarHeader<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendarHeader<any>, "kbq-calendar-header", ["kbqCalendarHeader"], { "activeDate": { "alias": "activeDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; }, { "activeDateChange": "activeDateChange"; "monthSelected": "monthSelected"; "yearSelected": "yearSelected"; }, never, never, false, never>;
 }