@koobiq/components 18.24.0 → 18.26.0

package/toggle/_toggle-theme.scss

@@ -1,6 +1,6 @@
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
 
-@mixin kbq-toggle-state($type, $state-name) {
+@mixin _kbq-toggle-state($type, $state-name) {
     $base: toggle-#{$type}-#{$state-name};
 
     .kbq-toggle-bar {
@@ -13,25 +13,25 @@
     }
 }
 
-@mixin kbq-toggle-color($type) {
-    @include kbq-toggle-state($type, default);
+@mixin _kbq-toggle-color($type) {
+    @include _kbq-toggle-state($type, default);
 
     &:hover {
-        @include kbq-toggle-state($type, states-hover);
+        @include _kbq-toggle-state($type, states-hover);
     }
 
     &.kbq-active,
     &.kbq-indeterminate {
-        @include kbq-toggle-state($type, states-checked);
+        @include _kbq-toggle-state($type, states-checked);
     }
 
     &.kbq-active:hover,
     &.kbq-indeterminate:hover {
-        @include kbq-toggle-state($type, states-checked-hover);
+        @include _kbq-toggle-state($type, states-checked-hover);
     }
 
     &.cdk-keyboard-focused {
-        @include kbq-toggle-state($type, states-focused);
+        @include _kbq-toggle-state($type, states-focused);
 
         & .kbq-toggle-bar {
             border-color: var(--kbq-toggle-#{$type}-states-focused-focus-outline);
@@ -41,7 +41,7 @@
 
     &.kbq-active.cdk-keyboard-focused,
     &.kbq-indeterminate.cdk-keyboard-focused {
-        @include kbq-toggle-state($type, states-checked-focused);
+        @include _kbq-toggle-state($type, states-checked-focused);
 
         & .kbq-toggle-bar {
             border-color: var(--kbq-toggle-#{$type}-states-checked-focused-focus-outline);
@@ -51,16 +51,16 @@
 
     &.kbq-disabled,
     &.kbq-active.kbq-disabled {
-        @include kbq-toggle-state($type, states-disabled);
+        @include _kbq-toggle-state($type, states-disabled);
     }
 }
 
 @mixin kbq-toggle-theme() {
     .kbq-toggle {
-        @include kbq-toggle-color(theme);
+        @include _kbq-toggle-color(theme);
 
         &.kbq-error {
-            @include kbq-toggle-color(error);
+            @include _kbq-toggle-color(error);
         }
 
         &.kbq-disabled {
@@ -72,31 +72,35 @@
                 background: var(--kbq-icon-white);
             }
         }
+
+        .kbq-hint .kbq-hint__text {
+            color: var(--kbq-foreground-contrast-secondary);
+        }
     }
 }
 
 @mixin kbq-toggle-typography() {
     .kbq-toggle:not(.kbq-toggle_big) {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
 
-        & .kbq-hint {
-            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        & .kbq-hint .kbq-hint__text {
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
         }
 
         & .kbq-toggle-bar-container {
-            @include kbq-css-font-variable(typography, text-compact, line-height, '');
+            @include tokens.kbq-css-font-variable(typography, text-compact, line-height, '');
         }
     }
 
     .kbq-toggle.kbq-toggle_big {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-big);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
 
-        & .kbq-hint {
-            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+        & .kbq-hint .kbq-hint__text {
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 
         & .kbq-toggle-bar-container {
-            @include kbq-css-font-variable(typography, text-big, line-height, '');
+            @include tokens.kbq-css-font-variable(typography, text-big, line-height, '');
         }
     }
 }

package/toggle/toggle-tokens.scss

@@ -2,7 +2,6 @@
     --kbq-toggle-size-normal-height: var(--kbq-size-l);
     --kbq-toggle-size-normal-width: 28px;
     --kbq-toggle-size-normal-horizontal-content-padding: var(--kbq-size-s);
-    --kbq-toggle-size-normal-vertical-content-padding: var(--kbq-size-s);
     --kbq-toggle-size-big-height: var(--kbq-size-l);
     --kbq-toggle-size-big-width: 28px;
     --kbq-toggle-size-big-horizontal-content-padding: var(--kbq-size-s);

package/toggle/toggle.scss

@@ -1,6 +1,5 @@
-@use '../core/styles/common/tokens' as *;
-
-@use './toggle-theme' as *;
+@use '../core/styles/common/tokens';
+@use './toggle-theme' as theme;
 
 $toggle-thumb-offset: 8px;
 
@@ -30,7 +29,7 @@ $toggle-thumb-offset: 8px;
         }
 
         .kbq-toggle-bar-container:has(+ .kbq-toggle__content) {
-            padding-top: kbq-css-half-difference(typography-text-normal-line-height, toggle-size-normal-height);
+            padding-top: tokens.kbq-css-half-difference(typography-text-normal-line-height, toggle-size-normal-height);
         }
     }
 
@@ -70,7 +69,7 @@ $toggle-thumb-offset: 8px;
     }
 
     .kbq-hint {
-        margin-top: var(--kbq-toggle-size-normal-vertical-content-padding);
+        margin-top: var(--kbq-size-3xs);
     }
 
     &.kbq-indeterminate {
@@ -123,7 +122,7 @@ $toggle-thumb-offset: 8px;
 
     .kbq-toggle-layout {
         .kbq-toggle-bar-container:has(+ .kbq-toggle__content) {
-            padding-top: kbq-css-half-difference(toggle-font-big-label-line-height, toggle-size-big-height);
+            padding-top: tokens.kbq-css-half-difference(toggle-font-big-label-line-height, toggle-size-big-height);
         }
     }
 }
@@ -132,5 +131,5 @@ $toggle-thumb-offset: 8px;
     cursor: pointer;
 }
 
-@include kbq-toggle-theme();
-@include kbq-toggle-typography();
+@include theme.kbq-toggle-theme();
+@include theme.kbq-toggle-typography();

package/top-bar/top-bar-tokens.scss

@@ -1,12 +1,13 @@
-.kbq-top-bar {
+:where(.kbq-top-bar) {
     --kbq-top-bar-position: sticky;
     --kbq-top-bar-background: var(--kbq-background-bg);
     --kbq-top-bar-spacer-min-width: 80px;
     --kbq-top-bar-padding-vertical: var(--kbq-size-xl);
     --kbq-top-bar-padding-horizontal: var(--kbq-size-xxl);
     --kbq-top-bar-border-radius: 0;
-    --kbq-top-bar-left-gap: 0;
-    --kbq-top-bar-right-gap: var(--kbq-size-s);
+    --kbq-top-bar-container-start-gap: 0;
+    --kbq-top-bar-container-start-basis: 0;
+    --kbq-top-bar-container-end-gap: var(--kbq-size-s);
     --kbq-top-bar-shadow-bottom: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-top-bar-shadow-transition: ease-out 300ms;
 }

package/top-bar/top-bar.d.ts

@@ -1,3 +1,4 @@
+import { KbqOverflowItems } from '@koobiq/components/overflow-items';
 import * as i0 from "@angular/core";
 export declare class KbqTopBarSpacer {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBarSpacer, never>;
@@ -11,6 +12,12 @@ export declare class KbqTopBarContainer {
      * Conditionally applies a CSS class based on the value
      */
     placement: import("@angular/core").InputSignal<"start" | "end">;
+    /**
+     * Track if container has `KbqOverflowItems` directive assigned.
+     * Used to replace `gap` with `margin` so `KbqOverflowItems` will calculate correct width on resize.
+     * @docs-private
+     */
+    protected readonly overflowItems: KbqOverflowItems | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBarContainer, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTopBarContainer, "[kbqTopBarContainer]", never, { "placement": { "alias": "placement"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/top-bar/top-bar.scss

@@ -14,17 +14,41 @@
 
     .kbq-top-bar-spacer {
         height: 100%;
-        flex: 1 0 var(--kbq-top-bar-spacer-min-width);
+        flex: 0 0 var(--kbq-top-bar-spacer-min-width);
     }
 
     .kbq-top-bar-container__start {
         display: flex;
-        gap: var(--kbq-top-bar-left-gap);
+        gap: var(--kbq-top-bar-container-start-gap);
+        flex: 1 0 var(--kbq-top-bar-container-start-basis);
+        justify-content: flex-start;
+        min-width: 0;
     }
 
     .kbq-top-bar-container__end {
         display: flex;
-        gap: var(--kbq-top-bar-right-gap);
+        gap: var(--kbq-top-bar-container-end-gap);
+        justify-content: end;
+    }
+
+    .kbq-top-bar-container__with-overflow-items {
+        gap: unset;
+        padding: 1px;
+
+        > .kbq-overflow-item {
+            &:not(:last-of-type) {
+                margin-right: var(--kbq-top-bar-container-end-gap);
+            }
+
+            // apply margin if the last item needs to be alwaysVisible
+            &:last-of-type:is([aria-hidden='false']) + .kbq-overflow-items-result {
+                margin-left: var(--kbq-top-bar-container-end-gap);
+            }
+        }
+
+        .kbq-overflow-items-result:first-child {
+            margin-right: var(--kbq-top-bar-container-end-gap);
+        }
     }
 
     &.kbq-top-bar_with-shadow {