@koobiq/components 18.12.1 → 18.14.0

package/file-upload/file-upload-tokens.scss

@@ -31,7 +31,7 @@
     --kbq-file-upload-single-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);
-    --kbq-file-upload-single-states-error-container-background: var(--kbq-states-background-error-less);
+    --kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);
     --kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);
     --kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);
@@ -54,7 +54,7 @@
     --kbq-file-upload-multiple-states-on-drag-icon-button-color: var(--kbq-icon-contrast);
     --kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-contrast-less);
-    --kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-states-background-error-less);
+    --kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-background-error-less);
     --kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);
     --kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);

package/form-field/form-field-tokens.scss

@@ -21,7 +21,7 @@
     --kbq-form-field-states-focused-text: var(--kbq-foreground-contrast);
     --kbq-form-field-states-focused-focus-outline: var(--kbq-states-line-focus-theme);
     --kbq-form-field-states-error-border-color: var(--kbq-line-error);
-    --kbq-form-field-states-error-background: var(--kbq-states-background-error-less);
+    --kbq-form-field-states-error-background: var(--kbq-background-error-less);
     --kbq-form-field-states-error-placeholder: var(--kbq-foreground-error-tertiary);
     --kbq-form-field-states-error-text: var(--kbq-foreground-error);
     --kbq-form-field-states-error-focused-focus-outline: var(--kbq-states-line-focus-error);
@@ -35,3 +35,7 @@
     --kbq-form-field-states-disabled-text: var(--kbq-states-foreground-disabled);
     --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
 }
+
+:where(.kbq-dark) {
+    --kbq-form-field-states-error-placeholder: var(--kbq-foreground-error-secondary);
+}

package/icon/icon-button.component.d.ts

@@ -1,9 +1,9 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
 import { CanColor, KbqFormFieldRef } from '@koobiq/components/core';
 import { KbqIcon } from './icon.component';
 import * as i0 from "@angular/core";
