@koobiq/components 20.4.1 → 21.0.0

package/list/list.scss

@@ -2,6 +2,7 @@
 @use '../core/styles/common/list';
 @use '../core/styles/common/vendor-prefixes';
 @use './list-theme' as theme;
+@use '../core/styles/common/squircle' as *;
 
 /// Squares off the corners between adjacent selected rows so a run of them reads as one block.
 /// Only `.kbq-list-option` is ever selectable, hence the option-only scope.
@@ -52,7 +53,7 @@
     // to the shared base mixin's own value in case it's ever rendered outside `.kbq-list`.
     // The horizontal padding subtracts the transparent focus border so the total stays on the grid.
     border-width: var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs));
-    border-radius: var(--kbq-size-border-radius);
+    @include kbq-squircle(var(--kbq-size-border-radius));
     gap: var(--kbq-list-size-container-content-gap-horizontal, var(--kbq-size-s));
     padding-top: var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));
     padding-right: calc(
@@ -200,7 +201,7 @@ body:has(.kbq-list-drag-preview) {
     // The cap is on the plate, not on the text inside it, and the page default here is `content-box`.
     box-sizing: border-box;
     max-inline-size: var(--kbq-list-size-drag-preview-max-width);
-    border-radius: var(--kbq-size-border-radius);
+    @include kbq-squircle(var(--kbq-size-border-radius));
     padding: var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-right)
         var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-left);
     background: var(--kbq-list-states-drag-preview-background);

package/loader-overlay/_loader-overlay-theme.scss

@@ -18,7 +18,12 @@
 
     .kbq-loader-overlay_transparent {
         &.kbq-loader-overlay {
-            background: var(--kbq-loader-overlay-transparent-overlay-background);
+            background: color-mix(
+                in srgb,
+                var(--kbq-loader-overlay-surface-background) /* color-mix only allows percentage value */
+                    calc(var(--kbq-opacity-overlay) * 100%),
+                transparent
+            );
         }
 
         .kbq-loader-overlay-text {
@@ -31,15 +36,19 @@
     }
 
     .kbq-loader-overlay_card {
-        &.kbq-loader-overlay_filled,
-        &.kbq-loader-overlay_transparent {
-            background: color-mix(
-                in srgb,
-                var(--kbq-loader-overlay-card-overlay-background) /* color-mix only allows percentage value */
-                    calc(var(--kbq-opacity-overlay) * 100%),
-                transparent
-            );
-        }
+        --kbq-loader-overlay-surface-background: var(--kbq-background-card);
+    }
+
+    .kbq-loader-overlay_surface_bg {
+        --kbq-loader-overlay-surface-background: var(--kbq-background-bg);
+    }
+
+    .kbq-loader-overlay_surface_bg-secondary {
+        --kbq-loader-overlay-surface-background: var(--kbq-background-bg-secondary);
+    }
+
+    .kbq-loader-overlay_surface_bg-tertiary {
+        --kbq-loader-overlay-surface-background: var(--kbq-background-bg-tertiary);
     }
 }
 

package/loader-overlay/loader-overlay-tokens.scss

@@ -9,11 +9,9 @@
     --kbq-loader-overlay-size-compact-loader-margin-bottom: var(--kbq-size-s);
     --kbq-loader-overlay-size-compact-content-content-gap-vertical: var(--kbq-size-xxs);
     /* THEME TOKENS */
-    --kbq-loader-overlay-transparent-overlay-background: var(--kbq-background-overlay-inverse);
     --kbq-loader-overlay-transparent-text-color: var(--kbq-foreground-contrast);
     --kbq-loader-overlay-transparent-caption-color: var(--kbq-foreground-contrast-secondary);
     --kbq-loader-overlay-filled-overlay-background: var(--kbq-background-bg);
     --kbq-loader-overlay-filled-text-color: var(--kbq-foreground-contrast);
     --kbq-loader-overlay-filled-caption-color: var(--kbq-foreground-contrast-secondary);
-    --kbq-loader-overlay-card-overlay-background: var(--kbq-background-card);
 }

