@koobiq/components 20.1.0 → 20.3.0

package/dropdown/_dropdown-theme.scss

@@ -22,29 +22,55 @@
             color: var(--kbq-dropdown-item-caption-color);
         }
 
+        // `_active` is the search-mode counterpart of `.cdk-focused`: the item is the panel's active
+        // item while DOM focus stays in the search field, so it has to read the same.
         &.kbq-dropdown-item_highlighted,
+        &.kbq-dropdown-item_active:not(.kbq-disabled),
         &.cdk-focused:not(.kbq-disabled) {
             @include _kbq-dropdown-item-state(states-hover);
         }
 
+        // 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 {
+            &.cdk-focused:not(.kbq-dropdown-item_highlighted, .kbq-selected, .kbq-disabled) {
+                @include _kbq-dropdown-item-state(default);
+            }
+        }
+
+        &:active:not(.kbq-disabled),
+        &.kbq-active:not(.kbq-disabled) {
+            // the active state defines only a background token; the mixin would emit undefined text/icon color vars
+            background: var(--kbq-list-states-active-container-background);
+        }
+
         &.kbq-selected {
             @include _kbq-dropdown-item-state(states-selected);
 
+            &.kbq-dropdown-item_active:not(.kbq-disabled),
             &.cdk-focused:not(.kbq-disabled) {
                 @include _kbq-dropdown-item-state(states-selected-hover);
             }
+
+            &:active:not(.kbq-disabled),
+            &.kbq-active:not(.kbq-disabled) {
+                background: var(--kbq-list-states-selected-active-container-background);
+            }
         }
 
         &.kbq-disabled {
             @include _kbq-dropdown-item-state(states-disabled);
         }
 
-        &:is(.kbq-selected, .cdk-focused):has(+ :is(.kbq-selected, .cdk-focused)) {
+        &:is(.kbq-selected, .cdk-focused, .kbq-dropdown-item_active):has(
+                + :is(.kbq-selected, .cdk-focused, .kbq-dropdown-item_active)
+            ) {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
         }
 
-        &:is(.kbq-selected, .cdk-focused) + :is(.kbq-selected, .cdk-focused) {
+        &:is(.kbq-selected, .cdk-focused, .kbq-dropdown-item_active)
+            + :is(.kbq-selected, .cdk-focused, .kbq-dropdown-item_active) {
             border-top-left-radius: 0;
             border-top-right-radius: 0;
         }

package/dropdown/dropdown-item.scss

@@ -1,3 +1,4 @@
+@use '../core/styles/common/animation';
 @use '../core/styles/common/list';
 @use '../core/styles/common/vendor-prefixes';
 
@@ -47,6 +48,34 @@
     border-radius: inherit;
 }
 
+.kbq-dropdown-item_has-action {
+    align-items: center;
+
+    // Raised above the (always-rendered) overlay so it stays clickable even while the overlay is
+    // guarding disabled/progress clicks elsewhere on the row — see the overlay's own click handler,
+    // `haltDisabledEvents`, bound in the template.
+    & > .kbq-dropdown-item__action {
+        position: relative;
+        z-index: 1;
+        flex: 0 0 auto;
+    }
+}
+
+// kbq-dropdown-item's :before/:after are already used for the hit-area extension (see
+// select.item-active-area() in dropdown.scss), so the .kbq-progress shimmer is rendered on the
+// existing overlay element instead of the usual ::after.
+.kbq-dropdown-item.kbq-progress .kbq-dropdown-item-overlay {
+    @include animation.kbq-progress-overlay();
+
+    // .kbq-dropdown-item-overlay's default inset (-1px) only bleeds past the padding box, leaving
+    // 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;
+    }
+}
+
 .kbq-dropdown__group-header {
     @include vendor-prefixes.user-select(none);
     @include list.kbq-list-header-base();

package/dropdown/dropdown-tokens.scss

@@ -2,7 +2,8 @@
 
 .kbq-dropdown__panel {
     --kbq-dropdown-size-container-width-min: 200px;
-    --kbq-dropdown-size-container-width-max: 640px;
+    // Kept as a dropdown-specific override point; defaults to the shared panel cap.
+    --kbq-dropdown-size-container-width-max: var(--kbq-panel-size-width-max, 640px);
     --kbq-dropdown-size-container-padding-vertical: var(--kbq-size-xxs);
     --kbq-dropdown-size-container-border-radius: var(--kbq-size-s);
     /* THEME TOKENS */

package/dropdown/dropdown.scss

@@ -45,7 +45,6 @@
     border-radius: var(--kbq-dropdown-size-container-border-radius);
 
     box-sizing: border-box;
-    padding: var(--kbq-size-xxs);
 
     // Prevent users from interacting with the panel while it's animating. Note that
     // people won't be able to click through it, because the overlay pane will catch the click.
@@ -66,6 +65,15 @@
             top: calc(-1 * var(--kbq-size-3xs));
             bottom: calc(-1 * var(--kbq-size-3xs));
         }
+
+        // The generic .kbq-progress::after rule (see _animation.scss) would otherwise paint the
+        // shimmer onto this hit-area pseudo-element. The shimmer is rendered on
+        // .kbq-dropdown-item-overlay instead (see dropdown-item.scss), so just neutralize it here
+        // without touching content/position/width/height/left, which the hit-area still needs.
+        &.kbq-progress:after {
+            background: none;
+            animation: none;
+        }
     }
 
     .kbq-divider {
@@ -77,6 +85,13 @@
 .kbq-dropdown__content {
     display: flex;
     flex-direction: column;
+
+    padding: var(--kbq-size-xxs);
+}
+
+.kbq-dropdown-footer {
+    @extend %kbq-select-footer;
+    border-color: var(--kbq-line-contrast-less);
 }
 
 @include theme.kbq-dropdown-theme();