@koobiq/components 20.4.2 → 21.0.1

package/toggle/toggle.scss

@@ -1,7 +1,8 @@
-@use '../core/styles/common/tokens';
 @use '../core/styles/common/animation';
 @use './toggle-theme' as theme;
 
+// The `.kbq-progress` loading state used by this component is emitted globally by `kbq-core()`.
+
 $toggle-thumb-offset: 8px;
 
 .kbq-toggle {
@@ -9,6 +10,7 @@ $toggle-thumb-offset: 8px;
 
     .kbq-toggle__circle {
         position: absolute;
+        left: 3px;
 
         border-radius: 50%;
 
@@ -16,27 +18,46 @@ $toggle-thumb-offset: 8px;
 
         height: 10px;
         width: 10px;
+
+        transition: left 100ms;
+
+        @include animation.kbq-animations-off();
+
+        &.kbq-toggle__circle_checked {
+            left: calc(100% - 11px);
+        }
+
+        &.kbq-toggle__circle_indeterminate {
+            left: 10px;
+            visibility: hidden;
+        }
     }
 
     .kbq-toggle-layout {
-        display: flex;
+        display: inline-flex;
+        box-sizing: border-box;
+        width: 100%;
         flex-direction: row;
         align-items: flex-start;
 
+        // Keeps the host's own line box in charge of the baseline, so that the box a toggle
+        // occupies in text is exactly one line tall.
+        vertical-align: top;
+
         cursor: inherit;
 
         &.kbq-toggle-layout_left {
             flex-direction: row-reverse;
         }
-
-        &:has(.kbq-toggle-label:not(:empty)) .kbq-toggle-bar-container {
-            padding-top: tokens.kbq-css-half-difference(typography-text-normal-line-height, toggle-size-normal-height);
-        }
     }
 
     .kbq-toggle-bar-container {
         display: flex;
         align-items: center;
+
+        // The switch is centred in a box at least as tall as one line of the label, so that a toggle
+        // keeps the same height whether it has a label or not, and still grows with a taller bar.
+        min-height: var(--kbq-typography-text-normal-line-height);
     }
 
     .kbq-toggle-bar {
@@ -56,6 +77,8 @@ $toggle-thumb-offset: 8px;
         height: var(--kbq-toggle-size-normal-height);
         width: var(--kbq-toggle-size-normal-width);
 
+        @include animation.kbq-animations-off();
+
         .kbq-toggle__thumb {
             position: absolute;
             left: $toggle-thumb-offset;
@@ -66,9 +89,34 @@ $toggle-thumb-offset: 8px;
             height: 2px;
             border-radius: var(--kbq-size-border-width);
             transition: left 50ms ease-in-out;
+
+            @include animation.kbq-animations-off();
         }
     }
 
+    .kbq-toggle__content {
+        display: flex;
+        flex-direction: column;
+
+        flex: 1;
+
+        &:has(.kbq-toggle-label:not(:empty)) {
+            &.kbq-toggle__content_left {
+                margin-right: var(--kbq-toggle-size-normal-horizontal-content-padding);
+            }
+
+            &.kbq-toggle__content_right {
+                margin-left: var(--kbq-toggle-size-normal-horizontal-content-padding);
+            }
+        }
+    }
+
+    // Keeps the projected hint a block-level flex item, exactly as it was before it got its own wrapper.
+    .kbq-toggle__hint {
+        display: flex;
+        flex-direction: column;
+    }
+
     .kbq-hint {
         margin-top: var(--kbq-size-3xs);
     }
@@ -96,32 +144,25 @@ $toggle-thumb-offset: 8px;
     }
 }
 