package/loader-overlay/loader-overlay.scss

@@ -1,9 +1,14 @@
+@use '../core/styles/common/squircle' as *;
 @use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/vendor-prefixes';
 
 @use './loader-overlay-theme' as *;
 
 .kbq-loader-overlay_parent {
     position: relative;
+
+    // Text placed straight in the parent is not an element, so `inert` cannot reach it.
+    @include vendor-prefixes.user-select(none);
 }
 
 .kbq-loader-overlay-text,
@@ -29,7 +34,8 @@
     right: 0;
     bottom: 0;
     left: 0;
-    border-radius: inherit;
+    @include kbq-squircle-inherit();
+    @include vendor-prefixes.user-select(text);
 
     // todo
     z-index: 10;

package/markdown/_markdown-theme.scss

@@ -1,4 +1,5 @@
 @use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/link';
 @use './markdown-tokens';
 
 @mixin kbq-markdown-theme() {
@@ -6,6 +7,21 @@
         color: var(--kbq-foreground-contrast);
         background: var(--kbq-markdown-bg);
 
+        // A link of markdown is a bare `<a>`, the underlined text itself, and looks exactly like the link component
+        .kbq-markdown__a {
+            @include link.kbq-link-root();
+            @include link.kbq-link-text();
+            @include link.kbq-link-states('&');
+
+            &:visited {
+                @include link.kbq-link-visited-states('&');
+            }
+
+            &:focus-visible {
+                @include link.kbq-link-keyboard-focus-outline();
+            }
+        }
+
         // h1, h2, h3, h4, h5, h6
         @for $i from 1 through 6 {
             .kbq-markdown__h#{$i} {

package/markdown/markdown-tokens.scss

@@ -1,4 +1,9 @@
+@use '../core/styles/common/link';
+
 .kbq-markdown {
+    // The links of markdown take the tokens of the link component
+    @include link.kbq-link-tokens();
+
     --kbq-markdown-bg: transparent;
     --kbq-markdown-h1-size-max-width: var(--kbq-markdown-size-max-width);
     --kbq-markdown-h1-size-margin-top: 0;

package/markdown/markdown.scss

@@ -1,4 +1,5 @@
 @use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/squircle' as *;
 
 .kbq-markdown {
     display: block;
@@ -116,7 +117,7 @@
 
     .kbq-markdown__pre,
     .kbq-markdown__code {
-        border-radius: var(--kbq-markdown-code-size-border-radius);
+        @include kbq-squircle(var(--kbq-markdown-code-size-border-radius));
     }
 
     .kbq-markdown__code:not(.kbq-markdown__pre > .kbq-markdown__code) {

package/modal/_modal-animation.scss

@@ -7,25 +7,18 @@ $animation-duration-base: 0.3s;
     animation-fill-mode: both;
 }
 
-@mixin _motion-common-leave($duration: $animation-duration-base) {
-    animation-duration: $duration;
-    animation-fill-mode: both;
-}
-
 @mixin _make-motion($className, $keyframeName, $duration: $animation-duration-base) {
-    .#{$className}-enter,
-    .#{$className}-appear {
+    .#{$className}-enter {
         @include _motion-common($duration);
         animation-play-state: paused;
     }
 
     .#{$className}-leave {
-        @include _motion-common-leave($duration);
+        @include _motion-common($duration);
         animation-play-state: paused;
     }
 
-    .#{$className}-enter.#{$className}-enter-active,
-    .#{$className}-appear.#{$className}-appear-active {
+    .#{$className}-enter.#{$className}-enter-active {
         animation-name: #{$keyframeName}In;
         animation-play-state: running;
     }
@@ -40,8 +33,7 @@ $animation-duration-base: 0.3s;
 @mixin zoom-motion($className, $keyframeName, $duration: $animation-duration-base) {
     @include _make-motion($className, $keyframeName, $duration);
 
-    .#{$className}-enter,
-    .#{$className}-appear {
+    .#{$className}-enter {
         transform: translate(0, -25%);
         animation-timing-function: $ease-out-circ;
     }
@@ -55,8 +47,7 @@ $animation-duration-base: 0.3s;
 @mixin fade-motion($className, $keyframeName) {
     @include _make-motion($className, $keyframeName);
 
-    .#{$className}-enter,
-    .#{$className}-appear {
+    .#{$className}-enter {
         opacity: 0;
         animation-timing-function: ease-out;
     }
@@ -109,5 +100,23 @@ $animation-duration-base: 0.3s;
     }
 }
 
