@koobiq/components 18.29.0 → 18.31.0

package/icon/_icon-button-theme.scss

@@ -1,110 +1,92 @@
+@use 'sass:map';
+
+@mixin _kbq-icon-button-color($map) {
+    color: map.get($map, default);
+
+    &:hover {
+        color: map.get($map, hover);
+    }
+
+    &:active,
+    &.kbq-active {
+        color: map.get($map, active);
+    }
+
+    &.kbq-disabled {
+        color: map.get($map, disabled);
+    }
+}
+
 @mixin kbq-icon-button-theme() {
     .kbq-icon-button {
         &:focus {
             outline: none;
         }
 
-        // FIXME: move to unified mixin
         &.kbq-theme {
-            color: var(--kbq-icon-button-theme-default);
-
-            &:active,
-            &.kbq-active {
-                color: var(--kbq-icon-button-theme-states-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: var(--kbq-icon-button-theme-states-hover);
-            }
-
-            &.kbq-disabled {
-                color: var(--kbq-icon-button-theme-states-disabled);
-            }
+            @include _kbq-icon-button-color(
+                (
+                    default: var(--kbq-icon-button-theme-default),
+                    hover: var(--kbq-icon-button-theme-states-hover),
+                    active: var(--kbq-icon-button-theme-states-active),
+                    disabled: var(--kbq-icon-button-theme-states-disabled)
+                )
+            );
         }
 
         &.kbq-contrast {
-            color: var(--kbq-icon-button-contrast-default);
-
-            &:active,
-            &.kbq-active {
-                color: var(--kbq-icon-button-contrast-states-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: var(--kbq-icon-button-contrast-states-hover);
-            }
-
-            &.kbq-disabled {
-                color: var(--kbq-icon-button-contrast-states-disabled);
-            }
+            @include _kbq-icon-button-color(
+                (
+                    default: var(--kbq-icon-button-contrast-default),
+                    hover: var(--kbq-icon-button-contrast-states-hover),
+                    active: var(--kbq-icon-button-contrast-states-active),
+                    disabled: var(--kbq-icon-button-contrast-states-disabled)
+                )
+            );
         }
 
         &.kbq-contrast-fade {
-            color: var(--kbq-icon-button-fade-contrast-default);
-
-            &:active,
-            &.kbq-active {
-                color: var(--kbq-icon-button-fade-contrast-states-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: var(--kbq-icon-button-fade-contrast-states-hover);
-            }
-
-            &.kbq-disabled {
-                color: var(--kbq-icon-button-fade-contrast-states-disabled);
-            }
+            @include _kbq-icon-button-color(
+                (
+                    default: var(--kbq-icon-button-fade-contrast-default),
+                    hover: var(--kbq-icon-button-fade-contrast-states-hover),
+                    active: var(--kbq-icon-button-fade-contrast-states-active),
+                    disabled: var(--kbq-icon-button-fade-contrast-states-disabled)
+                )
+            );
         }
 
         &.kbq-error {
-            color: var(--kbq-icon-button-error-default);
-
-            &:active,
-            &.kbq-active {
-                color: var(--kbq-icon-button-error-states-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: var(--kbq-icon-button-error-states-hover);
-            }
-
-            &.kbq-disabled {
-                color: var(--kbq-icon-button-error-states-disabled);
-            }
+            @include _kbq-icon-button-color(
+                (
+                    default: var(--kbq-icon-button-error-default),
+                    hover: var(--kbq-icon-button-error-states-hover),
+                    active: var(--kbq-icon-button-error-states-active),
+                    disabled: var(--kbq-icon-button-error-states-disabled)
+                )
+            );
         }
 
         &.kbq-success {
-            color: var(--kbq-icon-button-success-default);
-
-            &:active,
-            &.kbq-active {
-                color: var(--kbq-icon-button-success-states-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: var(--kbq-icon-button-success-states-hover);
-            }
-
-            &.kbq-disabled {
-                color: var(--kbq-icon-button-success-states-disabled);
-            }
+            @include _kbq-icon-button-color(
+                (
+                    default: var(--kbq-icon-button-success-default),
+                    hover: var(--kbq-icon-button-success-states-hover),
+                    active: var(--kbq-icon-button-success-states-active),
+                    disabled: var(--kbq-icon-button-success-states-disabled)
+                )
+            );
         }
 
         &.kbq-warning {
-            color: var(--kbq-icon-button-warning-default);
-
-            &:active,
-            &.kbq-active {
-                color: var(--kbq-icon-button-warning-states-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: var(--kbq-icon-button-warning-states-hover);
-            }
-
-            &.kbq-disabled {
-                color: var(--kbq-icon-button-warning-states-disabled);
-            }
+            @include _kbq-icon-button-color(
+                (
+                    default: var(--kbq-icon-button-warning-default),
+                    hover: var(--kbq-icon-button-warning-states-hover),
+                    active: var(--kbq-icon-button-warning-states-active),
+                    disabled: var(--kbq-icon-button-warning-states-disabled)
+                )
+            );
         }
 
         &.cdk-keyboard-focused {

package/list/_list-theme.scss

@@ -28,12 +28,20 @@
             @include _kbq-list-item(states-hover);
         }
 
-        &.kbq-selected {
+        &:active:not(.kbq-disabled) {
+            @include _kbq-list-item(states-active);
+        }
+
+        &.kbq-selected:not(.kbq-disabled) {
             @include _kbq-list-item(states-selected);
 
-            &:hover:not(.kbq-disabled) {
+            &:hover {
                 @include _kbq-list-item(states-selected-hover);
             }
+
+            &:active {
+                @include _kbq-list-item(states-selected-active);
+            }
         }
 
         &.kbq-disabled {
@@ -41,6 +49,20 @@
         }
     }
 
+    .kbq-list-option.kbq-list-option_multiple {
+        &.kbq-selected:not(.kbq-disabled) {
+            @include _kbq-list-item(multiple-states-selected);
+
+            &:hover {
+                @include _kbq-list-item(multiple-states-selected-hover);
+            }
+
+            &:active {
+                @include _kbq-list-item(multiple-states-selected-active);
+            }
+        }
+    }
+
     .kbq-list-selection.cdk-keyboard-focused {
         & .kbq-list-option.kbq-focused {
             border-color: var(--kbq-list-states-focused-focus-outline-color);

package/list/list-tokens.scss

@@ -5,14 +5,19 @@
     --kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);
     --kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);
     --kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);
+    --kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);
     --kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);
     --kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);
     --kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);
     --kbq-list-states-selected-container-background: var(--kbq-background-theme-less);
+    --kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);
     --kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);
     --kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);
     --kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);
     --kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);
