@koobiq/components 16.0.0-beta.8 → 17.0.0-beta.1

package/code-block/code-block.scss

@@ -9,6 +9,7 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-code-block {
     display: block;
     position: relative;
+    overflow: hidden;
 
     box-sizing: border-box;
 
@@ -17,24 +18,62 @@ $tokens: meta.module-variables(tokens) !default;
     -moz-hyphens: none;
     -webkit-hyphens: none;
 
-    border-width: 1px;
+    border-width: var(
+        --kbq-code-block-size-container-border-width, map.get($tokens, code-block-size-container-border-width)
+    );
     border-style: solid;
-    border-radius: map.get($tokens, code-block-size-border-radius);
-
-    &:not(.kbq-code-block_no-header) .kbq-tab-group:after {
-        content: "";
-
-        position: absolute;
-        top: 39px;
-        left: 0;
-        right: 0;
-
-        height: 1px;
-    }
+    border-radius: var(
+        --kbq-code-block-size-container-border-radius, map.get($tokens, code-block-size-container-border-radius)
+    );
 
     .kbq-tab-header {
         // 4 buttons + margin
         margin-right: calc(32 * 4) + 24px;
+
+        padding:
+            var(
+                --kbq-code-block-size-header-padding-vertical,
+                map.get($tokens, code-block-size-header-padding-vertical)
+            )
+            var(
+                --kbq-code-block-size-header-padding-right,
+                map.get($tokens, code-block-size-header-padding-right)
+            )
+            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-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)
+                );
+        }
+
+        .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)
+            );
+        }
     }
 
     &.kbq-code-block_hide-line-numbers .hljs-ln-line.hljs-ln-numbers {
@@ -54,12 +93,31 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.kbq-code-block_no-header {
+        .kbq-tab-header {
+            display: none;
+        }
+
         .kbq-code-block__code {
             position: relative;
-        }
 
-        .kbq-tab-header {
-            display: none;
+            & > 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)
+                    );
+            }
+
+            .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)
+                );
+            }
         }
     }
 
@@ -89,10 +147,6 @@ $tokens: meta.module-variables(tokens) !default;
         white-space: pre-wrap
     }
 
-    > code {
-        padding: map.get($tokens, code-block-size-padding) !important;
-    }
-
     .hljs-ln {
         border-collapse: unset;
 
@@ -102,9 +156,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .hljs-ln-numbers {
-        border-right-width: map.get($tokens, code-block-size-line-numbers-border-width);
-        padding: map.get($tokens, code-block-size-line-numbers-padding);
-
         vertical-align: baseline;
         text-align: right;
     }
@@ -115,14 +166,37 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-code-block__show-more {
+    display: flex;
+    justify-content: center;
     overflow: hidden;
 
     width: 100%;
 
-    border-top-style: solid !important;
-    border-top-width: 1px !important;
+    position: absolute;
+    bottom: 0;
 
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
+    &.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-bottom: var(
+            --kbq-code-block-size-collapse-collapsed-padding-bottom,
+            map.get($tokens, 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)
+        );
+
+        margin-bottom: var(
+            --kbq-code-block-size-collapse-expanded-padding-bottom,
+            map.get($tokens, code-block-size-collapse-expanded-padding-bottom)
+        );
+    }
 }
 /* stylelint-enable no-descending-specificity */

package/core/common-behaviors/index.d.ts

@@ -1,5 +1,7 @@
+import { InjectionToken } from '@angular/core';
 export { KbqCommonModule, KBQ_SANITY_CHECKS } from './common-module';
 export { CanDisable, CanDisableCtor, mixinDisabled } from './disabled';
 export { CanColor, CanColorCtor, mixinColor, ThemePalette, KbqComponentColors } from './color';
 export { HasTabIndex, HasTabIndexCtor, mixinTabIndex } from './tabindex';
 export { CanUpdateErrorStateCtor, CanUpdateErrorState, mixinErrorState } from './error-state';
