@koobiq/components 20.4.2 → 21.0.1

package/tabs/_tabs-common.scss

@@ -1,3 +1,5 @@
+@use '../core/styles/common/animation';
+@use '../core/styles/common/squircle' as *;
 @use '../core/styles/common/tokens';
 @use '../core/styles/common/vendor-prefixes';
 
@@ -28,9 +30,10 @@
         width: var(--kbq-tabs-size-tab-item-focus-outline-width);
         style: solid;
         color: transparent;
-        radius: var(--kbq-tabs-size-tab-item-border-radius);
     }
 
+    @include kbq-squircle(var(--kbq-tabs-size-tab-item-border-radius));
+
     outline: none;
 
     &.kbq-selected {
@@ -77,10 +80,12 @@
         pointer-events: none;
     }
 
+    // Two classes outweigh the single-class base rule above, so no `!important` is needed to drop the
+    // padding here — and without it a consumer can still override the padding on an icon-only tab.
     &.kbq-tab-label_icon-only {
         width: var(--kbq-size-3xl);
         height: var(--kbq-size-3xl);
-        padding: 0 !important;
+        padding: 0;
         margin-inline: var(--kbq-size-xxs);
         box-sizing: content-box;
 
@@ -192,24 +197,17 @@
 
         overflow-x: auto;
         overflow-y: hidden;
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
 
         // `kbq-tab-group_vertical` sits on an ancestor either way: the `<kbq-tab-group>` wrapping a
         // `kbq-tab-header`, or the `[kbqTabNavBar]` host itself — so one descendant selector covers
-        // both `KbqPaginatedTabHeader` subclasses instead of the two disagreeing on the scrollbar.
+        // both `KbqPaginatedTabHeader` subclasses instead of the two disagreeing on the scroll axis.
+        // Whether a scrollbar is shown on that axis is `KbqScrollbarViewport`'s call, driven by
+        // `scrollbarMode`. Nothing is hidden here: a local rule would apply unconditionally, including
+        // in `native` mode where the directive deliberately adds no hiding class, and would leave that
+        // header with no scrollbar at all.
         .kbq-tab-group_vertical & {
             overflow-x: hidden;
             overflow-y: auto;
-            scrollbar-width: auto;
-
-            &::-webkit-scrollbar {
-                display: block;
-            }
         }
 
         .kbq-tab-header__pagination-controls_enabled & {
@@ -307,5 +305,7 @@
         &.kbq-disabled {
             background: var(--kbq-states-icon-disabled);
         }
+
+        @include animation.kbq-animations-off();
     }
 }

package/tabs/_tabs-theme.scss

@@ -81,9 +81,8 @@
                     background: var(--kbq-tabs-tab-stack-filled-on-surface-background);
                 }
 
-                // FIXME: need check, tab-group has different subtype
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style(filled, on-background);
+                    @include kbq-tab-item-style(filled, on-surface);
                 }
             }
         }
@@ -105,7 +104,7 @@
                 }
 
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style(transparent, on-background);
+                    @include kbq-tab-item-style(transparent, on-surface);
                 }
             }
         }
@@ -125,7 +124,7 @@
                 background: var(--kbq-tabs-tab-stack-filled-on-surface-background);
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style(filled, on-background);
+                    @include kbq-tab-item-style(filled, on-surface);
                 }
             }
         }
@@ -143,7 +142,7 @@
                 background: var(--kbq-tabs-tab-stack-transparent-on-surface-background);
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style(transparent, on-background);
+                    @include kbq-tab-item-style(transparent, on-surface);
                 }
             }
         }

package/tabs/tab-body.scss

