@koobiq/components 18.21.0 → 18.22.0

package/badge/badge.component.d.ts

@@ -17,7 +17,6 @@ export declare class KbqBadgeCaption {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCaption, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBadgeCaption, "[kbq-badge-caption]", never, {}, {}, never, never, false, never>;
 }
-export declare const getNodesWithoutComments: (nodes: NodeList) => Node[];
 export declare const leftIconClassName = "kbq-icon_left";
 export declare const rightIconClassName = "kbq-icon_right";
 export declare const badgeLeftIconClassName = "kbq-badge-icon_left";

package/breadcrumbs/breadcrumbs.d.ts

@@ -2,21 +2,9 @@ import { AfterContentInit, InjectionToken, OnInit, Provider, QueryList, Template
 import { RouterLink } from '@angular/router';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors, KbqDefaultSizes, PopUpPlacements } from '@koobiq/components/core';
+import { KbqBreadcrumbsConfiguration, KbqBreadcrumbsWrapMode } from './breadcrumbs.types';
 import * as i0 from "@angular/core";
 import * as i1 from "@radix-ng/primitives/roving-focus";
-export type KbqBreadcrumbsConfiguration = {
-    /**
-     * Specifies the maximum number of breadcrumb items to display.
-     * - If a number is provided, only that many items will be shown.
-     * - If `null`, no limit is applied, and all breadcrumb items are displayed.
-     */
-    max: number | null;
-    size: KbqDefaultSizes;
-    /**
-     * Determines if a negative margin should be applied to the first breadcrumb item.
-     */
-    firstItemNegativeMargin: boolean;
-};
 /** Breadcrumbs options global configuration provider. */
 export declare const KBQ_BREADCRUMBS_CONFIGURATION: InjectionToken<KbqBreadcrumbsConfiguration>;
 /** Utility provider for `KBQ_BREADCRUMBS_CONFIGURATION`. */
