@koobiq/components 16.0.0-beta.7 → 16.0.0-beta.9

package/badge/_badge-theme.scss

@@ -4,24 +4,29 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
-@mixin kbq-badge-filled-color($badge) {
+@mixin kbq-badge-style($badge) {
     color: map.get($badge, color);
     background: map.get($badge, background);
-    border: transparent;
 
     & .kbq-badge-caption {
         color: map.get($badge, caption);
     }
+
+    & .kbq-icon {
+        color: map.get($badge, icon) !important;
+    }
+}
+
+@mixin kbq-badge-filled-color($badge) {
+    @include kbq-badge-style($badge);
+
+    border: transparent;
 }
 
 @mixin kbq-badge-outline-color($badge) {
-    color: map.get($badge, color);
-    border-color: map.get($badge, border);
-    background: map.get($badge, background);
+    @include kbq-badge-style($badge);
 
-    & .kbq-badge-caption {
-        color: map.get($badge, caption);
-    }
+    border-color: map.get($badge, border);
 }
 
 @mixin kbq-badge-theme($theme) {

package/badge/badge.component.d.ts

@@ -1,4 +1,5 @@
-import { KbqIconItem } from '@koobiq/components/icon';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, QueryList, Renderer2 } from '@angular/core';
+import { KbqIcon, KbqIconItem } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 export declare enum KbqBadgeColors {
     FadeContrast = "fade-contrast",
@@ -14,6 +15,23 @@ export declare class KbqBadgeCaption {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCaption, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBadgeCaption, "[kbq-badge-caption]", never, {}, {}, never, never, false, never>;
 }
+export declare const getNodesWithoutComments: (nodes: NodeList) => Node[];
+export declare const leftIconClassName = "kbq-icon_left";
+export declare const rightIconClassName = "kbq-icon_right";
+export declare const badgeLeftIconClassName = "kbq-badge-icon_left";
+export declare const badgeRightIconClassName = "kbq-badge-icon_right";
+export declare class KbqBadgeCssStyler implements AfterContentInit {
+    private renderer;
+    private cdr;
+    icons: QueryList<KbqIcon>;
+    nativeElement: HTMLElement;
+    isIconButton: boolean;
+    constructor(elementRef: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    updateClassModifierForIcons(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCssStyler, [null, null, { skipSelf: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBadgeCssStyler, "kbq-badge", never, {}, {}, ["icons"], never, false, never>;
+}
 export declare class KbqBadge {
     iconItem: KbqIconItem;
     compact: boolean;

package/badge/badge.component.scss

@@ -34,6 +34,20 @@ $tokens: meta.module-variables(tokens) !default;
             var(--kbq-badge-size-normal-content-padding, map.get($tokens, badge-size-normal-content-padding));
     }
 
+    & .kbq-icon_left {
+        margin-right: var(
+            --kbq-badge-size-normal-icon-left-margin-right,
+            map.get($tokens, badge-size-normal-icon-left-margin-right)
+        );
+    }
+
+    & .kbq-icon_right {
+        margin-left: var(
+            --kbq-badge-size-normal-icon-right-margin-left,
+            map.get($tokens, badge-size-normal-icon-right-margin-left)
+        );
+    }
+
     &.kbq-badge_compact {
         padding:
             var(--kbq-badge-size-compact-vertical-padding, map.get($tokens, badge-size-compact-vertical-padding))
@@ -51,5 +65,19 @@ $tokens: meta.module-variables(tokens) !default;
             padding-left:
                 var(--kbq-badge-size-compact-content-padding, map.get($tokens, badge-size-compact-content-padding));
         }
+
+        & .kbq-icon_left {
+            margin-right: var(
+                --kbq-badge-size-compact-icon-left-margin-right,
+                map.get($tokens, badge-size-compact-icon-left-margin-right)
+            );
+        }
+
+        & .kbq-icon_right {
+            margin-left: var(
+                --kbq-badge-size-compact-icon-right-margin-left,
+                map.get($tokens, badge-size-compact-icon-right-margin-left)
+            );
+        }
     }
 }

package/badge/badge.module.d.ts

@@ -5,6 +5,6 @@ import * as i3 from "@angular/cdk/a11y";
 import * as i4 from "@angular/cdk/platform";
 export declare class KbqBadgeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqBadgeModule, [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqBadgeModule, [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption, typeof i1.KbqBadgeCssStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption, typeof i1.KbqBadgeCssStyler]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqBadgeModule>;
 }

package/button-toggle/_button-toggle-theme.scss

@@ -9,10 +9,9 @@
 $tokens: meta.module-variables(tokens) !default;
 
 @mixin kbq-button-toggle-color($state) {
-    & .kbq-button-overlay {
-        background: map.get($state, background);
-        border-color: map.get($state, background);
-    }
+    background: map.get($state, background);
+
+    color: map.get($state, text);
 
     & .kbq-icon {
         color: map.get($state, icon);
@@ -20,73 +19,55 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin kbq-button-toggle-theme($theme) {
-    $button-toggle-group: map.get(map.get(map.get($theme, components), button-toggle), button-toggle-group);
-    $button-toggle: map.get(map.get(map.get($theme, components), button-toggle), button-toggle);
-    $states: map.get($button-toggle, states);
+    $button-toggle: map.get(map.get($theme, components), button-toggle);
 
     .kbq-button-toggle-group {
-        background: map.get($button-toggle-group, background);
-        border-color:  map.get($button-toggle-group, border);
+        $container: map.get($button-toggle, container);
+
+        background: map.get($container, background);
 
         .kbq-button-toggle {
+            $button: map.get($button-toggle, item);
+
             & > .kbq-button,
             & > .kbq-icon-button {
-                color: map.get($button-toggle, color);
-                border-color: map.get($button-toggle-group, background);
-                background: inherit;
+                @include kbq-button-toggle-color(map.get($button, default));
 
-                & .kbq-icon {
-                    color: map.get($button-toggle, icon);
+                &:hover:not(.kbq-disabled) {
+                    @include kbq-button-toggle-color(map.get($button, hover));
                 }
 
-                .kbq-button-overlay {
-                    background-color: unset;
+                &:active:not(.kbq-disabled) {
+                    @include kbq-button-toggle-color(map.get($button, active));
                 }
 
-                &:hover:not([disabled], .kbq-active) {
-                    @include kbq-button-toggle-color(map.get($states, hover));
-                }
-
-                &:active:not([disabled], .kbq-active) {
-                    @include kbq-button-toggle-color(map.get($states, active));
-                }
+                &.kbq-selected:not(.kbq-disabled) {
+                    @include kbq-button-toggle-color(map.get($button, selected));
 
-                &.kbq-active {
-                    $state: map.get($states, pressed);
-
-                    background: map.get($state, background);
-                    border-color: map.get($state, background);
+                    &:hover {
+                        @include kbq-button-toggle-color(map.get($button, selected-hover));
+                    }
 
-                    & .kbq-icon {
-                        color: map.get($state, icon);
+                    &:active {
+                        @include kbq-button-toggle-color(map.get($button, selected-active));
                     }
                 }
 
-                &.kbq-disabled,
-                &[disabled] {
-                    opacity: map.get(map.get($states, disabled), opacity);
+                &.kbq-disabled {
+                    @include kbq-button-toggle-color(map.get($button, disabled));
                 }
 
                 &.cdk-keyboard-focused {
-                    box-shadow: unset;
+                    border-color: map.get($button, focused);
                 }
             }
-
-            &.cdk-keyboard-focused {
-                box-shadow: 0 0 0 2px map-get(map-get($theme, states), focused-color);
-            }
         }
     }
 }
 
 @mixin kbq-button-toggle-typography($config) {
-    .kbq-button-toggle {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
-
-        > .kbq-button,
-        > .kbq-icon-button {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
-        }
+    .kbq-button-toggle .kbq-button-toggle-wrapper {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-item));
     }
 }
 

package/button-toggle/button-toggle.scss

@@ -13,116 +13,82 @@ $tokens: meta.module-variables(tokens) !default;
     display: inline-flex;
     flex-direction: row;
     align-items: center;
-    gap: map.get($tokens, size-3xs);
 
-    border-width: var(
-        --kbq-button-toggle-group-size-border-width,
-        map.get($tokens, button-toggle-group-size-border-width)
+    gap: var(
+        --kbq-button-toggle-size-container-content-gap-horizontal,
+        map.get($tokens, button-toggle-size-container-content-gap-horizontal)
     );
+
     border-radius: var(
-        --kbq-button-toggle-group-size-border-radius,
-        map.get($tokens, button-toggle-group-size-border-radius)
-    );
-    border-style: solid;
-    padding: var(
-        --kbq-button-toggle-group-size-padding,
-        map.get($tokens, button-toggle-group-size-padding)
+        --kbq-button-toggle-size-container-border-radius,
+        map.get($tokens, button-toggle-size-container-border-radius)
     );
 
+    padding:
+        var(
+            --kbq-button-toggle-size-container-padding-vertical,
+            map.get($tokens, button-toggle-size-container-padding-vertical)
+        )
+        var(
+            --kbq-button-toggle-size-container-padding-horizontal,
+            map.get($tokens, button-toggle-size-container-padding-horizontal)
+        );
+
     .kbq-button-toggle {
         display: flex;
         overflow: hidden;
         justify-content: flex-start;
 
+        $padding-vertical: map.get($tokens, button-toggle-size-item-padding-vertical);
+        $padding-horizontal: map.get($tokens, button-toggle-size-item-padding-horizontal);
+        $outline-width: map.get($tokens, button-toggle-size-item-focus-outline-width);
+
         border-radius: var(
-            --kbq-button-toggle-size-border-radius,
-            map.get($tokens, button-toggle-size-border-radius)
+            --kbq-button-toggle-size-item-border-radius,
+            map.get($tokens, button-toggle-size-item-border-radius)
         );
 
         > .kbq-button,
         > .kbq-button-icon {
-            border: none;
-            border-width: var(
-                --kbq-button-toggle-size-border-width,
-                map.get($tokens, button-toggle-size-border-width)
-            );
             border-radius: var(
-                --kbq-button-toggle-size-border-radius,
-                map.get($tokens, button-toggle-size-border-radius)
-            );
-            min-width: var(
-                --kbq-button-toggle-size-min-width,
-                map.get($tokens, button-toggle-size-min-width)
-            );
-            padding-left: var(
-                --kbq-button-toggle-size-horizontal-padding,
-                map.get($tokens, button-toggle-size-horizontal-padding)
-            );
-            padding-right: var(
-                --kbq-button-toggle-size-horizontal-padding,
-                map.get($tokens, button-toggle-size-horizontal-padding)
+                --kbq-button-toggle-size-item-border-radius,
+                map.get($tokens, button-toggle-size-item-border-radius)
             );
 
+            padding:
+                calc(var(--kbq-button-toggle-size-item-padding-vertical, $padding-vertical) - $outline-width)
+                calc(var(--kbq-button-toggle-size-item-padding-horizontal, $padding-horizontal) - $outline-width);
+
             & .kbq-button-wrapper {
                 width: 100%;
+
             }
 
             .kbq-button-toggle-wrapper {
+                display: inline-flex;
+
                 text-overflow: ellipsis;
                 overflow: hidden;
                 white-space: nowrap;
-                display: inline-block;
-                width: 100%;
 
-                .kbq-icon {
-                    line-height: 20px;
-                    vertical-align: baseline;
-                }
-            }
-        }
+                width: 100%;
 
-        &.kbq-button-toggle-icon-text {
-            > .kbq-button,
-            > .kbq-button-icon {
-                padding-left: var(
-                    --kbq-button-toggle-size-left-icon-padding,
-                    map.get($tokens, button-toggle-size-left-icon-padding)
+                gap: var(
+                    --kbq-button-toggle-size-item-content-gap-horizontal,
+                    map.get($tokens, button-toggle-size-item-content-gap-horizontal)
                 );
-
-                & .kbq-icon {
-                    margin-right: map.get($tokens, size-xxs);
-                }
             }
         }
-
-        &[disabled] {
-            outline: 0;
-        }
     }
 
     &:not(.kbq-button-toggle_vertical) {
-        height: 32px;
-
         .kbq-button-toggle {
             > .kbq-button,
             > .kbq-button-icon {
-                height: 28px;
-                min-height: 28px;
-            }
+                max-width: 100%;
 
-            &.kbq-button-toggle-icon {
-                width: var(
-                    --kbq-button-icon-toggle-size-width,
-                    map.get($tokens, icon-button-toggle-size-width)
-                );
-
-                > .kbq-button,
-                > .kbq-button-icon {
-                    width: var(
-                        --kbq-button-icon-toggle-size-width,
-                        map.get($tokens, icon-button-toggle-size-width)
-                    );
-                }
+                height: unset;
+                min-height: unset;
             }
         }
     }
@@ -132,32 +98,19 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-button-toggle_vertical {
     flex-direction: column;
 
-    .kbq-button-toggle + .kbq-button-toggle {
-        border-left: none;
-        border-right: none;
-    }
-
     .kbq-button-toggle {
         width: 100%;
 
         > .kbq-button,
         > .kbq-button-icon {
             width: 100%;
-            border-width: var(
-                --kbq-button-toggle-size-border-width,
-                map.get($tokens, button-toggle-size-border-width)
-            );
 
             border-radius: var(
-                --kbq-button-toggle-size-border-radius,
-                map.get($tokens, button-toggle-size-border-radius)
+                --kbq-button-toggle-size-item-border-radius,
+                map.get($tokens, button-toggle-size-item-border-radius)
             );
         }
     }
 }
 
 /* stylelint-enable no-descending-specificity */
-
-.kbq-button-toggle-standalone {
-    box-shadow: none;
-}

package/card/_card-theme.scss

@@ -22,7 +22,7 @@
     $is-dark: map.get($theme, is-dark);
 
     .kbq-card {
-        color: map.get($foreground, text);
+        color: map.get($foreground, contrast);
 
         &.kbq-card_error {
             @include kbq-card-type(map.get($card, error));

package/core/option/_optgroup-theme.scss

@@ -8,7 +8,7 @@
     $foreground: map.get($theme, foreground);
 
     .kbq-optgroup-label {
-        color: map.get($foreground, text);
+        color: map.get($foreground, contrast);
     }
 
     .kbq-disabled .kbq-optgroup-label {

package/core/option/_option-theme.scss

@@ -30,7 +30,7 @@
     .kbq-option {
         @include kbq-option(map.get($list-item, default));
 
-        &:hover:not(.kbq-disabled):not([disabled]) {
+        &:hover:not(.kbq-disabled) {
             @include kbq-option(map.get($list-item, hover));
         }
 
@@ -42,7 +42,7 @@
         &.kbq-selected {
             @include kbq-option(map.get($list-item, selected));
 
-            &:hover:not(.kbq-disabled):not([disabled]) {
+            &:hover:not(.kbq-disabled) {
                 @include kbq-option(map.get($list-item, selected-hover));
             }
         }

package/core/option/option.scss

@@ -6,12 +6,12 @@
 
 .kbq-option {
     @include common.kbq-list-item-base();
+
+    &:not(.kbq-disabled) {
+        cursor: pointer;
+    }
 }
 
 .kbq-option-text {
     @include common.kbq-list-text();
-
-    &:not(.kbq-disabled):not([disabled]) {
-        cursor: pointer;
-    }
 }

package/core/styles/_koobiq-theme.scss

@@ -10,15 +10,19 @@
 @use '../../autocomplete/autocomplete-theme' as *;
 @use '../../badge/badge-theme' as *;
 @use '../../button/button-theme' as *;
+@use '../../button-toggle/button-toggle-theme' as *;
 @use '../../card/card-theme' as *;
 @use '../../checkbox/checkbox-theme' as *;
 @use '../../code-block/code-block-theme' as *;
 @use '../../datepicker/datepicker-theme' as *;
 @use '../../divider/divider-theme' as *;
 @use '../../dropdown/dropdown-theme' as *;
+@use '../../file-upload/file-upload-theme' as *;
 @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 *;
@@ -59,6 +63,7 @@
     @include kbq-autocomplete-theme($theme);
     @include kbq-badge-theme($theme);
     @include kbq-button-theme($theme);
+    @include kbq-button-toggle-theme($theme);
     @include kbq-card-theme($theme);
     @include kbq-checkbox-theme($theme);
     @include kbq-code-block-theme($theme);
@@ -67,6 +72,7 @@
     @include kbq-divider-theme($theme);
     @include kbq-dropdown-theme($theme);
     @include kbq-form-field-theme($theme);
+    @include kbq-file-upload-theme($theme);
     @include kbq-hint-theme($theme);
     @include kbq-forms-theme($theme);
     @include kbq-highlight-theme($theme);
@@ -118,6 +124,7 @@
     @include kbq-alert-typography($config);
     @include kbq-badge-typography($config);
     @include kbq-button-typography($config);
+    @include kbq-button-toggle-typography($config);
     @include kbq-checkbox-typography($config);
     @include kbq-code-block-typography($config);
     @include kbq-datepicker-typography($config);
@@ -125,6 +132,7 @@
     @include kbq-dl-typography($config);
     @include kbq-form-field-typography($config);
     @include kbq-hint-typography($config);
+    @include kbq-file-upload-typography($config);
     @include kbq-forms-typography($config);
     @include kbq-input-typography($config);
     @include kbq-link-typography($config);

package/core/styles/common/_animation.scss

@@ -21,15 +21,19 @@
         bottom: 0;
         left: 0;
 
-        $lighter: transparent;
-        $darker: rgba(0, 0, 0, 0.05);
+        $lighter: rgba(255, 255, 255, 0.04);
+        $darker: rgba(0, 0, 0, 0.04);
+
         background: linear-gradient(
             135deg,
-            $darker 10px, $lighter 10px,
-            $lighter 20px, $darker 20px,
-            $darker 30px, $lighter 30px
+            $darker 10px,
+            $lighter 10px,
+            $lighter 20px,
+            $darker 20px,
+            $darker 30px,
+            $lighter 31px
         ) repeat;
-        background-size: 29px 29px;
+        background-size: 32px 32px;
         animation: kbq-progress 1s linear infinite;
     }
 }

package/core/styles/common/_overlay.scss

@@ -6,7 +6,7 @@ $overlay-z-index: 1000 !default;
 $overlay-backdrop-z-index: 1000 !default;
 
 // Background color for all of the backdrops
-$overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default;
+$overlay-backdrop-color: rgba(0, 0, 0, 0.50) !default;
 
 // Default backdrop animation is based on the Material Design swift-ease-out.
 $backdrop-animation-duration: 400ms !default;