+// A full-viewport zoom-and-fade is the most motion-heavy thing the library renders, so it is the
+// least appropriate place to ignore the preference. The transforms have to be reset along with the
+// animations: they are plain rules on the enter/leave classes, not part of the keyframes. Emitted
+// after both motions, because it wins on source order rather than on specificity.
+@mixin reduced-motion($className) {
+    @media (prefers-reduced-motion: reduce) {
+        .#{$className}-enter,
+        .#{$className}-leave {
+            animation: none;
+            opacity: 1;
+            transform: none;
+        }
+    }
+}
+
 @include fade-motion(fade, mcFade);
 @include zoom-motion(zoom, mcZoom);
+
+@include reduced-motion(fade);
+@include reduced-motion(zoom);

package/modal/modal-tokens.scss

@@ -6,8 +6,9 @@
     --kbq-modal-size-header-padding-vertical: var(--kbq-size-l);
     --kbq-modal-size-header-padding-left: var(--kbq-size-xxl);
     --kbq-modal-size-header-padding-right: var(--kbq-size-6xl);
-    --kbq-modal-size-close-button-margin-left: var(--kbq-size-s);
     --kbq-modal-size-content-padding-horizontal: var(--kbq-size-xxl);
+    // Gap kept between the dialog and each edge of the viewport.
+    --kbq-modal-size-viewport-inset: var(--kbq-size-5xl);
     // Added top padding to prevent the outline of the first focused field from being clipped
     --kbq-modal-size-content-padding-top: 1px;
     --kbq-modal-size-content-padding-bottom: var(--kbq-size-s);

package/modal/modal.scss

@@ -2,33 +2,29 @@
 @use './modal-confirm';
 @use './modal-animation';
 @use './modal-theme' as *;
+@use '../core/styles/common/squircle' as *;
 
 .kbq-modal-container {
     box-sizing: border-box;
 
     position: relative;
 
-    top: var(--kbq-size-5xl);
+    top: var(--kbq-modal-size-viewport-inset);
 
-    border-radius: var(--kbq-modal-size-border-radius);
+    @include kbq-squircle(var(--kbq-modal-size-border-radius));
+
+    // The dialog is the height authority: it never grows past the viewport minus its own inset on
+    // each side, and it lays its chrome out at the real height, so only the body has to give way.
+    display: flex;
+    flex-direction: column;
 
     width: auto;
+    max-height: calc(100vh - 2 * var(--kbq-modal-size-viewport-inset));
 
     margin: 0 auto;
 
     list-style: none;
 
-    // DEPRECATED: Unused. Will be removed in next major release.
-    /* stylelint-disable */
-    &.zoom-enter,
-    &.zoom-appear {
-        /* stylelint-enable */
-        animation-duration: 0.3s;
-        // reset scale avoid mousePosition bug
-        transform: none;
-        opacity: 0;
-    }
-
     &.kbq-modal_small {
         width: var(--kbq-modal-size-small-width);
     }
@@ -41,13 +37,9 @@
         width: var(--kbq-modal-size-large-width);
     }
 
