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

package/link/_link-theme.scss

@@ -4,162 +4,163 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
-@mixin kbq-link($foreground, $link, $tokens) {
-    display: inline-block;
+@mixin kbq-link-geometry($tokens) {
+    display: inline;
 
-    color: map.get($link, text);
     text-decoration: none;
     cursor: pointer;
 
-    transition: color ease-out 300ms;
+    outline-offset: var(
+        --kbq-link-size-state-focused-outline-offset, map.get($tokens, link-size-state-focused-outline-offset)
+    );
 
     &:focus {
         outline: none;
     }
 
-    /* stylelint-disable no-descending-specificity */
-    &:hover {
-        color: map.get($link, state-hover-text);
-        transition: color 0ms;
-
-        &.kbq-text-only,
-        &.kbq-text-with-icon .kbq-link__text {
-            border-bottom-color: map.get($link, state-hover-border-bottom);
-        }
-
-        & .kbq-icon {
-            color: map.get($link, state-hover-text);
-        }
-    }
-
-    &:active {
-        color: map.get($link, state-active-text);
-
-        &.kbq-text-only,
-        &.kbq-text-with-icon .kbq-link__text {
-            border-bottom-color: map.get($link, state-active-border-bottom);
-        }
-    }
-
-    &.cdk-keyboard-focused {
-        outline: map.get($link, state-focused-outline) solid map.get($link, link-size-state-focused-outline-width);
-
-        outline-offset: map.get($link, link-size-state-focused-outline-offset);
-    }
-
-    & .kbq-icon {
-        color: inherit;
-    }
-
     &.kbq-text-only,
     &.kbq-text-with-icon .kbq-link__text {
         border-bottom-style: solid;
         border-bottom-width: 1px;
-        border-bottom-color: map.get($link, border-bottom);
     }
 
     &.kbq-text-with-icon .kbq-link__text {
         &:not(:first-child) {
-            margin-left: map.get($tokens, link-size-normal-content-padding);
+            margin-left: var(
+                --kbq-link-size-normal-content-padding, map.get($tokens, link-size-normal-content-padding)
+            );
         }
 
         &:not(:last-child) {
-            margin-right: map.get($tokens, link-size-normal-content-padding);
+            margin-right: var(
+                --kbq-link-size-normal-content-padding, map.get($tokens, link-size-normal-content-padding)
+            );
         }
     }
 
-    &.kbq-link_pseudo {
-        display: inline;
-
-        &.kbq-text-only,
+    &.kbq-link_compact {
         &.kbq-text-with-icon .kbq-link__text {
-            border-bottom: none !important;
-        }
-    }
+            &:not(:first-child) {
+                margin-left: var(
+                    --kbq-link-size-compact-content-padding, map.get($tokens, link-size-compact-content-padding)
+                );
+            }
 
-    &.kbq-link_no-underline {
-        &.kbq-text-only,
-        &.kbq-text-with-icon .kbq-link__text {
-            border-bottom-color: transparent;
+            &:not(:last-child) {
+                margin-right: var(
+                    --kbq-link-size-compact-content-padding, map.get($tokens, link-size-compact-content-padding)
+                );
+            }
         }
     }
 
+    /* stylelint-disable no-descending-specificity */
     &.kbq-link_big {
         &.kbq-text-with-icon .kbq-link__text {
             &:not(:first-child) {
-                margin-left: map.get($tokens, link-size-big-content-padding);
+                margin-left: var(--kbq-link-size-big-content-padding, map.get($tokens, link-size-big-content-padding));
             }
 
             &:not(:last-child) {
-                margin-right: map.get($tokens, link-size-big-content-padding);
+                margin-right: var(--kbq-link-size-big-content-padding, map.get($tokens, link-size-big-content-padding));
             }
         }
     }
 
-    &[disabled] {
-        color: map.get($foreground, text-disabled);
-
-        cursor: default;
-        pointer-events: none;
 
+    &.kbq-link_pseudo {
         &.kbq-text-only,
         &.kbq-text-with-icon .kbq-link__text {
-            border-bottom-color: map.get($link, border-bottom);
+            border-bottom: none;
         }
+    }
 
-        & .kbq-icon {
-            color: map.get($foreground, text-disabled);
+    &.kbq-link_no-underline {
+        &.kbq-text-only,
+        &.kbq-text-with-icon .kbq-link__text {
+            border-bottom-color: transparent;
         }
-        /* stylelint-enable no-descending-specificity */
     }
+    /* stylelint-enable no-descending-specificity */
 }
 
-@mixin kbq-link-theme($theme) {
-    $foreground: map.get($theme, foreground);
+@mixin kbq-link-state($state) {
+    color: map.get($state, text);
 
+    &.kbq-text-only,
+    &.kbq-text-with-icon .kbq-link__text {
+        border-bottom-color: map.get($state, border-bottom);
+    }
+
+    & .kbq-icon {
+        color: map.get($state, text) !important;
+    }
+}
+
+@mixin kbq-link-theme($theme) {
     $link: map.get(map.get($theme, components), link);
 
     $tokens: map.get($theme, tokens);
 
-    .kbq-link:not(.kbq-link_use-visited) {
-        &:visited {
-            color: map.get($link, text);
+    .kbq-link {
+        @include kbq-link-geometry($tokens);
+
+        $default: map.get($link, default);
+        @include kbq-link-state($default);
+
+        transition: color ease-out 300ms;
+
+        &:hover {
+            transition: color 0ms;
+
+            $hover: map.get($link, hover);
+            @include kbq-link-state($hover);
         }
 
-        @include kbq-link($foreground, $link, $tokens);
-    }
+        &:active {
+            $active: map.get($link, active);
+            @include kbq-link-state($active);
+        }
 
-    .kbq-link.kbq-link_use-visited {
-        &:visited {
-            color: map.get($link, state-visited-text);
+        &.kbq-link_use-visited:not(.kbq-disabled):visited {
+            $visited: map.get($link, visited);
+            @include kbq-link-state($visited);
 
-            &.kbq-text-only,
-            &.kbq-text-with-icon .kbq-link__text {
-                border-bottom-color: map.get($link, state-visited-border-bottom);
+            &:hover {
+                $visited-hover: map.get($link, visited-hover);
+                @include kbq-link-state($visited-hover);
             }
 
-            & .kbq-icon {
-                color: map.get($link, state-visited-text);
+            &:active {
+                $visited-active: map.get($link, visited-active);
+                @include kbq-link-state($visited-active);
             }
         }
 
-        @include kbq-link($foreground, $link, $tokens);
-    }
-
-    @media print {
-        .kbq-link_print:not([disabled]) {
-            color: map.get($foreground, text);
+        &.cdk-keyboard-focused {
+            $focused: map.get($link, focused);
+            outline: map.get($focused, outline) solid;
+        }
 
-            &.kbq-text-only,
-            &.kbq-text-with-icon .kbq-link__text {
-                border-bottom: none;
-            }
+        &.kbq-disabled {
+            cursor: default;
+            pointer-events: none;
 
-            &::after {
-                color: map.get($foreground, text);
+            $disabled: map.get($link, disabled);
+            @include kbq-link-state($disabled);
+        }
 
-                content: ":\a" attr(print);
-                white-space: pre;
+        @media print {
+            .kbq-link_print:not(.kbq-disabled) {
+                &.kbq-text-only,
+                &.kbq-text-with-icon .kbq-link__text {
+                    border-bottom: none;
+                }
+
+                &::after {
+                    content: ":\a" attr(print);
+                    white-space: pre;
+                }
             }
         }
     }
@@ -170,6 +171,14 @@
 
     .kbq-link {
         @include kbq-typography-level-to-styles($config, map.get($tokens, link-font-normal));
+
+        & .kbq-icon {
+            line-height: inherit;
+        }
+    }
+
+    .kbq-link.kbq-link_compact {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, link-font-compact));
     }
 
     .kbq-link.kbq-link_big {

package/link/link.component.d.ts

@@ -22,12 +22,12 @@ 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;
+    get compact(): any;
+    set compact(value: any);
+    private _compact;
     get useVisited(): any;
     set useVisited(value: any);
     private _useVisited;
@@ -43,5 +43,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]", ["kbqLink"], { "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; }; "compact": { "alias": "compact"; "required": false; }; "useVisited": { "alias": "useVisited"; "required": false; }; "print": { "alias": "print"; "required": false; }; }, {}, ["icon"], never, false, never>;
 }

package/list/_list-theme.scss

@@ -4,35 +4,50 @@
 @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) {
+            @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));
 
-        &.kbq-disabled,
-        &[disabled] {
-            background: transparent;
+            &:hover:not(.kbq-disabled) {
+                @include kbq-list-item(map.get($list-item, selected-hover));
+            }
+        }
 
-            color: map.get($foreground, text-disabled);
+        &.kbq-disabled {
+            @include kbq-list-item(map.get($list-item, disabled));
         }
     }
 }
@@ -42,6 +57,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

@@ -114,7 +114,11 @@ export declare class KbqListSelection extends KbqListSelectionMixinBase implemen
     private selectAllOptions;
     private copyActiveOption;
     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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListSelection, "kbq-list-selection", ["kbqListSelection"], { "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
@@ -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,33 +19,21 @@ $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) {
+        cursor: pointer;
     }
 
     & .kbq-option-action {
         display: none;
     }
 
-    &:not([disabled]):hover,
-    &:not([disabled]).kbq-focused,
-    &:not([disabled]).kbq-action-button-focused {
+    &:not(.kbq-disabled):hover,
+    &:not(.kbq-disabled).kbq-focused,
+    &:not(.kbq-disabled).kbq-action-button-focused {
         & .kbq-option-action {
             display: flex;
         }
     }
 }
-
-.kbq-list-option:not([disabled]):not(.kbq-disabled){
-    cursor: pointer;
-}

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

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/variables';
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -10,6 +11,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;
 
@@ -23,6 +31,8 @@ $tokens: meta.module-variables(tokens) !default;
     bottom: 0;
     left: 0;
 
+    z-index: variables.$z-index-loader-overlay;
+
     & .kbq-loader-overlay__container {
         display: flex;
         flex-direction: column;
@@ -34,31 +44,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)
+            );
+        }
+    }
 }