@@ -103,26 +91,35 @@ export declare class KbqBreadcrumbs implements AfterContentInit {
      * When disabled, user interactions are blocked.
      */
     disabled: boolean;
+    /**
+     * Wrapping behavior of the breadcrumb items.
+     */
+    wrapMode: KbqBreadcrumbsWrapMode;
     protected readonly separator?: TemplateRef<any>;
     protected readonly items: QueryList<KbqBreadcrumbItem>;
+    private readonly result;
+    private readonly overflowItems;
     /**
      * Ensures at least minimum number of breadcrumb items are shown.
-     *
-     * This prevents the appearance of unnecessary expand button that would hide only a single breadcrumb.
      */
-    readonly minVisibleItems = 2;
-    private readonly destroyRef;
-    private readonly cdr;
+    protected readonly minVisibleItems = 2;
     protected readonly KbqComponentColors: typeof KbqComponentColors;
     protected readonly KbqButtonStyles: typeof KbqButtonStyles;
     protected readonly PopUpPlacements: typeof PopUpPlacements;
+    private readonly cdr;
+    private readonly destroyRef;
     /** @docs-private */
-    protected get hiddenBreadcrumbItems(): KbqBreadcrumbItem[];
-    /** @docs-private */
-    protected get visibleBreadcrumbItems(): KbqBreadcrumbItem[];
+    protected get itemsExcludingEdges(): KbqBreadcrumbItem[];
+    /**
+     * Calculates the total width of visible items based on the `max` value and overflow items.
+     * @returns {number | null} The computed max width for overflow items or null if conditions are not met.
+     * @docs-private
+     */
+    protected get maxWidth(): number | null;
     ngAfterContentInit(): void;
+    private getItemWidth;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbs, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "firstItemNegativeMargin": { "alias": "firstItemNegativeMargin"; "required": false; }; "size": { "alias": "size"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["separator", "items"], never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "firstItemNegativeMargin": { "alias": "firstItemNegativeMargin"; "required": false; }; "size": { "alias": "size"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "wrapMode": { "alias": "wrapMode"; "required": false; }; }, {}, ["separator", "items"], never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_firstItemNegativeMargin: unknown;
     static ngAcceptInputType_disabled: unknown;
 }

package/breadcrumbs/breadcrumbs.scss

@@ -5,6 +5,13 @@
     display: flex;
     align-items: center;
     gap: var(--kbq-breadcrumbs-gap);
+    flex-grow: 1;
+    flex-wrap: wrap;
+
+    .kbq-overflow-items {
+        // add space not to cut focus outline
+        padding: 1px;
+    }
 
     .kbq-breadcrumb-item__container {
         display: inline-flex;
@@ -12,13 +19,15 @@
     }
 
     &.kbq-breadcrumbs_first-item-negative-margin {
-        .kbq-breadcrumb-item__container {
-            &:first-of-type {
-                margin-left: var(--kbq-breadcrumb-item-negative-margin);
-            }
+        .kbq-overflow-items {
+            margin-left: var(--kbq-breadcrumb-item-negative-margin);
         }
     }
 
+    &.kbq-breadcrumbs_wrap {
+        flex-wrap: wrap;
+    }
+
     &.kbq-breadcrumbs_compact {
         .kbq-breadcrumb-item {
             &.kbq-button,

package/breadcrumbs/breadcrumbs.types.d.ts

@@ -0,0 +1,22 @@
+import { KbqDefaultSizes } from '@koobiq/components/core';
+export type KbqBreadcrumbsWrapMode = 'auto' | 'wrap' | 'none';
+export type KbqBreadcrumbsConfiguration = {
+    /**
+     * Specifies the maximum number of breadcrumb items to display.
+     * - If a number is provided, only that many items will be shown.
+     * - If `null`, no limit is applied, and all breadcrumb items are displayed.
+     */
+    max: number | null;
+    size: KbqDefaultSizes;
+    /**
+     * Determines if a negative margin should be applied to the first breadcrumb item.
+     */
+    firstItemNegativeMargin: boolean;
+    /**
+     * Manages breadcrumb items when space is limited:
+     * - `auto`: Adjusts based on space and item count.
+     * - `wrap`: Moves items to the next line if needed.
+     * - `none`: Prevents wrapping, allowing overflow.
+     */
+    wrapMode: KbqBreadcrumbsWrapMode;
+};

package/breadcrumbs/public-api.d.ts

@@ -1,2 +1,3 @@
 export * from './breadcrumbs';
 export * from './breadcrumbs.module';
+export * from './breadcrumbs.types';

package/button/button.component.d.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
-import { CanColor, CanColorCtor, CanDisable, HasTabIndexCtor, KbqTitleTextRef } from '@koobiq/components/core';
+import { KbqColorDirective, KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 export declare enum KbqButtonStyles {
@@ -8,11 +8,8 @@ export declare enum KbqButtonStyles {
     Outline = "outline",
     Transparent = "transparent"
 }
-export declare const leftIconClassName = "kbq-icon_left";
-export declare const rightIconClassName = "kbq-icon_right";
 export declare const buttonLeftIconClassName = "kbq-button-icon_left";
 export declare const buttonRightIconClassName = "kbq-button-icon_right";
-export declare const getNodesWithoutComments: (nodes: NodeList) => Node[];
 export declare class KbqButtonCssStyler implements AfterContentInit {
     private renderer;
     private cdr;
@@ -25,14 +22,7 @@ export declare class KbqButtonCssStyler implements AfterContentInit {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonCssStyler, [null, null, { skipSelf: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonCssStyler, "[kbq-button]", never, {}, {}, ["icons"], never, false, never>;
 }
-/** @docs-private */
-export declare class KbqButtonBase {
-    elementRef: ElementRef;
-    constructor(elementRef: ElementRef);
-}
-/** @docs-private */
-export declare const KbqButtonMixinBase: HasTabIndexCtor & CanColorCtor & typeof KbqButtonBase;
-export declare class KbqButton extends KbqButtonMixinBase implements OnDestroy, AfterViewInit, CanDisable, CanColor, KbqTitleTextRef {
+export declare class KbqButton extends KbqColorDirective implements OnDestroy, AfterViewInit, KbqTitleTextRef {
     private focusMonitor;
     private styler;
     hasFocus: boolean;
@@ -40,10 +30,13 @@ export declare class KbqButton extends KbqButtonMixinBase implements OnDestroy,
     get kbqStyle(): string;
     set kbqStyle(value: string | KbqButtonStyles);
     private _kbqStyle;
-    get disabled(): any;
-    set disabled(value: any);
+    get disabled(): boolean;
+    set disabled(value: boolean);
     private _disabled;
-    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, styler: KbqButtonCssStyler);
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
+    constructor(focusMonitor: FocusMonitor, styler: KbqButtonCssStyler);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onFocus($event: any): void;
@@ -56,5 +49,7 @@ export declare class KbqButton extends KbqButtonMixinBase implements OnDestroy,
     private runFocusMonitor;
     private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButton, "[kbq-button]", never, { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButton, "[kbq-button]", never, { "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
 }

package/checkbox/checkbox.d.ts

@@ -1,7 +1,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 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 { KbqColorDirective } from '@koobiq/components/core';
 import { KbqCheckboxClickAction } from './checkbox-config';
 import * as i0 from "@angular/core";
 /**
@@ -31,13 +31,6 @@ export declare class KbqCheckboxChange {
     /** The new `checked` value of the checkbox. */
     checked: boolean;
 }
-/** @docs-private */
-export declare class KbqCheckboxBase {
-    elementRef: ElementRef;
-    constructor(elementRef: ElementRef);
-}
-/** @docs-private */
-export declare const KbqCheckboxMixinBase: HasTabIndexCtor & CanColorCtor & CanDisableCtor & typeof KbqCheckboxBase;
 /**
  * A Koobiq checkbox component. Supports all of the functionality of an HTML5 checkbox,
  * and exposes a similar API. A KbqCheckbox can be either checked, unchecked, indeterminate, or
@@ -45,7 +38,7 @@ export declare const KbqCheckboxMixinBase: HasTabIndexCtor & CanColorCtor & CanD
  * so there is no need to provide them yourself. However, if you want to omit a label and still
  * have the checkbox be accessible, you may supply an [aria-label] input.
  */
-export declare class KbqCheckbox extends KbqCheckboxMixinBase implements ControlValueAccessor, AfterViewInit, OnDestroy, CanColor, CanDisable, HasTabIndex {
+export declare class KbqCheckbox extends KbqColorDirective implements ControlValueAccessor, AfterViewInit, OnDestroy {
     private changeDetectorRef;
     private focusMonitor;
     private clickAction;
@@ -74,13 +67,13 @@ export declare class KbqCheckbox extends KbqCheckboxMixinBase implements Control
     get checked(): boolean;
     set checked(value: boolean);
     private _checked;
-    /**
-     * Whether the checkbox is disabled. This fully overrides the implementation provided by
-     * mixinDisabled, but the mixin is still required because mixinTabIndex requires it.
-     */
-    get disabled(): any;
-    set disabled(value: any);
+    /** Whether the checkbox is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
     private _disabled;
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
     /**
      * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
      * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
@@ -93,7 +86,7 @@ export declare class KbqCheckbox extends KbqCheckboxMixinBase implements Control
     private uniqueId;
     private currentAnimationClass;
     private currentCheckState;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor, clickAction: KbqCheckboxClickAction);
+    constructor(changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor, clickAction: KbqCheckboxClickAction);
     /**
      * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
      * @docs-private
@@ -126,7 +119,9 @@ export declare class KbqCheckbox extends KbqCheckboxMixinBase implements Control
     private emitChangeEvent;
     /** Function is called whenever the focus changes for the input element. */
     private onInputFocusChange;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCheckbox, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCheckbox, "kbq-checkbox", ["kbqCheckbox"], { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "big": { "alias": "big"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCheckbox, [null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCheckbox, "kbq-checkbox", ["kbqCheckbox"], { "big": { "alias": "big"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], false, never>;
     static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
 }

package/core/common-behaviors/color.d.ts

@@ -1,5 +1,6 @@
 import { ElementRef } from '@angular/core';
 import { AbstractConstructor, Constructor } from './constructor';
+import * as i0 from "@angular/core";
 export interface CanColor {
     color: KbqComponentColors | ThemePalette | string;
 }
@@ -31,3 +32,13 @@ export declare enum KbqComponentColors {
 }
 /** Mixin to augment a directive with a `color` property. */
 export declare function mixinColor<T extends AbstractConstructor<HasElementRef>>(base: T, defaultColor?: KbqComponentColors | ThemePalette): CanColorCtor & T;
+export declare class KbqColorDirective {
+    readonly elementRef: ElementRef<any>;
+    get colorClassName(): KbqComponentColors | ThemePalette | string;
+    get color(): KbqComponentColors | ThemePalette | string;
+    set color(color: KbqComponentColors | ThemePalette | string);
+    protected _color: KbqComponentColors | ThemePalette | string;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqColorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqColorDirective, never, never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
+}

package/core/common-behaviors/index.d.ts

@@ -1,5 +1,5 @@
 import { InjectionToken } from '@angular/core';
-export { CanColor, CanColorCtor, KbqComponentColors, mixinColor, ThemePalette } from './color';
+export { CanColor, CanColorCtor, KbqColorDirective, KbqComponentColors, mixinColor, ThemePalette } from './color';
 export { KBQ_SANITY_CHECKS, KbqCommonModule } from './common-module';
 export { CanDisable, CanDisableCtor, mixinDisabled } from './disabled';
 export { CanUpdateErrorState, CanUpdateErrorStateCtor, mixinErrorState } from './error-state';

package/core/option/action.d.ts

@@ -1,6 +1,5 @@
 import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 import { AfterViewInit, ElementRef, EventEmitter, InjectionToken, OnDestroy } from '@angular/core';
-import { CanDisableCtor, HasTabIndexCtor } from '../common-behaviors';
 import * as i0 from "@angular/core";
 export interface KbqOptionActionParent {
     dropdownTrigger: {
@@ -17,16 +16,14 @@ export interface KbqOptionActionParent {
     focus(): void;
 }
 export declare const KBQ_OPTION_ACTION_PARENT: InjectionToken<KbqOptionActionParent>;
-/** @docs-private */
-export declare class KbqOptionActionBase {
-}
-/** @docs-private */
-export declare const KbqOptionActionMixinBase: HasTabIndexCtor & CanDisableCtor & typeof KbqOptionActionBase;
-export declare class KbqOptionActionComponent extends KbqOptionActionMixinBase implements AfterViewInit, OnDestroy {
+export declare class KbqOptionActionComponent implements AfterViewInit, OnDestroy {
     private elementRef;
     private focusMonitor;
     private option;
     customIcon: ElementRef;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
     hasFocus: boolean;
     get active(): boolean;
     private readonly destroyRef;
@@ -41,4 +38,5 @@ export declare class KbqOptionActionComponent extends KbqOptionActionMixinBase i
     private preventShowingTooltip;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOptionActionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptionActionComponent, "kbq-option-action", ["kbqOptionAction"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
 }

package/core/option/optgroup.d.ts

@@ -1,17 +1,16 @@
-import { CanDisable, CanDisableCtor } from '../common-behaviors';
 import * as i0 from "@angular/core";
-/** @docs-private */
-export declare class KbqOptgroupBase {
-}
-export declare const KbqOptgroupMixinBase: CanDisableCtor & typeof KbqOptgroupBase;
 /**
  * Component that is used to group instances of `kbq-option`.
  * When options aren't provided as `ng-content`, used as a Group Header with styling.
  */
-export declare class KbqOptgroup extends KbqOptgroupMixinBase implements CanDisable {
+export declare class KbqOptgroup {
     label: string;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
     /** Unique id for the underlying label. */
     labelId: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOptgroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptgroup, "kbq-optgroup", ["kbqOptgroup"], { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, ["kbq-option, kbq-list-option, kbq-timezone-option, ng-container"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptgroup, "kbq-optgroup", ["kbqOptgroup"], { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["kbq-option, kbq-list-option, kbq-timezone-option, ng-container"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
 }

package/core/pop-up/pop-up-trigger.d.ts

@@ -17,6 +17,7 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     isOpen: boolean;
     enterDelay: number;
     leaveDelay: number;
+    triggerName: string;
     abstract disabled: boolean;
     abstract arrow: boolean;
     abstract trigger: string;
@@ -40,7 +41,6 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     protected readonly availablePositions: {
         [key: string]: ConnectionPositionPair;
     };
-    protected triggerName: string;
     protected mouseEvent?: MouseEvent;
     protected strategy: FlexibleConnectedPositionStrategy;
     abstract updateClassMap(newPlacement?: string): void;
@@ -55,7 +55,7 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     handleKeydown(event: KeyboardEvent): void;
     handleTouchend(): void;
     show(delay?: number): void;
-    hide(delay?: number): void;
+    hide: (delay?: number) => void;
     detach: () => void;
     /** Create the overlay config and position strategy */
     createOverlay(): OverlayRef;

package/core/pop-up/pop-up.d.ts

@@ -1,11 +1,16 @@
 import { AnimationEvent } from '@angular/animations';
-import { ChangeDetectorRef, EventEmitter, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { PopUpVisibility } from './constants';
+import { KbqPopUpTrigger } from './pop-up-trigger';
 import * as i0 from "@angular/core";
 export declare abstract class KbqPopUp implements OnDestroy {
     protected readonly renderer: Renderer2;
+    protected readonly elementRef: ElementRef<any>;
     protected readonly changeDetectorRef: ChangeDetectorRef;
+    /** Stream that emits when the popup item is hovered. */
+    readonly hovered: BehaviorSubject<boolean>;
+    trigger: KbqPopUpTrigger<unknown>;
     header: string | TemplateRef<any>;
     content: string | TemplateRef<any>;
     context: {
@@ -43,6 +48,7 @@ export declare abstract class KbqPopUp implements OnDestroy {
     animationStart(): void;
     animationDone({ toState }: AnimationEvent): void;
     handleBodyInteraction(): void;
+    protected addEventListenerForHide(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopUp, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopUp, never, never, {}, {}, never, never, false, never>;
 }

package/core/selection/pseudo-checkbox/pseudo-checkbox.d.ts

@@ -1,14 +1,6 @@
-import { ElementRef } from '@angular/core';
-import { CanColor, CanColorCtor, CanDisable, CanDisableCtor } from '../../common-behaviors';
+import { KbqColorDirective } from '../../common-behaviors';
 import * as i0 from "@angular/core";
 export type KbqPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
-/** @docs-private */
-export declare class KbqPseudoCheckboxBase {
-    elementRef: ElementRef;
-    constructor(elementRef: ElementRef);
-}
-/** @docs-private */
-export declare const KbqPseudoCheckboxMixinBase: CanColorCtor & CanDisableCtor & typeof KbqPseudoCheckboxBase;
 /**
  * Component that shows a simplified checkbox without including any kind of "real" checkbox.
  * Meant to be used when the checkbox is purely decorative and a large number of them will be
@@ -22,11 +14,10 @@ export declare const KbqPseudoCheckboxMixinBase: CanColorCtor & CanDisableCtor &
  * of more complex components that appropriately handle selected / checked state.
  * @docs-private
  */
-export declare class KbqPseudoCheckbox extends KbqPseudoCheckboxMixinBase implements CanColor, CanDisable {
+export declare class KbqPseudoCheckbox extends KbqColorDirective {
     big: boolean;
     state: KbqPseudoCheckboxState;
     disabled: boolean;
-    constructor(elementRef: ElementRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPseudoCheckbox, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPseudoCheckbox, "kbq-pseudo-checkbox", never, { "color": { "alias": "color"; "required": false; }; "big": { "alias": "big"; "required": false; }; "state": { "alias": "state"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPseudoCheckbox, "kbq-pseudo-checkbox", never, { "big": { "alias": "big"; "required": false; }; "state": { "alias": "state"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
 }

package/core/utils/utils.d.ts

@@ -5,3 +5,6 @@ export declare function isBoolean(value: unknown): value is boolean;
  * @deprecated Use `booleanAttribute` instead
  */
 export declare function toBoolean(value: unknown): boolean;
+export declare const getNodesWithoutComments: (nodes: NodeList) => Node[];
+export declare const leftIconClassName = "kbq-icon_left";
+export declare const rightIconClassName = "kbq-icon_right";

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

@@ -1,26 +1,24 @@
 import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
-import { CanDisable, CanDisableCtor, KbqTitleTextRef } from '@koobiq/components/core';
+import { KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import { Subject } from 'rxjs';
 import { KbqDropdownPanel } from './dropdown.types';
 import * as i0 from "@angular/core";
-/** @docs-private */
-declare class KbqDropdownItemBase {
-}
-/** @docs-private */
-declare const KbqDropdownItemMixinBase: CanDisableCtor & typeof KbqDropdownItemBase;
 /**
  * This directive is intended to be used inside an kbq-dropdown tag.
  * It exists mostly to set the role attribute.
  */
-export declare class KbqDropdownItem extends KbqDropdownItemMixinBase implements KbqTitleTextRef, IFocusableOption, CanDisable, AfterViewInit, OnDestroy {
+export declare class KbqDropdownItem implements KbqTitleTextRef, IFocusableOption, AfterViewInit, OnDestroy {
     private elementRef;
     private focusMonitor;
     parentDropdownPanel?: KbqDropdownPanel | undefined;
     textElement: ElementRef;
     icon: KbqIcon;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
     /** Stream that emits when the dropdown item is hovered. */
     readonly hovered: Subject<KbqDropdownItem>;
     /** Stream that emits when the menu item is focused. */
@@ -48,5 +46,5 @@ export declare class KbqDropdownItem extends KbqDropdownItemMixinBase implements
     haltDisabledEvents(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdownItem, [null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropdownItem, "kbq-dropdown-item, [kbq-dropdown-item]", ["kbqDropdownItem"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["icon"], ["[kbq-icon]", "*"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
 }
-export {};

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

@@ -7,17 +7,17 @@
         }
 
         .kbq-empty-state-text {
-            color: var(--kbq-empty-state-title);
+            color: var(--kbq-empty-state-color);
         }
     }
 
     .kbq-empty-state_error-color {
         .kbq-empty-state-title {
-            color: var(--kbq-foreground-error);
+            color: var(--kbq-empty-state-error-title);
         }
 
         .kbq-empty-state-text {
-            color: var(--kbq-foreground-error);
+            color: var(--kbq-empty-state-error-color);
         }
     }
 }
@@ -28,9 +28,19 @@
         text-align: center;
     }
 
+    .kbq-empty-state_compact {
+        .kbq-empty-state-title {
+            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+        }
+
+        .kbq-empty-state-text {
+            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        }
+    }
+
     .kbq-empty-state_normal {
         .kbq-empty-state-title {
-            @include kbq-typography-level-to-styles-css-variables(typography, text-big-strong);
+            @include kbq-typography-level-to-styles-css-variables(typography, subheading);
         }
 
         .kbq-empty-state-text {
@@ -44,7 +54,7 @@
         }
 
         .kbq-empty-state-text {
-            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-big);
         }
     }
 }

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

@@ -1,4 +1,4 @@
-.kbq-empty-state {
+:where(.kbq-empty-state) {
     --kbq-empty-state-size-big-max-width: 480px;
     --kbq-empty-state-size-big-padding-horizontal: var(--kbq-size-6xl);
     --kbq-empty-state-size-big-padding-top: var(--kbq-size-5xl);
@@ -15,7 +15,17 @@
     --kbq-empty-state-size-normal-image-margin-bottom: var(--kbq-size-xl);
     --kbq-empty-state-size-normal-image-addon-height: var(--kbq-size-xxl);
     --kbq-empty-state-size-normal-title-margin-bottom: var(--kbq-size-xxs);
+    --kbq-empty-state-size-compact-max-width: 320px;
+    --kbq-empty-state-size-compact-padding-horizontal: var(--kbq-size-3xl);
+    --kbq-empty-state-size-compact-padding-top: var(--kbq-size-3xl);
+    --kbq-empty-state-size-compact-padding-bottom: var(--kbq-size-3xl);
+    --kbq-empty-state-size-compact-actions-margin-top: var(--kbq-size-s);
+    --kbq-empty-state-size-compact-image-margin-bottom: var(--kbq-size-m);
+    --kbq-empty-state-size-compact-image-addon-height: 0;
+    --kbq-empty-state-size-compact-title-margin-bottom: var(--kbq-size-xxs);
     /* THEME TOKENS */
     --kbq-empty-state-title: var(--kbq-foreground-contrast);
-    --kbq-empty-state-color: var(--kbq-foreground-contrast);
+    --kbq-empty-state-color: var(--kbq-foreground-contrast-secondary);
+    --kbq-empty-state-error-title: var(--kbq-foreground-error);
+    --kbq-empty-state-error-color: var(--kbq-foreground-error);
 }

package/empty-state/empty-state.component.d.ts

@@ -1,4 +1,5 @@
 import { AfterContentInit } from '@angular/core';
+import { KbqDefaultSizes } from '@koobiq/components/core';
 import { KbqIconItem } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 export declare class KbqEmptyStateIcon {
@@ -22,10 +23,14 @@ export declare class KbqEmptyStateActions {
 }
 export declare class KbqEmptyState implements AfterContentInit {
     errorColor: boolean;
-    big: boolean;
     alignTop: boolean;
+    size: KbqDefaultSizes;
     icon: KbqEmptyStateIcon | null;
+    /**
+     * @docs-private
+     */
+    protected get emptyStateSizeClass(): string;
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyState, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqEmptyState, "kbq-empty-state", never, { "errorColor": { "alias": "errorColor"; "required": false; }; "big": { "alias": "big"; "required": false; }; "alignTop": { "alias": "alignTop"; "required": false; }; }, {}, ["icon"], ["[kbq-empty-state-icon]", "[kbq-empty-state-title]", "[kbq-empty-state-text]", "[kbq-empty-state-actions]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqEmptyState, "kbq-empty-state", never, { "errorColor": { "alias": "errorColor"; "required": false; }; "alignTop": { "alias": "alignTop"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, ["icon"], ["[kbq-empty-state-icon]", "[kbq-empty-state-title]", "[kbq-empty-state-text]", "[kbq-empty-state-actions]"], false, never>;
 }

package/empty-state/empty-state.scss

@@ -9,6 +9,35 @@
 
     flex: 1;
 
+    &.kbq-empty-state_compact {
+        padding: var(--kbq-empty-state-size-compact-padding-top) var(--kbq-empty-state-size-compact-padding-horizontal)
+            var(--kbq-empty-state-size-compact-padding-bottom);
+
+        & .kbq-empty-state-icon {
+            margin-bottom: var(--kbq-empty-state-size-compact-image-margin-bottom);
+        }
+
+        & .kbq-empty-state-text {
+            max-width: var(--kbq-empty-state-size-compact-max-width);
+        }
+
+        & .kbq-empty-state-title {
+            max-width: var(--kbq-empty-state-size-compact-max-width);
+
+            margin-bottom: var(--kbq-empty-state-size-compact-title-margin-bottom);
+        }
+
+        & .kbq-empty-state-actions {
+            max-width: var(--kbq-empty-state-size-compact-max-width);
+
+            margin-top: var(--kbq-empty-state-size-compact-actions-margin-top);
+        }
+
+        &.kbq-empty-state_align-center.kbq-empty-state_has-icon {
+            margin-bottom: var(--kbq-empty-state-size-compact-image-addon-height);
+        }
+    }
+
     &.kbq-empty-state_normal {
         padding: var(--kbq-empty-state-size-normal-padding-top) var(--kbq-empty-state-size-normal-padding-horizontal)
             var(--kbq-empty-state-size-normal-padding-bottom);