@koobiq/components 20.2.0 → 20.3.0

package/tree/_tree-theme.scss

@@ -37,6 +37,13 @@
                 @include kbq-tree-option(states-hover);
             }
 
+            &:active,
+            &.kbq-active {
+                --kbq-option-background: var(--kbq-tree-states-active-container-background);
+
+                background: var(--kbq-tree-states-active-container-background);
+            }
+
             &.kbq-selected {
                 @include kbq-tree-option(states-selected);
 
@@ -44,6 +51,13 @@
                 &.kbq-hovered {
                     @include kbq-tree-option(states-selected-hover);
                 }
+
+                &:active,
+                &.kbq-active {
+                    --kbq-option-background: var(--kbq-tree-states-selected-active-container-background);
+
+                    background: var(--kbq-tree-states-selected-active-container-background);
+                }
             }
 
             &.kbq-checked:not(.kbq-selected),
@@ -58,6 +72,13 @@
 
                     background: var(--kbq-tree-multiple-states-selected-hover-container-background);
                 }
+
+                &:active,
+                &.kbq-active {
+                    --kbq-option-background: var(--kbq-tree-multiple-states-selected-active-container-background);
+
+                    background: var(--kbq-tree-multiple-states-selected-active-container-background);
+                }
             }
         }
 
@@ -70,13 +91,12 @@
         }
     }
 
-    .cdk-keyboard-focused {
+    // Scoped to the tree's own focus-monitored host, matching `kbq-option-action-visibility`. A bare
+    // `.cdk-keyboard-focused` would also match an outer monitored ancestor (e.g. the tree-select panel),
+    // drawing the focus ring on a row whose action button stays correctly hidden.
+    .kbq-tree-selection.cdk-keyboard-focused {
         & .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused) {
             border-color: var(--kbq-tree-states-focused-focus-outline-color);
-
-            & .kbq-action-container {
-                display: flex;
-            }
         }
     }
 }

package/tree/index.d.ts

@@ -1,7 +1,7 @@
 import { SelectionModel, DataSource, CollectionViewer, SelectionChange } from '@angular/cdk/collections';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import * as i0 from '@angular/core';
-import { TemplateRef, ViewContainerRef, ChangeDetectorRef, OnDestroy, ElementRef, AfterContentChecked, OnInit, IterableDiffers, TrackByFunction, QueryList, IterableDiffer, DestroyRef, AfterViewInit, AfterContentInit, EventEmitter, InjectionToken } from '@angular/core';
+import { TemplateRef, ViewContainerRef, ChangeDetectorRef, AfterContentChecked, OnDestroy, OnInit, IterableDiffers, TrackByFunction, QueryList, IterableDiffer, DestroyRef, ElementRef, AfterViewInit, InjectionToken, AfterContentInit, EventEmitter } from '@angular/core';
 import * as i1 from '@koobiq/components/core';
 import { IFocusableOption, KbqTitleTextRef, KbqPseudoCheckbox, KbqOptionActionComponent, KbqPseudoCheckboxState, FocusKeyManager, MultipleMode } from '@koobiq/components/core';
 import { FocusOrigin, FocusMonitor } from '@angular/cdk/a11y';
@@ -504,6 +504,7 @@ declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterC
     readonly onBlur: Subject<KbqTreeOptionEvent>;
     preventBlur: boolean;
     parentTextElement: ElementRef;
+    get textElement(): ElementRef;
     readonly toggleElementDirective: i0.Signal<KbqTreeNodeToggleDirective<any> | undefined>;
     readonly toggleElementComponent: i0.Signal<KbqTreeNodeToggleComponent<any> | undefined>;
     readonly pseudoCheckbox: i0.Signal<KbqPseudoCheckbox | undefined>;
@@ -525,6 +526,16 @@ declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterC
      * Options that are not rendered (e.g. collapsed) are not checked by "select all".
      */
     readonly selectable: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether this option is the tree's "select all" row rather than a rendered data node.
+     *
+     * Such a row has no `data`, so everything that would resolve the option against the tree control
+     * (`getValue`, `isDisabled`, `isExpandable`, descendants) is skipped — those accessors belong to the
+     * consumer and must never be handed a node their data source has never seen. Its checkbox state and
+     * selection are driven from the outside instead.
+     * @docs-private
+     */
+    readonly selectAllRow: i0.InputSignalWithTransform<boolean, unknown>;
     get showCheckbox(): any;
     set showCheckbox(value: any);
     private _showCheckbox;