+export declare const KBQ_PARENT_ANIMATION_COMPONENT: InjectionToken<any>;

package/core/locales/index.d.ts

@@ -1,4 +1,2 @@
-import { InjectionToken } from '@angular/core';
 export * from './locale-service';
 export * from './locale-service.module';
-export declare const KBQ_LOCALE_ID: InjectionToken<string>;

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

@@ -30,7 +30,7 @@
             color: kbq-color($secondary, if($is-dark, 70, 30));
         }
 
-        &[disabled] {
+        &.kbq-disabled {
             & .kbq-icon {
                 color: kbq-color($secondary, if($is-dark, 30, 70));
             }

package/core/option/_option-theme.scss

@@ -11,9 +11,10 @@
         color: map.get($state, text);
     }
 
-    .kbq-icon {
-        color: map.get($state, icon);
-    }
+    // todo выглядит как баг
+    //.kbq-icon {
+    //    color: map.get($state, icon);
+    //}
 
     .kbq-option-action .kbq-icon {
         color: map.get($state, icon-button);
@@ -47,8 +48,7 @@
             }
         }
 
-        &.kbq-disabled,
-        &[disabled] {
+        &.kbq-disabled {
             @include kbq-option(map.get($list-item, disabled));
         }
     }

package/core/option/action.scss

@@ -21,7 +21,7 @@
 
     background: transparent;
 
-    &[disabled] {
+    &.kbq-disabled {
         cursor: default;
     }
 }

package/core/pop-up/pop-up.d.ts

@@ -21,6 +21,13 @@ export declare abstract class KbqPopUp implements OnDestroy {
     ngOnDestroy(): void;
     isTemplateRef(value: any): boolean;
     show(delay: number): void;
+    /**
+     * Hides the popup after a specified delay.
+     *
+     * The hide timeout triggers the hiding of the popup by updating visibility and emitting relevant events.
+     * Also, it marks for check to ensure proper change detection, especially for parent components with OnPush strategy.
+     * @param delay - The delay in milliseconds before hiding the popup.
+     */
     hide(delay: number): void;
     isVisible(): boolean;
     updateClassMap(placement: string, customClass: string, classMap?: any): void;

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

@@ -8,9 +8,12 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-pseudo-checkbox {
     position: relative;
-    display: inline-block;
+    display: inline-flex;
     box-sizing: border-box;
 
+    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));
 
@@ -28,14 +31,6 @@ $tokens: meta.module-variables(tokens) !default;
     & .kbq-checkbox-checkmark,
     & .kbq-checkbox-mixedmark {
         display: none;
-
-        position: absolute;
-        top: calc(
-            -1 * var(--kbq-checkbox-size-normal-border-width, #{map.get($tokens, checkbox-size-normal-border-width)})
-        );
-        left: calc(
-            -1 * var(--kbq-checkbox-size-normal-border-width, #{map.get($tokens, checkbox-size-normal-border-width)})
-        );
     }
 
     &.kbq-pseudo-checkbox-checked,
@@ -68,10 +63,4 @@ $tokens: meta.module-variables(tokens) !default;
         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));
     }
