@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.10

package/radio/radio.scss

@@ -6,6 +6,19 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
+.kbq-radio-group {
+    display: inline-flex;
+    flex-direction: column;
+
+    &.kbq-radio-group_normal {
+        gap: var(--kbq-radio-size-normal-vertical-gap, map.get($tokens, radio-size-normal-vertical-gap));;
+    }
+
+    &.kbq-radio-group_big {
+        gap: var(--kbq-radio-size-big-vertical-gap, map.get($tokens, radio-size-big-vertical-gap));;
+    }
+}
+
 // Top-level host container.
 .kbq-radio-button {
     display: inline-block;

package/risk-level/_risk-level-theme.scss

@@ -0,0 +1,88 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin kbq-risk-level-filled-color($risk-level) {
+    border: transparent;
+
+    color: map.get($risk-level, color);
+    background: map.get($risk-level, background);
+}
+
+@mixin kbq-risk-level-outline-color($risk-level) {
+    border-color: map.get($risk-level, border);
+
+    color: map.get($risk-level, color);
+    background: map.get($risk-level, background);
+}
+
+@mixin kbq-risk-level-theme($theme) {
+    $risk-level: map.get(map.get($theme, components), risk-level);
+
+    $filled: map.get($risk-level, filled);
+    $outline: map.get($risk-level, outline);
+
+    .kbq-risk-level_filled {
+        $fade-on: map.get($filled, fade-on);
+
+        &.kbq-risk-level_fade-contrast {
+            @include kbq-risk-level-filled-color(map.get($fade-on, contrast));
+        }
+
+        &.kbq-risk-level_fade-success {
+            @include kbq-risk-level-filled-color(map.get($fade-on, success));
+        }
+
+        &.kbq-risk-level_fade-warning {
+            @include kbq-risk-level-filled-color(map.get($fade-on, warning));
+        }
+
+        &.kbq-risk-level_fade-error {
+            @include kbq-risk-level-filled-color(map.get($fade-on, error));
+        }
+
+        $fade-off: map.get($filled, fade-off);
+
+        &.kbq-risk-level_success {
+            @include kbq-risk-level-filled-color(map.get($fade-off, success));
+        }
+
+        &.kbq-risk-level_warning {
+            @include kbq-risk-level-filled-color(map.get($fade-off, warning));
+        }
+
+        &.kbq-risk-level_error {
+            @include kbq-risk-level-filled-color(map.get($fade-off, error));
+        }
+    }
+
+    .kbq-risk-level_outline {
+        $fade-on: map.get($outline, fade-on);
+
+        &.kbq-risk-level_fade-contrast {
+            @include kbq-risk-level-outline-color(map.get($fade-on, contrast));
+        }
+
+        &.kbq-risk-level_fade-success {
+            @include kbq-risk-level-outline-color(map.get($fade-on, success));
+        }
+
+        &.kbq-risk-level_fade-warning {
+            @include kbq-risk-level-outline-color(map.get($fade-on, warning));
+        }
+
+        &.kbq-risk-level_fade-error {
+            @include kbq-risk-level-outline-color(map.get($fade-on, error));
+        }
+    }
+}
+
+@mixin kbq-risk-level-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-risk-level {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, risk-level-font-text));
+    }
+}

package/risk-level/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/risk-level/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './risk-level.module';
+export * from './risk-level.component';

package/risk-level/risk-level.component.d.ts

@@ -0,0 +1,18 @@
+import * as i0 from "@angular/core";
+export declare enum KbqRiskLevelColors {
+    FadeContrast = "fade-contrast",
+    FadeSuccess = "fade-success",
+    FadeWarning = "fade-warning",
+    FadeError = "fade-error",
+    Success = "success",
+    Warning = "warning",
+    Error = "error"
+}
+export declare class KbqRiskLevel {
+    outline: boolean;
+    get riskLevelColor(): string;
+    set riskLevelColor(value: string | KbqRiskLevelColors);
+    private _riskLevelColor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqRiskLevel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqRiskLevel, "kbq-risk-level", never, { "outline": { "alias": "outline"; "required": false; }; "riskLevelColor": { "alias": "riskLevelColor"; "required": false; }; }, {}, never, ["*"], false, never>;
+}

package/risk-level/risk-level.component.scss