-export declare class KbqIconButton extends KbqIcon implements OnDestroy, CanColor {
+export declare class KbqIconButton extends KbqIcon implements AfterViewInit, OnDestroy, CanColor {
     protected changeDetectorRef: ChangeDetectorRef;
     private focusMonitor;
     small: boolean;
@@ -16,6 +16,7 @@ export declare class KbqIconButton extends KbqIcon implements OnDestroy, CanColo
     private _disabled;
     name: string;
     constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private runFocusMonitor;
     private stopFocusMonitor;

package/link/link.component.d.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
 import { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
@@ -9,7 +9,7 @@ export declare class KbqLinkBase {
 /** @docs-private */
 export declare const KbqLinkMixinBase: HasTabIndexCtor & CanDisableCtor & typeof KbqLinkBase;
 export declare const baseURLRegex: RegExp;
-export declare class KbqLink extends KbqLinkMixinBase implements OnDestroy, HasTabIndex, CanDisable {
+export declare class KbqLink extends KbqLinkMixinBase implements AfterViewInit, OnDestroy, HasTabIndex, CanDisable {
     private elementRef;
     private focusMonitor;
     private changeDetector;
@@ -29,6 +29,7 @@ export declare class KbqLink extends KbqLinkMixinBase implements OnDestroy, HasT
     printUrl: string;
     icon: KbqIcon;
     constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, changeDetector: ChangeDetectorRef);
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     focus(): void;
     getHostElement(): any;

package/list/list.scss

@@ -15,6 +15,8 @@
 
     @include list.kbq-list-item-base();
 
+    border-radius: var(--kbq-size-border-radius);
+
     &:not(.kbq-disabled) {
         cursor: pointer;
     }

package/navbar/navbar-item.component.d.ts

@@ -51,7 +51,7 @@ export declare class KbqNavbarDivider {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarDivider, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarDivider, "kbq-navbar-divider", never, {}, {}, never, never, false, never>;
 }
-export declare class KbqNavbarFocusableItem implements IFocusableOption, AfterContentInit, OnDestroy {
+export declare class KbqNavbarFocusableItem implements AfterContentInit, AfterViewInit, OnDestroy, IFocusableOption {
     private elementRef;
     private changeDetector;
     private focusMonitor;
@@ -73,6 +73,7 @@ export declare class KbqNavbarFocusableItem implements IFocusableOption, AfterCo
     private _disabled;
     get tabIndex(): number;
     constructor(elementRef: ElementRef<HTMLElement>, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor, ngZone: NgZone);
+    ngAfterViewInit(): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     setTooltip(value: KbqTooltipTrigger): void;

package/navbar/navbar.component.d.ts

@@ -5,7 +5,7 @@ import { Observable, Subject } from 'rxjs';
 import { KbqNavbarFocusableItem, KbqNavbarFocusableItemEvent, KbqNavbarItem, KbqNavbarRectangleElement } from './navbar-item.component';
 import * as i0 from "@angular/core";
 export type KbqNavbarContainerPositionType = 'left' | 'right';
-export declare class KbqFocusableComponent implements AfterContentInit, OnDestroy {
+export declare class KbqFocusableComponent implements AfterContentInit, AfterViewInit, OnDestroy {
     protected readonly changeDetectorRef: ChangeDetectorRef;
     protected readonly elementRef: ElementRef;
     protected readonly focusMonitor: FocusMonitor;
@@ -21,6 +21,7 @@ export declare class KbqFocusableComponent implements AfterContentInit, OnDestro
     private optionBlurSubscription;
     constructor(changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, focusMonitor: FocusMonitor);
     ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     focus(): void;
     blur(): void;

package/overflow-items/index.d.ts

@@ -0,0 +1,2 @@
+export * from './module';
+export * from './overflow-items';

package/overflow-items/module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./overflow-items";
+export declare class KbqOverflowItemsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItemsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqOverflowItemsModule, never, [typeof i1.KbqOverflowItems, typeof i1.KbqOverflowItem, typeof i1.KbqOverflowItemsResult], [typeof i1.KbqOverflowItems, typeof i1.KbqOverflowItem, typeof i1.KbqOverflowItemsResult]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqOverflowItemsModule>;
+}

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

@@ -0,0 +1,132 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Template context for the `KbqOverflowItemsResult` directive.
+ *
+ * @see `KbqOverflowItemsResult`
+ */
+export type KbqOverflowItemsResultContext = {
+    /**
+     * Set of hidden item ID's.
+     *
+     * Example:
+     *
+     * ```html
+     * <ng-template kbqOverflowItemsResult let-hiddenItemIDs>
+     *  {{ hiddenItemIDs.size }}
+     * </ng-template>
+     * ````
+     */
+    $implicit: ReadonlySet<unknown>;
+    /**
+     * Set of hidden item ID's.
+     *
+     * Example:
+     *
+     * ```html
+     * <ng-template kbqOverflowItemsResult let-hiddenItemIDs="hiddenItemIDs">
+     *  @if (hiddenItemIDs.has(SOME_ID)) {...}
+     * </ng-template>
+     * ````
+     */
+    hiddenItemIDs: ReadonlySet<unknown>;
+};
+/**
+ * Directive for providing `KbqOverflowItemsResultContext` to the `KbqOverflowItems` component.
+ *
+ * @see `KbqOverflowItemsResultContext`
+ */
+export declare class KbqOverflowItemsResult {
+    /**
+     * TemplateRef for the overflow result.
+     *
+     * @docs-private
+     */
+    readonly templateRef: TemplateRef<KbqOverflowItemsResultContext>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItemsResult, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItemsResult, "ng-template[kbqOverflowItemsResult]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Structure directive for providing items to the `KbqOverflowItems`.
+ */
+export declare class KbqOverflowItem {
+    /**
+     * Identifier for the item.
+     */
+    readonly id: import("@angular/core").InputSignal<unknown>;
+    /**
+     * Whether the item is hidden.
+     *
+     * @docs-private
+     */
+    readonly hidden: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * TemplateRef for the item.
+     *
+     * @docs-private
+     */
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItem, "[kbqOverflowItem]", never, { "id": { "alias": "kbqOverflowItem"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Component for automatically hiding elements with dynamic adaptation to the container width.
+ */
+export declare class KbqOverflowItems {
+    private readonly itemElementRefs;
+    /**
+     * `KbqOverflowItem` directive references.
+     *
+     * @docs-private
+     */
+    protected readonly items: import("@angular/core").Signal<readonly KbqOverflowItem[]>;
+    /**
+     * `KbqOverflowItemsResult` directive reference.
+     *
+     * @docs-private
+     */
+    protected readonly result: import("@angular/core").Signal<KbqOverflowItemsResult | undefined>;
+    private readonly resultElementRef;
+    /**
+     * Template context for the `KbqOverflowItemsResult` directive.
+     *
+     * @docs-private
+     */
+    protected readonly resultTemplateContext: import("@angular/core").Signal<KbqOverflowItemsResultContext>;
+    /**
+     * Whether the overflow result is hidden.
+     *
+     * @docs-private
+     */
+    protected readonly resultHidden: import("@angular/core").Signal<boolean>;
+    /**
+     * Whether the overflow order should be reversed.
+     * Also changes the position of the `resultTemplateRef`.
+     *
+     * @default false
+     */
+    readonly reverseOverflowOrder: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    private readonly elementRef;
+    private readonly resizeObserver;
+    private readonly contentObserver;
+    constructor();
+    /**
+     * Updates the visibility of items based on the container width.
+     *
+     * This method calculates whether items should be hidden or shown by comparing the scroll width of the container
+     * with its visible width. It determines which items are visible and which are hidden, and applies the hiding logic
+     * based on the `reverseOverflowOrder` flag.
+     *
+     * The function operates recursively to adjust the visibility of items until the overflow condition is resolved.
+     *
+     * - If the container is overflown, it hides the last visible item from the end (or start if `reverseOverflowOrder`)
+     * and checks if further adjustments are needed.
+     * - If the container is not overflown, it reveals the first hidden item from the start
+     * (or end if `reverseOverflowOrder`), ensuring it fits within the visible area.
+     */
+    private updateItemsVisibility;
+    /** @TODO Should use `Array.prototype.findLast` after migrating to ES2023 */
+    private findLast;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItems, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOverflowItems, "kbq-overflow-items", never, { "reverseOverflowOrder": { "alias": "reverseOverflowOrder"; "required": false; "isSignal": true; }; }, {}, ["items", "result"], never, true, never>;
+}

package/overflow-items/overflow-items.scss

@@ -0,0 +1,20 @@
+:host {
+    position: relative;
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+}
+
+.kbq-overflow-items__item,
+.kbq-overflow-items__result {
+    display: flex;
+    align-items: center;
+
+    &.kbq-overflow-items__item_hidden,
+    &.kbq-overflow-items__result_hidden {
+        visibility: hidden;
+        position: absolute;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.12.1",
+    "version": "18.14.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.12.1",
-        "@koobiq/angular-moment-adapter": "18.12.1",
-        "@koobiq/angular-luxon-adapter": "18.12.1",
+        "@koobiq/cdk": "18.14.0",
+        "@koobiq/angular-moment-adapter": "18.14.0",
+        "@koobiq/angular-luxon-adapter": "18.14.0",
         "@koobiq/date-formatter": "^3.1.4",
         "@koobiq/icons": "^9.2.0",
-        "@koobiq/tokens-builder": "3.8.1",
-        "@koobiq/design-tokens": "3.8.1",
+        "@koobiq/tokens-builder": "3.10.0",
+        "@koobiq/design-tokens": "3.10.0",
         "@radix-ng/primitives": "^0.14.0"
     },
     "dependencies": {
@@ -88,6 +88,12 @@
             "esm": "./esm2022/badge/koobiq-components-badge.mjs",
             "default": "./fesm2022/koobiq-components-badge.mjs"
         },
+        "./breadcrumbs": {
+            "types": "./breadcrumbs/index.d.ts",
+            "esm2022": "./esm2022/breadcrumbs/koobiq-components-breadcrumbs.mjs",
+            "esm": "./esm2022/breadcrumbs/koobiq-components-breadcrumbs.mjs",
+            "default": "./fesm2022/koobiq-components-breadcrumbs.mjs"
+        },
         "./button": {
             "types": "./button/index.d.ts",
             "esm2022": "./esm2022/button/koobiq-components-button.mjs",
@@ -214,6 +220,12 @@
             "esm": "./esm2022/navbar/koobiq-components-navbar.mjs",
             "default": "./fesm2022/koobiq-components-navbar.mjs"
         },
+        "./overflow-items": {
+            "types": "./overflow-items/index.d.ts",
+            "esm2022": "./esm2022/overflow-items/koobiq-components-overflow-items.mjs",
+            "esm": "./esm2022/overflow-items/koobiq-components-overflow-items.mjs",
+            "default": "./fesm2022/koobiq-components-overflow-items.mjs"
+        },
         "./popover": {
             "types": "./popover/index.d.ts",
             "esm2022": "./esm2022/popover/koobiq-components-popover.mjs",

package/popover/popover.component.d.ts

@@ -75,6 +75,7 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     private _closeOnScroll;
     get hasClickTrigger(): boolean;
     backdropClass: string;
+    arrow: boolean;
     placementChange: EventEmitter<any>;
     visibleChange: EventEmitter<boolean>;
     protected originSelector: string;

package/radio/radio-tokens.scss

@@ -47,7 +47,7 @@
     --kbq-radio-error-states-checked-disabled-outer-circle-background: var(--kbq-states-background-disabled);
     --kbq-radio-error-states-checked-disabled-inner-circle-background: var(--kbq-states-icon-disabled);
     --kbq-radio-error-states-focused-outer-circle-border: transparent;
-    --kbq-radio-error-states-focused-outer-circle-background: var(--kbq-states-background-error-less);
+    --kbq-radio-error-states-focused-outer-circle-background: var(--kbq-background-error-less);
     --kbq-radio-error-states-focused-inner-circle-background: transparent;
     --kbq-radio-error-states-focused-outer-circle-shadow: 0 0 0.1px 2px var(--kbq-states-line-focus-error);
     --kbq-radio-error-states-checked-focused-outer-circle-border: transparent;

package/schematics/ng-add/index.js

@@ -40,13 +40,13 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.6");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.12.1");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.12.1");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.4");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.4");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.14.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.14.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.8.1");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.9.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, '@messageformat/core', "^3.0.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@radix-ng/primitives', VERSIONS.RADIX_NG);
         utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.4.4");

package/select/select-option.directive.d.ts

@@ -5,7 +5,9 @@ import * as i0 from "@angular/core";
 export declare class KbqOptionTooltip extends KbqTooltipTrigger implements AfterViewInit, OnDestroy {
     private option;
     private resizeObserver;
-    private mutationObserver;
+    private resizeObserverSubscription;
+    private contentObserver;
+    private contentObserverSubscription;
     get textElement(): HTMLElement;
     get isOverflown(): boolean;
     constructor(option: KbqOption);

package/tabs/tab-nav-bar.d.ts

@@ -63,7 +63,6 @@ export declare class KbqTabLink implements OnDestroy, AfterViewInit {
     private readonly focusMonitor;
     private readonly renderer;
     private readonly tabNavBar;
-    constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private addClassModifierForIcons;

package/timezone/timezone-option.directive.d.ts

@@ -7,6 +7,7 @@ export declare class KbqTimezoneOptionTooltip extends KbqTooltipTrigger implemen
     private changeDetectorRef;
     private option;
     private resizeObserver;
+    private resizeObserverSubscription;
     constructor(changeDetectorRef: ChangeDetectorRef, option: KbqTimezoneOption);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/title/title.directive.d.ts

@@ -5,6 +5,7 @@ import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class KbqTitleDirective extends KbqTooltipTrigger implements AfterViewInit, OnDestroy {
     private componentInstance?;
+    private contentObserver;
     get isOverflown(): boolean;
     get viewValue(): string;
     get parent(): HTMLElement;
@@ -12,7 +13,7 @@ export declare class KbqTitleDirective extends KbqTooltipTrigger implements Afte
     readonly resizeStream: Subject<Event>;
     private readonly debounceInterval;
     private resizeSubscription;
-    private mutationSubscription;
+    private contentObserverSubscription;
     private focusMonitorSubscription;
     private childContainer;
     private parentContainer;
@@ -21,7 +22,6 @@ export declare class KbqTitleDirective extends KbqTooltipTrigger implements Afte
     ngOnDestroy(): void;
     handleElementEnter(): void;
     hideTooltip(): void;
-    private createMutationObserver;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTitleDirective, [{ optional: true; host: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTitleDirective, "[kbq-title]", ["kbqTitle"], {}, {}, ["childContainer", "parentContainer"], never, false, never>;
 }

package/toggle/toggle-tokens.scss

@@ -44,7 +44,7 @@
     --kbq-toggle-error-states-checked-hover-background: var(--kbq-states-background-error-hover);
     --kbq-toggle-error-states-checked-hover-circle-background: var(--kbq-icon-white);
     --kbq-toggle-error-states-focused-border: var(--kbq-states-line-focus-error);
-    --kbq-toggle-error-states-focused-background: var(--kbq-states-background-error-less);
+    --kbq-toggle-error-states-focused-background: var(--kbq-background-error-less);
     --kbq-toggle-error-states-focused-circle-background: var(--kbq-icon-error);
     --kbq-toggle-error-states-focused-focus-outline: var(--kbq-states-line-focus-error);
     --kbq-toggle-error-states-checked-focused-border: var(--kbq-states-line-focus-error);

package/toggle/toggle.component.d.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { CanColor, CanColorCtor, CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
@@ -15,10 +15,10 @@ export declare class KbqToggleChange {
     source: KbqToggleComponent;
     checked: boolean;
 }
-export declare class KbqToggleComponent extends KbqToggleMixinBase implements ControlValueAccessor, CanColor, CanDisable, HasTabIndex, OnDestroy {
+export declare class KbqToggleComponent extends KbqToggleMixinBase implements AfterViewInit, ControlValueAccessor, CanColor, CanDisable, HasTabIndex, OnDestroy {
     elementRef: ElementRef;
-    private _focusMonitor;
-    private _changeDetectorRef;
+    private focusMonitor;
+    private changeDetectorRef;
     big: boolean;
     inputElement: ElementRef;
     labelPosition: ToggleLabelPositionType;
@@ -36,7 +36,8 @@ export declare class KbqToggleComponent extends KbqToggleMixinBase implements Co
     private _checked;
     readonly change: EventEmitter<KbqToggleChange>;
     private uniqueId;
-    constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef);
+    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, changeDetectorRef: ChangeDetectorRef);
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     focus(): void;
     getAriaChecked(): boolean;

package/tooltip/tooltip.component.d.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Overlay, OverlayConfig, ScrollStrategy } from '@angular/cdk/overlay';
-import { ElementRef, EventEmitter, InjectionToken, OnDestroy, TemplateRef, Type } from '@angular/core';
+import { AfterViewInit, ElementRef, EventEmitter, InjectionToken, OnDestroy, TemplateRef, Type } from '@angular/core';
 import { KbqComponentColors, KbqParentPopup, KbqPopUp, KbqPopUpTrigger, PopUpPlacements } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare enum TooltipModifier {
@@ -38,7 +38,7 @@ export declare const KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     deps: (typeof Overlay)[];
     useFactory: typeof kbqTooltipScrollStrategyFactory;
 };
-export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> implements OnDestroy {
+export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> implements AfterViewInit, OnDestroy {
     protected scrollStrategy: () => ScrollStrategy;
     protected parentPopup: KbqParentPopup | null;
     protected focusMonitor: FocusMonitor;
@@ -78,7 +78,7 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     protected originSelector: string;
     protected overlayConfig: OverlayConfig;
     protected modifier: TooltipModifier;
-    constructor();
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     show(delay?: number): void;
     /**

package/tree/tree-option.scss

@@ -16,7 +16,7 @@
     border-width: var(--kbq-tree-size-container-focus-outline-width);
     border-style: solid;
     border-color: transparent;
-    border-radius: var(--kbq-size-border-radius);
+    border-radius: var(--kbq-tree-option-border-radius);
 
     padding-top: kbq-difference-series-css-variables(
         [ tree-size-container-padding-vertical,

package/tree/tree-tokens.scss

@@ -7,6 +7,7 @@
     --kbq-tree-size-container-content-gap-vertical: 0px;
     --kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);
     --kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);
+    --kbq-tree-option-border-radius: var(--kbq-size-border-radius);
     /* THEME TOKENS */
     --kbq-tree-default-container-background: transparent;
     --kbq-tree-default-text-color: var(--kbq-foreground-contrast);

package/tree-select/tree-select-tokens.scss

@@ -3,3 +3,7 @@
     --kbq-select-panel-dropdown-background: var(--kbq-background-card);
     --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
 }
+
+.kbq-tree-select__panel .kbq-tree-selection {
+    --kbq-tree-option-border-radius: var(--kbq-size-xs);
+}