+    --kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);
+    --kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);
+    --kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);
     --kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);
     --kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);
     --kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);

package/overflow-items/overflow-items.d.ts

@@ -1,4 +1,3 @@
-import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Manages the visibility of the element.
@@ -7,18 +6,14 @@ import * as i0 from "@angular/core";
  */
 export declare class ElementVisibilityManager {
     private readonly renderer;
-    /**
-     * Reference to the element.
-     *
-     * @docs-private
-     */
-    readonly elementRef: ElementRef<any>;
+    private readonly elementRef;
+    private readonly hiddenState;
     /**
      * Whether the element is hidden.
      *
      * @docs-private
      */
-    readonly hidden: import("@angular/core").WritableSignal<boolean>;
+    readonly hidden: import("@angular/core").Signal<boolean>;
     /**
      * Hides the element.
      *
@@ -59,6 +54,10 @@ export declare class KbqOverflowItem extends ElementVisibilityManager {
      * @default false
      */
     readonly alwaysVisible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * @docs-private
+     */
+    hide(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItem, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItem, "[kbqOverflowItem]", ["kbqOverflowItem"], { "id": { "alias": "kbqOverflowItem"; "required": true; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; "alwaysVisible": { "alias": "alwaysVisible"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -68,14 +67,10 @@ export declare class KbqOverflowItem extends ElementVisibilityManager {
 export declare class KbqOverflowItems {
     /**
      * `KbqOverflowItem` directive references.
-     *
-     * @docs-private
      */
     private readonly items;
     /**
      * `KbqOverflowItemsResult` directive reference.
-     *
-     * @docs-private
      */
     private readonly result;
     /**
@@ -104,31 +99,27 @@ export declare class KbqOverflowItems {
     private readonly document;
     constructor();
     /**
-     * Returns a list of items sorted by their specified `order` value.
+     * Sort items by their `order` attribute.
      * If an item does not have an `order` defined, its index is used as a fallback.
-     * This ensures a stable order while allowing custom positioning.
      */
-    private getSortedItemsByOrder;
+    private sortItemsByOrder;
     /**
-     * Calculates the visibility of items, based on the container width and `reverseOverflowOrder` property.
+     * Excludes items that have the `alwaysVisible` attribute.
      */
-    private calculateItemsVisibility;
+    private excludeAlwaysVisibleItems;
     /**
-     * Returns the width of the element including margins.
+     * Manages the visibility of items based on the available space in the container and returns the hidden items.
+     * Direction of hiding is determined by the `reverseOverflowOrder` attribute.
      */
-    private getElementWidthWithMargins;
+    private getHiddenItems;
     /**
      * This method sets the necessary styles for the directive.
      */
     private setStyles;
     /**
-     * Determines if the given item is hidden.
-     */
-    private isHiddenItem;
-    /**
-     * Returns the window object.
+     * Determines if the given element has a scrollbar.
      */
-    private getWindow;
+    private readonly hasScrollbar;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItems, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItems, "[kbqOverflowItems]", ["kbqOverflowItems"], { "reverseOverflowOrder": { "alias": "reverseOverflowOrder"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; }, { "changes": "changes"; }, ["items", "result"], never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.29.0",
+    "version": "18.31.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,13 +24,13 @@
         "@angular/cdk": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.29.0",
-        "@koobiq/angular-moment-adapter": "18.29.0",
-        "@koobiq/angular-luxon-adapter": "18.29.0",
+        "@koobiq/cdk": "18.31.0",
+        "@koobiq/angular-moment-adapter": "18.31.0",
+        "@koobiq/angular-luxon-adapter": "18.31.0",
         "@koobiq/date-formatter": "^3.2.3",
-        "@koobiq/icons": "^10.1.0",
+        "@koobiq/icons": "^10.4.0",
         "@koobiq/tokens-builder": "3.11.0",
-        "@koobiq/design-tokens": "3.13.2",
+        "@koobiq/design-tokens": "3.14.0",
         "@radix-ng/primitives": "^0.23.0"
     },
     "dependencies": {

package/popover/popover.component.d.ts

@@ -14,7 +14,6 @@ export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewIn
     elementRef: ElementRef;
     cdkTrapFocus: CdkTrapFocus;
     private debounceTime;
-    private readonly destroyRef;
     isContentTopOverflow: boolean;
     isContentBottomOverflow: boolean;
     ngAfterViewInit(): void;
@@ -82,6 +81,8 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     backdropClass: string;
     arrow: boolean;
     offset: number | null;
+    /** Delay before closing in milliseconds. The default value for kbqTrigger=PopUpTriggers.Hover is 500 ms. */
+    leaveDelay: number;
     placementChange: EventEmitter<any>;
     visibleChange: EventEmitter<boolean>;
     protected originSelector: string;
@@ -98,7 +99,8 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     closingActions(): import("rxjs").Observable<void | CdkScrollable | MouseEvent>;
     private hideIfNotInViewPort;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
     static ngAcceptInputType_arrow: unknown;
     static ngAcceptInputType_offset: unknown;
+    static ngAcceptInputType_leaveDelay: unknown;
 }

package/schematics/ng-add/index.js

@@ -27,13 +27,13 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.14");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.29.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.29.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.31.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.31.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.2.3");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.2.3");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^10.1.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.13.2");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.13.2");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^10.4.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.14.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.14.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@messageformat/core', "^3.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@radix-ng/primitives', "^0.23.0");
         utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.6.1");

package/select/select.component.d.ts

@@ -165,6 +165,11 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      */
     get compareWith(): (o1: any, o2: any) => boolean;
     set compareWith(fn: (o1: any, o2: any) => boolean);
+    /**
+     * Function for handling the combination Ctrl + A (select all). By default, the internal handler is used.
+     */
+    get selectAllHandler(): (event: KeyboardEvent, select: KbqSelect) => void;
+    set selectAllHandler(fn: (event: KeyboardEvent, select: KbqSelect) => void);
     /**
      * Width of the panel. If set to `auto`, the panel will match the trigger width.
      * If set to null or an empty string, the panel will grow to match the longest option's text.
@@ -339,10 +344,12 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     private getOverlayWidth;
     /** Comparison function to specify which option is displayed. Defaults to object equality. */
     private _compareWith;
+    /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */
+    private _selectAllHandler;
     private getTotalVisibleItems;
     private buildTriggerClone;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_panelMinWidth: unknown;
     static ngAcceptInputType_tabIndex: unknown;

package/tooltip/tooltip.component.d.ts

@@ -42,6 +42,12 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     protected scrollStrategy: () => ScrollStrategy;
     protected parentPopup: KbqParentPopup | null;
     protected focusMonitor: FocusMonitor;
+    /**
+     * Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger.
+     * Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger
+     * to tooltip.
+     */
+    hideWithTimeout: boolean;
     get tooltipVisible(): boolean;
     set tooltipVisible(value: boolean);
     get tooltipPlacement(): PopUpPlacements;
@@ -96,7 +102,8 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     updateClassMap(newPlacement?: string): void;
     protected applyRelativeToPointer(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "relativeToPointer": { "alias": "kbqRelativeToPointer"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "hideWithTimeout": { "alias": "hideWithTimeout"; "required": false; }; "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "relativeToPointer": { "alias": "kbqRelativeToPointer"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
+    static ngAcceptInputType_hideWithTimeout: unknown;
     static ngAcceptInputType_relativeToPointer: unknown;
     static ngAcceptInputType_arrow: unknown;
     static ngAcceptInputType_offset: unknown;

package/top-bar/top-bar.scss

@@ -33,6 +33,7 @@
 
     .kbq-top-bar-container__with-overflow-items {
         gap: unset;
+        justify-content: unset;
         padding: 1px;
 
         > .kbq-overflow-item {

package/tree/_tree-theme.scss

@@ -33,15 +33,38 @@
     .kbq-tree-option {
         @include kbq-tree-option(default);
 
-        &:hover:not(.kbq-disabled) {
-            @include kbq-tree-option(states-hover);
-        }
+        &:not(.kbq-disabled) {
+            &:hover {
+                @include kbq-tree-option(states-hover);
+            }
+
+            &:active {
+                background: var(--kbq-tree-states-active-container-background);
+            }
+
+            &.kbq-selected {
+                @include kbq-tree-option(states-selected);
+
+                &:hover {
+                    @include kbq-tree-option(states-selected-hover);
+                }
+
+                &:active {
+                    background: var(--kbq-tree-states-selected-active-container-background);
+                }
+            }
+
+            &.kbq-checked:not(.kbq-selected),
+            &.kbq-tree-option_multiple.kbq-selected {
+                background: var(--kbq-tree-multiple-states-selected-container-background);
 
-        &.kbq-selected {
-            @include kbq-tree-option(states-selected);
+                &:hover {
+                    background: var(--kbq-tree-multiple-states-selected-hover-container-background);
+                }
 
-            &:hover:not(.kbq-disabled) {
-                @include kbq-tree-option(states-selected-hover);
+                &:active {
+                    background: var(--kbq-tree-multiple-states-selected-active-container-background);
+                }
             }
         }
 

package/tree/tree-option.scss

@@ -70,12 +70,15 @@
         }
     }
 
-    &:is(.kbq-selected, .kbq-focused, .kbq-active):has(+ :is(.kbq-selected, .kbq-focused, .kbq-active)) {
+    &:is(.kbq-checked, .kbq-selected, .kbq-focused, .kbq-active):has(
+            + :is(.kbq-checked, .kbq-selected, .kbq-focused, .kbq-active)
+        ) {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
 
-    &:is(.kbq-selected, .kbq-focused, .kbq-active) + :is(.kbq-selected, .kbq-focused, .kbq-active) {
+    &:is(.kbq-checked, .kbq-selected, .kbq-focused, .kbq-active)
+        + :is(.kbq-checked, .kbq-selected, .kbq-focused, .kbq-active) {
         border-top-left-radius: 0;
         border-top-right-radius: 0;
     }

package/tree/tree-tokens.scss

@@ -16,6 +16,7 @@
     --kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);
     --kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);
     --kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);
+    --kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);
     --kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);
     --kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);
     --kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);
@@ -23,12 +24,16 @@
     --kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);
     --kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
     --kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);
+    --kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);
     --kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);
     --kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);
     --kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);
     --kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);
     --kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);
     --kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);
+    --kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);
+    --kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);
+    --kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);
     --kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);
     --kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);
     --kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);

package/tree-select/tree-select.component.d.ts

@@ -164,6 +164,13 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     get disabled(): boolean;
     set disabled(value: boolean);
     private _disabled;
+    /**
+     * Function for handling the combination Ctrl + A (select all). By default, the internal handler is used.
+     */
+    get selectAllHandler(): (event: KeyboardEvent, select: KbqTreeSelect) => void;
+    set selectAllHandler(fn: (event: KeyboardEvent, select: KbqTreeSelect) => void);
+    /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */
+    private _selectAllHandler;
     /** Whether the select is focused. */
     get focused(): boolean;
     set focused(value: boolean);
@@ -295,7 +302,7 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     private scrollActiveOptionIntoView;
     private subscribeOnSearchChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
     static ngAcceptInputType_tabIndex: unknown;
     static ngAcceptInputType_disabled: unknown;
 }