@@ -538,6 +549,8 @@ declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterC
     get viewValue(): string;
     hasFocus: boolean;
     get isExpandable(): boolean;
+    /** The "select all" row sits above the tree at root depth; `getLevel` has no node to resolve for it. */
+    get level(): number;
     get toggleElement(): KbqTreeNodeToggleBaseDirective<KbqTreeOption> | undefined;
     get isToggleInDefaultPlace(): boolean;
     checkboxState: KbqPseudoCheckboxState;
@@ -563,7 +576,7 @@ declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterC
     /** @docs-private */
     protected onMouseenter(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeOption, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeOption, "kbq-tree-option", ["kbqTreeOption"], { "checkboxThirdState": { "alias": "checkboxThirdState"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, ["toggleElementDirective", "toggleElementComponent", "pseudoCheckbox", "actionButton", "tooltipTrigger", "dropdownTrigger"], ["kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]", "kbq-pseudo-checkbox", "kbq-checkbox", "[kbq-icon]", "kbq-progress-spinner", "*", "kbq-option-action"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeOption, "kbq-tree-option", ["kbqTreeOption"], { "checkboxThirdState": { "alias": "checkboxThirdState"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selectAllRow": { "alias": "selectAllRow"; "required": false; "isSignal": true; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, ["toggleElementDirective", "toggleElementComponent", "pseudoCheckbox", "actionButton", "tooltipTrigger", "dropdownTrigger"], ["kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]", "kbq-pseudo-checkbox", "kbq-checkbox", "[kbq-icon]", "kbq-progress-spinner", "*", "kbq-option-action"], true, never>;
 }
 
 declare const KBQ_SELECTION_TREE_VALUE_ACCESSOR: any;
@@ -622,6 +635,8 @@ declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueA
     userTabIndex: number | null;
     optionShouldHoldFocusOnBlur: boolean;
     nodeOutlet: KbqTreeNodeOutlet;
+    /** Reference to the built-in "select all" row, rendered only while `selectAll` is on. */
+    readonly selectAllOption: i0.Signal<KbqTreeOption | undefined>;
     unorderedOptions: QueryList<KbqTreeOption>;
     treeControl: FlatTreeControl<any>;
     readonly navigationChange: i0.OutputEmitterRef<KbqTreeNavigationChange<KbqTreeOption>>;
@@ -641,6 +656,33 @@ declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueA
     private _noUnselectLast;
     /** When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). */
     readonly selectAllToggle: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to render the "select all" master checkbox above the nodes. Multiple selection only.
+     *
+     * Enabling it also makes Ctrl/Cmd + A a two-way toggle, so the shortcut and the checkbox never
+     * disagree (`selectAllToggle` is implied).
+     */
+    get selectAll(): boolean;
+    set selectAll(value: boolean);
+    private readonly selectAllEnabled;
+    /** Whether the "select all" row is currently rendered. */
+    protected get showSelectAll(): boolean;
+    /** Whether every node "select all" can act on is selected. */
+    get allOptionsSelected(): boolean;
+    /** State of the "select all" master checkbox. */
+    get selectAllState(): KbqPseudoCheckboxState;
+    /** Label of the "select all" row. Kept in step with the locale service. */
+    protected selectAllText: string;
+    /**
+     * Data nodes "select all" acts on, and the ones its checkbox state is derived from.
+     *
+     * While a filter is active only the rendered nodes qualify — the hidden ones are not what the user
+     * is looking at, and selecting them would contradict a master checkbox that can only report on what
+     * is on screen. Without a filter the whole data set qualifies, collapsed branches included.
+     */
+    private get selectAllTargets();
+    /** Adapter shared by the master checkbox and the Ctrl/Cmd + A handler, so the two cannot drift apart. */
+    private get selectAllAdapter();
     get disabled(): boolean;
     set disabled(rawValue: boolean);
     private _disabled;
@@ -649,9 +691,20 @@ declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueA
     private _tabIndex;
     get showCheckbox(): boolean;
     get isEmpty(): boolean;
+    /**
+     * Number of real, data-backed nodes currently rendered — unlike `renderedOptions.length`, never
+     * includes the "select all" row, which is appended to `renderedOptions` on its own, later-processed
+     * reactive pass and would otherwise make a consumer's own node count race against that pass.
+     */
+    get nodesCount(): number;
     private optionFocusSubscription;
     private optionBlurSubscription;
+    private readonly localeService?;
+    /** Updates locale parameters from the locale service. */
+    private updateLocaleParams;
     constructor();
+    /** Selects every node "select all" can act on, or deselects them all when they are already selected. */
+    protected toggleSelectAll(): void;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -699,6 +752,20 @@ declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueA
     getItemHeight(): number;
     setStateChildren(option: KbqTreeOption, state: boolean): void;
     private onCopyDefaultHandler;
+    /**
+     * Moves focus to the closest enabled ancestor of the active option — ArrowLeft on a leaf, on an
+     * already-collapsed node, or on a node whose toggle is disabled.
+     *
+     * Ancestors are resolved against `renderedOptions` rather than `treeControl.dataNodes`: every
+     * ancestor of a visible option is itself visible, options are rendered depth-first, and these are
+     * the indices `keyManager` navigates — so the walk starts from `keyManager.activeItemIndex`.
+     * Scanning backwards, the first option with a smaller level is the parent.
+     *
+     * A disabled option cannot take focus (`KbqTreeOption.focus` refuses it), so the walk steps over a
+     * disabled ancestor and narrows `level` to that ancestor's level. Without narrowing, the scan would
+     * continue against the original level and land on a preceding sibling of the parent.
+     */
+    private setActiveParentOption;
     private getHeight;
     private updateTabIndex;
     private updateRenderedOptions;
@@ -720,7 +787,8 @@ declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueA
     private canDeselectLast;
     private isFocusReceivedFromNestedOption;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelection, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelection, "kbq-tree-selection", ["kbqTreeSelection"], { "treeControl": { "alias": "treeControl"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; }, { "navigationChange": "navigationChange"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; }, ["unorderedOptions"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelection, "kbq-tree-selection", ["kbqTreeSelection"], { "treeControl": { "alias": "treeControl"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; }, { "navigationChange": "navigationChange"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; }, ["unorderedOptions"], never, true, never>;
+    static ngAcceptInputType_selectAll: unknown;
 }
 
 declare class KbqTreeModule {

package/tree/tree-option.scss

@@ -1,9 +1,11 @@
+@use '../core/option/action-container-mixins' as action-container;
 @use '../core/styles/common';
 @use '../core/styles/common/tokens' as *;
 @use '../core/styles/common/vendor-prefixes';
 
 .kbq-tree-option {
     @include vendor-prefixes.user-select(none);
+    @include action-container.kbq-option-action-visibility('.kbq-tree-selection.cdk-keyboard-focused');
 
     position: relative;
 
@@ -72,14 +74,6 @@
 
     &:not(.kbq-disabled) {
         cursor: pointer;
-
-        &:hover,
-        &.kbq-hovered,
-        &.kbq-action-button-focused {
-            & .kbq-action-container {
-                display: flex;
-            }
-        }
     }
 
     &:is(.kbq-checked, .kbq-selected, .kbq-focused):has(+ :is(.kbq-checked, .kbq-selected, .kbq-focused)) {

package/tree-select/_tree-select-theme.scss

@@ -45,6 +45,14 @@
                 @include tree-theme.kbq-tree-option(states-hover);
             }
 
+            // `:not(.kbq-disabled)` raises specificity so pressed wins over the heavier `:hover:not(.kbq-focused)` rule
+            &:active:not(.kbq-disabled),
+            &.kbq-active:not(.kbq-disabled) {
+                --kbq-option-background: var(--kbq-tree-states-active-container-background);
+
+                background: var(--kbq-tree-states-active-container-background);
+            }
+
             &.kbq-selected {
                 &:hover:not(.kbq-focused),
                 &.kbq-hovered:not(.kbq-focused) {
@@ -54,6 +62,13 @@
                 &.kbq-focused {
                     @include tree-theme.kbq-tree-option(states-selected-hover);
                 }
+
+                &:active:not(.kbq-disabled),
+                &.kbq-active:not(.kbq-disabled) {
+                    --kbq-option-background: var(--kbq-tree-states-selected-active-container-background);
+
+                    background: var(--kbq-tree-states-selected-active-container-background);
+                }
             }
 
             &.kbq-checked:not(.kbq-selected),
@@ -66,6 +81,13 @@
                 &.kbq-focused {
                     background: var(--kbq-tree-multiple-states-selected-hover-container-background);
                 }
+
+                &:active:not(.kbq-disabled),
+                &.kbq-active:not(.kbq-disabled) {
+                    --kbq-option-background: var(--kbq-tree-multiple-states-selected-active-container-background);
+
+                    background: var(--kbq-tree-multiple-states-selected-active-container-background);
+                }
             }
 
             &.kbq-focused:not(.kbq-action-button-focused) {

package/tree-select/index.d.ts

@@ -1,12 +1,12 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, Provider, AfterContentInit, AfterViewInit, OnDestroy, OnInit, DoCheck, ElementRef, ChangeDetectorRef, QueryList, TemplateRef, EventEmitter } from '@angular/core';
+import { InjectionToken, AfterContentInit, AfterViewInit, OnDestroy, OnInit, DoCheck, ElementRef, ChangeDetectorRef, QueryList, TemplateRef, EventEmitter, Provider } from '@angular/core';
 import * as _angular_cdk_overlay_module_d from '@angular/cdk/overlay-module.d';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i1 from '@angular/cdk/overlay';
 import { ConnectedPosition, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { ControlValueAccessor, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
 import * as i5 from '@koobiq/components/core';
-import { KbqPanelWidth, KbqPanelMinWidth, KbqPanelMaxWidth, KbqAbstractSelect, CanUpdateErrorState, ErrorStateMatcher, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqSelectAllEvent, KbqComponentColors } from '@koobiq/components/core';
+import { KbqPanelWidth, KbqPanelMinWidth, KbqPanelMaxWidth, KbqPanelMaxHeight, KbqAbstractSelect, CanUpdateErrorState, KbqSiblingPopup, ErrorStateMatcher, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqSelectAllEvent, KbqComponentColors } from '@koobiq/components/core';
 import * as i9 from '@koobiq/components/form-field';
 import { KbqFormFieldControl, KbqCleaner } from '@koobiq/components/form-field';
 import * as i4 from '@koobiq/components/tags';
@@ -45,6 +45,11 @@ type KbqTreeSelectOptions = Partial<{
      * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
      */
     panelMaxWidth: KbqPanelMaxWidth;
+    /**
+     * Maximum height of the panel's scrollable option list. Does not include the search field or the
+     * footer. If null, the `--kbq-select-panel-size-max-height` token applies.
+     */
+    panelMaxHeight: KbqPanelMaxHeight;
     /**
      * Whether to enable hiding search by default if options is less than minimum.
      *
@@ -70,6 +75,11 @@ declare const KBQ_TREE_SELECT_OPTIONS: InjectionToken<Partial<{
      * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
      */
     panelMaxWidth: KbqPanelMaxWidth;
+    /**
+     * Maximum height of the panel's scrollable option list. Does not include the search field or the
+     * footer. If null, the `--kbq-select-panel-size-max-height` token applies.
+     */
+    panelMaxHeight: KbqPanelMaxHeight;
     /**
      * Whether to enable hiding search by default if options is less than minimum.
      *
@@ -89,7 +99,7 @@ declare class KbqTreeSelectChange {
     values?: unknown[] | undefined;
     constructor(source: KbqTreeSelect, value: any, isUserInput?: boolean, values?: unknown[] | undefined);
 }
-declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentInit, AfterViewInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl<KbqTreeOption>, CanUpdateErrorState {
+declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentInit, AfterViewInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl<KbqTreeOption>, CanUpdateErrorState, KbqSiblingPopup {
     elementRef: ElementRef<HTMLElement>;
     readonly changeDetectorRef: ChangeDetectorRef;
     private readonly ngZone;
@@ -143,10 +153,10 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
      */
     protected readonly viewportMargin: number;
     /**
-     * This position config ensures that the top "start" corner of the overlay
-     * is aligned with with the top "start" of the origin by default (overlapping
-     * the trigger completely). If the panel cannot fit below the trigger, it
-     * will fall back to a position above the trigger.
+     * Opens the panel below the trigger, falling back to above it when it does not fit.
+     *
+     * A third position is appended at runtime by `updatePanelAnchor`: a multiline trigger that has grown
+     * taller than the panel gets it anchored to its first row and drawn over the rest of it.
      */
     positions: ConnectedPosition[];
     options: QueryList<KbqTreeOption>;
@@ -156,8 +166,14 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     readonly trigger: _angular_core.Signal<ElementRef<any>>;
     /** Reference to the overlay panel element. */
     readonly panel: _angular_core.Signal<ElementRef<any> | undefined>;
+    /** Scrollable option list inside the panel. */
+    protected readonly optionsContainer: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
     overlayDir: CdkConnectedOverlay;
     tags: QueryList<KbqTag>;
+    /**
+     * Reference to the optional cleaner element for clearing selection.
+     * @docs-private
+     */
     readonly cleaner: _angular_core.Signal<KbqCleaner | undefined>;
     /** User-supplied override of the trigger element. */
     readonly customTrigger: _angular_core.Signal<KbqSelectTrigger | undefined>;
@@ -166,7 +182,12 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     readonly tree: _angular_core.Signal<KbqTreeSelection | undefined>;
     readonly search: _angular_core.Signal<KbqSelectSearch | undefined>;
     hiddenItemsText: string;
-    /** Event emitted when the select panel has been toggled. */
+    /**
+     * Event emitted when the select panel has been toggled.
+     * Also serves as the `openedChange` member of the `KbqSiblingPopup` contract — a tooltip sharing
+     * this element's host reacts to it, so its emission timing (gated on `panelDoneAnimatingStream`, see
+     * `ngOnInit`) matters beyond this output's original consumers.
+     */
     readonly openedChange: EventEmitter<boolean>;
     /** Event emitted when the select has been opened. */
     readonly openedStream: Observable<void>;
@@ -175,8 +196,8 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     /** Event emitted when the selected value has been changed by the user. */
     readonly selectionChange: _angular_core.OutputEmitterRef<KbqTreeSelectChange>;
     /**
-     * Event emitted when all options are selected or deselected via the Ctrl/Cmd + A shortcut.
-     * Not emitted when a custom `selectAllHandler` is supplied — the handler owns the behaviour then.
+     * Event emitted whenever the tree's `selectAllOptions()` runs — a click on the `selectAll` master
+     * checkbox, the Ctrl/Cmd + A shortcut, or a custom `selectAllHandler` that delegates to it.
      */
     readonly onSelectAll: _angular_core.OutputEmitterRef<KbqSelectAllEvent<KbqTreeOption, KbqTreeSelect>>;
     /**
@@ -219,6 +240,15 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     private _autoSelect;
     /** When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). */
     readonly selectAllToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to render the "select all" master checkbox above the tree. Multiple selection only.
+     *
+     * The row acts on the nodes the user can actually toggle — enabled and selectable. Without a search
+     * query that covers the whole data set, collapsed branches included; while a query is active it
+     * covers only the matches. Enabling it also makes Ctrl/Cmd + A a two-way toggle, so the shortcut and
+     * the checkbox never disagree (`selectAllToggle` is implied).
+     */
+    readonly selectAll: _angular_core.InputSignalWithTransform<boolean, unknown>;
     get value(): any;
     get id(): string;
     set id(value: string);
@@ -264,6 +294,20 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
      * When null, the `--kbq-panel-size-width-max` token applies.
      */
     readonly panelMaxWidth: _angular_core.InputSignalWithTransform<KbqPanelMaxWidth, unknown>;
+    /**
+     * Maximum height of the panel's scrollable option list, in pixels. Applied as the
+     * `--kbq-select-panel-size-max-height` custom property on the panel.
+     *
+     * The search field and the footer sit outside the scrollable area and add to the panel's total height.
+     * When null, the token default (256px) applies.
+     */
+    readonly panelMaxHeight: _angular_core.InputSignalWithTransform<KbqPanelMaxHeight, unknown>;
+    /**
+     * `panelMaxHeight` rendered as a CSS length for the `--kbq-select-panel-size-max-height` token.
+     * A non-finite value (e.g. `null`) leaves the stylesheet default in place.
+     * @docs-private
+     */
+    protected readonly panelMaxHeightToken: _angular_core.Signal<string | null>;
     /**
      * Controls when the search functionality is displayed based on the number of available options.
      *
@@ -274,6 +318,12 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     get searchMinOptionsThreshold(): number | undefined;
     private _searchMinOptionsThreshold;
     get panelOpen(): boolean;
+    /** Whether the overlay panel is currently on screen. Part of the `KbqSiblingPopup` contract. */
+    get isAttached(): boolean;
+    /**
+     * Whether the cleaner (clear button) should be shown.
+     * @docs-private
+     */
     get canShowCleaner(): boolean;
     /** @docs-private */
     get colorForState(): KbqComponentColors;
@@ -282,13 +332,12 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     private closeSubscription;
     private _panelOpen;
     private originalOnKeyDown;
-    /** The scroll position of the overlay panel, calculated to center the selected option. */
+    /** The scroll offset the panel is restored to when it attaches — the list always opens at the top. */
     private scrollTop;
     /** Unique id for this input. */
     private readonly uid;
     private tempValues;
     private readonly destroyRef;
-    private readonly window;
     constructor();
     ngOnInit(): void;
     ngDoCheck(): void;
@@ -297,7 +346,17 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     ngOnDestroy(): void;
     updateErrorState(): void;
     hiddenItemsTextFormatter(hiddenItemsText: string, hiddenItems: number): string;
-    clearValue($event: any): void;
+    /**
+     * Clears the current selection.
+     * @docs-private
+     */
+    clear(): void;
+    /**
+     * Clears the current selection.
+     * @deprecated Activate the projected `KbqCleaner` instead.
+     * @docs-private
+     */
+    clearValue(event: Event): void;
     /** `View -> model callback called when value changes` */
     onChange: (value: any) => void;
     /** `View -> model callback called when select has been touched` */
@@ -352,6 +411,9 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     onBlur(): void;
     /** Callback that is invoked when the overlay panel has been attached. */
     onAttached(): void;
+    /** Element the overlay is positioned and sized against. */
+    protected getOverlayOriginElement(): HTMLElement | undefined;
+    protected isPanelOpen(): boolean;
     /** Returns the theme to be used on the panel. */
     getPanelTheme(): string;
     /** Returns the full set of classes for the panel: base class, theme and custom `panelClass`. */
@@ -366,7 +428,7 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     onRemoveSelectedOption(selectedOption: any, $event: any): void;
     calculateHiddenItems: () => void;
     triggerKeydownHandler(event: KeyboardEvent): void;
-    panelKeydownHandler(event: KeyboardEvent): any;
+    panelKeydownHandler(event: KeyboardEvent): void;
     /** @docs-private */
     protected shouldShowSearch(): boolean;
     private updateLocaleParams;
@@ -374,6 +436,12 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     private getTotalItemsWidthInMatcher;
     private getTotalVisibleItems;
     private buildTriggerClone;
+    /**
+     * Width of a single `kbq-tag` in the matcher, including margins and the inter-tag gap.
+     *
+     * Tags are `border-box` and carry horizontal padding, which `getComputedStyle().width` — always
+     * the used content-box width — leaves out. See the twin in `KbqSelect`.
+     */
     private getItemWidth;
     private refreshTriggerValues;
     /**
@@ -389,11 +457,10 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
      * the first item instead.
      */
     private highlightCorrectOption;
-    /** Scrolls the active option into view. */
     private scrollActiveOptionIntoView;
     private subscribeOnSearchChanges;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTreeSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "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; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "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]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "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; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "panelMaxHeight": { "alias": "panelMaxHeight"; "required": false; "isSignal": true; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "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]"], true, never>;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_disabled: unknown;
 }

package/core/styles/_tokens.kbq.import.scss

@@ -1,4 +0,0 @@
-@import '../../../../node_modules/@koobiq/design-tokens/web/variables';
-@import '../../../../node_modules/@koobiq/design-tokens/web/palette';
-@import '../../../../node_modules/@koobiq/design-tokens/web/typography';
-@import '../../../../node_modules/@koobiq/design-tokens/web/md-typography';