-    // todo реализуем когда будем делать 2.0, пока нет возможности отслеживать наличие/отсутствие футера
-    //&.kbq-modal_no-footer .kbq-modal-body {
-    //    padding-bottom: var(
-    //        --kbq-modal-size-content-padding-bottom-without-footer,
-    //        map.get($tokens, modal-size-content-padding-bottom-without-footer)
-    //    );
-    //}
+    &.kbq-modal_no-footer .kbq-modal-body {
+        padding-bottom: var(--kbq-modal-size-content-padding-bottom-without-footer);
+    }
 
     & .kbq-modal-close {
         position: absolute;
@@ -74,13 +66,30 @@
 .kbq-modal-content {
     position: relative;
 
-    border-radius: var(--kbq-modal-size-border-radius);
+    @include kbq-squircle(var(--kbq-modal-size-border-radius));
+
+    // Carries the container's column layout down to the header/body/footer that actually live here.
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
 
     background-clip: padding-box;
 }
 
+// A dialog composed through `kbqComponent` renders that component's host element between
+// `.kbq-modal-content` and the header, body and footer it composes. Without this the column layout
+// stops at the host, the body stops being the part that gives way, and the chrome scrolls off.
+.kbq-modal-content-host {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+}
+
 .kbq-modal-header {
     display: flex;
+    flex: 0 0 auto;
     align-items: center;
     justify-content: space-between;
 
@@ -119,23 +128,22 @@
 
 .kbq-modal-body {
     display: block;
+    // The only part of the dialog that gives way: the header and the footer keep their real height,
+    // so they stay on screen at any content size.
+    flex: 1 1 auto;
+    min-height: 0;
     overflow-y: auto;
 
-    max-height: calc(100vh - 260px);
-
     padding: var(--kbq-modal-size-content-padding-top-without-header) var(--kbq-modal-size-content-padding-horizontal)
         var(--kbq-modal-size-content-padding-bottom) var(--kbq-modal-size-content-padding-horizontal);
 
     overflow-wrap: break-word;
-
-    & > * {
-        position: relative;
-    }
 }
 
 .kbq-modal-footer,
 .kbq-confirm-footer {
     display: flex;
+    flex: 0 0 auto;
     align-items: center;
 
     padding: var(--kbq-modal-size-footer-padding-vertical) var(--kbq-modal-size-footer-padding-horizontal);
@@ -158,9 +166,5 @@
     }
 }
 
-.kbq-modal-open {
-    overflow: hidden;
-}
-
 @include kbq-modal-theme();
 @include kbq-modal-typography();

package/navbar/_navbar-item_horizontal.scss

@@ -47,6 +47,10 @@
         padding-left: var(--kbq-size-xxs);
     }
 
+    & .kbq-navbar-item-suffix {
+        margin-left: var(--kbq-size-xxs);
+    }
+
     &.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed) {
         margin-left: 0;
         margin-right: 0;
@@ -85,13 +89,11 @@
         }
     }
 