-.kbq-toggle__content {
-    display: flex;
-    flex-direction: column;
-
-    flex: 1;
-
-    &:has(.kbq-toggle-label:not(:empty)) {
-        &.kbq-toggle__content_left {
-            margin-right: var(--kbq-toggle-size-normal-horizontal-content-padding);
-        }
-
-        &.kbq-toggle__content_right {
-            margin-left: var(--kbq-toggle-size-normal-horizontal-content-padding);
-        }
-    }
-}
-
+// The `big` variant deliberately resolves to the same switch dimensions as the normal one - it only
+// changes typography. The rules below stay so the `--kbq-toggle-size-big-*` tokens remain overridable.
 .kbq-toggle.kbq-toggle_big {
     & .kbq-toggle-bar {
         height: var(--kbq-toggle-size-big-height);
         width: var(--kbq-toggle-size-big-width);
     }
 
-    .kbq-toggle-layout {
-        &:has(.kbq-toggle-label:not(:empty)) .kbq-toggle-bar-container {
-            padding-top: tokens.kbq-css-half-difference(typography-text-big-line-height, toggle-size-big-height);
+    .kbq-toggle-bar-container {
+        min-height: var(--kbq-typography-text-big-line-height);
+    }
+
+    .kbq-toggle__content:has(.kbq-toggle-label:not(:empty)) {
+        &.kbq-toggle__content_left {
+            margin-right: var(--kbq-toggle-size-big-horizontal-content-padding);
+        }
+
+        &.kbq-toggle__content_right {
+            margin-left: var(--kbq-toggle-size-big-horizontal-content-padding);
         }
     }
 }

package/tooltip/_tooltip-theme.scss

@@ -12,7 +12,13 @@
     }
 
     & .kbq-tooltip__arrow {
-        background-color: var(--kbq-tooltip-#{$style-name}-background);
+        // Same gradient-over-opaque-base trick as the body: the variant backgrounds may be translucent, and
+        // without an opaque layer underneath the arrow would blend with the page instead of with the tooltip.
+        background-image: linear-gradient(
+            var(--kbq-tooltip-#{$style-name}-background),
+            var(--kbq-tooltip-#{$style-name}-background)
+        );
+        background-color: var(--kbq-background-bg);
     }
 
     &.kbq-tooltip_arrowless {

package/tooltip/tooltip-tokens.scss

@@ -1,4 +1,5 @@
 .kbq-tooltip {
+    /* Product constant, not a size token: the documentation states the tooltip never grows past 300px. */
     --kbq-tooltip-size-max-width: 300px;
     --kbq-tooltip-size-border-radius: var(--kbq-size-s);
     --kbq-tooltip-size-padding-horizontal: var(--kbq-size-m);
@@ -20,6 +21,4 @@
     --kbq-tooltip-error-fade-off-background: var(--kbq-background-error);
     --kbq-tooltip-error-fade-off-text: var(--kbq-foreground-white);
     --kbq-tooltip-error-fade-off-shadow: none;
-
-    --kbq-tooltip-borderless-shadow: 0 2px 8px var(--kbq-shadow-key), 0 3px 8px var(--kbq-shadow-ambient);
 }

package/tooltip/tooltip.scss

@@ -1,48 +1,62 @@
 @use '../core/pop-up/pop-up';
+@use '../core/styles/common/animation';
 
 @use '../core/styles/common/tokens' as *;
 
 @use './tooltip-theme' as *;
+@use '../core/styles/common/squircle' as *;
 
 $trigger-margin: 8px;
 $trigger-margin_without-arrow: 4px;
 
+// `KbqNavbarItem` puts this class on the overlay pane — the parent of `.kbq-tooltip` — so the shared
+// `pop-up.popup-margins` mixin, which matches the placement class on the tooltip itself, cannot express it.
+// The extra pixel over `$trigger-margin` compensates for the horizontal navbar's own 1px border.
+$navbar-trigger-margin: $trigger-margin + 1px;
+
 .kbq-tooltip-panel_horizontal-navbar {
     &:has(.kbq-tooltip_placement-top),
     &:has(.kbq-tooltip_placement-top-left),
     &:has(.kbq-tooltip_placement-top-right) {
-        margin-bottom: 9px;
+        margin-bottom: $navbar-trigger-margin;
     }
 
     &:has(.kbq-tooltip_placement-right),
     &:has(.kbq-tooltip_placement-right-top),
     &:has(.kbq-tooltip_placement-right-bottom) {
-        margin-left: 9px;
+        margin-left: $navbar-trigger-margin;
     }
 
     &:has(.kbq-tooltip_placement-bottom),
     &:has(.kbq-tooltip_placement-bottom-left),
     &:has(.kbq-tooltip_placement-bottom-right) {
-        margin-top: 9px;
+        margin-top: $navbar-trigger-margin;
     }
 
     &:has(.kbq-tooltip_placement-left),
     &:has(.kbq-tooltip_placement-left-top),
     &:has(.kbq-tooltip_placement-left-bottom) {
-        margin-right: 9px;
+        margin-right: $navbar-trigger-margin;
     }
 }
 
+// `forDisabledComponent` makes the wrapper of a disabled control focusable so its tooltip stays reachable by
+// keyboard. Only the ring color is set, leaving the browser's own focus outline to decide when to draw it.
+.kbq-tooltip-trigger_for-disabled {
+    outline-color: var(--kbq-states-line-focus-theme);
+}
+
 .kbq-tooltip__inner {
-    border-radius: var(--kbq-tooltip-size-border-radius);
-    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
-    word-break: break-word;
+    @include kbq-squircle(var(--kbq-tooltip-size-border-radius));
+    overflow-wrap: break-word;
 }
 
 .kbq-tooltip {
     box-sizing: border-box;
 
-    border-radius: var(--kbq-tooltip-size-border-radius);
+    // Kept alongside the radius of `.kbq-tooltip__inner`: this element is the one carrying `box-shadow`
+    // (see `_tooltip-theme.scss`), and without a radius here the shadow is cast with square corners.
+    @include kbq-squircle(var(--kbq-tooltip-size-border-radius));
 
     white-space: pre-line;
 
@@ -50,6 +64,10 @@ $trigger-margin_without-arrow: 4px;
 
     max-width: var(--kbq-tooltip-size-max-width);
 
+    // Shown once `KbqPopUp.show()` has made it visible.
+    opacity: 0;
+    transform: scale(0);
+
     .kbq-tooltip__inner {
         padding: var(--kbq-tooltip-size-padding-vertical) var(--kbq-tooltip-size-padding-horizontal);
     }
@@ -57,6 +75,29 @@ $trigger-margin_without-arrow: 4px;
     &.kbq-tooltip_arrowless {
         @include pop-up.popup-margins(kbq-tooltip, $trigger-margin_without-arrow);
     }
+
+    &.kbq-tooltip_visible {
+        opacity: 1;
+        // Rests at exactly 1: a fractional scale leaves the tooltip permanently resampled, which softens its
+        // text for as long as it is on screen. A transform rather than `none`: it makes the tooltip the
+        // stacking context the arrow's negative `z-index` is drawn in, behind the panel but not behind the page.
+        transform: scale(1);
+        animation: kbq-tooltip-enter 200ms cubic-bezier(0, 0, 0.2, 1);
+
+        @include animation.kbq-animations-off();
+    }
+}
+
+@keyframes kbq-tooltip-enter {
+    from {
+        opacity: 0;
+        transform: scale(0);
+    }
+
+    50% {
+        opacity: 0.5;
+        transform: scale(0.9);
+    }
 }
 
 @include kbq-tooltip-theme();
@@ -74,6 +115,11 @@ $trigger-margin_without-arrow: 4px;
 }
 
 $arrow-offset: calc((#{var(--kbq-tooltip-size-arrow-size)} - 1px) / -2);
-$arrow-padding: calc((18px + $trigger-margin) / 2);
+
+// Rotated by 45deg, the square arrow covers `size * sqrt(2)` of the tooltip edge — ~17px at the default
+// `--kbq-size-m`. The inset is measured from that footprint, not from the square's side, plus a pixel of
+// slack so the arrow never runs into the rounded corner.
+$arrow-footprint: 18px;
+$arrow-padding: calc(($arrow-footprint + $trigger-margin) / 2);
 
 @include pop-up.popup-arrow-positions(kbq-tooltip, $arrow-offset, $arrow-padding);

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

@@ -1,13 +1,24 @@
 :where(.kbq-top-bar) {
+    /* LAYER TOKENS */
+    /* The top bar is page chrome: it sits above the page content its shadow spills over and the
+       `kbqOverlayLayer` layer (980), but below every other CDK overlay (1000). */
+    --kbq-top-bar-z-index: 990;
+    /* POSITION TOKENS */
+    /* `sticky` only takes effect once an inset is set — with every inset `auto` the box lays out exactly as
+       `relative`. Set `--kbq-top-bar-inset-block-start: 0` to make the bar stick to the top of its
+       nearest scrolling ancestor. */
     --kbq-top-bar-position: sticky;
-    --kbq-top-bar-background: var(--kbq-background-bg);
+    --kbq-top-bar-inset-block-start: auto;
+    /* SIZE TOKENS */
     --kbq-top-bar-spacer-min-width: 80px;
     --kbq-top-bar-padding-vertical: var(--kbq-size-m);
     --kbq-top-bar-padding-horizontal: var(--kbq-size-xxl);
     --kbq-top-bar-border-radius: 0;
     --kbq-top-bar-container-start-gap: 0;
-    --kbq-top-bar-container-start-basis: 0;
+    --kbq-top-bar-container-start-min-width: 0;
     --kbq-top-bar-container-end-gap: var(--kbq-size-s);
+    /* THEME TOKENS */
+    --kbq-top-bar-background: var(--kbq-background-bg);
     --kbq-top-bar-shadow-bottom: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-top-bar-shadow-transition: ease-out 300ms;
 }

package/top-bar/top-bar.scss

@@ -1,27 +1,28 @@
+@use '../core/styles/common/animation';
 @use '../core/styles/common/tokens';
-@use '../core/styles/common/overlay';
+@use '../core/styles/common/squircle' as *;
 
 @mixin _overflow-items-margins {
     padding: var(--kbq-size-border-width);
 
     > .kbq-overflow-item {
         &:not(:last-of-type) {
-            margin-right: var(--kbq-top-bar-container-end-gap);
+            margin-inline-end: var(--kbq-top-bar-container-end-gap);
         }
 
         // apply margin if the last item needs to be alwaysVisible
         &:last-of-type:is(.kbq-overflow-item_always-visible) + .kbq-overflow-items-result {
-            margin-left: var(--kbq-top-bar-container-end-gap);
+            margin-inline-start: var(--kbq-top-bar-container-end-gap);
         }
     }
 
     .kbq-overflow-items-result:first-child {
-        margin-right: var(--kbq-top-bar-container-end-gap);
+        margin-inline-end: var(--kbq-top-bar-container-end-gap);
     }
 }
 
 .kbq-top-bar {
-    z-index: overlay.$overlay-z-index;
+    z-index: var(--kbq-top-bar-z-index);
 
     display: flex;
     align-items: center;
@@ -30,47 +31,51 @@
     box-sizing: border-box;
 
     position: var(--kbq-top-bar-position);
+    inset-block-start: var(--kbq-top-bar-inset-block-start);
     background-color: var(--kbq-top-bar-background);
     padding: var(--kbq-top-bar-padding-vertical) var(--kbq-top-bar-padding-horizontal);
-    border-radius: var(--kbq-top-bar-border-radius);
+    @include kbq-squircle(var(--kbq-top-bar-border-radius));
 
     &.kbq-top-bar_with-shadow {
         box-shadow: var(--kbq-top-bar-shadow-bottom);
         transition: box-shadow var(--kbq-top-bar-shadow-transition);
+
+        @include animation.kbq-animations-off();
     }
 
     .kbq-top-bar-spacer {
-        height: 100%;
         flex: 0 0 var(--kbq-top-bar-spacer-min-width);
     }
 
     .kbq-top-bar-container {
-        &:has(.kbq-overflow-items) {
+        // Must match the host set of the ruleset immediately below: the negative margin compensates the
+        // padding that mixin adds, so a container the mixin skips must not get the compensation either.
+        &.kbq-overflow-items,
+        &:has(> .kbq-overflow-items) {
             gap: unset;
             overflow: hidden;
             // reduce height added by overflow-items' padding
-            margin-top: calc(-1 * var(--kbq-size-border-width));
-            margin-bottom: calc(-1 * var(--kbq-size-border-width));
+            margin-block: calc(-1 * var(--kbq-size-border-width));
+        }
+
+        &.kbq-overflow-items,
+        > .kbq-overflow-items {
+            @include _overflow-items-margins;
         }
 
-        &.kbq-top-bar-container__start {
+        &.kbq-top-bar-container_start {
             display: flex;
             gap: var(--kbq-top-bar-container-start-gap);
-            flex: 1 0 var(--kbq-top-bar-container-start-basis);
+            flex: 1 1 auto;
             justify-content: flex-start;
-            min-width: 0;
+            min-width: var(--kbq-top-bar-container-start-min-width);
         }
 
-        &.kbq-top-bar-container__end {
+        &.kbq-top-bar-container_end {
             display: flex;
             gap: var(--kbq-top-bar-container-end-gap);
             justify-content: end;
         }
-
-        &.kbq-overflow-items,
-        > .kbq-overflow-items {
-            @include _overflow-items-margins;
-        }
     }
 
     @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);

package/tree/_tree-theme.scss

@@ -1,5 +1,4 @@
 @use '../core/styles/theming/theming' as *;
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-tree-option($state-name) {

package/tree/toggle.scss

@@ -1,8 +1,11 @@
 @use '../core/styles/common/tokens' as *;
 
-@use './tree-theme' as *;
-
+// The tree theme is emitted once, from `tree-selection.scss`. Every rule in it is scoped to
+// `.kbq-tree-selection` or `.kbq-tree-option`, and a toggle only ever renders inside one of those.
 .kbq-tree-node-toggle {
+    // No horizontal padding here: the box is the chevron's own 16px, and `KbqTreeNodePadding` reserves
+    // exactly that plus the option's 8px `gap` for a node that has none. Widening the toggle pushes
+    // every branch row out of line with its leaf siblings.
     display: flex;
     align-items: center;
     justify-content: center;
@@ -10,10 +13,6 @@
 
     height: 100%;
 
-    // FIXME: default token doesn't exist
-    padding-left: var(--kbq-tree-size-toggle-padding);
-    padding-right: var(--kbq-tree-size-toggle-padding);
-
     cursor: pointer;
 
     & .kbq-icon {
@@ -34,6 +33,3 @@
         }
     }
 }
-
-@include kbq-tree-theme();
-@include kbq-tree-typography();

package/tree/tree-option.scss

@@ -2,6 +2,7 @@
 @use '../core/styles/common';
 @use '../core/styles/common/tokens' as *;
 @use '../core/styles/common/vendor-prefixes';
+@use '../core/styles/common/squircle' as *;
 
 .kbq-tree-option {
     @include vendor-prefixes.user-select(none);
@@ -21,7 +22,7 @@
     border-width: var(--kbq-tree-size-container-focus-outline-width);
     border-style: solid;
     border-color: transparent;
-    border-radius: var(--kbq-tree-option-border-radius);
+    @include kbq-squircle(var(--kbq-tree-option-border-radius));
 
     padding-top: kbq-difference-series-css-variables(
         [tree-size-container-padding-vertical,
@@ -43,9 +44,6 @@
         display: inline-block;
 
         @include common.kbq-truncate-line();
-
-        padding-top: var(--kbq-list-size-text-padding-vertical, 0);
-        padding-bottom: var(--kbq-list-size-text-padding-vertical, 0);
     }
 
     // Two-line options only: align leading content to the center of the FIRST line.

package/tree/tree-tokens.scss

@@ -4,8 +4,9 @@
     --kbq-tree-size-container-padding-right: var(--kbq-size-s);
     --kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);
     --kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);
-    --kbq-tree-size-container-content-gap-vertical: 0px;
     --kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);
+    /* Not applied to `.kbq-option-text`: 2px above and below every line grows two-line rows and drops
+       the text below the chevron and the checkbox beside it. Applying it is a design decision. */
     --kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);
     --kbq-tree-option-border-radius: var(--kbq-size-border-radius);
     /* THEME TOKENS */

package/tree/tree.scss

@@ -1,8 +1,6 @@
-@use './tree-theme' as *;
-
+// The tree theme is emitted once, from `tree-selection.scss`. It styles `.kbq-tree-selection` and
+// `.kbq-tree-option`, and an option is only ever rendered by a `kbq-tree-selection` — the parent
+// token it depends on has no other provider.
 .kbq-tree {
     display: block;
 }
-
-@include kbq-tree-theme();
-@include kbq-tree-typography();

package/tree-select/_tree-select-theme.scss

@@ -1,3 +1,4 @@
+@use '../core/styles/common/select' as *;
 @use '../core/styles/common/tokens' as *;
 @use '../tree/tree-theme' as tree-theme;
 
@@ -5,8 +6,6 @@
     .kbq-tree-select {
         color: var(--kbq-foreground-contrast);
 
-        // Invalid by `KbqValidateDirective`
-        &.kbq-control_has-validate-directive.ng-invalid,
         // Invalid by control `ErrorStateMatcher`
         &.kbq-invalid {
             color: var(--kbq-foreground-error);
@@ -25,11 +24,9 @@
         }
     }
 
-    .kbq-select__placeholder {
-        text-overflow: ellipsis;
-
-        color: var(--kbq-form-field-default-placeholder);
-    }
+    // Placeholder, search container and empty-result message: styled identically wherever a
+    // select-shaped panel is rendered, so the rules live next to the structure they belong to.
+    @include kbq-select-shared-theme();
 
     .kbq-tree-select__panel {
         box-shadow: var(--kbq-select-panel-dropdown-shadow);
@@ -99,14 +96,6 @@
             border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
         }
     }
-
-    .kbq-select__search-container {
-        border-bottom-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
-    }
-
-    .kbq-select__no-options-message {
-        color: var(--kbq-foreground-contrast-secondary);
-    }
 }
 
 @mixin kbq-tree-select-typography() {

package/tree-select/tree-select-tokens.scss

@@ -1,3 +1,19 @@
+// Tokens read by the `core/styles/common/select` partial that the tree-select shares with the select.
+// Declared here rather than pulled in through the select package's own stylesheet, so that importing
+// the tree-select alone is enough to style it.
+.kbq-tree-select,
+.kbq-tree-select__panel {
+    --kbq-select-size-single-padding-left: 0;
+    --kbq-select-size-single-padding-right: 0;
+    --kbq-select-size-single-padding-vertical: var(--kbq-size-xs);
+    --kbq-select-size-single-content-gap: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-padding-left: 0;
+    --kbq-select-size-multiple-padding-right: 0;
+    --kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);
+    --kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);
+}
+
 .kbq-tree-select__panel {
     /* THEME TOKENS */
     --kbq-select-panel-dropdown-background: var(--kbq-background-card);

package/tree-select/tree-select.scss

@@ -26,11 +26,5 @@
     }
 }
 
-.kbq-form-field-type-select {
-    &:not(.kbq-disabled) .kbq-form-field-flex {
-        cursor: pointer;
-    }
-}
-
 @include kbq-tree-select-theme();
 @include kbq-tree-select-typography();