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

package/form-field/_form-field-theme.scss

@@ -103,10 +103,10 @@
     $tokens: map.get($config, tokens);
 
     .kbq-form-field {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-font-label));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-font-text));
     }
 
-    .kbq-form-field__hint > .kbq-hint {
+    .kbq-form-field__hint > .kbq-hint .kbq-hint__text {
         @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-text));
     }
 }

package/form-field/form-field.d.ts

@@ -66,7 +66,7 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     /** Throws an error if the form field's control is missing. */
     protected validateControlChild(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFormField, "kbq-form-field", ["mcFormField"], { "color": { "alias": "color"; "required": false; }; }, {}, ["control", "stepper", "cleaner", "passwordToggle", "hint", "passwordHints", "suffix", "prefix"], ["[mcPrefix]", "*", "[mcSuffix]", "kbq-cleaner", "kbq-password-toggle", "kbq-stepper", "kbq-hint, kbq-password-hint"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFormField, "kbq-form-field", ["mcFormField"], { "color": { "alias": "color"; "required": false; }; }, {}, ["control", "stepper", "cleaner", "passwordToggle", "hint", "passwordHints", "suffix", "prefix"], ["[kbqPrefix]", "*", "[mcSuffix]", "kbq-cleaner", "kbq-password-toggle", "kbq-stepper", "kbq-hint, kbq-password-hint"], false, never>;
 }
 export declare class KbqFormFieldWithoutBorders {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormFieldWithoutBorders, never>;
@@ -80,5 +80,5 @@ export declare class KbqTrim {
     trim(value: any): any;
     private registerOnChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTrim, [{ attribute: "no-trim"; }, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTrim, "[mcInput], [mcTextarea]", ["KbqTrim"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTrim, "[kbqInput], [kbqTextarea]", ["KbqTrim"], {}, {}, never, never, false, never>;
 }

package/form-field/password-toggle.d.ts

@@ -8,11 +8,11 @@ export declare class KbqPasswordToggle extends KbqTooltipTrigger {
     private formField;
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);
-    mcTooltipHidden: string | TemplateRef<any>;
+    kbqTooltipHidden: string | TemplateRef<any>;
     get hidden(): boolean;
     get icon(): string;
     constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, formField: KbqFormFieldRef);
     toggle(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordToggle, [null, null, null, null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["mcPasswordToggle"], { "content": { "alias": "mcTooltipNotHidden"; "required": false; }; "mcTooltipHidden": { "alias": "mcTooltipHidden"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["mcPasswordToggle"], { "content": { "alias": "kbqTooltipNotHidden"; "required": false; }; "kbqTooltipHidden": { "alias": "kbqTooltipHidden"; "required": false; }; }, {}, never, never, false, never>;
 }

package/form-field/prefix.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class KbqPrefix {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPrefix, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPrefix, "[mcPrefix]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPrefix, "[kbqPrefix]", never, {}, {}, never, never, false, never>;
 }

package/form-field/validate.directive.d.ts

@@ -29,5 +29,5 @@ export declare class KbqValidateDirective implements AfterContentInit {
     setMosaicValidationForModelControl(): void;
     setMosaicValidationForFormControl(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqValidateDirective, [null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqValidateDirective, "        input[mcInput],        input[mcInputPassword],        input[mcTimepicker],        input[mcDatepicker],        textarea[mcTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", ["KbqValidate"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqValidateDirective, "        input[kbqInput],        input[kbqInputPassword],        input[mcTimepicker],        input[mcDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", ["KbqValidate"], {}, {}, never, never, false, never>;
 }

package/input/input-number.d.ts

@@ -29,5 +29,5 @@ export declare class KbqNumberInput {
     stepDown(step: number): void;
     private viewToModelUpdate;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNumberInput, [null, { optional: true; self: true; }, { attribute: "step"; }, { attribute: "big-step"; }, { attribute: "min"; }, { attribute: "max"; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNumberInput, "input[mcInput][type=\"number\"]", ["mcNumericalInput"], { "bigStep": { "alias": "bigStep"; "required": false; }; "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNumberInput, "input[kbqInput][type=\"number\"]", ["mcNumericalInput"], { "bigStep": { "alias": "bigStep"; "required": false; }; "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, {}, never, never, false, never>;
 }

package/input/input-password.d.ts

@@ -88,5 +88,5 @@ export declare class KbqInputPassword extends KbqInputMixinBase implements KbqFo
     /** Checks whether the input is invalid based on the native validation. */
     protected isBadInput(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqInputPassword, [null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInputPassword, "input[mcInputPassword]", ["mcInputPassword"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInputPassword, "input[kbqInputPassword]", ["kbqInputPassword"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
 }

package/input/input.d.ts

@@ -109,9 +109,9 @@ export declare class KbqInput extends KbqInputMixinBase implements KbqFormFieldC
     /** Checks whether the input is invalid based on the native validation. */
     protected isBadInput(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqInput, [null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInput, "input[mcInput]", ["mcInput"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInput, "input[kbqInput]", ["kbqInput"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class KbqInputMono {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqInputMono, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInputMono, "input[mcInputMonospace]", ["KbqInputMonospace"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInputMono, "input[kbqInputMonospace]", ["KbqInputMonospace"], {}, {}, never, never, false, never>;
 }

package/input/input.scss

@@ -14,6 +14,8 @@ $tokens: meta.module-variables(tokens) !default;
     display: inline-block;
     box-sizing: border-box;
 
+    text-overflow: ellipsis;
+
     width: 100%;
     min-height: calc(
         var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
@@ -25,7 +27,7 @@ $tokens: meta.module-variables(tokens) !default;
             var(--kbq-input-size-padding-vertical, map.get($tokens, input-size-padding-vertical)) -
             var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width))
         )
-        var(--kbq-input-size-padding-horizontal, map.get($tokens, input-size-padding-horizontal));;
+        var(--kbq-input-size-padding-horizontal, map.get($tokens, input-size-padding-horizontal));
 }
 
 input.kbq-input[type="number"] {

package/link/_link-theme.scss

@@ -5,7 +5,7 @@
 
 
 @mixin kbq-link($foreground, $link, $tokens) {
-    display: inline-block;
+    display: inline;
 
     color: map.get($link, text);
     text-decoration: none;
@@ -69,8 +69,6 @@
     }
 
     &.kbq-link_pseudo {
-        display: inline;
-
         &.kbq-text-only,
         &.kbq-text-with-icon .kbq-link__text {
             border-bottom: none !important;

package/link/link.component.d.ts

@@ -22,9 +22,6 @@ export declare class KbqLink extends KbqLinkMixinBase implements OnDestroy, HasT
     get noUnderline(): any;
     set noUnderline(value: any);
     private _noUnderline;
-    get caption(): any;
-    set caption(value: any);
-    private _caption;
     get big(): any;
     set big(value: any);
     private _big;
@@ -43,5 +40,5 @@ export declare class KbqLink extends KbqLinkMixinBase implements OnDestroy, HasT
     getHostElement(): any;
     private updatePrintUrl;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqLink, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLink, "[kbq-link]", ["mcLink"], { "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "pseudo": { "alias": "pseudo"; "required": false; }; "noUnderline": { "alias": "noUnderline"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "big": { "alias": "big"; "required": false; }; "useVisited": { "alias": "useVisited"; "required": false; }; "print": { "alias": "print"; "required": false; }; }, {}, ["icon"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLink, "[kbq-link]", ["mcLink"], { "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "pseudo": { "alias": "pseudo"; "required": false; }; "noUnderline": { "alias": "noUnderline"; "required": false; }; "big": { "alias": "big"; "required": false; }; "useVisited": { "alias": "useVisited"; "required": false; }; "print": { "alias": "print"; "required": false; }; }, {}, ["icon"], never, false, never>;
 }

package/list/_list-theme.scss

@@ -4,35 +4,51 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
-@mixin kbq-list-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
+@mixin kbq-list-item($state) {
+    background: map.get($state, container-background);
 
-    .kbq-list-item,
-    .kbq-list-option {
-        color: map.get($foreground, text);
+    .kbq-list-text {
+        color: map.get($state, text);
+    }
+
+    .kbq-icon {
+        color: map.get($state, icon);
+    }
+
+    .kbq-option-action .kbq-icon {
+        color: map.get($state, icon-button);
+    }
+
+    .kbq-list-option-caption {
+        color: map.get($state, caption);
     }
+}
+
+@mixin kbq-list-theme($theme) {
+    $list-item: map.get(map.get($theme, components), list-item);
 
     .kbq-list-option {
-        outline: none;
+        @include kbq-list-item(map.get($list-item, default));
 
-        &:hover {
-            background: map.get($background, overlay-hover);
+        &:hover:not(.kbq-disabled):not([disabled]) {
+            @include kbq-list-item(map.get($list-item, hover));
         }
 
         &.kbq-focused {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: map.get(map.get($list-item, focused), focus-outline);
         }
 
         &.kbq-selected {
-            background: map.get(map.get($theme, states), selected-color);
+            @include kbq-list-item(map.get($list-item, selected));
+
+            &:hover:not(.kbq-disabled):not([disabled]) {
+                @include kbq-list-item(map.get($list-item, selected-hover));
+            }
         }
 
         &.kbq-disabled,
         &[disabled] {
-            background: transparent;
-
-            color: map.get($foreground, text-disabled);
+            @include kbq-list-item(map.get($list-item, disabled));
         }
     }
 }
@@ -42,6 +58,10 @@
 
     .kbq-list-item,
     .kbq-list-option {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-item));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-text));
+    }
+
+    .kbq-list-option-caption {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-caption));
     }
 }

package/list/list-selection.component.d.ts

@@ -116,6 +116,10 @@ export declare class KbqListSelection extends KbqListSelectionMixinBase implemen
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqListSelection, [null, null, { attribute: "multiple"; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqListSelection, "kbq-list-selection", ["mcListSelection"], { "disabled": { "alias": "disabled"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; }, { "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; "selectionChange": "selectionChange"; }, ["options"], ["*"], false, never>;
 }
+export declare class KbqListOptionCaption {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqListOptionCaption, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqListOptionCaption, "[kbq-list-option-caption]", never, {}, {}, never, never, false, never>;
+}
 /**
  * Component for list-options of selection-list. Each list-option can automatically
  * generate a checkbox and can put current item into the selectionModel of selection-list
@@ -168,5 +172,5 @@ export declare class KbqListOption implements OnDestroy, OnInit, IFocusableOptio
     blur(): void;
     getHostElement(): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqListOption, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListOption, "kbq-list-option", ["mcListOption"], { "checkboxPosition": { "alias": "checkboxPosition"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, {}, ["actionButton", "tooltipTrigger", "dropdownTrigger"], ["[kbq-icon]", "*", "kbq-option-action"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListOption, "kbq-list-option", ["kbqListOption"], { "checkboxPosition": { "alias": "checkboxPosition"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, {}, ["actionButton", "tooltipTrigger", "dropdownTrigger"], ["[kbq-icon]", "*", "[kbq-list-option-caption]", "kbq-option-action"], false, never>;
 }

package/list/list.module.d.ts

@@ -6,6 +6,6 @@ import * as i4 from "@angular/cdk/a11y";
 import * as i5 from "@koobiq/components/core";
 export declare class KbqListModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqListModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqListModule, [typeof i1.KbqList, typeof i2.KbqListSelection, typeof i1.KbqListItem, typeof i2.KbqListOption], [typeof i3.CommonModule, typeof i4.A11yModule, typeof i5.KbqPseudoCheckboxModule, typeof i5.KbqLineModule, typeof i5.KbqOptionModule], [typeof i1.KbqList, typeof i2.KbqListSelection, typeof i1.KbqListItem, typeof i2.KbqListOption, typeof i5.KbqOptionModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqListModule, [typeof i1.KbqList, typeof i2.KbqListSelection, typeof i1.KbqListItem, typeof i2.KbqListOption, typeof i2.KbqListOptionCaption], [typeof i3.CommonModule, typeof i4.A11yModule, typeof i5.KbqPseudoCheckboxModule, typeof i5.KbqLineModule, typeof i5.KbqOptionModule], [typeof i1.KbqList, typeof i2.KbqListSelection, typeof i1.KbqListItem, typeof i2.KbqListOption, typeof i2.KbqListOptionCaption, typeof i5.KbqOptionModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqListModule>;
 }

package/list/list.scss

@@ -1,7 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use 'list-base';
 @use '../core/styles/common/list';
 
 @use '../core/styles/tokens';
@@ -20,18 +19,10 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-list-option {
     @include list.kbq-no-select;
 
-    @include list-base.kbq-list-item-base();
+    @include list.kbq-list-item-base();
 
-    &.kbq-progress:after {
-        top: -2px;
-        right: -2px;
-        bottom: -2px;
-        left: -2px;
-    }
-
-    & .kbq-pseudo-checkbox,
-    & .kbq-icon {
-        margin-right: var(--kbq-list-size-icon-right-margin, map.get($tokens, list-size-icon-right-margin));
+    &:not(.kbq-disabled):not([disabled]) {
+        cursor: pointer;
     }
 
     & .kbq-option-action {

package/loader-overlay/_loader-overlay-theme.scss

@@ -7,28 +7,60 @@
 @mixin kbq-loader-overlay-theme($theme) {
     $loader-overlay: map.get(map.get($theme, components), loader-overlay);
 
-    .kbq-loader-overlay {
-        background: map.get($loader-overlay, background);
-    }
+    .kbq-loader-overlay_filled {
+        $filled: map.get($loader-overlay, filled);
+
+        &.kbq-loader-overlay {
+            background: map.get($filled, background);
+        }
 
-    .kbq-loader-overlay-text {
-        color: map.get($loader-overlay, text);
+        & .kbq-loader-overlay-text {
+            color: map.get($filled, text);
+        }
+
+        & .kbq-loader-overlay-caption {
+            color: map.get($filled, caption);
+        }
     }
 
-    .kbq-loader-overlay-caption {
-        color: map.get($loader-overlay, caption);
+    .kbq-loader-overlay_transparent {
+        $transparent: map.get($loader-overlay, transparent);
+
+        &.kbq-loader-overlay {
+            background: map.get($transparent, background);
+        }
+
+        & .kbq-loader-overlay-text {
+            color: map.get($transparent, text);
+        }
+
+        & .kbq-loader-overlay-caption {
+            color: map.get($transparent, caption);
+        }
     }
 }
 
 @mixin kbq-loader-overlay-typography($config) {
     $tokens: map.get($config, tokens);
 
-    .kbq-loader-overlay-text {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-text));
+    .kbq-loader-overlay_big {
+        & .kbq-loader-overlay-text {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-big-text));
+        }
+
+        & .kbq-loader-overlay-caption {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-big-caption));
+        }
     }
 
-    .kbq-loader-overlay-caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-caption));
+    .kbq-loader-overlay_compact {
+        & .kbq-loader-overlay-text {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-compact-text));
+        }
+
+        & .kbq-loader-overlay-caption {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-compact-caption));
+        }
     }
 }
 

package/loader-overlay/loader-overlay.component.d.ts

@@ -15,20 +15,21 @@ export declare class KbqLoaderOverlayCaption {
 export declare class KbqLoaderOverlay implements OnInit, OnDestroy {
     private elementRef;
     private renderer;
-    private fixedTop;
     text: string;
     caption: string;
+    compact: boolean;
+    transparent: boolean;
     get isExternalIndicator(): boolean;
     get isExternalText(): boolean;
     get isExternalCaption(): boolean;
-    get isFixedTop(): boolean;
     get isEmpty(): boolean;
+    get spinnerSize(): string;
     externalIndicator: KbqLoaderOverlayIndicator | null;
     externalText: KbqLoaderOverlayText | null;
     externalCaption: KbqLoaderOverlayCaption | null;
-    constructor(elementRef: ElementRef, renderer: Renderer2, fixedTop: string | null);
+    constructor(elementRef: ElementRef, renderer: Renderer2);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlay, [null, null, { attribute: "fixed-top"; optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqLoaderOverlay, "kbq-loader-overlay", never, { "text": { "alias": "text"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[kbq-loader-overlay-indicator]", "[kbq-loader-overlay-text]", "[kbq-loader-overlay-caption]"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlay, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqLoaderOverlay, "kbq-loader-overlay", never, { "text": { "alias": "text"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[kbq-loader-overlay-indicator]", "[kbq-loader-overlay-text]", "[kbq-loader-overlay-caption]"], false, never>;
 }

package/loader-overlay/loader-overlay.scss

@@ -10,6 +10,13 @@ $tokens: meta.module-variables(tokens) !default;
     position: relative;
 }
 
+.kbq-loader-overlay-text,
+.kbq-loader-overlay-caption {
+    max-width: 90%;
+
+    text-align: center;
+}
+
 .kbq-loader-overlay {
     position: absolute;
 
@@ -34,31 +41,55 @@ $tokens: meta.module-variables(tokens) !default;
         max-width: 80%;
     }
 
-    &.kbq-loader-overlay_fixed-top {
-        justify-content: unset;
-
-        & .kbq-loader-overlay__container {
-            margin-top: map.get($tokens, loader-overlay-size-fixed-top-padding);
+    &.kbq-loader-overlay_big {
+        padding-left: var(
+            --kbq-loader-overlay-size-big-overlay-padding-horizontal,
+            map.get($tokens, loader-overlay-size-big-overlay-padding-horizontal)
+        );
+
+        padding-right: var(
+            --kbq-loader-overlay-size-big-overlay-padding-horizontal,
+            map.get($tokens, loader-overlay-size-big-overlay-padding-horizontal)
+        );
+
+        & .kbq-progress-spinner {
+            margin-bottom: var(
+                --kbq-loader-overlay-size-big-loader-margin-bottom,
+                map.get($tokens, loader-overlay-size-big-loader-margin-bottom)
+            );
         }
-    }
 
-    &.kbq-loader-overlay_center:not(.kbq-loader-overlay_empty) .kbq-loader-overlay__container {
-        transform: translateY(map.get($tokens, loader-overlay-size-center-optical-compensation));
+        & .kbq-loader-overlay-text {
+            margin-bottom: var(
+                --kbq-loader-overlay-size-big-content-content-gap-vertical,
+                map.get($tokens, loader-overlay-size-big-content-content-gap-vertical)
+            );
+        }
     }
-}
-
-.kbq-loader-overlay-text {
-    margin-top: map.get($tokens, size-s);
 
-    max-width: map.get($tokens, loader-overlay-size-text-max-width);
-
-    text-align: center;
-}
-
-.kbq-loader-overlay-caption {
-    margin-top: map.get($tokens, size-3xs);
-
-    max-width: map.get($tokens, loader-overlay-size-text-max-width);
+    &.kbq-loader-overlay_compact {
+        padding-left: var(
+            --kbq-loader-overlay-size-compact-overlay-padding-horizontal,
+            map.get($tokens, loader-overlay-size-compact-overlay-padding-horizontal)
+        );
+
+        padding-right: var(
+            --kbq-loader-overlay-size-compact-overlay-padding-horizontal,
+            map.get($tokens, loader-overlay-size-compact-overlay-padding-horizontal)
+        );
+
+        & .kbq-progress-spinner {
+            margin-bottom: var(
+                --kbq-loader-overlay-size-compact-loader-margin-bottom,
+                map.get($tokens, loader-overlay-size-compact-loader-margin-bottom)
+            );
+        }
 
-    text-align: center;
+        & .kbq-loader-overlay-text {
+            margin-bottom: var(
+                --kbq-loader-overlay-size-compact-content-content-gap-vertical,
+                map.get($tokens, loader-overlay-size-compact-content-content-gap-vertical)
+            );
+        }
+    }
 }

package/modal/_modal-confirm.scss

@@ -8,7 +8,7 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-confirm {
     .kbq-modal-header {
-        display: none;
+
     }
 
     .kbq-modal-close {
@@ -16,38 +16,30 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-modal-body {
-        padding: var(--kbq-modal-confirm-size-padding, map.get($tokens, modal-confirm-size-padding));
-    }
+        padding-right: var(
+            --kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal)
+        );
 
-    // TODO
-    &-body-wrapper {
-        //.clearfix()
-        zoom: 1;
+        padding-left: var(
+            --kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal)
+        );
 
-        &:before,
-        &:after {
-            content: "";
-            display: table;
-        }
-
-        &:after {
-            clear: both;
-        }
+        padding-bottom: var(
+            --kbq-modal-size-content-padding-bottom, map.get($tokens, modal-size-content-padding-bottom)
+        );
     }
 
-    &-body {
-        .kbq-confirm-title {
-            display: block;
-            overflow: auto;
-        }
-    }
+    .kbq-confirm-footer {
+        display: flex;
 
-    .kbq-confirm-btns {
-        border-radius: var(--kbq-modal-footer-size-border-radius, map.get($tokens, modal-footer-size-border-radius));
-        text-align: right;
+        padding:
+            var(--kbq-modal-size-footer-padding-top, map.get($tokens, modal-size-footer-padding-top))
+            var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontalt))
+            var(--kbq-modal-size-footer-padding-bottom, map.get($tokens, modal-size-footer-padding-bottom))
+            var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontal));
 
-        button + button, button:only-child {
-            margin: 16px;
-        }
+        gap: var(
+            --kbq-modal-size-footer-content-gap-horizontal, map.get($tokens, modal-size-footer-content-gap-horizontal)
+        );
     }
 }

package/modal/_modal-theme.scss

@@ -11,9 +11,11 @@
     $background: map.get($theme, background);
 
     $modal: map.get(map.get($theme, components), modal);
-    $popup: map.get(map.get($theme, components), popup);
 
     .kbq-modal {
+        background: map.get($modal, container-background);
+        box-shadow: map.get($modal, container-box-shadow);
+
         .kbq-modal-content {
             // У модалки должен быть фон background. Чтобы поповеры и дропдауны было видно поверх модалки
             background-color: map.get($background, background);
@@ -26,9 +28,6 @@
         }
 
         .kbq-modal-header {
-            border-bottom-width: var(--kbq-modal-size-border-width, map.get($tokens, modal-size-border-width));
-            border-bottom-style: solid;
-            border-bottom-color: map.get($modal, header-border);
         }
 
         .kbq-modal-header.kbq-modal-body_top-overflow {
@@ -40,51 +39,22 @@
         }
 
         .kbq-modal-footer {
-            border-top-width: var(--kbq-modal-size-border-width, map.get($tokens, modal-size-border-width));
-            border-top-style: solid;
-            border-top-color: map.get($modal, footer-border);
-
-            background-color: map.get($popup, footer-background);
-        }
-
-        .kbq-modal-close {
-            border: var(--kbq-modal-size-border-width, map.get($tokens, modal-size-border-width)) solid transparent;
-
-            &:hover {
-                .kbq-button-overlay {
-                    background: map.get($background, overlay-hover);
-                }
-
-                .kbq-icon {
-                    color: inherit;
-                }
-            }
         }
     }
 
     .kbq-modal-mask {
         background-color: map.get($modal, background-mask);
     }
-
-    .kbq-confirm {
-        .kbq-confirm-btns {
-            border-top-width: var(--kbq-modal-size-border-width, map.get($tokens, modal-size-border-width));
-            border-top-style: solid;
-            border-top-color: map.get($modal, footer-border);
-
-            background-color: map.get($popup, footer-background);
-        }
-    }
 }
 
 @mixin kbq-modal-typography($config) {
     $tokens: map.get($config, tokens);
 
     .kbq-modal-title {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, modal-header-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, modal-font-header));
     }
 
     .kbq-modal-body {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, modal-body-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, modal-font-content));
     }
 }