@koobiq/components 17.0.0-rc.1 → 17.0.0-rc.11

package/navbar/navbar-brand.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -15,7 +15,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     display: flex;
 
-    border-radius: map.get($tokens, size-s);
+    border-radius: kbq-css-variable(size-s);
 
     &:after {
         position: absolute;
@@ -23,10 +23,7 @@ $tokens: meta.module-variables(tokens) !default;
 
         display: none;
 
-        border-radius: var(
-            --kbq-navbar-item-size-content-border-radius,
-            map.get($tokens, navbar-item-size-content-border-radius)
-        );
+        border-radius: kbq-css-variable(navbar-item-size-content-border-radius);
     }
 
     & .kbq-navbar-title {
@@ -39,21 +36,21 @@ a.kbq-navbar-brand {
 }
 
 .kbq-navbar-brand.kbq-horizontal {
-    padding: map.get($tokens, size-s) map.get($tokens, size-xs) map.get($tokens, size-s) map.get($tokens, size-xxs);
+    padding: kbq-css-variable(size-s) kbq-css-variable(size-xs) kbq-css-variable(size-s) kbq-css-variable(size-xxs);
 
     align-items: center;
 
-    gap: map.get($tokens, size-s);
+    gap: kbq-css-variable(size-s);
 
     &:after {
-        top: map.get($tokens, size-xxs);
-        right: map.get($tokens, size-xxs);
-        bottom: map.get($tokens, size-xxs);
+        top: kbq-css-variable(size-xxs);
+        right: kbq-css-variable(size-xxs);
+        bottom: kbq-css-variable(size-xxs);
         left: 0;
     }
 
     & .kbq-navbar-title {
-        padding-right: map.get($tokens, size-m);
+        padding-right: kbq-css-variable(size-m);
     }
 }
 
@@ -66,10 +63,10 @@ a.kbq-navbar-brand {
         display: block;
         align-items: center;
 
-        padding-top: map.get($tokens, size-xxs);
-        padding-bottom: map.get($tokens, size-xxs);
+        padding-top: kbq-css-variable(size-xxs);
+        padding-bottom: kbq-css-variable(size-xxs);
 
-        height: map.get($tokens, size-3xl);
+        height: kbq-css-variable(size-3xl);
 
         padding-left: 0;
 
@@ -81,10 +78,10 @@ a.kbq-navbar-brand {
     &.kbq-expanded {
         position: relative;
 
-        height: map.get($tokens, size-4xl);
-        width: map.get($tokens, size-4xl);
+        height: kbq-css-variable(size-4xl);
+        width: kbq-css-variable(size-4xl);
 
-        margin: map.get($tokens, size-l) map.get($tokens, size-l) map.get($tokens, size-4xl);
+        margin: kbq-css-variable(size-l) kbq-css-variable(size-l) kbq-css-variable(size-4xl);
 
         flex-direction: column;
 
@@ -96,7 +93,7 @@ a.kbq-navbar-brand {
         }
 
         & .kbq-navbar-logo {
-            min-height: map.get($tokens, size-4xl);
+            min-height: kbq-css-variable(size-4xl);
 
             justify-content: center;
         }
@@ -104,21 +101,21 @@ a.kbq-navbar-brand {
         & .kbq-navbar-title {
             position: absolute;
 
-            left: map.get($tokens, size-xxs);
-            bottom: - map.get($tokens, size-4xl);
+            left: kbq-css-variable(size-xxs);
+            top: kbq-css-variable(size-4xl);
             max-width: 200px;
         }
     }
 
     &.kbq-collapsed {
-        height: map.get($tokens, size-5xl);
-        width: map.get($tokens, size-5xl);
+        height: kbq-css-variable(size-5xl);
+        width: kbq-css-variable(size-5xl);
 
         &:after {
-            top: map.get($tokens, size-xxs);
-            right: map.get($tokens, size-xxs);
-            bottom: map.get($tokens, size-xxs);
-            left: map.get($tokens, size-xxs);
+            top: kbq-css-variable(size-xxs);
+            right: kbq-css-variable(size-xxs);
+            bottom: kbq-css-variable(size-xxs);
+            left: kbq-css-variable(size-xxs);
         }
 
         & .kbq-navbar-title {

package/navbar/navbar-divider.scss

@@ -1,11 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
+@use '../core/styles/common/tokens' as *;
 
 .kbq-navbar-divider {
     display: block;
@@ -14,7 +10,7 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-navbar-divider.kbq-vertical {
     height: 1px;
 
-    margin: map.get($tokens, size-s) map.get($tokens, size-l);
+    margin: kbq-css-variable(size-s) kbq-css-variable(size-l);
 }
 
 .kbq-navbar-divider.kbq-horizontal {
@@ -22,6 +18,6 @@ $tokens: meta.module-variables(tokens) !default;
 
     height: 12px;
 
-    margin-left: map.get($tokens, size-m);
-    margin-right: map.get($tokens, size-m);
+    margin-left: kbq-css-variable(size-m);
+    margin-right: kbq-css-variable(size-m);
 }

package/navbar/navbar-item.component.d.ts

@@ -128,13 +128,13 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger {
     get showVerticalDropDownAngle(): boolean;
     get showHorizontalDropDownAngle(): boolean;
     get hasCroppedText(): boolean;
-    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento);
+    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, focusMonitor: FocusMonitor, direction: Directionality, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento);
     ngAfterContentInit(): void;
     updateTooltip(): void;
     getTitleWidth(): number;
     onKeyDown($event: KeyboardEvent): void;
     private updateCollapsedState;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarItem, "kbq-navbar-item, [kbq-navbar-item]", ["kbqNavbarItem"], { "collapsedText": { "alias": "collapsedText"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; }, {}, ["title", "icon"], ["[kbq-icon]", "kbq-navbar-title, [kbq-navbar-title]", "*"], false, never>;
 }
 export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDestroy {
@@ -146,12 +146,12 @@ export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDest
     set content(content: string | TemplateRef<any>);
     get disabled(): boolean;
     protected modifier: TooltipModifier;
-    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, document: any);
+    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, focusMonitor: FocusMonitor, direction: Directionality, document: any);
     onKeydown($event: KeyboardEvent): void;
     ngOnDestroy(): void;
     toggle: () => void;
     private getWindow;
     private windowToggleHandler;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, [null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle", never, { "content": { "alias": "kbqCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]", "kbq-navbar-title"], false, never>;
 }

package/navbar/navbar-item.scss

@@ -3,14 +3,11 @@
 
 @use '../core/styles/common/list';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 @use 'navbar-item_vertical';
 @use 'navbar-item_horizontal';
 
-
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-navbar-item {
     box-sizing: border-box;
 
@@ -19,14 +16,24 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     align-items: center;
 
-    border-radius: var(
-        --kbq-navbar-item-size-content-border-radius,
-        map.get($tokens, navbar-item-size-content-border-radius)
-    );
+    border-radius: kbq-css-variable(navbar-item-size-content-border-radius);
 
     & .kbq-icon {
-        min-width: map.get($tokens, size-l);
-        min-height: map.get($tokens, size-l);
+        min-width: kbq-css-variable(size-l);
+        min-height: kbq-css-variable(size-l);
+    }
+
+    & .kbq-button-icon {
+        position: absolute;
+        padding-left: kbq-css-variable(size-xs);
+        padding-right: kbq-css-variable(size-xs);
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    &:before {
+        position: absolute;
+        content: '';
     }
 
     &:after {
@@ -35,17 +42,16 @@ $tokens: meta.module-variables(tokens) !default;
 
         display: none;
 
-        border-radius: var(
-            --kbq-navbar-item-size-content-border-radius,
-            map.get($tokens, navbar-item-size-content-border-radius)
-        );
+        border-radius: kbq-css-variable(navbar-item-size-content-border-radius);
     }
 
     &.kbq-horizontal {
+        /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
         @extend navbar-item_horizontal !optional;
     }
 
     &.kbq-vertical {
+        /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
         @extend navbar-item_vertical !optional;
     }
 }
@@ -110,4 +116,3 @@ a.kbq-navbar-title {
         z-index: 1;
     }
 }
-

package/navbar/navbar.scss

@@ -1,11 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
+@use '../core/styles/common/tokens' as *;
 
 .kbq-navbar {
     display: flex;
@@ -28,5 +24,5 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-navbar .kbq-navbar-container + .kbq-navbar-container {
-    margin-left: map.get($tokens, size-xxl);
+    margin-left: kbq-css-variable(size-xxl);
 }

package/navbar/public-api.d.ts

@@ -1,4 +1,4 @@
-export * from './navbar.module';
-export * from './navbar.component';
 export * from './navbar-item.component';
+export * from './navbar.component';
+export * from './navbar.module';
 export * from './vertical-navbar.component';

package/navbar/vertical-navbar.scss

@@ -1,10 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-vertical-navbar {
     position: relative;
@@ -18,7 +15,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     & .kbq-navbar-container + .kbq-navbar-container {
-        padding-top: map.get($tokens, size-xxl);
+        padding-top: kbq-css-variable(size-xxl);
     }
 
     & .kbq-vertical-navbar__container {
@@ -27,9 +24,10 @@ $tokens: meta.module-variables(tokens) !default;
         justify-content: space-between;
         position: absolute;
         z-index: 998;
+        height: 100%;
 
         &.kbq-collapsed {
-            width: map.get($tokens, size-5xl);
+            width: kbq-css-variable(size-5xl);
         }
 
         &.kbq-expanded {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "17.0.0-rc.1",
+    "version": "17.0.0-rc.11",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -17,16 +17,16 @@
     },
     "homepage": "https://github.com/koobiq/angular-components/blob/master/README.md",
     "peerDependencies": {
-        "@angular/cdk": "^17.2.0",
-        "@angular/forms": "^17.2.0",
-        "@koobiq/cdk": "^17.0.0-rc.1",
-        "@koobiq/angular-moment-adapter": "^17.0.0-rc.1",
-        "@koobiq/angular-luxon-adapter": "^17.0.0-rc.1",
-        "@koobiq/date-formatter": "^3.0.2",
+        "@angular/cdk": "^17.0.0",
+        "@angular/forms": "^17.0.0",
+        "@koobiq/cdk": "17.0.0-rc.11",
+        "@koobiq/angular-moment-adapter": "17.0.0-rc.11",
+        "@koobiq/angular-luxon-adapter": "17.0.0-rc.11",
+        "@koobiq/date-formatter": "^3.1.2",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "3.0.0-beta.31",
-        "@koobiq/design-tokens": "3.0.0-beta.31",
-        "marked": "^4.0.18",
+        "@koobiq/tokens-builder": "3.0.0-rc.12",
+        "@koobiq/design-tokens": "3.0.0-rc.12",
+        "marked": "^9.0.0",
         "overlayscrollbars": "^2.2.0",
         "ngx-highlightjs": "^10.0.0"
     },
@@ -142,6 +142,12 @@
             "esm": "./esm2022/ellipsis-center/koobiq-components-ellipsis-center.mjs",
             "default": "./fesm2022/koobiq-components-ellipsis-center.mjs"
         },
+        "./empty-state": {
+            "types": "./empty-state/index.d.ts",
+            "esm2022": "./esm2022/empty-state/koobiq-components-empty-state.mjs",
+            "esm": "./esm2022/empty-state/koobiq-components-empty-state.mjs",
+            "default": "./fesm2022/koobiq-components-empty-state.mjs"
+        },
         "./file-upload": {
             "types": "./file-upload/index.d.ts",
             "esm2022": "./esm2022/file-upload/koobiq-components-file-upload.mjs",
@@ -335,6 +341,7 @@
             "default": "./fesm2022/koobiq-components-tree-select.mjs"
         }
     },
+    "schematics": "./schematics/collection.json",
     "module": "fesm2022/koobiq-components.mjs",
     "typings": "index.d.ts",
     "sideEffects": false

package/popover/README.md

@@ -2,31 +2,35 @@
 
 ## API
 
-| Property               | Description                                                                                                                                                                              | Type                  | Default |
-|------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------|---------|
-| kbqPlacement            | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                             | string                | bottom  |
-| kbqTrigger              | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                       | string                | hover   |
-| kbqVisible              | Ручное управление показом, используется только при kbqTrigger="manual"                                                                                                             | boolean               | false   |
-| kbqPopoverHeader        | Содержимое шапки Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.      | string | ng-template  | –       |
-| kbqPopoverContent       | Содержимое компонента Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости. | string | ng-template  | –       |
-| kbqPopoverFooter        | Содержимое подвала Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.    | string | ng-template  | –       |
-| kbqPopoverDisabled      | Флаг для запрета показа                                                                                                                                                                  | boolean               | false   |
-| kbqPopoverClass         | Добавление своих классов                                                                                                                                                                 | string | string[]     | –       |
-| kbqVisibleChange        | Callback на изменение видимости компонента                                                                                                                                               | EventEmitter<boolean> | –       |
+| Property           | Description                                                                                                                                                                           | Type                  | Default     |     |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | --- |
+| kbqPlacement       | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                          | string                | bottom      |     |
+| kbqTrigger         | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                    | string                | hover       |     |
+| kbqVisible         | Ручное управление показом, используется только при kbqTrigger="manual"                                                                                                                | boolean               | false       |     |
+| kbqPopoverHeader   | Содержимое шапки Обрати внимание: если используешь строку, то используй аккуратно, желательно предварительно сделать escape строки, чтобы избежать потенциальной XSS уязвимости.      | string                | ng-template | –   |
+| kbqPopoverContent  | Содержимое компонента Обрати внимание: если используешь строку, то используй аккуратно, желательно предварительно сделать escape строки, чтобы избежать потенциальной XSS уязвимости. | string                | ng-template | –   |
+| kbqPopoverFooter   | Содержимое подвала Обрати внимание: если используешь строку, то используй аккуратно, желательно предварительно сделать escape строки, чтобы избежать потенциальной XSS уязвимости.    | string                | ng-template | –   |
+| kbqPopoverDisabled | Флаг для запрета показа                                                                                                                                                               | boolean               | false       |     |
+| kbqPopoverClass    | Добавление своих классов                                                                                                                                                              | string                | string[]    | –   |
+| kbqVisibleChange   | Callback на изменение видимости компонента                                                                                                                                            | EventEmitter<boolean> | –           |     |
 
 ## Example
 
+<!-- cspell:ignore Э́йяфьядлайё̀кюдль, Эйяфьядлайёкюдль -->
+
 ```html
 <ng-template #customContent>
-    Э́йяфьядлайё̀кюдль — шестой по величине ледник Исландии. Расположен на юге Исландии в 125 км к востоку от Рейкьявика. Под этим ледником находится одноимённый вулкан конической формы.
+    Э́йяфьядлайё̀кюдль — шестой по величине ледник Исландии. Расположен на юге Исландии в 125 км к востоку от Рейкьявика.
+    Под этим ледником находится одноимённый вулкан конической формы.
 </ng-template>
- 
+
 <button
     kbqPopover
     [kbqTrigger]="'hover'"
     [kbqPlacement]="'top'"
     [kbqPopoverHeader]="'Это header'"
-    [kbqPopoverContent]="customContent">
+    [kbqPopoverContent]="customContent"
+>
     Найти Эйяфьядлайёкюдль
 </button>
 ```

package/popover/_popover-theme.scss

@@ -2,47 +2,39 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-popover-theme($theme) {
     $popover: map.get(map.get($theme, components), popover);
 
-    $container: map.get($popover, container);
-
-    $header: map.get($popover, header);
-    $content: map.get($popover, content);
-    $footer: map.get($popover, footer);
-
     .kbq-popover {
-        box-shadow: map.get($container, box-shadow);
+        box-shadow: kbq-css-variable(popover-ontainer-box-shadow, map.get($popover, container, box-shadow));
     }
 
     .kbq-popover__container {
-        background: map.get($container, background);
+        background: kbq-css-variable(popover-container-background, map.get($popover, container, background));
     }
 
     .kbq-popover__arrow {
-        box-shadow: map.get($container, box-shadow);
-        background: map.get($container, background);
+        box-shadow: kbq-css-variable(popover-ontainer-box-shadow, map.get($popover, container, box-shadow));
+        background: kbq-css-variable(popover-container-background, map.get($popover, container, background));
     }
 
     .kbq-popover__header {
-        color: map.get($header, text);
+        color: kbq-css-variable(popover-header-text, map.get($popover, header, text));
     }
 
     .kbq-popover__content {
-        color: map.get($content, text);
+        color: kbq-css-variable(popover-content-text, map.get($popover, content, text));
     }
 }
 
 @mixin kbq-popover-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-popover__header {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, popover-font-header));
+        @include kbq-typography-css-variables(popover, header);
     }
 
     .kbq-popover__content {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, popover-font-content));
+        @include kbq-typography-css-variables(popover, content);
     }
 }