-
-    & .kbq-checkbox-checkmark,
-    & .kbq-checkbox-mixedmark {
-        top: calc(-1 * var(--kbq-checkbox-size-big-border-width, #{map.get($tokens, checkbox-size-big-border-width)}));
-        left: calc(-1 * var(--kbq-checkbox-size-big-border-width, #{map.get($tokens, checkbox-size-big-border-width)}));
-    }
 }

package/core/styles/_koobiq-theme.scss

@@ -21,6 +21,8 @@
 @use '../../form-field/form-field-theme' as *;
 @use '../../form-field/hint-theme' as *;
 @use '../../icon/icon-theme' as *;
+@use '../../icon/icon-item-theme' as *;
+@use '../../icon/icon-button-theme' as *;
 @use '../../input/input-theme' as *;
 @use '../../link/link-theme' as *;
 @use '../../list/list-theme' as *;

package/core/styles/_variables.scss

@@ -7,4 +7,4 @@ $z-index-picker: 1050;
 $z-index-dropdown: 1050;
 $z-index-tooltip: 1060;
 $z-index-toast: 1070;
-$z-index-loader-overlay: 1000;
+$z-index-loader-overlay: 10;

package/core/styles/common/_select.scss

@@ -50,7 +50,8 @@ $tokens: meta.module-variables(tokens) !default;
         );
     }
 
-    .kbq-select__trigger.kbq-select__trigger_single {
+    .kbq-select__trigger.kbq-select__trigger_single,
+    .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty {
         & .kbq-select__matcher {
             $padding-vertical: map.get($tokens, select-size-single-padding-vertical);
 

package/core/styles/theming/_components-theming.scss

@@ -28,47 +28,61 @@
     $badge: (
         filled: (
             fade-off: (
+                theme: (
+                    color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-theme-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-theme-background'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-theme-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-theme-icon')
+                ),
                 success: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-icon')
                 ),
                 warning: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-icon')
                 ),
                 error: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-icon')
                 )
             ),
             fade-on: (
                 theme: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-icon')
                 ),
                 contrast: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-icon')
                 ),
                 success: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-icon')
                 ),
                 warning: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-icon')
                 ),
                 error: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-icon')
                 )
             )
         ),
@@ -78,31 +92,36 @@
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-icon')
                 ),
                 contrast: (
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-icon')
                 ),
                 success: (
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-icon')
                 ),
                 warning: (
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-icon')
                 ),
                 error: (
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-icon')
                 )
             )
         )
@@ -339,6 +358,7 @@
             default: (
                 border: map-get($tokens, 'checkbox-#{$scheme}-theme-default-border'),
                 color: map-get($tokens, 'checkbox-#{$scheme}-theme-default-color'),
+                text: map-get($tokens, 'checkbox-#{$scheme}-theme-default-text'),
                 background: map-get($tokens, 'checkbox-#{$scheme}-theme-default-background'),
                 caption: map-get($tokens, 'checkbox-#{$scheme}-theme-default-caption')
             ),
@@ -367,6 +387,7 @@
             disabled: (
                 border: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-border'),
                 color: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-color'),
+                text: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-text'),
                 background: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-background'),
                 caption: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-caption')
             )
@@ -375,6 +396,7 @@
             default: (
                 border: map-get($tokens, 'checkbox-#{$scheme}-error-default-border'),
                 color: map-get($tokens, 'checkbox-#{$scheme}-error-default-color'),
+                text: map-get($tokens, 'checkbox-#{$scheme}-error-default-text'),
                 background: map-get($tokens, 'checkbox-#{$scheme}-error-default-background'),
             ),
 
