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

package/markdown/_markdown-theme.scss

@@ -14,8 +14,8 @@
     $markdown: map.get(map.get($theme, components), markdown);
 
     .kbq-markdown {
-        color: map.get($foreground, text);
-        background: map.get($background, background);;
+        color: map.get($foreground, contrast);
+        background: map.get($background, bg);
 
         // h1, h2, h3, h4, h5, h6
         @for $i from 1 through 6 {

package/modal/README.md

@@ -6,10 +6,10 @@ The dialog is currently divided into 3 modes - `default`, `confirm box`, `custom
 ```ts
 showConfirm() {
     this.modalService.success({
-        mcContent   : 'Save changes made to the request "All assets with Windows"?',
-        mcOkText    : 'Save',
-        mcCancelText: 'Cancel',
-        mcOnOk      : () => console.log('OK')
+        kbqContent   : 'Save changes made to the request "All assets with Windows"?',
+        kbqOkText    : 'Save',
+        kbqCancelText: 'Cancel',
+        kbqOnOk      : () => console.log('OK')
     });
 }
 ```
@@ -18,7 +18,7 @@ showConfirm() {
 
 ```ts
 let dialogRef = modalService.open({
-    mcComponent: CustomComponent
+    kbqComponent: CustomComponent
 });
 ```
 

package/modal/_modal-confirm.scss

@@ -7,47 +7,15 @@
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-confirm {
-    .kbq-modal-header {
-        display: none;
-    }
-
     .kbq-modal-close {
         display: none;
     }
 
-    .kbq-modal-body {
-        padding: var(--kbq-modal-confirm-size-padding, map.get($tokens, modal-confirm-size-padding));
-    }
-
-    // TODO
-    &-body-wrapper {
-        //.clearfix()
-        zoom: 1;
-
-        &:before,
-        &:after {
-            content: "";
-            display: table;
-        }
-
-        &:after {
-            clear: both;
-        }
-    }
-
-    &-body {
-        .kbq-confirm-title {
-            display: block;
-            overflow: auto;
-        }
-    }
-
-    .kbq-confirm-btns {
-        border-radius: var(--kbq-modal-footer-size-border-radius, map.get($tokens, modal-footer-size-border-radius));
-        text-align: right;
+    .kbq-confirm-footer {
+        display: flex;
 
-        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

@@ -5,30 +5,24 @@
 
 
 @mixin kbq-modal-theme($theme) {
-    $tokens: map.get($theme, tokens);
-
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     $modal: map.get(map.get($theme, components), modal);
-    $popup: map.get(map.get($theme, components), popup);
 
     .kbq-modal {
-        .kbq-modal-content {
-            // У модалки должен быть фон background. Чтобы поповеры и дропдауны было видно поверх модалки
-            background-color: map.get($background, background);
+        background: map.get($modal, container-background);
+        box-shadow: map.get($modal, container-box-shadow);
 
-            box-shadow: map.get($modal, shadow);
-        }
+        .kbq-modal-header {
+            & .kbq-modal-title {
+                color: map.get($modal, header);
+            }
 
-        .kbq-modal-title {
-            color: map.get($foreground, text);
+            & .kbq-modal-close {
+                color: map.get($modal, close-button);
+            }
         }
 
-        .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-content {
+            color: map.get($modal, content);
         }
 
         .kbq-modal-header.kbq-modal-body_top-overflow {
@@ -38,42 +32,10 @@
         .kbq-modal-footer.kbq-modal-body_bottom-overflow {
             box-shadow: map.get($modal, body-bottom-shadow);
         }
-
-        .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);
-        }
+        background-color: map.get($modal, overlay);
     }
 }
 
@@ -81,10 +43,10 @@
     $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));
     }
 }

package/modal/modal-ref.class.d.ts

@@ -11,12 +11,12 @@ export declare abstract class KbqModalRef<T = any, R = any> {
     abstract close(result?: R): void;
     abstract destroy(result?: R): void;
     /**
-     * Trigger the mcOnOk/mcOnCancel by manual
+     * Trigger the kbqOnOk/kbqOnCancel by manual
      */
     abstract triggerOk(): void;
     abstract triggerCancel(): void;
     /**
-     * Return the component instance of mcContent when specify mcContent as a Component
+     * Return the component instance of kbqContent when specify kbqContent as a Component
      * Note: this method may return undefined if the Component has not ready yet.
      * (it only available after Modal's ngOnInit)
      */

package/modal/modal.component.d.ts

@@ -1,13 +1,14 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef, Type, ViewContainerRef } from '@angular/core';
-import { ThemePalette } from '@koobiq/components/core';
+import { KbqComponentColors } from '@koobiq/components/core';
 import { Observable } from 'rxjs';
 import { KbqModalControlService } from './modal-control.service';
 import { KbqModalRef } from './modal-ref.class';
-import { IModalButtonOptions, IModalOptions, ModalSize, ModalType, OnClickCallback } from './modal.type';
+import { IModalButtonOptions, ModalOptions, ModalSize, ModalType, OnClickCallback } from './modal.type';
 import * as i0 from "@angular/core";
 export declare const MODAL_ANIMATE_DURATION = 200;
-export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T, R> implements OnInit, OnChanges, AfterViewInit, OnDestroy, IModalOptions {
+export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T, R> implements OnInit, OnChanges, AfterViewInit, OnDestroy, ModalOptions {
     private overlay;
     private renderer;
     private cfr;
@@ -15,56 +16,55 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     private viewContainer;
     private modalControl;
     private changeDetector;
+    private focusMonitor;
     private document;
-    themePalette: typeof ThemePalette;
-    mcModalType: ModalType;
-    mcComponent: Type<T>;
-    mcContent: string | TemplateRef<{}> | Type<T>;
-    mcComponentParams: any;
-    mcFooter: string | TemplateRef<{}> | IModalButtonOptions<T>[];
-    get mcVisible(): boolean;
-    set mcVisible(value: boolean);
-    private _mcVisible;
-    mcVisibleChange: EventEmitter<boolean>;
-    mcZIndex: number;
-    mcWidth: number | string;
-    mcSize: ModalSize;
-    mcWrapClassName: string;
-    mcClassName: string;
-    mcStyle: object;
-    mcTitle: string | TemplateRef<{}>;
-    mcCloseByESC: boolean;
-    get mcClosable(): boolean;
-    set mcClosable(value: boolean);
-    private _mcClosable;
-    get mcMask(): boolean;
-    set mcMask(value: boolean);
-    private _mcMask;
-    get mcMaskClosable(): boolean;
-    set mcMaskClosable(value: boolean);
-    private _mcMaskClosable;
-    mcMaskStyle: object;
-    mcBodyStyle: object;
-    mcAfterOpen: EventEmitter<void>;
-    mcAfterClose: EventEmitter<R>;
-    mcOkText: string;
-    mcOkType: string;
-    mcRestoreFocus: boolean;
-    get mcOkLoading(): boolean;
-    set mcOkLoading(value: boolean);
-    private _mcOkLoading;
-    mcOnOk: EventEmitter<T> | OnClickCallback<T>;
-    mcCancelText: string;
-    get mcCancelLoading(): boolean;
-    set mcCancelLoading(value: boolean);
-    private _mcCancelLoading;
-    mcOnCancel: EventEmitter<T> | OnClickCallback<T>;
+    componentColors: typeof KbqComponentColors;
+    kbqModalType: ModalType;
+    kbqComponent: Type<T>;
+    kbqContent: string | TemplateRef<{}> | Type<T>;
+    kbqComponentParams: any;
+    kbqFooter: string | TemplateRef<{}> | IModalButtonOptions<T>[];
+    get kbqVisible(): boolean;
+    set kbqVisible(value: boolean);
+    private _kbqVisible;
+    kbqVisibleChange: EventEmitter<boolean>;
+    kbqZIndex: number;
+    kbqWidth: number | string;
+    kbqSize: ModalSize;
+    kbqWrapClassName: string;
+    kbqClassName: string;
+    kbqStyle: object;
+    kbqTitle: string | TemplateRef<{}>;
+    kbqCloseByESC: boolean;
+    get kbqClosable(): boolean;
+    set kbqClosable(value: boolean);
+    private _kbqClosable;
+    get kbqMask(): boolean;
+    set kbqMask(value: boolean);
+    private _kbqMask;
+    get kbqMaskClosable(): boolean;
+    set kbqMaskClosable(value: boolean);
+    private _kbqMaskClosable;
+    kbqMaskStyle: object;
+    kbqBodyStyle: object;
+    kbqAfterOpen: EventEmitter<void>;
+    kbqAfterClose: EventEmitter<R>;
+    kbqOkText: string;
+    kbqOkType: KbqComponentColors;
+    kbqRestoreFocus: boolean;
+    get kbqOkLoading(): boolean;
+    set kbqOkLoading(value: boolean);
+    private _kbqOkLoading;
+    kbqOnOk: EventEmitter<T> | OnClickCallback<T>;
+    kbqCancelText: string;
+    get kbqCancelLoading(): boolean;
+    set kbqCancelLoading(value: boolean);
+    private _kbqCancelLoading;
+    kbqOnCancel: EventEmitter<T> | OnClickCallback<T>;
     modalContainer: ElementRef;
     bodyContainer: ViewContainerRef;
     autoFocusedButtons: QueryList<ElementRef>;
     modalBody: ElementRef;
-    isTopOverflow: boolean;
-    isBottomOverflow: boolean;
     maskAnimationClassMap: object;
     modalAnimationClassMap: object;
     transformOrigin: string;
@@ -74,16 +74,16 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     get cancelText(): string;
     get hidden(): boolean;
     private focusedElementBeforeOpen;
+    private previouslyFocusedElementOrigin;
     private contentComponentRef;
     private animationState;
     private container;
-    constructor(overlay: Overlay, renderer: Renderer2, cfr: ComponentFactoryResolver, elementRef: ElementRef, viewContainer: ViewContainerRef, modalControl: KbqModalControlService, changeDetector: ChangeDetectorRef, document: any);
-    mcGetContainer: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef);
+    constructor(overlay: Overlay, renderer: Renderer2, cfr: ComponentFactoryResolver, elementRef: ElementRef, viewContainer: ViewContainerRef, modalControl: KbqModalControlService, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor, document: any);
+    kbqGetContainer: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    checkOverflow(): void;
     open(): void;
     close(result?: R): void;
     destroy(result?: R): void;
@@ -100,6 +100,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     onKeyDown(event: KeyboardEvent): void;
     onClickCloseBtn(): void;
     onClickOkCancel(type: 'ok' | 'cancel'): void;
+    handleCloseResult(triggerType: 'ok' | 'cancel', canClose: (doClose: boolean | void | {}) => boolean): void;
     isNonEmptyString(value: {}): boolean;
     isTemplateRef(value: {}): boolean;
     isComponent(value: {}): boolean;
@@ -124,5 +125,5 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
      */
     private changeBodyOverflow;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalComponent<any, any>, "kbq-modal", never, { "mcModalType": { "alias": "mcModalType"; "required": false; }; "mcComponent": { "alias": "mcComponent"; "required": false; }; "mcContent": { "alias": "mcContent"; "required": false; }; "mcComponentParams": { "alias": "mcComponentParams"; "required": false; }; "mcFooter": { "alias": "mcFooter"; "required": false; }; "mcVisible": { "alias": "mcVisible"; "required": false; }; "mcZIndex": { "alias": "mcZIndex"; "required": false; }; "mcWidth": { "alias": "mcWidth"; "required": false; }; "mcSize": { "alias": "mcSize"; "required": false; }; "mcWrapClassName": { "alias": "mcWrapClassName"; "required": false; }; "mcClassName": { "alias": "mcClassName"; "required": false; }; "mcStyle": { "alias": "mcStyle"; "required": false; }; "mcTitle": { "alias": "mcTitle"; "required": false; }; "mcCloseByESC": { "alias": "mcCloseByESC"; "required": false; }; "mcClosable": { "alias": "mcClosable"; "required": false; }; "mcMask": { "alias": "mcMask"; "required": false; }; "mcMaskClosable": { "alias": "mcMaskClosable"; "required": false; }; "mcMaskStyle": { "alias": "mcMaskStyle"; "required": false; }; "mcBodyStyle": { "alias": "mcBodyStyle"; "required": false; }; "mcOkText": { "alias": "mcOkText"; "required": false; }; "mcOkType": { "alias": "mcOkType"; "required": false; }; "mcRestoreFocus": { "alias": "mcRestoreFocus"; "required": false; }; "mcOkLoading": { "alias": "mcOkLoading"; "required": false; }; "mcOnOk": { "alias": "mcOnOk"; "required": false; }; "mcCancelText": { "alias": "mcCancelText"; "required": false; }; "mcCancelLoading": { "alias": "mcCancelLoading"; "required": false; }; "mcOnCancel": { "alias": "mcOnCancel"; "required": false; }; "mcGetContainer": { "alias": "mcGetContainer"; "required": false; }; }, { "mcVisibleChange": "mcVisibleChange"; "mcAfterOpen": "mcAfterOpen"; "mcAfterClose": "mcAfterClose"; "mcOnOk": "mcOnOk"; "mcOnCancel": "mcOnCancel"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalComponent<any, any>, "kbq-modal", never, { "kbqModalType": { "alias": "kbqModalType"; "required": false; }; "kbqComponent": { "alias": "kbqComponent"; "required": false; }; "kbqContent": { "alias": "kbqContent"; "required": false; }; "kbqComponentParams": { "alias": "kbqComponentParams"; "required": false; }; "kbqFooter": { "alias": "kbqFooter"; "required": false; }; "kbqVisible": { "alias": "kbqVisible"; "required": false; }; "kbqZIndex": { "alias": "kbqZIndex"; "required": false; }; "kbqWidth": { "alias": "kbqWidth"; "required": false; }; "kbqSize": { "alias": "kbqSize"; "required": false; }; "kbqWrapClassName": { "alias": "kbqWrapClassName"; "required": false; }; "kbqClassName": { "alias": "kbqClassName"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "kbqTitle": { "alias": "kbqTitle"; "required": false; }; "kbqCloseByESC": { "alias": "kbqCloseByESC"; "required": false; }; "kbqClosable": { "alias": "kbqClosable"; "required": false; }; "kbqMask": { "alias": "kbqMask"; "required": false; }; "kbqMaskClosable": { "alias": "kbqMaskClosable"; "required": false; }; "kbqMaskStyle": { "alias": "kbqMaskStyle"; "required": false; }; "kbqBodyStyle": { "alias": "kbqBodyStyle"; "required": false; }; "kbqOkText": { "alias": "kbqOkText"; "required": false; }; "kbqOkType": { "alias": "kbqOkType"; "required": false; }; "kbqRestoreFocus": { "alias": "kbqRestoreFocus"; "required": false; }; "kbqOkLoading": { "alias": "kbqOkLoading"; "required": false; }; "kbqOnOk": { "alias": "kbqOnOk"; "required": false; }; "kbqCancelText": { "alias": "kbqCancelText"; "required": false; }; "kbqCancelLoading": { "alias": "kbqCancelLoading"; "required": false; }; "kbqOnCancel": { "alias": "kbqOnCancel"; "required": false; }; "kbqGetContainer": { "alias": "kbqGetContainer"; "required": false; }; }, { "kbqVisibleChange": "kbqVisibleChange"; "kbqAfterOpen": "kbqAfterOpen"; "kbqAfterClose": "kbqAfterClose"; "kbqOnOk": "kbqOnOk"; "kbqOnCancel": "kbqOnCancel"; }, never, ["*"], false, never>;
 }

package/modal/modal.module.d.ts

@@ -7,8 +7,9 @@ import * as i5 from "@angular/cdk/overlay";
 import * as i6 from "@angular/cdk/a11y";
 import * as i7 from "@koobiq/components/button";
 import * as i8 from "@koobiq/components/icon";
+import * as i9 from "@koobiq/components/title";
 export declare class KbqModalModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqModalModule, [typeof i1.KbqModalComponent, typeof i2.KbqModalTitle, typeof i2.KbqModalBody, typeof i2.KbqModalFooter, typeof i3.CssUnitPipe, typeof i2.KbqModalMainAction], [typeof i4.CommonModule, typeof i5.OverlayModule, typeof i6.A11yModule, typeof i7.KbqButtonModule, typeof i8.KbqIconModule], [typeof i1.KbqModalComponent, typeof i2.KbqModalTitle, typeof i2.KbqModalBody, typeof i2.KbqModalFooter, typeof i2.KbqModalMainAction]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqModalModule, [typeof i1.KbqModalComponent, typeof i2.KbqModalTitle, typeof i2.KbqModalBody, typeof i2.KbqModalFooter, typeof i3.CssUnitPipe, typeof i2.KbqModalMainAction], [typeof i4.CommonModule, typeof i5.OverlayModule, typeof i6.A11yModule, typeof i7.KbqButtonModule, typeof i8.KbqIconModule, typeof i9.KbqTitleModule], [typeof i1.KbqModalComponent, typeof i2.KbqModalTitle, typeof i2.KbqModalBody, typeof i2.KbqModalFooter, typeof i2.KbqModalMainAction]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqModalModule>;
 }

package/modal/modal.scss

@@ -14,7 +14,9 @@ $tokens: meta.module-variables(tokens) !default;
 
     position: relative;
 
-    top: var(--kbq-modal-size-top, map.get($tokens, modal-size-top));
+    top: 48px;
+
+    border-radius: var(--kbq-modal-size-border-radius, map.get($tokens, modal-size-border-radius));
 
     width: auto;
 
@@ -31,26 +33,30 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.kbq-modal_small {
-        width: var(--kbq-modal-size-small, map.get($tokens, modal-size-small));
+        width: var(--kbq-modal-size-small-width, map.get($tokens, modal-size-small-width));
     }
 
     &.kbq-modal_medium {
-        width: var(--kbq-modal-size-medium, map.get($tokens, modal-size-medium));
+        width: var(--kbq-modal-size-medium-width, map.get($tokens, modal-size-medium-width));
     }
 
     &.kbq-modal_large {
-        width: var(--kbq-modal-size-large, map.get($tokens, modal-size-large));
+        width: var(--kbq-modal-size-large-width, map.get($tokens, modal-size-large-width));
     }
 
+    // todo реализуем когда будем делать 2.0, пока нет возможности отслеживать наличие/отстутствие футера
+    //&.kbq-modal_no-footer .kbq-modal-body {
+    //    padding-bottom: var(
+    //        --kbq-modal-size-content-padding-bottom-without-footer,
+    //        map.get($tokens, modal-size-content-padding-bottom-without-footer)
+    //    );
+    //}
+
     & .kbq-modal-close {
         position: absolute;
 
-        z-index: 10;
-        top: 0;
-        right: 0;
-
-        width: var(--kbq-modal-size-close-width, map.get($tokens, modal-size-close-width));
-        height: var(--kbq-modal-size-close-width, map.get($tokens, modal-size-close-width));
+        top: 16px;
+        right: 8px;
     }
 }
 
@@ -69,56 +75,69 @@ $tokens: meta.module-variables(tokens) !default;
     outline: 0;
 }
 
-.kbq-modal-title {
-    margin: 0;
-}
-
 .kbq-modal-content {
     position: relative;
 
     border-radius: var(--kbq-modal-size-border-radius, map.get($tokens, modal-size-border-radius));
 
     background-clip: padding-box;
-    background-color: white;
 }
 
 .kbq-modal-header {
     display: flex;
     align-items: center;
+    justify-content: space-between;
 
-    height: var(--kbq-modal-header-size-height, map.get($tokens, modal-header-size-height));
+    padding:
+        var(--kbq-modal-size-header-padding-vertical, map.get($tokens, modal-size-header-padding-vertical))
+        var(--kbq-modal-size-header-padding-right, map.get($tokens, modal-size-header-padding-right))
+        var(--kbq-modal-size-header-padding-vertical, map.get($tokens, modal-size-header-padding-vertical))
+        var(--kbq-modal-size-header-padding-left, map.get($tokens, modal-size-header-padding-left));
 
-    border-radius: var(--kbq-modal-header-size-border-radius, map.get($tokens, modal-header-size-border-radius));
+    & + .kbq-modal-body {
+        padding-top: var(--kbq-modal-size-content-padding-top, map.get($tokens, modal-size-content-padding-top));
+    }
+}
 
-    padding: var(--kbq-modal-header-size-padding, map.get($tokens, modal-header-size-padding));
+.kbq-modal-title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
 }
 
+/* stylelint-disable no-descending-specificity */
 .kbq-modal-body {
     display: block;
     overflow-y: auto;
 
-    max-height: var(--kbq-modal-body-size-max-height, map.get($tokens, modal-body-size-max-height));
+    max-height: calc(100vh - 260px);
 
-    padding: var(--kbq-modal-body-size-padding, map.get($tokens, modal-body-size-padding));
+    padding:
+        var(
+            --kbq-modal-size-content-padding-top-without-header,
+            map.get($tokens, modal-size-content-padding-top-without-header)
+        )
+        var(--kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal))
+        var(--kbq-modal-size-content-padding-bottom, map.get($tokens, modal-size-content-padding-bottom))
+        var(--kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal));
 
     word-wrap: break-word;
 }
+/* stylelint-enable no-descending-specificity */
 
-.kbq-modal-footer {
+.kbq-modal-footer,
+.kbq-confirm-footer {
     display: flex;
     align-items: center;
-    justify-content: flex-end;
 
-    height: var(--kbq-modal-footer-size-height, map.get($tokens, modal-footer-size-height));
+    padding:
+        var(--kbq-modal-size-footer-padding-vertical, map.get($tokens, modal-size-footer-padding-vertical))
+        var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontal));
 
-    border-radius: var(--kbq-modal-footer-size-border-radius, map.get($tokens, modal-footer-size-border-radius));
-
-    padding: var(--kbq-modal-footer-size-padding, map.get($tokens, modal-footer-size-padding));
-
-    button + button {
-        margin-left: 16px;
-        margin-bottom: 0;
-    }
+    gap: var(
+        --kbq-modal-size-footer-content-gap-horizontal, map.get($tokens, modal-size-footer-content-gap-horizontal)
+    );
 }
 
 .kbq-modal-mask {

package/modal/modal.type.d.ts

@@ -6,44 +6,43 @@ export type ConfirmType = 'confirm' | 'success' | 'warn';
 export declare enum ModalSize {
     Small = "small",
     Medium = "medium",
-    Normal = "medium",
     Large = "large"
 }
-export interface IModalOptions<T = any, R = any> {
-    mcModalType?: ModalType;
-    mcVisible?: boolean;
-    mcZIndex?: number;
-    mcWidth?: number | string;
-    mcSize?: ModalSize;
-    mcWrapClassName?: string;
-    mcClassName?: string;
-    mcStyle?: object;
-    mcTitle?: string | TemplateRef<{}>;
-    mcContent?: string | TemplateRef<{}> | Type<T>;
-    mcComponent?: Type<T>;
-    mcComponentParams?: any;
-    mcClosable?: boolean;
-    mcMask?: boolean;
-    mcMaskClosable?: boolean;
-    mcMaskStyle?: object;
-    mcBodyStyle?: object;
-    mcFooter?: string | TemplateRef<{}> | IModalButtonOptions<T>[];
-    mcGetContainer?: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef) | null;
-    mcAfterOpen?: EventEmitter<void>;
-    mcAfterClose?: EventEmitter<R>;
-    mcCloseByESC?: boolean;
-    mcRestoreFocus?: boolean;
-    mcOkText?: string;
-    mcOkType?: string;
-    mcOkLoading?: boolean;
-    mcOnOk?: EventEmitter<T> | OnClickCallback<T>;
-    mcCancelText?: string;
-    mcCancelLoading?: boolean;
-    mcOnCancel?: EventEmitter<T> | OnClickCallback<T>;
+export interface ModalOptions<T = any, R = any> {
+    kbqModalType?: ModalType;
+    kbqVisible?: boolean;
+    kbqZIndex?: number;
+    kbqWidth?: number | string;
+    kbqSize?: ModalSize;
+    kbqWrapClassName?: string;
+    kbqClassName?: string;
+    kbqStyle?: object;
+    kbqTitle?: string | TemplateRef<{}>;
+    kbqContent?: string | TemplateRef<{}> | Type<T>;
+    kbqComponent?: Type<T>;
+    kbqComponentParams?: any;
+    kbqClosable?: boolean;
+    kbqMask?: boolean;
+    kbqMaskClosable?: boolean;
+    kbqMaskStyle?: object;
+    kbqBodyStyle?: object;
+    kbqFooter?: string | TemplateRef<{}> | IModalButtonOptions<T>[];
+    kbqGetContainer?: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef) | null;
+    kbqAfterOpen?: EventEmitter<void>;
+    kbqAfterClose?: EventEmitter<R>;
+    kbqCloseByESC?: boolean;
+    kbqRestoreFocus?: boolean;
+    kbqOkText?: string;
+    kbqOkType?: string;
+    kbqOkLoading?: boolean;
+    kbqOnOk?: EventEmitter<T> | OnClickCallback<T>;
+    kbqCancelText?: string;
+    kbqCancelLoading?: boolean;
+    kbqOnCancel?: EventEmitter<T> | OnClickCallback<T>;
 }
-export interface IModalOptionsForService<T = any> extends IModalOptions<T> {
-    mcOnOk?: OnClickCallback<T>;
-    mcOnCancel?: OnClickCallback<T>;
+export interface IModalOptionsForService<T = any> extends ModalOptions<T> {
+    kbqOnOk?: OnClickCallback<T>;
+    kbqOnCancel?: OnClickCallback<T>;
 }
 export interface IModalButtonOptions<T = any> {
     label: string;
@@ -56,6 +55,6 @@ export interface IModalButtonOptions<T = any> {
     loading?: boolean | ((this: IModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
     disabled?: boolean | ((this: IModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
     autoFocus?: boolean;
-    mcModalMainAction?: boolean;
+    kbqModalMainAction?: boolean;
     onClick?(this: IModalButtonOptions<T>, contentComponentInstance?: T): (void | {}) | Promise<(void | {})>;
 }

package/navbar/_navbar-theme.scss

@@ -61,7 +61,7 @@
             }
         }
 
-        &[disabled] {
+        &.kbq-disabled {
             pointer-events: none;
             cursor: default;
 
@@ -79,7 +79,7 @@
         &.cdk-keyboard-focused .kbq-navbar-item__overlay {
             box-shadow:
                 inset 0 0 0 2px map.get(map.get($theme, states), focused-color),
-                inset 0 0 0 3px map.get($background, background);
+                inset 0 0 0 3px map.get($background, bg);
         }
         /* stylelint-enable no-descending-specificity */
     }