@@ -0,0 +1,26 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.kbq-risk-level {
+    box-sizing: border-box;
+
+    display: inline-flex;
+    text-align: center;
+
+    border-style: solid;
+
+    padding:
+        var(--kbq-risk-level-size-padding-vertical, map.get($tokens, risk-level-size-padding-vertical))
+        var(--kbq-risk-level-size-padding-horizontal, map.get($tokens, risk-level-size-padding-horizontal));
+
+    border: {
+        width: var(--kbq-risk-level-size-border-width, map.get($tokens, risk-level-size-border-width));
+        radius: var(--kbq-risk-level-size-border-radius, map.get($tokens, risk-level-size-border-radius));
+    }
+}

package/risk-level/risk-level.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./risk-level.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/a11y";
+import * as i4 from "@angular/cdk/platform";
+export declare class KbqRiskLevelModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqRiskLevelModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqRiskLevelModule, [typeof i1.KbqRiskLevel], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqRiskLevel]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqRiskLevelModule>;
+}

package/select/_select-theme.scss

@@ -11,10 +11,11 @@
 
     $error: map.get($theme, error);
 
-    $popup: map.get(map.get($theme, components), popup);
+    $select-panel: map.get(map.get($theme, components), select-panel);
+    $divider: map.get(map.get($theme, components), divider);
 
     .kbq-select {
-        color: map.get($foreground, text);
+        color: map.get($foreground, contrast);
 
         &.ng-invalid {
             color: kbq-color($error);
@@ -26,15 +27,22 @@
     }
 
     .kbq-select__placeholder {
+        text-overflow: ellipsis;
+
         color: map.get($foreground, text-disabled);
     }
 
     .kbq-select__panel {
-        @include popup-params($theme);
+        box-shadow: map.get($select-panel, shadow);
+        background: map.get($select-panel, background);
+
+        & .kbq-select__footer {
+            border-color: map.get($divider, color);
+        }
     }
 
     .kbq-select__search-container {
-        border-bottom-color: map.get($popup, border);
+        border-bottom-color: map.get($divider, color);
     }
 
     .kbq-select__no-options-message {

package/select/select-option.directive.d.ts

@@ -15,6 +15,8 @@ export declare class KbqOptionTooltip extends KbqTooltipTrigger implements After
     ngOnDestroy(): void;
     onMouseEnter(): void;
     onMouseLeave(): void;
+    onFocus(): void;
+    onBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOptionTooltip, [null, null, null, null, null, null, null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOptionTooltip, "kbq-option", never, {}, {}, never, never, false, never>;
 }

package/select/select.component.d.ts

@@ -1,10 +1,11 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { SelectionModel } from '@angular/cdk/collections';
 import { CdkConnectedOverlay, ConnectedPosition } from '@angular/cdk/overlay';
+import { CdkVirtualForOf } from '@angular/cdk/scrolling';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
-import { CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqOptgroup, KbqOption, KbqOptionSelectionChange, KbqLocaleService } from '@koobiq/components/core';
+import { CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqOptgroup, KbqOption, KbqOptionSelectionChange, KbqLocaleService, KbqOptionBase } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
 import { KbqInput } from '@koobiq/components/input';
 import { KbqTag } from '@koobiq/components/tags';
@@ -18,7 +19,7 @@ export declare class KbqSelectChange {
 }
 export declare class KbqSelectFooter {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectFooter, "kbq-select-footer", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectFooter, "kbq-select-footer, [kbq-select-footer]", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqSelectSearch implements AfterContentInit, OnDestroy {
     input: KbqInput;
@@ -31,11 +32,11 @@ export declare class KbqSelectSearch implements AfterContentInit, OnDestroy {
     ngOnDestroy(): void;
     handleKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearch, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearch, "[mcSelectSearch]", ["mcSelectSearch"], {}, {}, ["input"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearch, "[kbqSelectSearch]", ["kbqSelectSearch"], {}, {}, ["input"], never, false, never>;
 }
 export declare class KbqSelectSearchEmptyResult {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearchEmptyResult, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearchEmptyResult, "[kbq-select-search-empty-result]", ["mcSelectSearchEmptyResult"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearchEmptyResult, "[kbq-select-search-empty-result]", ["kbqSelectSearchEmptyResult"], {}, {}, never, never, false, never>;
 }
 export declare class KbqSelectTrigger {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectTrigger, never>;
@@ -78,8 +79,8 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     /** The cached font-size of the trigger element. */
     triggerFontSize: number;
     /** Deals with the selection logic. */
-    selectionModel: SelectionModel<KbqOption>;
-    previousSelectionModelSelected: KbqOption[];
+    selectionModel: SelectionModel<KbqOptionBase>;
+    previousSelectionModelSelected: KbqOptionBase[];
     /** Manages keyboard events for options in the panel. */
     keyManager: ActiveDescendantKeyManager<KbqOption>;
     /** The value of the select panel's transform-origin property. */
@@ -105,6 +106,7 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     panel: ElementRef;
     optionsContainer: ElementRef;
     overlayDir: CdkConnectedOverlay;
+    cdkVirtualForOf?: CdkVirtualForOf<any>;
     tags: QueryList<KbqTag>;
     /** User-supplied override of the trigger element. */
     customTrigger: KbqSelectTrigger;
@@ -128,7 +130,7 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
      * Function used to sort the values in a select in multiple mode.
      * Follows the same logic as `Array.prototype.sort`.
      */
-    sortComparator: (a: KbqOption, b: KbqOption, options: KbqOption[]) => number;
+    sortComparator: (a: KbqOptionBase, b: KbqOptionBase, options: KbqOptionBase[]) => number;
     /** Combined stream of all of the child options' change events. */
     readonly optionSelectionChanges: Observable<KbqOptionSelectionChange>;
     /** Event emitted when the select panel has been toggled. */
@@ -177,13 +179,14 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     /** Whether the select is focused. */
     get focused(): boolean;
     set focused(value: boolean);
-    private _focused;
     panelOpen: boolean;
+    private _focused;
+    private withVirtualScroll;
     get isEmptySearchResult(): boolean;
     get canShowCleaner(): boolean;
-    get selected(): KbqOption | KbqOption[];
+    get selected(): KbqOptionBase | KbqOptionBase[];
     get triggerValue(): string;
-    get triggerValues(): KbqOption[];
+    get triggerValues(): KbqOptionBase[];
     get empty(): boolean;
     private closeSubscription;
     /** The scroll position of the overlay panel, calculated to center the selected option. */
@@ -265,7 +268,7 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
      */
     onContainerClick(): void;
     /** Invoked when an option is clicked. */
-    onRemoveMatcherItem(option: KbqOption, $event: any): void;
+    onRemoveMatcherItem(option: KbqOptionBase, $event: any): void;
     calculateHiddenItems(): void;
     getItemHeight(): number;
     private updateLocaleParams;
@@ -325,6 +328,6 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     private getTotalVisibleItems;
     private buildTriggerClone;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["mcSelect"], { "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; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "kbq-select-matcher, [kbq-select-matcher]", "[mcSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "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; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "kbq-select-matcher, [kbq-select-matcher]", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
 }
 export {};

package/select/select.scss

@@ -1,7 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/common/vendor-prefixes';
+@use '../core/styles/common/select' as *;
 
 @use '../core/styles/tokens';
 
@@ -9,199 +9,22 @@
 $tokens: meta.module-variables(tokens) !default;
 
 
-.kbq-select__matcher {
-    display: flex;
-    align-items: center;
-
-    width: 100%;
-
-    overflow: hidden;
-
-    white-space: nowrap;
-
-    & > span {
-        flex: 1;
-        overflow: hidden;
-    }
-}
-
-.kbq-select__match-container {
-    width: 100%;
-
-    text-overflow: ellipsis;
-    overflow: hidden;
-
-    & .kbq-select__match-hidden-text {
-        flex: 0 0 70px;
-        align-self: center;
-        padding: 0 8px;
-
-        text-align: right;
-    }
-}
-
 .kbq-select {
-    box-sizing: border-box;
-
-    display: inline-block;
-
-    width: 100%;
-
-    outline: none;
-
-    & .kbq-select__trigger {
-        display: flex;
-        box-sizing: border-box;
-        position: relative;
-
-        height: calc(
-            var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
-            (var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
-        );
-
-        cursor: pointer;
-
-        & .kbq-select__matcher {
-            padding-left: calc(
-                var(--kbq-select-size-left-padding, #{map.get($tokens, select-size-left-padding)}) -
-                var(--kbq-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-            );
-            padding-right: calc(
-                var(--kbq-select-size-right-padding, #{map.get($tokens, select-size-right-padding)}) -
-                var(--kbq-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-            );
-        }
-
-        &.kbq-select__trigger_multiple {
-            .kbq-select__matcher {
-                .kbq-select__match-container {
-                    display: flex;
-                }
-
-                $select-size-left-padding-multiple: map.get($tokens, select-size-left-padding-multiple);
-                $form-field-size-border-width: map.get($tokens, form-field-size-border-width);
-
-                padding-left: calc(
-                    var(--kbq-select-size-left-padding-multiple, #{$select-size-left-padding-multiple}) -
-                    var(--kbq-form-field-size-border-width, #{$form-field-size-border-width})
-                );
-
-                & .kbq-tag.kbq-disabled .kbq-tag__text {
-                    margin-right: 7px;
-                }
-            }
-        }
-    }
-
-    &.kbq-disabled {
-        & .kbq-select__trigger {
-            @include vendor-prefixes.user-select(none);
-
-            cursor: default;
-        }
-    }
-}
-
-.kbq-select__no-options-message {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-
-    position: relative;
-
-    max-width: 100%;
-    height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
-
-    cursor: default;
-    outline: none;
-
-    padding-left: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
-    padding-right: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
-
-    border: var(--kbq-option-size-border-width, map.get($tokens, option-size-border-width)) solid transparent;
-}
-
-.kbq-select__match-list {
-    display: flex;
-    flex-wrap: wrap;
-    overflow: hidden;
-
-    max-height: calc(
-        var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) - 4px
-    );
-
-    height: calc(
-        var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) - 4px
-    );
-
-    & .kbq-tag {
-        margin-right: 4px;
-    }
-}
-
-.kbq-select__arrow-wrapper {
-    display: flex;
-    align-self: center;
-
-    // When used in a box or standard appearance form-field the arrow should be shifted up 50%.
-    .kbq-form-field-appearance-fill &,
-    .kbq-form-field-appearance-standard & {
-        transform: translateY(-50%);
-    }
-
-    // When used in a outline form-field the arrow should be shifted up 25%.
-    .kbq-form-field-appearance-outline & {
-        transform: translateY(-25%);
-    }
+    @extend %kbq-select-base;
 }
 
 .kbq-select__panel {
-    min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
-    max-width: var(--kbq-select-panel-size-max-width, map.get($tokens, select-panel-size-max-width));
-
-    overflow: hidden;
-
-    border: {
-        width: var(--kbq-select-panel-size-border-width, map.get($tokens, select-panel-size-border-width));
-        style: solid;
-    }
-
-    border-bottom-left-radius: var(
-        --kbq-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
-    );
-    border-bottom-right-radius: var(
-        --kbq-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
-    );
-
-    // Override optgroup and option to scale based on font-size of the trigger.
-    .kbq-optgroup-label,
-    .kbq-option {
-        font-size: inherit;
-        line-height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
-        height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
-    }
+    @extend %kbq-select-panel;
 
     & .kbq-select__footer {
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
-        border-top-width: 1px;
-        border-top-style: solid;
-        min-height: var(
-            --kbq-list-size-footer-min-height,
-            map.get($tokens, list-size-footer-min-height)
-        );
+        @extend %kbq-select-footer;
     }
 }
 
 .kbq-select__content {
-    max-height: var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height));
-    padding: var(--kbq-select-panel-size-vertical-padding, map.get($tokens, select-panel-size-vertical-padding)) 0;
-    overflow: hidden auto;
+    @extend %kbq-select-content;
 
-    & .cdk-virtual-scroll-viewport {
+    &:not(:has(> .kbq-select__no-options-message)) .cdk-virtual-scroll-viewport {
         max-height: calc(
             var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height))
         );
@@ -213,10 +36,3 @@ $tokens: meta.module-variables(tokens) !default;
         cursor: pointer;
     }
 }
-
-.kbq-select__search-container {
-    border-bottom: {
-        width: 1px;
-        style: solid;
-    }
-}

package/sidebar/sidebar-animations.d.ts

@@ -3,6 +3,6 @@ export declare enum KbqSidebarAnimationState {
     Opened = "opened",
     Closed = "closed"
 }
-export declare const mcSidebarAnimations: {
+export declare const kbqSidebarAnimations: {
     readonly sidebarState: AnimationTriggerMetadata;
 };

package/sidebar/sidebar.component.d.ts

@@ -16,12 +16,12 @@ export declare class KbqSidebarOpened {
     width: string;
     maxWidth: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidebarOpened, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidebarOpened, "[kbq-sidebar-opened]", ["mcSidebarOpened"], { "minWidth": { "alias": "minWidth"; "required": false; }; "width": { "alias": "width"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidebarOpened, "[kbq-sidebar-opened]", ["kbqSidebarOpened"], { "minWidth": { "alias": "minWidth"; "required": false; }; "width": { "alias": "width"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class KbqSidebarClosed {
     width: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidebarClosed, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidebarClosed, "[kbq-sidebar-closed]", ["mcSidebarClosed"], { "width": { "alias": "width"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidebarClosed, "[kbq-sidebar-closed]", ["kbqSidebarClosed"], { "width": { "alias": "width"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class KbqSidebar implements OnDestroy, OnInit, AfterContentInit {
     private ngZone;
@@ -48,6 +48,6 @@ export declare class KbqSidebar implements OnDestroy, OnInit, AfterContentInit {
     private unRegisterKeydownListener;
     private saveWidth;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidebar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSidebar, "kbq-sidebar", ["mcSidebar"], { "opened": { "alias": "opened"; "required": false; }; "position": { "alias": "position"; "required": false; }; }, { "stateChanged": "stateChanged"; }, ["openedContent", "closedContent"], ["[kbq-sidebar-opened]", "[kbq-sidebar-closed]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSidebar, "kbq-sidebar", ["kbqSidebar"], { "opened": { "alias": "opened"; "required": false; }; "position": { "alias": "position"; "required": false; }; }, { "stateChanged": "stateChanged"; }, ["openedContent", "closedContent"], ["[kbq-sidebar-opened]", "[kbq-sidebar-closed]"], false, never>;
 }
 export {};

package/sidepanel/_sidepanel-theme.scss

@@ -5,48 +5,21 @@
 
 
 @mixin kbq-sidepanel-theme($theme) {
-    $background: map.get($theme, background);
-
     $sidepanel: map.get(map.get($theme, components), sidepanel);
-    $popup: map.get(map.get($theme, components), popup);
+
+    .kbq-sidepanel-title {
+        color: map.get($sidepanel, header-text);
+    }
 
     .kbq-sidepanel-content {
-        background-color: map.get($background, background);
+        background-color: map.get($sidepanel, background);
+        color: map.get($sidepanel, content-text);
     }
 
     .kbq-sidepanel-container_shadowed {
-        &.kbq-sidepanel-container_right {
-            .kbq-sidepanel-content {
-                box-shadow: 0 0 0 1px map.get($sidepanel, border), -6px 0 12px 0 rgba(0, 0, 0, 0.24);
-            }
+        .kbq-sidepanel-content {
+            box-shadow: map.get($sidepanel, box-shadow);
         }
-
-        &.kbq-sidepanel-container_left {
-            .kbq-sidepanel-content {
-                box-shadow: 0 0 0 1px map.get($sidepanel, border), 6px 0 12px 0 rgba(0, 0, 0, 0.24);
-            }
-        }
-
-        &.kbq-sidepanel-container_bottom {
-            .kbq-sidepanel-content {
-                box-shadow: 0 0 0 1px map.get($sidepanel, border), 0 -6px 12px 0 rgba(0, 0, 0, 0.24);
-            }
-        }
-
-        &.kbq-sidepanel-container_top {
-            .kbq-sidepanel-content {
-                box-shadow: 0 0 0 1px map.get($sidepanel, border), 0 6px 12px 0 rgba(0, 0, 0, 0.24);
-            }
-        }
-    }
-
-    .kbq-sidepanel-header {
-        border-bottom: 1px solid map.get($sidepanel, header-border);
-    }
-
-    .kbq-sidepanel-footer {
-        border-top: 1px solid map.get($sidepanel, footer-border);
-        background-color: map.get($popup, footer-background);
     }
 }
 
@@ -54,14 +27,11 @@
     $tokens: map.get($config, tokens);
 
     .kbq-sidepanel-title {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-header-font-default));
-    }
-
-    .kbq-sidepanel-container {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-font-header));
     }
 
+    .kbq-sidepanel-container,
     .kbq-sidepanel-footer {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-footer-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-font-content));
     }
 }