package/popover/popover.component.d.ts

@@ -1,5 +1,5 @@
 import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, ScrollDispatcher, ScrollStrategy, OverlayConfig } from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
 import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
 import * as i0 from "@angular/core";

package/popover/popover.scss

@@ -5,21 +5,17 @@
 @use '../core/styles/common';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
-
 $arrow-size: 12px;
 $trigger-margin: 9px;
 
 .kbq-popover {
     position: relative;
 
-    border-radius: var(
-        --kbq-popover-size-container-border-radius,
-        map.get($tokens, popover-size-container-border-radius)
-    );
+    border-radius: kbq-css-variable(popover-size-container-border-radius);
 
     box-sizing: border-box;
 
@@ -29,16 +25,15 @@ $trigger-margin: 9px;
     z-index: 1;
 
     &.kbq-popover_small {
-        max-width: var(--kbq-popover-size-container-width-small, map.get($tokens, popover-size-container-width-small));
+        max-width: kbq-css-variable(popover-size-container-width-small);
     }
 
     &.kbq-popover_medium {
-        max-width:
-            var(--kbq-popover-size-container-width-medium, map.get($tokens, popover-size-container-width-medium));
+        max-width: kbq-css-variable(popover-size-container-width-medium);
     }
 
     &.kbq-popover_large {
-        max-width: var(--kbq-popover-size-container-width-large, map.get($tokens, popover-size-container-width-large));
+        max-width: kbq-css-variable(popover-size-container-width-large);
     }
 
     @include pop-up.popup-margins(kbq-popover, 8px);
@@ -47,10 +42,8 @@ $trigger-margin: 9px;
 .kbq-popover__content {
     overflow-y: auto;
 
-    padding:
-        var(--kbq-popover-size-content-padding-top, map.get($tokens, popover-size-content-padding-top))
-        var(--kbq-popover-size-content-padding-horizontal, map.get($tokens, popover-size-content-padding-horizontal))
-        var(--kbq-popover-size-content-padding-bottom, map.get($tokens, popover-size-content-padding-bottom));
+    padding: kbq-css-variable(popover-size-content-padding-top)
+        kbq-css-variable(popover-size-content-padding-horizontal) kbq-css-variable(popover-size-content-padding-bottom);
 }
 
 .kbq-popover__container {
@@ -59,22 +52,19 @@ $trigger-margin: 9px;
     display: flex;
     flex-direction: column;
 
-    max-height: var(--kbq-popover-size-container-max-height, map.get($tokens, popover-size-container-max-height));
+    max-height: kbq-css-variable(popover-size-container-max-height);
 
-    border-radius: var(
-        --kbq-popover-size-container-border-radius,
-        map.get($tokens, popover-size-container-border-radius)
-    );
+    border-radius: kbq-css-variable(popover-size-container-border-radius);
 
     &.kbq-popover__container_with-header {
         .kbq-popover__content {
-            padding-top: map.get($tokens, size-s);
+            padding-top: kbq-css-variable(size-s);
         }
     }
 
     &.kbq-popover__container_with-footer {
         .kbq-popover__content {
-            padding-bottom: map.get($tokens, size-s);
+            padding-bottom: kbq-css-variable(size-s);
         }
     }
 }
@@ -85,11 +75,8 @@ $trigger-margin: 9px;
 
     overflow: hidden;
 
-    padding:
-        var(--kbq-popover-size-header-padding-top, map.get($tokens, popover-size-header-padding-top))
-        var(--kbq-popover-size-header-padding-horizontal, map.get($tokens, popover-size-header-padding-horizontal))
-        var(--kbq-popover-size-header-padding-bottom, map.get($tokens, popover-size-header-padding-bottom))
-        var(--kbq-popover-size-header-padding-horizontal, map.get($tokens, popover-size-header-padding-horizontal));
+    padding: kbq-css-variable(popover-size-header-padding-top) kbq-css-variable(popover-size-header-padding-horizontal)
+        kbq-css-variable(popover-size-header-padding-bottom) kbq-css-variable(popover-size-header-padding-horizontal);
 
     & .kbq-popover__header-text {
         @include common.kbq-truncate-line();
@@ -97,9 +84,8 @@ $trigger-margin: 9px;
 }
 
 .kbq-popover__footer {
-    padding:
-        var(--kbq-popover-size-footer-padding-vertical, map.get($tokens, popover-size-footer-padding-vertical))
-        var(--kbq-popover-size-footer-padding-horizontal, map.get($tokens, popover-size-footer-padding-horizontal));
+    padding: kbq-css-variable(popover-size-footer-padding-vertical)
+        kbq-css-variable(popover-size-footer-padding-horizontal);
 }
 
 .kbq-popover__arrow {

package/popover/public-api.d.ts

@@ -1,4 +1,4 @@
-export * from './popover.module';
-export * from './popover.component';
 export * from './popover-animations';
 export * from './popover-confirm.component';
+export * from './popover.component';
+export * from './popover.module';