+    // Position and stacking come from the shared `.kbq-navbar-item .kbq-badge` rule; only the offsets are
+    // orientation-specific.
     .kbq-badge {
-        position: absolute;
-
-        z-index: 1;
-
-        top: -2px;
-        right: -2px;
+        top: calc(-1 * var(--kbq-size-3xs));
+        right: calc(-1 * var(--kbq-size-3xs));
     }
 
     &.kbq-navbar-item_has-nested {

package/navbar/_navbar-item_vertical.scss

@@ -1,12 +1,18 @@
+@use '../core/styles/common/animation';
 @use '../core/styles/common/tokens' as *;
 
 .kbq-navbar-item.kbq-vertical {
-    height: 41px;
+    height: var(--kbq-navbar-item-vertical-size-height);
 
     & .kbq-navbar-item__container {
         gap: var(--kbq-size-m);
     }
 
+    // Pinned to the right edge, in the column of the dropdown chevron.
+    & .kbq-navbar-item-suffix {
+        margin-left: auto;
+    }
+
     padding-right: var(--kbq-size-xl);
     padding-left: var(--kbq-size-xl);
 
@@ -46,6 +52,12 @@
 
         gap: var(--kbq-size-m);
 
+        // The shared `.kbq-navbar-item .kbq-badge` rule takes the badge out of flow for the icon-corner
+        // overlay used when collapsed; expanded, it stays a normal flex child laid out after the title.
+        & .kbq-badge {
+            position: static;
+        }
+
         &.kbq-navbar-item_has-nested {
             align-items: center;
 
@@ -53,12 +65,14 @@
         }
 
         &.kbq-navbar-bento .kbq-navbar-item__title {
-            margin-left: -8px;
+            margin-left: calc(-1 * var(--kbq-size-s));
             opacity: 0;
 
             transition:
                 opacity 150ms ease-out,
                 margin-left 150ms ease-out;
+
+            @include animation.kbq-animations-off();
         }
 
         &.kbq-navbar-bento:hover,
@@ -77,11 +91,9 @@
 
         justify-content: center;
 
+        // Position and stacking come from the shared `.kbq-navbar-item .kbq-badge` rule; only the offsets are
+        // orientation-specific.
         & .kbq-badge {
-            position: absolute;
-
-            z-index: 1;
-
             top: calc(-1 * var(--kbq-size-3xs));
             right: var(--kbq-size-xs);
         }

package/navbar/_navbar-theme.scss

@@ -12,8 +12,16 @@
         color: var(--kbq-navbar-item-#{$state-name}-content-text);
     }
 
+    // No `!important` needed: the child combinator plus the item class already outweighs everything that
+    // colours a bare icon (`.kbq-icon` and its `.kbq-icon.kbq-<color>` modifiers, at most two classes), and
+    // the state variants below add a class of their own on top of this one.
     & > .kbq-icon.kbq-empty {
-        color: var(--kbq-navbar-item-#{$state-name}-content-icon-left) !important;
+        color: var(--kbq-navbar-item-#{$state-name}-content-icon-left);
+    }
+
+    & .kbq-navbar-item-suffix.kbq-icon.kbq-empty,
+    & .kbq-navbar-item-suffix .kbq-icon.kbq-empty {
+        color: var(--kbq-navbar-item-#{$state-name}-content-icon-right);
     }
 }
 

package/navbar/navbar-brand.scss

@@ -1,6 +1,6 @@
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 @use './navbar-theme';
+@use '../core/styles/common/squircle' as *;
 
 .kbq-navbar-logo {
     display: flex;
@@ -11,7 +11,7 @@
 
     display: flex;
 
-    border-radius: var(--kbq-size-s);
+    @include kbq-squircle(var(--kbq-size-s));
 
     &:after {
         position: absolute;
@@ -19,7 +19,7 @@
 
         display: none;
 
-        border-radius: var(--kbq-navbar-item-size-content-border-radius);
+        @include kbq-squircle(var(--kbq-navbar-item-size-content-border-radius));
     }
 
     &:not(.kbq-disabled) .kbq-navbar-title {
@@ -84,13 +84,15 @@ a.kbq-navbar-brand {
 
     &.kbq-expanded {
         & .kbq-navbar-title {
-            max-width: 200px;
+            max-width: var(--kbq-navbar-brand-vertical-size-title-max-width);
         }
     }
 
+    // Three classes on the brand beat the two of the long-title rule below, so a collapsed title stays hidden
+    // whichever presentation it is in - no `!important` required.
     &.kbq-collapsed {
         & .kbq-navbar-title {
-            display: none !important;
+            display: none;
         }
     }
 }
@@ -98,7 +100,7 @@ a.kbq-navbar-brand {
 // Must stay below the per-orientation rules: `.kbq-vertical` sets `display: block` on the title at the very
 // same specificity, so moving this up lets that win and silently kills the clamp - `-webkit-line-clamp` does
 // nothing without `-webkit-box`, and the title then wraps to an unbounded number of lines with no ellipsis.
-// `.kbq-collapsed` still wins over it via `!important`.
+// `.kbq-collapsed` still wins over it, on specificity.
 .kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title {
     display: -webkit-box;
 

package/navbar/navbar-divider.scss

@@ -13,7 +13,7 @@
 .kbq-navbar-divider.kbq-horizontal {
     width: 1px;
 
-    height: 12px;
+    height: var(--kbq-size-m);
 
     margin-left: var(--kbq-size-m);
     margin-right: var(--kbq-size-m);

package/navbar/navbar-item.scss

@@ -4,6 +4,7 @@
 
 @use 'navbar-item_vertical';
 @use 'navbar-item_horizontal';
+@use '../core/styles/common/squircle' as *;
 
 .kbq-navbar-item {
     box-sizing: border-box;
@@ -13,7 +14,7 @@
     display: flex;
     align-items: center;
 
-    border-radius: var(--kbq-navbar-item-size-content-border-radius);
+    @include kbq-squircle(var(--kbq-navbar-item-size-content-border-radius));
 
     & .kbq-icon {
         min-width: var(--kbq-size-l);
@@ -48,17 +49,15 @@
 
         display: none;
 
-        border-radius: var(--kbq-navbar-item-size-content-border-radius);
+        @include kbq-squircle(var(--kbq-navbar-item-size-content-border-radius));
     }
 
-    &.kbq-horizontal {
-        /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
-        @extend navbar-item_horizontal !optional;
-    }
+    // The badge sits in the same corner in both orientations; only the offsets differ, and each partial
+    // supplies its own.
+    & .kbq-badge {
+        position: absolute;
 
-    &.kbq-vertical {
-        /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
-        @extend navbar-item_vertical !optional;
+        z-index: 1;
     }
 }
 

package/navbar/navbar-toggle.scss

@@ -3,7 +3,7 @@
 
     top: var(--kbq-size-3xl);
     right: calc(-1 * var(--kbq-size-l));
-    z-index: 1001;
+    z-index: var(--kbq-navbar-toggle-z-index);
 
     display: flex;
     justify-content: center;
@@ -19,8 +19,8 @@
         justify-content: center;
         align-items: center;
 
-        width: 28px;
-        height: 28px;
+        width: var(--kbq-navbar-toggle-size-circle);
+        height: var(--kbq-navbar-toggle-size-circle);
 
         border-radius: 50%;
     }

package/navbar/navbar-tokens.scss

@@ -1,6 +1,20 @@
 .kbq-navbar,
 .kbq-vertical-navbar {
     --kbq-navbar-item-size-content-border-radius: var(--kbq-size-border-radius);
+    /* SIZE TOKENS */
+    /* 40px of content plus the 1px gap that keeps the focus ring of adjacent items apart. */
+    --kbq-navbar-item-vertical-size-height: 41px;
+    --kbq-navbar-vertical-size-expanded-width: 240px;
+    --kbq-navbar-brand-vertical-size-title-max-width: 200px;
+    --kbq-navbar-toggle-size-circle: 28px;
+    /* LAYER TOKENS */
+    /* The navbar is page chrome: it sits above the page content and the `kbqOverlayLayer` layer (980), but
+       below every other CDK overlay (1000). The toggle overhangs the navbar's edge, so it needs one layer
+       more; a navbar opened over the content needs one less, to stay under the toggle of the navbar next
+       to it. */
+    --kbq-navbar-z-index: 990;
+    --kbq-navbar-vertical-open-over-z-index: 989;
+    --kbq-navbar-toggle-z-index: 991;
     /* THEME TOKENS */
     --kbq-navbar-background: var(--kbq-background-bg);
     --kbq-navbar-vertical-background: var(--kbq-background-bg-tertiary);

package/navbar/navbar.scss

@@ -1,10 +1,9 @@
 @use '../core/styles/common/tokens' as *;
-@use '../core/styles/common/overlay';
 
 @use './navbar-theme' as *;
 
 .kbq-navbar {
-    z-index: overlay.$overlay-z-index;
+    z-index: var(--kbq-navbar-z-index);
 
     display: flex;
     flex-direction: row;

package/navbar/vertical-navbar.scss

@@ -44,13 +44,13 @@
         }
 
         &.kbq-expanded {
-            width: 240px;
+            width: var(--kbq-navbar-vertical-size-expanded-width);
         }
     }
 
     &.kbq-vertical-navbar_open-over .kbq-vertical-navbar__container {
         position: absolute;
-        z-index: 998;
+        z-index: var(--kbq-navbar-vertical-open-over-z-index);
     }
 }