@koobiq/components 18.15.0 → 18.16.0

package/form-field/_form-field-theme.scss

@@ -40,20 +40,33 @@
             }
         }
 
-        &.cdk-keyboard-focused {
-            @include kbq-form-field-state(states-focused);
-
-            & .kbq-form-field__container {
-                box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-focused-focus-outline);
-            }
-        }
-
         &.kbq-form-field_invalid,
         &.ng-invalid {
             @include kbq-form-field-state(states-error);
+        }
+
+        &.kbq-form-field-type-input,
+        &.kbq-form-field-type-textarea,
+        &.kbq-form-field-type-timepicker,
+        &.kbq-form-field-type-datepicker,
+        &.kbq-form-field-type-input-password,
+        &.kbq-form-field-type-tag-list,
+        &.kbq-form-field-type-select.cdk-keyboard-focused {
+            &.cdk-focused {
+                @include kbq-form-field-state(states-focused);
+
+                & .kbq-form-field__container {
+                    box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-focused-focus-outline);
+                }
+            }
+
+            &.kbq-form-field_invalid,
+            &.ng-invalid {
+                @include kbq-form-field-state(states-error);
 
-            &.cdk-keyboard-focused .kbq-form-field__container {
-                box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-error-focused-focus-outline);
+                & .kbq-form-field__container {
+                    box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-error-focused-focus-outline);
+                }
             }
         }
 

package/form-field/form-field.d.ts

@@ -1,4 +1,4 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
+import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { CanColor, CanColorCtor } from '@koobiq/components/core';
@@ -35,6 +35,8 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     hovered: boolean;
     canCleanerClearByEsc: boolean;
     private readonly destroyRef;
+    get focusOrigin(): FocusOrigin;
+    private _focusOrigin;
     get hasFocus(): boolean;
     get hasHint(): boolean;
     get hasSuffix(): boolean;

package/form-field/validate.directive.d.ts

@@ -49,5 +49,5 @@ export declare class KbqValidateDirective implements AfterContentInit {
     setMosaicValidationForModelControl(): void;
     setMosaicValidationForFormControl(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqValidateDirective, [null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqValidateDirective, "        input[kbqInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", ["KbqValidate"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqValidateDirective, "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", ["KbqValidate"], {}, {}, never, never, false, never>;
 }

package/list/_list-theme.scss

@@ -28,10 +28,6 @@
             @include kbq-list-item(states-hover);
         }
 
-        &.kbq-focused {
-            border-color: var(--kbq-list-states-focused-focus-outline-color);
-        }
-
         &.kbq-selected {
             @include kbq-list-item(states-selected);
 
@@ -54,6 +50,12 @@
             border-top-right-radius: 0;
         }
     }
+
+    .kbq-list-selection.cdk-keyboard-focused {
+        & .kbq-list-option.kbq-focused {
+            border-color: var(--kbq-list-states-focused-focus-outline-color);
+        }
+    }
 }
 
 @mixin kbq-list-typography() {

package/list/list-selection.component.d.ts

@@ -1,6 +1,7 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { SelectionModel } from '@angular/cdk/collections';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FocusKeyManager, IFocusableOption } from '@koobiq/cdk/a11y';
 import { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor, KbqOptgroup, KbqOptionActionComponent, KbqTitleTextRef, MultipleMode } from '@koobiq/components/core';
@@ -34,9 +35,10 @@ export declare class KbqListSelectionBase {
 }
 /** @docs-private */
 export declare const KbqListSelectionMixinBase: CanDisableCtor & HasTabIndexCtor & typeof KbqListSelectionBase;