@@ -403,22 +425,48 @@
             disabled: (
                 border: map-get($tokens, 'checkbox-#{$scheme}-error-states-disabled-border'),
                 color: map-get($tokens, 'checkbox-#{$scheme}-error-states-disabled-color'),
+                text: map-get($tokens, 'checkbox-#{$scheme}-error-states-disabled-text'),
                 background: map-get($tokens, 'checkbox-#{$scheme}-error-states-disabled-background')
             )
         )
     );
 
     $code-block: (
-        main-background: map-get($tokens, 'code-block-#{$scheme}-background'),
-        actionbar-background: map-get($tokens, 'code-block-#{$scheme}-actionbar-background'),
-        border: map-get($tokens, 'code-block-#{$scheme}-border'),
-        main-background-less-contrast: map-get($tokens, 'code-block-#{$scheme}-decoration-less-contrast-background'),
-        line-numbers-color: map-get($tokens, 'code-block-#{$scheme}-line-numbers-color'),
-        main-code-color: map-get($tokens, 'code-block-#{$scheme}-color'),
-
-        actionbar: (
-            bg: map-get($tokens, 'code-block-#{$scheme}-actionbar-background'),
-            bg-less-contrast: map-get($tokens, 'code-block-#{$scheme}-decoration-less-contrast-actionbar-background'),
+        filled: (
+            container: (
+                background: map-get($tokens, 'code-block-#{$scheme}-filled-container-background'),
+                border: map-get($tokens, 'code-block-#{$scheme}-filled-container-border-color'),
+                shadow: map-get($tokens, 'code-block-#{$scheme}-filled-container-shadow')
+            ),
+            header: (
+                background: map-get($tokens, 'code-block-#{$scheme}-filled-header-background')
+            ),
+            actionbar: (
+                fade-gradient: map-get($tokens, 'code-block-#{$scheme}-filled-actionbar-fade-gradient'),
+                background: map-get($tokens, 'code-block-#{$scheme}-filled-actionbar-background')
+            ),
+            collapse: (
+                expanded-background: map-get($tokens, 'code-block-#{$scheme}-filled-collapse-expanded-background'),
+                collapsed-background: map-get($tokens, 'code-block-#{$scheme}-filled-collapse-collapsed-background')
+            )
+        ),
+        outline: (
+            container: (
+                background: map-get($tokens, 'code-block-#{$scheme}-outline-container-background'),
+                border: map-get($tokens, 'code-block-#{$scheme}-outline-container-border-color'),
+                shadow: map-get($tokens, 'code-block-#{$scheme}-outline-container-shadow')
+            ),
+            header: (
+                background: map-get($tokens, 'code-block-#{$scheme}-outline-header-background')
+            ),
+            actionbar: (
+                fade-gradient: map-get($tokens, 'code-block-#{$scheme}-outline-actionbar-fade-gradient'),
+                background: map-get($tokens, 'code-block-#{$scheme}-outline-actionbar-background')
+            ),
+            collapse: (
+                expanded-background: map-get($tokens, 'code-block-#{$scheme}-outline-collapse-expanded-background'),
+                collapsed-background: map-get($tokens, 'code-block-#{$scheme}-outline-collapse-collapsed-background')
+            )
         ),
 
         hljs: (
@@ -609,7 +657,7 @@
             border: map-get($tokens, 'form-field-#{$scheme}-states-disabled-border-color'),
             background: map-get($tokens, 'form-field-#{$scheme}-states-disabled-background'),
             placeholder: map-get($tokens, 'form-field-#{$scheme}-states-disabled-placeholder'),
-            text: map-get($tokens, 'form-field-#{$scheme}-states--disabled-text')
+            text: map-get($tokens, 'form-field-#{$scheme}-states-disabled-text')
         )
     );
 
@@ -617,17 +665,6 @@
         text: map-get($tokens, 'form-field-hint-#{$scheme}-text')
     );
 
