@koobiq/components 20.4.1 → 21.0.0

package/datepicker/datepicker-content.scss

@@ -1,4 +1,6 @@
+@use '../core/styles/common/animation';
 @use './datepicker-theme' as *;
+@use '../core/styles/common/squircle' as *;
 
 $kbq-datepicker-non-touch-calendar-cell-size: 40px;
 $kbq-datepicker-size-grid-padding-horizontal: var(--kbq-datepicker-size-grid-padding-horizontal);
@@ -13,7 +15,7 @@ $kbq-datepicker-non-touch-calendar-height: 270px;
 .kbq-datepicker__content {
     display: block;
 
-    border-radius: var(--kbq-datepicker-size-container-border-radius);
+    @include kbq-squircle(var(--kbq-datepicker-size-container-border-radius));
 
     .kbq-calendar {
         width: $kbq-datepicker-non-touch-calendar-width;
@@ -22,6 +24,36 @@ $kbq-datepicker-non-touch-calendar-height: 270px;
         padding-top: var(--kbq-datepicker-size-container-padding-vertical);
 
         padding-bottom: var(--kbq-datepicker-size-container-padding-vertical);
+
+        animation: kbq-datepicker-calendar-enter 120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2) backwards;
+    }
+
+    &.kbq-datepicker__content_leave {
+        animation: kbq-datepicker-content-leave 100ms linear forwards;
+
+        @include animation.kbq-animations-off();
+    }
+
+    &.kbq-animations-disabled .kbq-calendar {
+        animation: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .kbq-calendar {
+            animation: none;
+        }
+    }
+}
+
+@keyframes kbq-datepicker-calendar-enter {
+    from {
+        opacity: 0;
+    }
+}
+
+@keyframes kbq-datepicker-content-leave {
+    to {
+        opacity: 0;
     }
 }
 

package/datepicker/datepicker-toggle.scss

@@ -1,43 +1,5 @@
-@use '../core/styles/tokens';
-@use '../core/styles/common/tokens' as *;
-
 .kbq-datepicker-toggle-icon {
     display: inline-flex;
     justify-content: center;
     align-items: center;
 }
-
-.kbq-datepicker-toggle:focus {
-    outline: 0;
-}
-
-.kbq-datepicker-toggle__button.kbq-button-icon {
-    // @TODO define --kbq-datepicker-toggle-size-* in design-tokens; fallback matches the icon-button control size meanwhile
-    width: var(--kbq-datepicker-toggle-size-width, var(--kbq-size-3xl));
-    height: var(--kbq-datepicker-toggle-size-height, var(--kbq-size-3xl));
-    margin-left: 2px;
-}
-
-.kbq-form-field-appearance-legacy {
-    .kbq-form-field-prefix,
-    .kbq-form-field-suffix {
-        .kbq-datepicker-toggle__default-icon {
-            width: 1em;
-        }
-    }
-}
-
-.kbq-form-field:not(.kbq-form-field-appearance-legacy) {
-    .kbq-form-field-prefix,
-    .kbq-form-field-suffix {
-        .kbq-datepicker-toggle__default-icon {
-            display: block;
-            width: 1.5em;
-            height: 1.5em;
-        }
-
-        .kbq-button-icon .kbq-datepicker-toggle__default-icon {
-            margin: auto;
-        }
-    }
-}

package/dl/dl-tokens.scss

@@ -3,7 +3,17 @@
     --kbq-description-list-size-horizontal-gap-vertical: var(--kbq-size-l);
     --kbq-description-list-size-vertical-content-gap-vertical: var(--kbq-size-3xs);
     --kbq-description-list-size-vertical-gap-vertical: var(--kbq-size-m);
+    --kbq-description-list-resizer-line-width: 1px;
+    --kbq-description-list-resizer-active-line-width: 3px;
+    --kbq-description-list-resizer-focus-outline-width: 2px;
+    --kbq-description-list-resizer-hit-area-width: calc(
+        2 * var(--kbq-size-s) + var(--kbq-description-list-resizer-line-width)
+    );
     /* THEME TOKENS */
     --kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);
     --kbq-description-list-description-color: var(--kbq-foreground-contrast);