@@ -1,8 +1,56 @@
+@use '../core/styles/common/animation';
+
+$easing: cubic-bezier(0.35, 0, 0.25, 1);
+
 .kbq-tab-body__content {
     height: 100%;
     overflow: auto;
 
-    .kbq-tab-group_dynamic-height {
+    // `none` rather than a zero translation, which some browsers render blurred.
+    transform: none;
+    transition: transform var(--kbq-tab-body-animation-duration) $easing;
+
+    .kbq-tab-group_dynamic-height & {
         overflow: hidden;
     }
+
+    // A side body keeps a height before it moves: Chrome skips the transition of an element without one in RTL.
+    &.kbq-tab-body__content_left {
+        transform: translate3d(-100%, 0, 0);
+        min-height: 1px;
+    }
+
+    &.kbq-tab-body__content_right {
+        transform: translate3d(100%, 0, 0);
+        min-height: 1px;
+    }
+
+    &.kbq-tab-body__content_left-origin-center {
+        animation: kbq-tab-body-from-left var(--kbq-tab-body-animation-duration) $easing;
+    }
+
+    &.kbq-tab-body__content_right-origin-center {
+        animation: kbq-tab-body-from-right var(--kbq-tab-body-animation-duration) $easing;
+    }
+
+    &.kbq-tab-body__content_left,
+    &.kbq-tab-body__content_right,
+    &.kbq-tab-body__content_left-origin-center,
+    &.kbq-tab-body__content_right-origin-center {
+        @include animation.kbq-animations-off();
+    }
+
+    @include animation.kbq-animations-off();
+}
+
+@keyframes kbq-tab-body-from-left {
+    from {
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+@keyframes kbq-tab-body-from-right {
+    from {
+        transform: translate3d(100%, 0, 0);
+    }
 }

package/tabs/tab-header.scss

@@ -1,5 +1,6 @@
 @use '../core/styles/common/vendor-prefixes';
 @use './tabs-common';
+@use '../core/styles/common/squircle' as *;
 
 @include tabs-common.paginated-tab-header;
 
@@ -8,7 +9,7 @@
     overflow: hidden;
     position: relative;
     flex-shrink: 0;
-    border-radius: var(--kbq-tabs-size-tab-stack-horizontal-border-radius);
+    @include kbq-squircle(var(--kbq-tabs-size-tab-stack-horizontal-border-radius));
 
     &.kbq-tab-header_underlined {
         .kbq-tab-group:not(.kbq-tab-group_on-surface) & {

package/tags/tag-list.scss

@@ -1,3 +1,4 @@
+@use '../core/styles/common/animation';
 @use '../core/styles/common/tokens' as *;
 @use '../core/styles/common/input';
 
@@ -12,8 +13,11 @@
         outline: none;
     }
 
+    // The tags carry `kbq-animations-disabled`, see `KbqTag`.
     &.cdk-drop-list-dragging .cdk-drag {
         transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+
+        @include animation.kbq-animations-off();
     }
 }
 

package/tags/tag.scss

@@ -1,6 +1,8 @@
+@use '../core/styles/common/animation';
 @use '../core/styles/common/tokens' as *;
 @use '../core/styles/common/vendor-prefixes';
 @use '../core/styles/common/input';
+@use '../core/styles/common/squircle' as *;
 
 .kbq-tag {
     @include vendor-prefixes.user-select(none);
@@ -14,7 +16,7 @@
 
     padding: var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);
 
-    border-radius: 4px;
+    @include kbq-squircle(4px);
 
     cursor: default;
 
@@ -48,6 +50,20 @@
         margin: 0 var(--kbq-tag-size-content-gap-horizontal);
     }
 
+    & .kbq-tag-prefix {
+        flex-shrink: 0;
+        margin-inline-start: var(--kbq-tag-size-icon-margin-left);
+    }
+
+    & .kbq-tag-suffix {
+        flex-shrink: 0;
+    }
+
+    & .kbq-tag-suffix:not(.kbq-tag-remove, .kbq-tag-edit-submit) {
+        margin-inline-end: var(--kbq-tag-size-close-button-margin-right);
+    }
+
+    // @deprecated Use `.kbq-tag-prefix` (`kbqTagPrefix`) instead. Will be removed in 22.0.0.
     & .kbq-icon_left {
         margin-left: var(--kbq-tag-size-icon-margin-left);
     }
@@ -75,6 +91,8 @@
 
     &.cdk-drag-animating {
         transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
+
+        @include animation.kbq-animations-off();
     }
 }
 

package/time-range/time-range.scss

@@ -1,3 +1,7 @@
+// Layout only: the package paints nothing of its own, so it intentionally ships no
+// `time-range-tokens.scss` and no `_time-range-theme.scss`. Every colour on screen comes from the
+// composed components - link, radio, form-field, datepicker, timepicker, popover and button.
+
 .kbq-time-range {
     .kbq-time-range__trigger {
         display: block;
@@ -15,7 +19,12 @@
 .kbq-time-range__editor {
     display: block;
 
+    // The radiogroup holds only radios, so the from/to block is a sibling of it rather than a child.
+    // The gap reproduces the spacing the range block used to get from its own flex column.
     .kbq-time-range-editor__container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kbq-size-s);
         width: 100%;
     }
 

package/timezone/timezone-option.component.scss

@@ -1,7 +1,3 @@
-@use '../core/styles/common/tokens' as *;
-
-@use './timezone-option-theme' as *;
-
 .kbq-timezone-option.kbq-option {
     display: flex;
     flex-direction: row;
@@ -26,6 +22,10 @@
 .kbq-timezone-option__cities {
     display: -webkit-box;
     -webkit-box-orient: vertical;
+    /* Kept in the stylesheet rather than written by KbqTimezoneOptionTooltip, so the clamp survives an
+       option imported without that directive. Mirrors TOOLTIP_VISIBLE_ROWS_COUNT, which decides from the
+       same number whether the overflow tooltip is needed. */
+    -webkit-line-clamp: 3;
     max-height: var(--kbq-timezone-option-size-max-height);
     overflow: hidden;
 }
@@ -39,6 +39,3 @@
         bottom: calc(-1 * var(--kbq-size-3xs));
     }
 }
-
-@include kbq-timezone-option-theme();
-@include kbq-timezone-option-typography();

package/timezone/timezone-select.component.scss

@@ -9,5 +9,8 @@
     }
 }
 
