@koobiq/components 17.0.0-rc.6 → 17.0.0-rc.8

package/code-block/code-block.scss

@@ -1,15 +1,13 @@
 @use 'sass:meta';
 @use 'sass:map';
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
+
 
 $tokens: meta.module-variables(tokens) !default;
 
-$border-radius: var(
-    --kbq-code-block-size-container-border-radius, map.get($tokens, code-block-size-container-border-radius)
-);
-$border-width: var(
-        --kbq-code-block-size-container-border-width, map.get($tokens, code-block-size-container-border-width)
-);
+$border-radius: kbq-css-variable(code-block-size-container-border-radius);
+$border-width: kbq-css-variable(code-block-size-container-border-width);
 
 /* stylelint-disable no-descending-specificity */
 .kbq-code-block {
@@ -32,21 +30,13 @@ $border-width: var(
         $buttons-margin: calc(32 * 4) + 24px;
 
         padding:
-            var(
-                --kbq-code-block-size-header-padding-vertical,
-                map.get($tokens, code-block-size-header-padding-vertical)
-            )
+            kbq-css-variable(code-block-size-header-padding-vertical)
             calc(var(
                 --kbq-code-block-size-header-padding-right,
                 map.get($tokens, code-block-size-header-padding-right)
             ) + $buttons-margin)
-            var(
-                --kbq-code-block-size-header-padding-vertical,
-                map.get($tokens, code-block-size-header-padding-vertical)
-            ) var(
-                --kbq-code-block-size-header-padding-left,
-                map.get($tokens, code-block-size-header-padding-left)
-            );
+            kbq-css-variable(code-block-size-header-padding-vertical)
+            kbq-css-variable(code-block-size-header-padding-left);
 
         border-width: $border-width $border-width 0 $border-width;
         border-style: solid;
@@ -56,7 +46,7 @@ $border-width: var(
     &:has(.kbq-code-block__show-more) {
         .kbq-code-block__code {
             & > code {
-                padding-bottom: map.get($tokens, size-3xl) !important;
+                padding-bottom: kbq-css-variable(size-3xl) !important;
                 overflow-x: scroll;
             }
         }
@@ -65,21 +55,10 @@ $border-width: var(
     .kbq-code-block__code {
         > code {
             padding:
-                var(
-                    --kbq-code-block-size-with-header-content-padding-top,
-                    map.get($tokens, code-block-size-with-header-content-padding-top)
-                )
-                var(
-                    --kbq-code-block-size-with-header-content-padding-horizontal,
-                    map.get($tokens, code-block-size-with-header-content-padding-horizontal)
-                )
-                var(
-                    --kbq-code-block-size-with-header-content-padding-bottom,
-                    map.get($tokens, code-block-size-with-header-content-padding-bottom)
-                ) var(
-                    --kbq-code-block-size-with-header-content-padding-horizontal,
-                    map.get($tokens, code-block-size-with-header-content-padding-horizontal)
-                );
+                kbq-css-variable(code-block-size-with-header-content-padding-top)
+                kbq-css-variable(code-block-size-with-header-content-padding-horizontal)
+                kbq-css-variable(code-block-size-with-header-content-padding-bottom)
+                kbq-css-variable(code-block-size-with-header-content-padding-horizontal);
 
             border-radius: $border-radius;
 
@@ -89,10 +68,7 @@ $border-width: var(
         }
 
         .hljs-ln-numbers {
-            padding-right: var(
-                --kbq-code-block-size-with-header-content-content-gap-horizontal,
-                map.get($tokens, code-block-size-with-header-content-content-gap-horizontal)
-            );
+            padding-right: kbq-css-variable(code-block-size-with-header-content-content-gap-horizontal);
         }
     }
 
@@ -133,21 +109,12 @@ $border-width: var(
 
             & > code {
                 padding:
-                    var(
-                        --kbq-code-block-size-no-header-content-padding-vertical,
-                        map.get($tokens, code-block-size-no-header-content-padding-vertical)
-                    )
-                    var(
-                        --kbq-code-block-size-no-header-content-padding-horizontal,
-                        map.get($tokens, code-block-size-no-header-content-padding-horizontal)
-                    );
+                    kbq-css-variable(code-block-size-no-header-content-padding-vertical)
+                    kbq-css-variable(code-block-size-no-header-content-padding-horizontal);
             }
 
             .hljs-ln-numbers {
-                padding-right: var(
-                    --kbq-code-block-size-no-header-content-content-gap-horizontal,
-                    map.get($tokens, code-block-size-no-header-content-content-gap-horizontal)
-                );
+                padding-right: kbq-css-variable(code-block-size-no-header-content-content-gap-horizontal);
             }
         }
     }
@@ -218,31 +185,19 @@ $border-width: var(
     border-radius: $border-radius;
 
     &.kbq-code-block__show-more_collapsed {
-        padding-top: var(
-            --kbq-code-block-size-collapse-collapsed-padding-top,
-            map.get($tokens, code-block-size-collapse-collapsed-padding-top)
-        );
+        padding-top: kbq-css-variable(code-block-size-collapse-collapsed-padding-top);
 
-        padding-bottom: var(
-            --kbq-code-block-size-collapse-collapsed-padding-bottom,
-            map.get($tokens, code-block-size-collapse-collapsed-padding-bottom)
-        );
+        padding-bottom: kbq-css-variable(code-block-size-collapse-collapsed-padding-bottom);
     }
 
     &.kbq-code-block__show-more_expanded {
-        padding-top: var(
-            --kbq-code-block-size-collapse-expanded-padding-top,
-            map.get($tokens, code-block-size-collapse-expanded-padding-top)
-        );
+        padding-top: kbq-css-variable(code-block-size-collapse-expanded-padding-top);
 
-        margin-bottom: var(
-            --kbq-code-block-size-collapse-expanded-padding-bottom,
-            map.get($tokens, code-block-size-collapse-expanded-padding-bottom)
-        );
+        margin-bottom: kbq-css-variable(code-block-size-collapse-expanded-padding-bottom);
     }
 
     .bg-wrapper {
-        border-radius: var(--kbq-button-size-border-radius, map.get($tokens, button-size-border-radius));
+        border-radius: kbq-css-variable(button-size-border-radius);
     }
 }
 /* stylelint-enable no-descending-specificity */

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

@@ -1,7 +1,9 @@
 import { InjectionToken } from '@angular/core';
 export interface KbqFormFieldRef {
     control: any;
+    canCleanerClearByEsc: boolean;
     shouldForward(str: string): boolean;
+    focusViaKeyboard(): void;
 }
 /**
  * Injection token that can be used to inject an instances of `KbqFormField`. It serves

package/core/forms/_forms-theme.scss

@@ -3,29 +3,26 @@
 
 @use '../styles/typography/typography-utils' as *;
 @use './forms' as *;
+@use '../styles/common/tokens' as *;
 
 
 @mixin kbq-forms-theme($theme) {
     @include kbq-form-geometry(map.get($theme, tokens));
 
-    $foreground: map.get($theme, foreground);
-
     $forms: map.get(map.get($theme, components), forms);
 
     .kbq-form__label {
-        color: map.get($forms, label);
+        color: kbq-css-variable(forms-label, map.get($forms, label));
     }
 
     .kbq-form__legend {
-        color: map.get($forms, legend);
+        color: kbq-css-variable(forms-legend, map.get($forms, legend));
     }
 }
 
 @mixin kbq-forms-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-form__label {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-label));
+        @include kbq-typography-css-variables(forms, label);
     }
 
     //.kbq-form__legend {

package/core/forms/_forms.scss

@@ -4,6 +4,7 @@
 @use '../styles/common/vendor-prefixes';
 @use '../styles/typography/typography' as *;
 @use '../styles/typography/typography-utils' as *;
+@use '../styles/common/tokens' as *;
 
 
 @mixin kbq-form-geometry($tokens) {
@@ -18,41 +19,26 @@
     }
 
     .kbq-form-horizontal {
-        $config: kbq-typography-config($tokens);
-
-        $line-height: kbq-line-height($config, map.get($tokens, forms-font-label));
+        $line-height: map.get($tokens, forms-font-label-line-height);
         $form-field-size-height: map.get($tokens, form-field-size-height);
-        $label-padding-top: calc(($form-field-size-height - $line-height) / 2);
 
         & .kbq-form-row_margin {
-            margin-bottom: var(
-                --kbq-forms-size-horizontal-row-margin-bottom,
-                #{map.get($tokens, forms-size-horizontal-row-margin-bottom)}
-            );
+            margin-bottom: kbq-css-variable(forms-size-horizontal-row-margin-bottom);
         }
 
         & .kbq-form__label {
-            padding-top: var(--kbq-forms-size-horizontal-label-padding-top, #{$label-padding-top});
+            padding-top: calc(($form-field-size-height - $line-height) / 2);
 
             text-align: start;
         }
 
         & .kbq-form__control {
-            padding-left: var(
-                --kbq-forms-size-horizontal-control-padding-left,
-                #{map.get($tokens, forms-size-horizontal-control-padding-left)}
-            );
+            padding-left: kbq-css-variable(forms-size-horizontal-control-padding-left);
         }
 
         & .kbq-form__legend {
-            margin-top: var(
-                --kbq-forms-size-horizontal-legend-margin-top,
-                #{map.get($tokens, forms-size-horizontal-legend-margin-top)}
-            );
-            margin-bottom: var(
-                --kbq-forms-size-horizontal-legend-margin-bottom,
-                #{map.get($tokens, forms-size-horizontal-legend-margin-bottom)}
-            );
+            margin-top: kbq-css-variable(forms-size-horizontal-legend-margin-top);
+            margin-bottom: kbq-css-variable(forms-size-horizontal-legend-margin-bottom);
         }
     }
 
@@ -62,19 +48,12 @@
         }
 
         & .kbq-form-row_margin {
-            margin-bottom: var(
-                --kbq-forms-size-vertical-row-margin-bottom, #{map.get($tokens, forms-size-vertical-row-margin-bottom)}
-            );
+            margin-bottom: kbq-css-variable(forms-size-vertical-row-margin-bottom);
         }
 
         & .kbq-form__label {
-            padding-top: var(
-                --kbq-forms-size-vertical-label-padding-top, #{map.get($tokens, forms-size-vertical-label-padding-top)}
-            );
-            padding-bottom: var(
-                --kbq-forms-size-vertical-label-padding-bottom,
-                #{map.get($tokens, forms-size-vertical-label-padding-bottom)}
-            );
+            padding-top: kbq-css-variable(forms-size-vertical-label-padding-top);
+            padding-bottom: kbq-css-variable(forms-size-vertical-label-padding-bottom);
 
             text-align: start;
         }
@@ -84,13 +63,8 @@
         }
 
         & .kbq-form__legend {
-            margin-top: var(
-                --kbq-forms-size-vertical-legend-margin-top, #{map.get($tokens, forms-size-vertical-legend-margin-top)}
-            );
-            margin-bottom: var(
-                --kbq-forms-size-vertical-legend-margin-bottom,
-                #{map.get($tokens, forms-size-vertical-legend-margin-bottom)}
-            );
+            margin-top: kbq-css-variable(forms-size-vertical-legend-margin-top);
+            margin-bottom: kbq-css-variable(forms-size-vertical-legend-margin-bottom);
         }
     }
 
@@ -103,10 +77,7 @@
         flex-direction: row;
 
         & .kbq-form__row:not(:first-child) {
-            padding-left: var(
-                --kbq-forms-size-vertical-control-padding-left,
-                #{map.get($tokens, forms-size-vertical-control-padding-left)}
-            );
+            padding-left: kbq-css-variable(forms-size-vertical-control-padding-left);
         }
     }
 }

package/core/locales/locale-service.d.ts

@@ -407,6 +407,7 @@ export declare const KBQ_LOCALE_SERVICE: InjectionToken<KbqLocaleService>;
 export declare class KbqLocaleService {
     readonly changes: BehaviorSubject<string>;
     readonly locales: any;
+    private readonly document;
     id: string;
     current: any;
     constructor(id: string, localeData: any);

package/core/option/_optgroup-theme.scss

@@ -2,24 +2,23 @@
 @use 'sass:map';
 
 @use '../styles/typography/typography-utils' as *;
+@use '../styles/common/tokens' as *;
 
 
 @mixin kbq-optgroup-theme($theme) {
     $foreground: map.get($theme, foreground);
 
     .kbq-optgroup-label {
-        color: map.get($foreground, contrast);
+        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
     }
 
     .kbq-disabled .kbq-optgroup-label {
-        color: map.get($foreground, text-disabled);
+        color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
     }
 }
 
 @mixin kbq-optgroup-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-optgroup-label {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, optgroup-font-default));
+        @include kbq-typography-css-variables(optgroup, default);
     }
 }

package/core/option/_option-action-theme.scss

@@ -2,38 +2,38 @@
 
 @use '../styles/theming/theming' as *;
 @use '../styles/typography/typography-utils' as *;
+@use '../styles/common/tokens' as *;
 
 
 @mixin kbq-option-action-theme($theme) {
-    $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
     $states: map.get($theme, states);
 
     .kbq-option-action {
         &.cdk-keyboard-focused {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
         }
 
         &:active,
         &.kbq-pressed {
             & .kbq-icon {
-                color: map.get(map.get($states, icon), contrast-fade);
+                color: kbq-css-variable(states-icon-contrast-fade, map.get($states, icon, contrast-fade));
             }
 
-            background-color: map.get($background, transparent);
+            background-color: kbq-css-variable(background-transparent, map.get($background, transparent));
         }
 
         &:hover .kbq-icon {
-            color: map.get(map.get($states, icon), contrast-fade-hover);
+            color: kbq-css-variable(states-icon-contrast-fade-hover, map.get($states, icon, contrast-fade-hover));
         }
 
         &.kbq-disabled {
             & .kbq-icon {
-                color: map.get(map.get($states, icon), disabled);
+                color: kbq-css-variable(states-icon-disabled, map.get($states, icon, disabled));
             }
 
-            background-color: map.get($background, transparent);
+            background-color: kbq-css-variable(background-transparent, map.get($background, transparent));
         }
     }
 }

package/core/option/_option-theme.scss

@@ -2,26 +2,24 @@
 @use 'sass:map';
 
 @use '../styles/typography/typography-utils' as *;
+@use '../styles/common/tokens' as *;
 
 
-@mixin kbq-option($state) {
-    background: map.get($state, container-background);
+@mixin kbq-option($component, $style-name) {
+    $state: map.get($component, $style-name);
+
+    background: kbq-css-variable(list-#{$style-name}-container-background, map.get($state, container-background));
 
     .kbq-option-text {
-        color: map.get($state, text);
+        color: kbq-css-variable(list-#{$style-name}-text, map.get($state, text));
     }
 
-    // todo выглядит как баг
-    //.kbq-icon {
-    //    color: map.get($state, icon);
-    //}
-
     .kbq-option-action .kbq-icon {
-        color: map.get($state, icon-button);
+        color: kbq-css-variable(list-#{$style-name}-icon-button, map.get($state, icon-button));
     }
 
     .kbq-option-caption {
-        color: map.get($state, caption);
+        color: kbq-css-variable(list-#{$style-name}-caption, map.get($state, caption));
     }
 }
 
@@ -29,39 +27,37 @@
     $list-item: map.get(map.get($theme, components), list-item);
 
     .kbq-option {
-        @include kbq-option(map.get($list-item, default));
+        @include kbq-option($list-item, default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-option(map.get($list-item, hover));
+            @include kbq-option($list-item, states-hover);
         }
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: map.get(map.get($list-item, focused), focus-outline);
+            border-color: map.get($list-item, states-focused, focus-outline);
         }
 
         &.kbq-selected {
-            @include kbq-option(map.get($list-item, selected));
+            @include kbq-option($list-item, states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-option(map.get($list-item, selected-hover));
+                @include kbq-option($list-item, states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-option(map.get($list-item, disabled));
+            @include kbq-option($list-item, states-disabled);
         }
     }
 }
 
 @mixin kbq-option-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-option {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-text));
+        @include kbq-typography-css-variables(list, text);
     }
 
     .kbq-list-option-caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-caption));
+        @include kbq-typography-css-variables(list, caption);
     }
 }

package/core/select/common.d.ts

@@ -0,0 +1,35 @@
+import { AfterContentInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { KbqFormFieldRef } from '../form-field';
+import * as i0 from "@angular/core";
+export declare class KbqSelectTrigger {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectTrigger, "kbq-select-trigger, [kbq-select-trigger]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectMatcher {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectMatcher, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectMatcher, "kbq-select-matcher, [kbq-select-matcher]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectFooter, "kbq-select-footer, [kbq-select-footer]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectSearch implements AfterContentInit, OnDestroy {
+    protected formField: KbqFormFieldRef;
+    searchChangesSubscription: Subscription;
+    isSearchChanged: boolean;
+    get ngControl(): any;
+    constructor(formField: KbqFormFieldRef);
+    focus(): void;
+    reset(): void;
+    value(): any;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearch, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearch, "[kbqSelectSearch]", ["kbqSelectSearch"], {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectSearchEmptyResult {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearchEmptyResult, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearchEmptyResult, "[kbq-select-search-empty-result]", ["kbqSelectSearchEmptyResult"], {}, {}, never, never, true, never>;
+}

package/core/select/index.d.ts

@@ -1,3 +1,4 @@
 export * from './events';
 export * from './errors';
 export * from './constants';
+export * from './common';

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -1,48 +1,45 @@
 @use 'sass:map';
 
 
-@mixin kbq-pseudo-checkbox-color($checkbox) {
-    $default: map.get($checkbox, default);
+@use '../../styles/common/tokens' as *;
 
-    border-color: map.get($default, border);
+
+@mixin kbq-pseudo-checkbox-color($component, $style-name) {
+    $style: map.get($component, $style-name);
+    $base: checkbox-#{$style-name};
+
+    border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
 
     & .kbq-checkbox-checkmark,
     & .kbq-checkbox-mixedmark {
-        color: map.get($default, color);
+        color: kbq-css-variable(#{$base}-default-color, map.get($style, default, color));
     }
 
     &.kbq-checked,
     &.kbq-indeterminate {
-        $checked: map.get($checkbox, checked);
-
-        border-color: map.get($checked, border);
-        background: map.get($checked, background);
+        border-color: kbq-css-variable(#{$base}-checked-border, map.get($style, checked, border));
+        background: kbq-css-variable(#{$base}-checked-background, map.get($style, checked, background));
     }
 
     &.kbq-disabled {
-        $disabled: map.get($checkbox, disabled);
-
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
-            color: map.get($disabled, color);
+            color: kbq-css-variable(#{$base}-disabled-color, map.get($style, disabled, color));
         }
 
-        border-color: map.get($disabled, border);
-        background: map.get($disabled, background);
+        border-color: kbq-css-variable(#{$base}-disabled-border, map.get($style, disabled, border));
+        background: kbq-css-variable(#{$base}-disabled-background, map.get($style, disabled, background));
     }
 }
 
 @mixin kbq-pseudo-checkbox-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
-    $checkbox: map.get(map.get($theme, components), checkbox);
+    $checkbox: map.get($theme, components, checkbox);
 
     .kbq-pseudo-checkbox {
-        @include kbq-pseudo-checkbox-color(map.get($checkbox, theme));
+        @include kbq-pseudo-checkbox-color($checkbox, theme);
 
         &.kbq-error {
-            @include kbq-pseudo-checkbox-color(map.get($checkbox, error));
+            @include kbq-pseudo-checkbox-color($checkbox, error);
         }
     }
 }

package/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../../styles/tokens';
+@use '../../styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -14,12 +15,12 @@ $tokens: meta.module-variables(tokens) !default;
     align-items: center;
     justify-content: center;
 
-    width: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
-    height: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
+    width: kbq-css-variable(checkbox-size-normal-width);
+    height: kbq-css-variable(checkbox-size-normal-width);
 
     border: {
-        radius: var(--kbq-checkbox-size-normal-border-radius, map.get($tokens, checkbox-size-normal-border-radius));
-        width: var(--kbq-checkbox-size-normal-border-width, map.get($tokens, checkbox-size-normal-border-width));
+        radius: kbq-css-variable(checkbox-size-normal-border-radius);
+        width: kbq-css-variable(checkbox-size-normal-border-width);
         style: solid;
     }
 
@@ -56,11 +57,11 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-pseudo-checkbox.kbq-pseudo-checkbox_big {
-    width: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
-    height: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
+    width: kbq-css-variable(checkbox-size-big-width);
+    height: kbq-css-variable(checkbox-size-big-width);
 
     border: {
-        radius: var(--kbq-checkbox-size-big-border-radius, map.get($tokens, checkbox-size-big-border-radius));
-        width: var(--kbq-checkbox-size-big-border-width, map.get($tokens, checkbox-size-big-border-width));
+        radius: kbq-css-variable(checkbox-size-big-border-radius);
+        width: kbq-css-variable(checkbox-size-big-border-width);
     }
 }

package/core/styles/common/_groups.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../tokens';
+@use '../common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -82,7 +83,7 @@ $tokens: meta.module-variables(tokens) !default;
         &:first-child:not(:last-child) {
             @include border-bottom-radius(0);
 
-            border-top-right-radius: var(--kbq-button-size-border-radius, map.get($tokens, button-size-border-radius));
+            border-top-right-radius: kbq-css-variable(button-size-border-radius);
 
             > .kbq-form-field__container {
                 @include border-bottom-radius(0);
@@ -92,10 +93,7 @@ $tokens: meta.module-variables(tokens) !default;
         &:last-child:not(:first-child) {
             @include border-top-radius(0);
 
-            border-bottom-left-radius: var(
-                --kbq-button-size-border-radius,
-                map.get($tokens, button-size-border-radius)
-            );
+            border-bottom-left-radius: kbq-css-variable(button-size-border-radius);
 
             > .kbq-form-field__container {
                 @include border-top-radius(0);