-    $form-field-password-hint: (
-        text-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-text-color'),
-        icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-text-color'),
-
-        state-invalid-text-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-invalid-text-color'),
-        state-invalid-icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-invalid-icon-color'),
-
-        state-valid-text-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-valid-text-color'),
-        state-valid-icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-valid-icon-color')
-    );
-
     $hint: (
         fill-text-on: (
             fade-contrast: (
@@ -819,23 +856,48 @@
             state-hover: map-get($tokens, 'icon-button-#{$scheme}-success-states-hover'),
             state-active: map-get($tokens, 'icon-button-#{$scheme}-success-states-active'),
             state-disabled: map-get($tokens, 'icon-button-#{$scheme}-success-states-disabled')
+        ),
+        warning: (
+            default: map-get($tokens, 'icon-button-#{$scheme}-warning-default'),
+            state-hover: map-get($tokens, 'icon-button-#{$scheme}-warning-states-hover'),
+            state-active: map-get($tokens, 'icon-button-#{$scheme}-warning-states-active'),
+            state-disabled: map-get($tokens, 'icon-button-#{$scheme}-warning-states-disabled')
         )
     );
 
-    $link: (
-        text: map-get($tokens, 'link-#{$scheme}-text'),
-        border-bottom: map-get($tokens, 'link-#{$scheme}-border-bottom'),
-
-        state-visited-text: map-get($tokens, 'link-#{$scheme}-state-visited-text'),
-        state-visited-border-bottom: map-get($tokens, 'link-#{$scheme}-state-visited-border-bottom'),
-
-        state-hover-text: map-get($tokens, 'link-#{$scheme}-state-hover-text'),
-        state-hover-border-bottom: map-get($tokens, 'link-#{$scheme}-state-hover-border-bottom'),
 
-        state-active-text: map-get($tokens, 'link-#{$scheme}-state-active'),
-        state-active-border-bottom: map-get($tokens, 'link-#{$scheme}-state-active-border-bottom'),
-
-        state-focused-outline: map-get($tokens, 'link-#{$scheme}-state-focused-outline')
+    $link: (
+        default: (
+            text: map-get($tokens, 'link-#{$scheme}-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-border-bottom')
+        ),
+        visited: (
+            text: map-get($tokens, 'link-#{$scheme}-state-visited-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-visited-border-bottom')
+        ),
+        visited-hover: (
+            text: map-get($tokens, 'link-#{$scheme}-state-visited-hover-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-visited-hover-border-bottom')
+        ),
+        visited-active: (
+            text: map-get($tokens, 'link-#{$scheme}-state-visited-active-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-visited-active-border-bottom')
+        ),
+        hover: (
+            text: map-get($tokens, 'link-#{$scheme}-state-hover-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-hover-border-bottom')
+        ),
+        active: (
+            text: map-get($tokens, 'link-#{$scheme}-state-active-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-active-border-bottom')
+        ),
+        focused: (
+            outline: map-get($tokens, 'link-#{$scheme}-state-focused-outline')
+        ),
+        disabled: (
+            text: map-get($tokens, 'link-#{$scheme}-state-disabled-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-disabled-border-bottom')
+        )
     );
 
     $list-item: (
@@ -1226,6 +1288,11 @@
         )
     );
 
+    $select-panel: (
+        background: map-get($tokens, 'select-panel-#{$scheme}-dropdown-background'),
+        shadow: map-get($tokens, 'select-panel-#{$scheme}-dropdown-shadow')
+    );
+
     $sidepanel: (
         box-shadow: map-get($tokens, 'sidepanel-#{$scheme}-container-box-shadow'),
         background: map-get($tokens, 'sidepanel-#{$scheme}-container-background'),
@@ -1735,7 +1802,6 @@
         file-upload: $file-upload,
         form-field: $form-field,
         form-field-hint: $form-field-hint,
-        form-field-password-hint: $form-field-password-hint,
         hint: $hint,
         forms: $forms,
         icon: $icon,
@@ -1753,6 +1819,7 @@
         progress-spinner: $progress-spinner,
         radio: $radio,
         risk-level: $risk-level,
+        select-panel: $select-panel,
         sidepanel: $sidepanel,
         tab-item: $tab-item,
         tab-stack: $tab-stack,

package/core/styles/theming/_scrollbars-theme.scss

@@ -11,7 +11,9 @@
     );
 
     //firefox
-    scrollbar-width: auto;
+    @supports not selector(::-webkit-scrollbar) {
+        scrollbar-width: thin;
+    }
 
     // webkit
     &::-webkit-scrollbar,
@@ -30,6 +32,7 @@
             --kbq-scrollbar-size-thumb-inset-border-radius,
             map.get($tokens, scrollbar-size-thumb-border-radius)
         );
+        min-height: 20px;
     }
 
     &::-webkit-scrollbar-button,
@@ -46,7 +49,9 @@
         @include kbq-scrollbar(map.get($theme, tokens));
 
         // firefox
-        scrollbar-color: map.get($scrollbar, default) transparent;
+        @supports not selector(::-webkit-scrollbar) {
+            scrollbar-color: map.get($scrollbar, default) transparent;
+        }
 
         // webkit
         &::-webkit-scrollbar,