+// Included here and nowhere else. Both components render with `ViewEncapsulation.None`, so a second
+// include would emit every rule below twice into the global stylesheet; the select owns them because
+// every one of them is scoped to the panel it renders, as is `timezone-option-tokens.scss`.
 @include kbq-timezone-option-theme();
 @include kbq-timezone-option-typography();

package/toast/_toast-theme.scss

@@ -35,11 +35,8 @@
 }
 
 @mixin kbq-toast-typography() {
+    // `.kbq-toast__title` inherits this level, so emitting the identical one for it changed nothing.
     .kbq-toast {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
-
-    .kbq-toast__title {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
-    }
 }

package/toast/toast-container.component.scss

@@ -3,36 +3,42 @@
 .kbq-toast-container {
     display: flex;
     flex-direction: column;
+
+    // Matches the default `KbqToastPosition.TOP_RIGHT`; every other anchor overrides it below.
     align-items: flex-end;
 
     gap: var(--kbq-toast-stack-size-gap);
 
     // @see KbqToastPosition
-    &.kbq-toast-container-top-right {
-        margin-top: var(--kbq-toast-stack-size-margin-vertical);
-        margin-right: var(--kbq-toast-stack-size-margin-horizontal);
-    }
-
-    &.kbq-toast-container-top-left {
+    &.kbq-toast-container-top-right,
+    &.kbq-toast-container-top-left,
+    &.kbq-toast-container-top-center {
         margin-top: var(--kbq-toast-stack-size-margin-vertical);
-        margin-left: var(--kbq-toast-stack-size-margin-horizontal);
     }
 
-    &.kbq-toast-container-top-center {
-        margin-top: var(--kbq-toast-stack-size-margin-vertical);
+    &.kbq-toast-container-bottom-right,
+    &.kbq-toast-container-bottom-left,
+    &.kbq-toast-container-bottom-center {
+        margin-bottom: var(--kbq-toast-stack-size-margin-vertical);
     }
 
+    &.kbq-toast-container-top-right,
     &.kbq-toast-container-bottom-right {
-        margin-bottom: var(--kbq-toast-stack-size-margin-vertical);
         margin-right: var(--kbq-toast-stack-size-margin-horizontal);
     }
 
+    &.kbq-toast-container-top-left,
     &.kbq-toast-container-bottom-left {
-        margin-bottom: var(--kbq-toast-stack-size-margin-vertical);
+        align-items: flex-start;
+
         margin-left: var(--kbq-toast-stack-size-margin-horizontal);
     }
 
-    &.kbq-toast-container-bottom-center {
-        margin-bottom: var(--kbq-toast-stack-size-margin-vertical);
+    // `KbqToastPosition.CENTER` deliberately carries no stack margin: the overlay is centred on both axes, so a
+    // margin would push the stack off centre instead of insetting it from an edge.
+    &.kbq-toast-container-top-center,
+    &.kbq-toast-container-bottom-center,
+    &.kbq-toast-container-center {
+        align-items: center;
     }
 }

package/toast/toast-tokens.scss

@@ -1,8 +1,4 @@
 :where(.kbq-toast-container) {
-    // @deprecated use --kbq-toast-stack-size-margin-vertical
-    --kbq-toast-stack-size-margin-top: var(--kbq-size-m);
-    // @deprecated use --kbq-toast-stack-size-margin-horizontal
-    --kbq-toast-stack-size-margin-right: var(--kbq-size-m);
     --kbq-toast-stack-size-margin-vertical: var(--kbq-size-m);
     --kbq-toast-stack-size-margin-horizontal: var(--kbq-size-m);
     --kbq-toast-stack-size-gap: var(--kbq-size-s);
@@ -16,8 +12,18 @@
     --kbq-toast-size-icon-width: var(--kbq-size-l);
     --kbq-toast-size-icon-height: var(--kbq-size-l);
     --kbq-toast-size-icon-margin-right: var(--kbq-size-s);
-    --kbq-toast-size-icon-border-radius: 50%;
-    --kbq-toast-size-close-button-margin-top: var(--kbq-size-m);
+    // The icon box repeats the corner of the toast it sits in, so it follows the container radius by default.
+    --kbq-toast-size-icon-border-radius: var(--kbq-toast-size-container-border-radius);
+    --kbq-toast-size-close-button-padding: var(--kbq-size-xxs);
+    --kbq-toast-size-close-button-icon-size: 16px;
+    --kbq-toast-size-close-button-height: calc(
+        var(--kbq-toast-size-close-button-icon-size) + var(--kbq-toast-size-close-button-padding) * 2
+    );
+    // Centers the close button on the first line of the title instead of on the padding box.
+    --kbq-toast-size-close-button-margin-top: calc(
+        var(--kbq-toast-size-content-padding-top) -
+            (var(--kbq-toast-size-close-button-height) - var(--kbq-typography-text-normal-line-height)) / 2
+    );
     --kbq-toast-size-close-button-margin-right: var(--kbq-size-xxs);
     --kbq-toast-size-button-stack-padding-top: var(--kbq-size-s);
     --kbq-toast-size-button-stack-content-gap-horizontal: var(--kbq-size-m);

package/toast/toast.component.scss

@@ -1,6 +1,6 @@
-@use '../core/styles/common/tokens' as *;
-
+@use '../core/styles/common/animation';
 @use './toast-theme' as *;
+@use '../core/styles/common/squircle' as *;
 
 .kbq-toast {
     display: flex;
@@ -10,20 +10,55 @@
 
     height: auto;
 
-    border-radius: var(--kbq-toast-size-container-border-radius);
+    @include kbq-squircle(var(--kbq-toast-size-container-border-radius));
 
     padding-left: var(--kbq-toast-size-container-padding-left);
     padding-right: var(--kbq-toast-size-container-padding-right);
+
+    animation: kbq-toast-enter 150ms ease-out;
+
+    &.kbq-toast_leaving {
+        pointer-events: none;
+        animation: kbq-toast-leave 300ms ease-in forwards;
+
+        @include animation.kbq-animations-off();
+    }
+
+    @include animation.kbq-animations-off();
+}
+
+@keyframes kbq-toast-enter {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+@keyframes kbq-toast-leave {
+    from {
+        height: var(--kbq-toast-leaving-height);
+    }
+
+    to {
+        transform: translateX(50%);
+        opacity: 0;
+        height: 0;
+    }
 }
 
 .kbq-toast__icon-container {
+    // Self-contained layout: the component must not depend on the global `layout-*` utility bundle.
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+
     flex-shrink: 0;
     width: var(--kbq-toast-size-icon-width);
     max-width: var(--kbq-toast-size-icon-width);
     height: var(--kbq-toast-size-icon-height);
     max-height: var(--kbq-toast-size-icon-height);
 
-    border-radius: var(--kbq-toast-size-container-border-radius);
+    border-radius: var(--kbq-toast-size-icon-border-radius);
 
     margin-right: var(--kbq-toast-size-icon-margin-right);
 
@@ -93,24 +128,12 @@
 }
 
 .kbq-toast__close-button {
-    margin-top: kbq-difference-series-css-variables(
-        [toast-size-content-padding-top,
-        calc(
-                kbq-difference-series-css-variables(
-                        [kbq-sum-series-css-variables(
-                            [calc(var(--kbq-icon-button-size-small-vertical-padding) * 2),
-                            16px]
-                        ),
-                        typography-text-normal-line-height]
-                    ) /
-                    2
-            )]
-    );
+    margin-top: var(--kbq-toast-size-close-button-margin-top);
     margin-right: var(--kbq-toast-size-close-button-margin-right);
 
     &.kbq-icon-button {
-        --kbq-icon-button-size-normal-horizontal-padding: 4px;
-        --kbq-icon-button-size-normal-vertical-padding: 4px;
+        --kbq-icon-button-size-normal-horizontal-padding: var(--kbq-toast-size-close-button-padding);
+        --kbq-icon-button-size-normal-vertical-padding: var(--kbq-toast-size-close-button-padding);
     }
 }
 

package/toggle/_toggle-theme.scss

@@ -66,7 +66,8 @@
     .kbq-toggle {
         @include _kbq-toggle-color(theme);
 
-        &.kbq-error {
+        &.kbq-error,
+        &.kbq-invalid {
             @include _kbq-toggle-color(error);
         }
 
@@ -84,7 +85,8 @@
             }
         }
 
-        .kbq-hint .kbq-hint__text {
+        // A projected `kbq-error` is a hint too, and keeps its own color. `:where` leaves the specificity as it was.
+        .kbq-hint:where(:not(.kbq-error)) .kbq-hint__text {
             color: var(--kbq-foreground-contrast-secondary);
         }
     }
@@ -97,10 +99,6 @@
         & .kbq-hint .kbq-hint__text {
             @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
         }
-
-        & .kbq-toggle-bar-container {
-            @include tokens.kbq-css-font-variable(typography, text-compact, line-height, '');
-        }
     }
 
     .kbq-toggle.kbq-toggle_big {
@@ -109,9 +107,5 @@
         & .kbq-hint .kbq-hint__text {
             @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
-
-        & .kbq-toggle-bar-container {
-            @include tokens.kbq-css-font-variable(typography, text-big, line-height, '');
-        }
     }
 }