-export declare class KbqListSelection extends KbqListSelectionMixinBase implements CanDisable, HasTabIndex, AfterContentInit, ControlValueAccessor {
+export declare class KbqListSelection extends KbqListSelectionMixinBase implements CanDisable, HasTabIndex, AfterContentInit, AfterViewInit, OnDestroy, ControlValueAccessor {
     private changeDetectorRef;
     private clipboard;
+    protected readonly focusMonitor: FocusMonitor;
     keyManager: FocusKeyManager<KbqListOption>;
     options: QueryList<KbqListOption>;
     readonly onSelectAll: EventEmitter<KbqListSelectAllEvent<KbqListOption>>;
@@ -53,6 +55,12 @@ export declare class KbqListSelection extends KbqListSelectionMixinBase implemen
     get tabIndex(): any;
     set tabIndex(value: any);
     private _tabIndex;
+    /**
+     * Function used for comparing an option against the selected value when determining which
+     * options should appear as selected. The first argument is the value of an options. The second
+     * one is a value from the selected value. A boolean must be returned.
+     */
+    compareWith: (o1: any, o2: any) => boolean;
     userTabIndex: number | null;
     get showCheckbox(): boolean;
     readonly selectionChange: EventEmitter<KbqListSelectionChange>;
@@ -64,13 +72,9 @@ export declare class KbqListSelection extends KbqListSelectionMixinBase implemen
     private optionFocusSubscription;
     private optionBlurSubscription;
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, multiple: MultipleMode, clipboard: Clipboard);
-    /**
-     * Function used for comparing an option against the selected value when determining which
-     * options should appear as selected. The first argument is the value of an options. The second
-     * one is a value from the selected value. A boolean must be returned.
-     */
-    compareWith: (o1: any, o2: any) => boolean;
     ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     focus(): void;
     blur(): void;
     selectAll(): void;

package/markdown/markdown.service.d.ts

@@ -1,8 +1,17 @@
 import { MarkedOptions } from 'marked';
 import * as i0 from "@angular/core";
-/** Service which allows to convert `Markdown` into `HTML` */
+/**
+ * Service for converting Markdown into HTML.
+ */
 export declare class KbqMarkdownService {
-    /** Parses `Markdown` into `HTML` */
+    /**
+     * Converts a given Markdown string into HTML.
+     * NOTE! Method does not sanitize the output HTML string.
+     *
+     * @param markdown - The Markdown string to be converted.
+     * @param options - Optional MarkedOptions to customize the parsing behavior.
+     * @returns The transformed HTML string.
+     */
     parseToHtml(markdown: string, options?: MarkedOptions): string;
     private transform;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqMarkdownService, never>;

package/modal/_modal-theme.scss

@@ -1,7 +1,7 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-modal-theme() {
-    .kbq-modal {
+    .kbq-modal-container {
         background: var(--kbq-modal-container-background);
         box-shadow: var(--kbq-modal-container-shadow);
 

package/modal/modal.scss

@@ -4,7 +4,7 @@
 
 @use './modal-theme' as *;
 
-.kbq-modal {
+.kbq-modal-container {
     box-sizing: border-box;
 
     position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.15.0",
+    "version": "18.16.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.15.0",
-        "@koobiq/angular-moment-adapter": "18.15.0",
-        "@koobiq/angular-luxon-adapter": "18.15.0",
+        "@koobiq/cdk": "18.16.0",
+        "@koobiq/angular-moment-adapter": "18.16.0",
+        "@koobiq/angular-luxon-adapter": "18.16.0",
         "@koobiq/date-formatter": "^3.1.4",
         "@koobiq/icons": "^9.2.0",
-        "@koobiq/tokens-builder": "3.10.0",
-        "@koobiq/design-tokens": "3.10.0",
+        "@koobiq/tokens-builder": "3.11.0",
+        "@koobiq/design-tokens": "3.11.2",
         "@radix-ng/primitives": "^0.14.0"
     },
     "dependencies": {

package/popover/popover.component.d.ts

@@ -1,3 +1,4 @@
+import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { CdkScrollable, Overlay, OverlayConfig, ScrollStrategy } from '@angular/cdk/overlay';
 import { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, InjectionToken, TemplateRef, Type } from '@angular/core';
 import { KbqComponentColors, KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
@@ -6,9 +7,11 @@ export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewIn
     prefix: string;
     header: string | TemplateRef<any>;
     footer: string | TemplateRef<any>;
+    trigger: KbqPopoverTrigger;
     isTrapFocus: boolean;
     hasCloseButton: boolean;
     popoverContent: ElementRef<HTMLDivElement>;
+    cdkTrapFocus: CdkTrapFocus;
     private debounceTime;
     private readonly destroyRef;
     isContentTopOverflow: boolean;
@@ -18,6 +21,7 @@ export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewIn
     checkContentOverflow(contentElement: HTMLElement): void;
     updateClassMap(placement: string, customClass: string, size: PopUpSizes): void;
     updateTrapFocus(isTrapFocus: boolean): void;
+    onEscape(): void;
     protected readonly componentColors: typeof KbqComponentColors;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPopoverComponent, "kbq-popover-component", never, {}, {}, never, never, false, never>;

package/radio/_radio-theme.scss

@@ -6,8 +6,6 @@
     & .kbq-radio-button__outer-circle {
         border-color: var(--kbq-#{$base-path}-outer-circle-border);
         background: var(--kbq-#{$base-path}-outer-circle-background);
-        // FIXME: move under &.cdk-keyboard-focused, because used only for focused state.
-        box-shadow: var(--kbq-#{$base-path}-outer-circle-shadow);
     }
 
     & .kbq-radio-button__inner-circle {
@@ -28,12 +26,24 @@
 
     &.cdk-keyboard-focused {
         @include kbq-radio-state($type-name, states-focused);
+
+        & .kbq-radio-button__outer-circle {
+            box-shadow: var(--kbq-radio-#{$type-name}-states-focused-outer-circle-shadow);
+        }
     }
 
     &.kbq-selected:not(.kbq-disabled) {
         @include kbq-radio-state($type-name, states-checked);
     }
 
+    &.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) {
+        @include kbq-radio-state($type-name, states-checked-focused);
+
+        & .kbq-radio-button__outer-circle {
+            box-shadow: var(--kbq-radio-#{$type-name}-states-checked-focused-outer-circle-shadow);
+        }
+    }
+
     &.kbq-selected.kbq-disabled {
         @include kbq-radio-state($type-name, states-checked-disabled);
     }

package/schematics/ng-add/index.js

@@ -11,19 +11,6 @@ function noProject(project) {
     return `Unable to find project '${project}' in the workspace`;
 }
 
-const VERSIONS = {
-    ANGULAR_CDK: '^0.0.0',
-    KOOBIQ_CDK: '^0.0.0',
-    KOOBIQ_ANGULAR_LUXON_ADAPTER: '^0.0.0',
-    KOOBIQ_DATE_FORMATTER: '^0.0.0',
-    KOOBIQ_DATE_ADAPTER: '^0.0.0',
-    KOOBIQ_ICONS: '^0.0.0',
-    KOOBIQ_TOKENS_BUILDER: '^0.0.0',
-    KOOBIQ_DESIGN_TOKENS: '^0.0.0',
-    MESSAGEFORMAT_CORE: '^0.0.0',
-    RADIX_NG: '^0.0.0',
-    LUXON: '^0.0.0'
-};
 /**
  * This is executed when `ng add @koobiq/components` is run.
  * It installs all dependencies in the 'package.json' and runs 'ng-add-setup-project' schematic.
@@ -40,15 +27,15 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.6");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.15.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.15.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.16.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.16.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.2.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.2.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.2.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.10.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.10.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.11.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.11.2");
         utils_packageConfig.addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
-        utils_packageConfig.addPackageToPackageJson(tree, '@radix-ng/primitives', VERSIONS.RADIX_NG);
+        utils_packageConfig.addPackageToPackageJson(tree, '@radix-ng/primitives', "^0.20.2");
         utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.4.4");
     };
 }

package/select/select.component.d.ts

@@ -340,7 +340,7 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     private _compareWith;
     private getTotalVisibleItems;
     private buildTriggerClone;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
+    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"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "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; }; "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;

package/select/select.module.d.ts

@@ -7,8 +7,9 @@ import * as i5 from "@koobiq/components/icon";
 import * as i6 from "@koobiq/components/tags";
 import * as i7 from "@koobiq/components/tooltip";
 import * as i8 from "@angular/common";
+import * as i9 from "@angular/cdk/a11y";
 export declare class KbqSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSelectModule, [typeof i1.KbqSelect, typeof i2.KbqOptionTooltip], [typeof i3.OverlayModule, typeof i4.KbqOptionModule, typeof i5.KbqIconModule, typeof i6.KbqTagsModule, typeof i7.KbqToolTipModule, typeof i4.KbqSelectSearch, typeof i4.KbqSelectFooter, typeof i4.KbqSelectMatcher, typeof i4.KbqSelectTrigger, typeof i4.KbqSelectSearchEmptyResult, typeof i8.NgClass, typeof i8.NgTemplateOutlet], [typeof i1.KbqSelect, typeof i2.KbqOptionTooltip, typeof i4.KbqOptionModule, typeof i4.KbqSelectSearch, typeof i4.KbqSelectFooter, typeof i4.KbqSelectMatcher, typeof i4.KbqSelectTrigger, typeof i4.KbqSelectSearchEmptyResult]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSelectModule, [typeof i1.KbqSelect, typeof i2.KbqOptionTooltip], [typeof i3.OverlayModule, typeof i4.KbqOptionModule, typeof i5.KbqIconModule, typeof i6.KbqTagsModule, typeof i7.KbqToolTipModule, typeof i4.KbqSelectSearch, typeof i4.KbqSelectFooter, typeof i4.KbqSelectMatcher, typeof i4.KbqSelectTrigger, typeof i4.KbqSelectSearchEmptyResult, typeof i8.NgClass, typeof i8.NgTemplateOutlet, typeof i9.A11yModule], [typeof i1.KbqSelect, typeof i2.KbqOptionTooltip, typeof i4.KbqOptionModule, typeof i4.KbqSelectSearch, typeof i4.KbqSelectFooter, typeof i4.KbqSelectMatcher, typeof i4.KbqSelectTrigger, typeof i4.KbqSelectSearchEmptyResult]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqSelectModule>;
 }

package/tabs/_tabs-common.scss

@@ -112,6 +112,20 @@
         }
     }
 
+    .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {
+        padding: 8px 0;
+    }
+
+    .kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: 1px;
+        background: var(--kbq-line-contrast-less);
+    }
+
     .kbq-tab-list__active-tab-underline {
         display: none;
     }

package/tabs/tab-header.scss

@@ -26,20 +26,6 @@
     flex-direction: column;
 }
 
-.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {
-    padding: 8px 0;
-}
-
-.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    height: 1px;
-    background: var(--kbq-line-contrast-less);
-}
-
 .kbq-tab-header__container {
     display: flex;
     flex-grow: 1;

package/timezone/timezone.module.d.ts

@@ -12,8 +12,9 @@ import * as i10 from "@koobiq/components/icon";
 import * as i11 from "@koobiq/components/tags";
 import * as i12 from "@koobiq/components/tooltip";
 import * as i13 from "@angular/common";
+import * as i14 from "@angular/cdk/a11y";
 export declare class KbqTimezoneModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimezoneModule, [typeof i1.UtcOffsetPipe, typeof i2.CitiesByFilterPipe, typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger], [typeof i6.OverlayModule, typeof i7.KbqFormFieldModule, typeof i8.KbqOptionModule, typeof i9.KbqSelectModule, typeof i10.KbqIconModule, typeof i11.KbqTagsModule, typeof i12.KbqToolTipModule, typeof i8.KbqHighlightModule, typeof i13.NgClass, typeof i13.KeyValuePipe], [typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimezoneModule, [typeof i1.UtcOffsetPipe, typeof i2.CitiesByFilterPipe, typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger], [typeof i6.OverlayModule, typeof i7.KbqFormFieldModule, typeof i8.KbqOptionModule, typeof i9.KbqSelectModule, typeof i10.KbqIconModule, typeof i11.KbqTagsModule, typeof i12.KbqToolTipModule, typeof i8.KbqHighlightModule, typeof i13.NgClass, typeof i13.KeyValuePipe, typeof i14.A11yModule], [typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTimezoneModule>;
 }

package/tree/_tree-theme.scss

@@ -24,8 +24,10 @@
 }
 
 @mixin kbq-tree-theme() {
-    .kbq-tree-selection:focus {
-        outline: none;
+    .kbq-tree-selection {
+        &:focus {
+            outline: none;
+        }
     }
 
     .kbq-tree-option {
@@ -35,11 +37,6 @@
             @include kbq-tree-option(states-hover);
         }
 
-        &.kbq-focused,
-        &.kbq-active {
-            border-color: var(--kbq-tree-states-focused-focus-outline-color);
-        }
-
         &.kbq-selected {
             @include kbq-tree-option(states-selected);
 
@@ -56,6 +53,12 @@
             }
         }
     }
+
+    .cdk-keyboard-focused {
+        & .kbq-tree-option.kbq-focused {
+            border-color: var(--kbq-tree-states-focused-focus-outline-color);
+        }
+    }
 }
 
 @mixin kbq-tree-typography() {

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

@@ -1,6 +1,7 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { SelectionModel } from '@angular/cdk/collections';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, IterableDiffer, IterableDiffers, QueryList, ViewContainerRef } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, IterableDiffer, IterableDiffers, OnDestroy, QueryList, ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
 import { CanDisable, HasTabIndex, MultipleMode } from '@koobiq/components/core';
@@ -36,10 +37,11 @@ interface SelectionModelOption {
     id: number | string;
     value: string;
 }
-export declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueAccessor, AfterContentInit, CanDisable, HasTabIndex {
+export declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueAccessor, AfterContentInit, AfterViewInit, OnDestroy, CanDisable, HasTabIndex {
     private elementRef;
     private scheduler;
     private clipboard;
+    protected readonly focusMonitor: FocusMonitor;
     renderedOptions: QueryList<KbqTreeOption>;
     keyManager: FocusKeyManager<KbqTreeOption>;
     selectionModel: SelectionModel<SelectionModelOption>;
@@ -75,7 +77,9 @@ export declare class KbqTreeSelection extends KbqTreeBase<any> implements Contro
     private optionFocusSubscription;
     private optionBlurSubscription;
     constructor(elementRef: ElementRef, scheduler: AsyncScheduler, differs: IterableDiffers, changeDetectorRef: ChangeDetectorRef, multiple: MultipleMode, clipboard: Clipboard);
+    ngAfterViewInit(): void;
     ngAfterContentInit(): void;
+    ngOnDestroy(): void;
     focus($event: any): void;
     highlightSelectedOption(): void;
     blur(): void;

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

@@ -296,7 +296,7 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     /** Scrolls the active option into view. */
     private scrollActiveOptionIntoView;
     private subscribeOnSearchChanges;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, { optional: true; }]>;
+    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"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "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; }; "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-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
 }
 export {};

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

@@ -6,8 +6,9 @@ import * as i4 from "@koobiq/components/icon";
 import * as i5 from "@koobiq/components/tags";
 import * as i6 from "@koobiq/components/core";
 import * as i7 from "@angular/common";
+import * as i8 from "@angular/cdk/a11y";
 export declare class KbqTreeSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeSelectModule, [typeof i1.KbqTreeSelect], [typeof i2.OverlayModule, typeof i3.KbqTreeModule, typeof i4.KbqIconModule, typeof i5.KbqTagsModule, typeof i6.KbqPseudoCheckboxModule, typeof i6.KbqSelectSearch, typeof i6.KbqSelectFooter, typeof i6.KbqSelectMatcher, typeof i6.KbqSelectTrigger, typeof i6.KbqSelectSearchEmptyResult, typeof i7.NgClass, typeof i7.NgTemplateOutlet], [typeof i1.KbqTreeSelect, typeof i6.KbqSelectSearch, typeof i6.KbqSelectFooter, typeof i6.KbqSelectMatcher, typeof i6.KbqSelectTrigger, typeof i6.KbqSelectSearchEmptyResult]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeSelectModule, [typeof i1.KbqTreeSelect], [typeof i2.OverlayModule, typeof i3.KbqTreeModule, typeof i4.KbqIconModule, typeof i5.KbqTagsModule, typeof i6.KbqPseudoCheckboxModule, typeof i6.KbqSelectSearch, typeof i6.KbqSelectFooter, typeof i6.KbqSelectMatcher, typeof i6.KbqSelectTrigger, typeof i6.KbqSelectSearchEmptyResult, typeof i7.NgClass, typeof i7.NgTemplateOutlet, typeof i8.A11yModule], [typeof i1.KbqTreeSelect, typeof i6.KbqSelectSearch, typeof i6.KbqSelectFooter, typeof i6.KbqSelectMatcher, typeof i6.KbqSelectTrigger, typeof i6.KbqSelectSearchEmptyResult]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTreeSelectModule>;
 }