+    --kbq-description-list-resizer-color: var(--kbq-line-contrast-less);
+    --kbq-description-list-resizer-state-hover-color: var(--kbq-line-contrast-fade);
+    --kbq-description-list-resizer-state-active-color: var(--kbq-states-line-focus-theme);
+    --kbq-description-list-resizer-focus-outline-color: var(--kbq-states-line-focus-theme);
 }

package/dl/dl.scss

@@ -1,7 +1,8 @@
-@use './dl-theme' as *;
+@use './dl-theme' as theme;
 
 .kbq-dl {
     display: grid;
+    position: relative;
     column-gap: var(--kbq-description-list-size-horizontal-content-gap-horizontal);
     row-gap: var(--kbq-description-list-size-horizontal-gap-vertical);
 
@@ -26,29 +27,128 @@
     // Let the columns keep their `1fr` ratio instead of being stretched by an unbreakable string: `min-width: 0`
     // drops the grid item's content-based automatic minimum, and `break-word` breaks such a string only when it
     // does not fit. `anywhere` is deliberately avoided — it would also shrink the min-content size to a single
-    // character and leak that to any ancestor that sizes itself to content.
-    .kbq-dt,
-    .kbq-dd {
+    // character and leak that to any ancestor that sizes itself to content. Terms and descriptions are reached
+    // through child combinators, here and in the modifiers below, so the rules of a list stay off a list nested in
+    // one of its descriptions.
+    > .kbq-dt,
+    > .kbq-dd {
         min-width: 0;
         overflow-wrap: break-word;
     }
 
-    .kbq-dt {
+    > .kbq-dt {
         grid-column: 1;
     }
 
-    .kbq-dd {
+    > .kbq-dd {
         grid-column: 2 / span 3;
     }
 
+    // Before the first resize, keep the term column at least as wide as its configured minimum so the separator
+    // rests on the real column border and dragging starts from a width that already satisfies the minimum.
+    &.kbq-dl_resizable:not(.kbq-dl_resized):not(.kbq-dl_vertical) {
+        grid-template-columns:
+            minmax(var(--kbq-description-list-dt-min-width), 1fr)
+            repeat(3, minmax(0, 1fr));
+    }
+
+    &.kbq-dl_resized:not(.kbq-dl_vertical) {
+        grid-template-columns:
+            var(--kbq-description-list-dt-width)
+            repeat(3, minmax(0, 1fr));
+    }
+
+    .kbq-dl__resize-track {
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: 0;
+        grid-column: 1 / 2;
+        width: 100%;
+        pointer-events: none;
+        z-index: 1;
+    }
+
+    .kbq-dl__resize-handle {
+        position: absolute;
+        inset-block: 0;
+        inset-inline-end: calc(
+            (
+                    var(--kbq-description-list-size-horizontal-content-gap-horizontal) +
+                        var(--kbq-description-list-resizer-hit-area-width)
+                ) /
+                -2
+        );
+        width: var(--kbq-description-list-resizer-hit-area-width);
+        pointer-events: auto;
+        touch-action: none;
+        // Suppress the native focus ring: the frame is drawn solely by `.cdk-keyboard-focused` below, so a pointer
+        // resize (which demotes the focus origin to mouse) leaves no `:focus-visible` outline lingering.
+        outline: none;
+
+        // The resize line, centered inside the hit area. Hidden until the list is hovered or the separator is focused.
+        // Inset vertically by the focus-outline width so the line and its 2px focus frame stay within the list bounds
+        // instead of the outline spilling past the top and bottom edges.
+        &::after {
+            position: absolute;
+            inset-block: var(--kbq-description-list-resizer-focus-outline-width);
+            inset-inline: 0;
+            width: var(--kbq-description-list-resizer-line-width);
+            margin-inline: auto;
+            background-color: var(--kbq-description-list-resizer-color);
+            content: '';
+            opacity: 0;
+        }
+
+        &:is(:hover, .kbq-hover)::after {
+            background-color: var(--kbq-description-list-resizer-state-hover-color);
+        }
+
+        // Keep the separator visible while it is focused (keyboard) or being dragged.
+        &.cdk-keyboard-focused::after,
+        &:is(:active, .kbq-active)::after {
+            opacity: 1;
+        }
+
+        // Tint and thicken the line only while dragging; keyboard focus keeps the line at its default color and
+        // width and is marked solely by the outline frame below.
+        &:is(:active, .kbq-active)::after {
+            width: var(--kbq-description-list-resizer-active-line-width);
+            background-color: var(--kbq-description-list-resizer-state-active-color);
+        }
+
+        // Only keyboard focus shows the frame; a pointer drag demotes the focus origin to mouse (see
+        // `handleResizeStart`), so the frame stays hidden throughout the drag and does not linger after it.
+        &.cdk-keyboard-focused {
+            outline: var(--kbq-description-list-resizer-focus-outline-width) solid
+                var(--kbq-description-list-resizer-focus-outline-color);
+            outline-offset: calc(-1 * var(--kbq-description-list-resizer-focus-outline-width));
+        }
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        // Reveal the separator on hover of the list. Child combinators keep it to the list's own separator, not
+        // to the one of a list nested in a description.
+        &:is(:hover, .kbq-hover) > .kbq-dl__resize-track > .kbq-dl__resize-handle::after {
+            opacity: 1;
+        }
+    }
+
     &.kbq-dl_wide {
         grid-template-columns: repeat(2, 1fr);
 
-        .kbq-dt {
+        &.kbq-dl_resizable:not(.kbq-dl_resized):not(.kbq-dl_vertical) {
+            grid-template-columns: minmax(var(--kbq-description-list-dt-min-width), 1fr) minmax(0, 1fr);
+        }
+
+        &.kbq-dl_resized:not(.kbq-dl_vertical) {
+            grid-template-columns: var(--kbq-description-list-dt-width) minmax(0, 1fr);
+        }
+
+        > .kbq-dt {
             grid-column: 1;
         }
 
-        .kbq-dd {
+        > .kbq-dd {
             grid-column: 2;
         }
     }
@@ -58,16 +158,16 @@
 
         row-gap: var(--kbq-description-list-size-vertical-content-gap-vertical);
 
-        .kbq-dt,
-        .kbq-dd {
+        > .kbq-dt,
+        > .kbq-dd {
             grid-column: 1;
         }
 
-        .kbq-dd:not(:last-child) {
+        > .kbq-dd:not(:last-child) {
             margin-bottom: var(--kbq-description-list-size-vertical-gap-vertical);
         }
     }
 }
 
-@include kbq-dl-theme();
-@include kbq-dl-typography();
+@include theme.kbq-dl-theme();
+@include theme.kbq-dl-typography();

package/dropdown/_dropdown-theme.scss

@@ -31,11 +31,11 @@
         }
 
         // While a safe area protects an open submenu, sibling items passed on the way to it keep
-        // their default background instead of flashing the hover state.
-        .kbq-dropdown__panel_safe-area-active {
+        // their default background instead of flashing the hover state. The class lives on the panel,
+        // i.e. on an ancestor of every item, so the item selector has to be nested under it.
+        .kbq-dropdown__panel_safe-area-active
             &.cdk-focused:not(.kbq-dropdown-item_highlighted, .kbq-selected, .kbq-disabled) {
-                @include _kbq-dropdown-item-state(default);
-            }
+            @include _kbq-dropdown-item-state(default);
         }
 
         &:active:not(.kbq-disabled),
@@ -76,13 +76,6 @@
         }
     }
 
-    .kbq-dropdown__group-header {
-        // @deprecated, use <kbq-optgroup label="Label" /> instead. Will be removed in the next major release
-        &.kbq-dropdown__group-header_small {
-            color: var(--kbq-foreground-contrast-secondary);
-        }
-    }
-
     .kbq-dropdown-item-overlay {
         background: transparent;
     }
@@ -100,10 +93,5 @@
 
     .kbq-dropdown__group-header {
         @include tokens.kbq-typography-level-to-styles-css-variables(typography, big-strong);
-
-        // @deprecated, use <kbq-optgroup label="Label" /> instead. Will be removed in the next major release
-        &.kbq-dropdown__group-header_small {
-            @include tokens.kbq-typography-level-to-styles-css-variables(typography, caps-compact-strong);
-        }
     }
 }

package/dropdown/dropdown-item.scss

@@ -1,10 +1,11 @@
 @use '../core/styles/common/animation';
 @use '../core/styles/common/list';
 @use '../core/styles/common/vendor-prefixes';
+@use '../core/styles/common/squircle' as *;
 
 .kbq-dropdown-item {
     width: 100%;
-    border-radius: var(--kbq-dropdown-item-border-radius);
+    @include kbq-squircle(var(--kbq-dropdown-item-border-radius));
 
     @include vendor-prefixes.user-select(none);
     @include list.kbq-list-item-base();
@@ -45,7 +46,7 @@
     right: -1px;
     bottom: -1px;
 
-    border-radius: inherit;
+    @include kbq-squircle-inherit();
 }
 
 .kbq-dropdown-item_has-action {
@@ -71,17 +72,10 @@
     // the item's own border uncovered. Flush the shimmer to the item's outer edge instead.
     inset: calc(-1 * var(--kbq-size-3xs));
 
-    @media (prefers-reduced-motion: reduce) {
-        animation: none;
-    }
+    @include animation.kbq-animations-off();
 }
 
 .kbq-dropdown__group-header {
     @include vendor-prefixes.user-select(none);
     @include list.kbq-list-header-base();
-
-    // @deprecated, use <kbq-optgroup label="Label" /> instead. Will be removed in the next major release
-    &.kbq-dropdown__group-header_small {
-        @include list.kbq-list-subheading-base();
-    }
 }

package/dropdown/dropdown.scss

@@ -1,5 +1,6 @@
 @use './dropdown-theme' as theme;
 @use '../core/styles/common/select';
+@use '../core/styles/common/squircle' as *;
 
 .kbq-dropdown-trigger {
     &.kbq-button {
@@ -42,7 +43,7 @@
     min-width: max(var(--kbq-dropdown-size-container-width-min), 100%);
     max-width: var(--kbq-dropdown-size-container-width-max);
 
-    border-radius: var(--kbq-dropdown-size-container-border-radius);
+    @include kbq-squircle(var(--kbq-dropdown-size-container-border-radius));
 
     box-sizing: border-box;
 

package/empty-state/_empty-state-theme.scss

@@ -3,21 +3,21 @@
 @mixin kbq-empty-state-theme() {
     .kbq-empty-state_normal-color {
         .kbq-empty-state-title {
-            color: var(--kbq-empty-state-title);
+            color: var(--kbq-empty-state-title-color);
         }
 
         .kbq-empty-state-text {
-            color: var(--kbq-empty-state-color);
+            color: var(--kbq-empty-state-text-color);
         }
     }
 
     .kbq-empty-state_error-color {
         .kbq-empty-state-title {
-            color: var(--kbq-empty-state-error-title);
+            color: var(--kbq-empty-state-error-title-color);
         }
 
         .kbq-empty-state-text {
-            color: var(--kbq-empty-state-error-color);
+            color: var(--kbq-empty-state-error-text-color);
         }
     }
 }
@@ -28,6 +28,12 @@
         text-align: center;
     }
 
+    // The title carries heading typography, so consumers are asked to write a real heading element.
+    // Its user-agent margin would break the token-driven spacing.
+    .kbq-empty-state-title {
+        margin: 0;
+    }
+
     .kbq-empty-state_compact {
         .kbq-empty-state-title {
             @include kbq-typography-level-to-styles-css-variables(typography, text-normal);

package/empty-state/empty-state-tokens.scss

@@ -24,8 +24,8 @@
     --kbq-empty-state-size-compact-image-addon-height: 0;
     --kbq-empty-state-size-compact-title-margin-bottom: var(--kbq-size-xxs);
     /* THEME TOKENS */
-    --kbq-empty-state-title: var(--kbq-foreground-contrast);
-    --kbq-empty-state-color: var(--kbq-foreground-contrast-secondary);
-    --kbq-empty-state-error-title: var(--kbq-foreground-error);
-    --kbq-empty-state-error-color: var(--kbq-foreground-error);
+    --kbq-empty-state-title-color: var(--kbq-foreground-contrast);
+    --kbq-empty-state-text-color: var(--kbq-foreground-contrast-secondary);
+    --kbq-empty-state-error-title-color: var(--kbq-foreground-error);
+    --kbq-empty-state-error-text-color: var(--kbq-foreground-error);
 }

package/empty-state/empty-state.scss

@@ -2,6 +2,10 @@
 
 @use './empty-state-theme' as *;
 
+// The custom properties every rule below reads. Loaded here, not from a second `styleUrls` entry,
+// so that the stylesheet is self-contained for anything reusing it.
+@use './empty-state-tokens';
+
 .kbq-empty-state {
     display: flex;
     flex-direction: column;