@koobiq/components 20.4.1 → 21.0.0

package/fesm2022/koobiq-components-tree-select.mjs

@@ -1,23 +1,24 @@
-import { CdkMonitorFocus, A11yModule } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { CdkMonitorFocus } from '@angular/cdk/a11y';
 import { SelectionModel } from '@angular/cdk/collections';
-import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { Platform, _getEventTarget } from '@angular/cdk/platform';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, ChangeDetectorRef, NgZone, Renderer2, viewChild, contentChild, TemplateRef, EventEmitter, output, input, booleanAttribute, numberAttribute, computed, DestroyRef, effect, afterNextRender, Input, Output, ViewChildren, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { outputToObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { InjectionToken, inject, ElementRef, ChangeDetectorRef, Injector, Renderer2, signal, viewChild, viewChildren, contentChild, TemplateRef, input, EventEmitter, output, computed, booleanAttribute, linkedSignal, numberAttribute, DestroyRef, effect, afterNextRender, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { outputFromObservable, outputToObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
-import { KbqAbstractSelect, getKbqSelectDynamicMultipleError, isInput, shouldSelectSearchText, KbqComponentColors, ErrorStateMatcher, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, defaultOffsetY, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KBQ_PANEL_DEFAULT_MIN_WIDTH, kbqResolvePanelMaxHeightToken, KbqSelectAllEvent, MultipleMode, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, isSelectAll, hasModifierKey, isUndefined, getKbqSelectNonArrayValueError, kbqSelectAnimations, KBQ_PARENT_POPUP, kbqSiblingPopupProvider, KbqSelectFooter, KbqSelectSearchEmptyResult, KbqPseudoCheckboxModule } from '@koobiq/components/core';
+import * as i1 from '@koobiq/components/core';
+import { KbqAbstractSelect, isInput, shouldSelectSearchText, runClearPredicate, ErrorStateMatcher, KBQ_SELECT_SCROLL_STRATEGY, KBQ_OVERLAY_LAYERS, KbqErrorStateTracker, defaultOffsetY, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, kbqQueryListFrom, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqLocaleOverridesDirective, KBQ_SELECT_LOCALE_CONFIGURATION, kbqSelectAllHandlerTransform, KBQ_PANEL_DEFAULT_MIN_WIDTH, kbqResolvePanelMaxHeightToken, KbqComponentColors, getKbqSelectDynamicMultipleError, KbqSelectAllEvent, MultipleMode, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, isSelectAll, hasModifierKey, isUndefined, getKbqSelectNonArrayValueError, KBQ_PARENT_POPUP, kbqSiblingPopupProvider, KbqSelectFooter, KbqSelectSearchEmptyResult } from '@koobiq/components/core';
 import { KBQ_FORM_FIELD, KbqCleaner, KbqFormFieldControl, kbqCleanerFactoryProvider, KbqFormFieldModule } from '@koobiq/components/form-field';
-import * as i1 from '@koobiq/components/icon';
+import * as i2 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
-import { KbqTagRemove, KbqTag, KbqTagsModule } from '@koobiq/components/tags';
-import { KbqTreeSelection, KbqTree, KbqTreeModule } from '@koobiq/components/tree';
+import { KbqScrollbarViewport } from '@koobiq/components/scrollbar';
+import { KbqSelectNoOptions } from '@koobiq/components/select';
+import { KbqTag, KbqTagRemove, KbqTagsModule } from '@koobiq/components/tags';
+import { KbqTreeSelection, KbqTreeModule } from '@koobiq/components/tree';
 import { SizeXxs } from '@koobiq/design-tokens';
-import { Subject, defer, merge, Subscription, fromEvent, audit } from 'rxjs';
-import { filter, map, startWith, switchMap, take, delay, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { Subject, defer, merge, Subscription, fromEvent, audit, timer } from 'rxjs';
+import { filter, map, startWith, switchMap, delay, debounceTime, distinctUntilChanged, take } from 'rxjs/operators';
 
 let nextUniqueId = 0;
 /** Injection token that can be used to provide the default options for the `kbq-tree-select`. */
@@ -31,7 +32,19 @@ const kbqTreeSelectOptionsProvider = (options) => {
 };
 /** Change event object that is emitted when the select value has changed. */
 class KbqTreeSelectChange {
-    constructor(source, value, isUserInput = false, values) {
+    constructor(
+    /** Select the change comes from. */
+    source, 
+    /**
+     * Option the change is about — a `KbqTreeOption` whenever the changed node is rendered, and the
+     * raw value of the node when it is not. `null` when the change is not about a single option,
+     * which today means the cleaner was activated; `values` then carries the nodes it removed.
+     */
+    value, 
+    /** Whether the change was made by the user rather than written to the model. */
+    isUserInput = false, 
+    /** Every option the change is about, when it covers more than one. */
+    values) {
         this.source = source;
         this.value = value;
         this.isUserInput = isUserInput;
@@ -39,114 +52,33 @@ class KbqTreeSelectChange {
     }
 }
 class KbqTreeSelect extends KbqAbstractSelect {
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get placeholder() {
-        return this._placeholder;
-    }
-    set placeholder(value) {
-        this._placeholder = value;
-        this.stateChanges.next();
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get required() {
-        return this._required;
-    }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
-        this.stateChanges.next();
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get multiple() {
-        return this._multiple;
-    }
-    set multiple(value) {
-        if (this.selectionModel) {
-            throw getKbqSelectDynamicMultipleError();
-        }
-        this._multiple = coerceBooleanProperty(value);
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get autoSelect() {
-        if (this.multiSelection) {
-            return false;
-        }
-        return this._autoSelect;
-    }
-    set autoSelect(value) {
-        this._autoSelect = coerceBooleanProperty(value);
-    }
-    get value() {
-        return this.tree().getSelectedValues();
+    /** Reference to the CDK connected overlay directive. */
+    get overlayDir() {
+        return this.overlayDirQuery();
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get id() {
-        return this._id;
+    get tags() {
+        return this.tagsList();
     }
-    set id(value) {
-        this._id = value || this.uid;
-        this.stateChanges.next();
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get hasBackdrop() {
-        return this._hasBackdrop;
+    /** Whether multiple nodes can be selected. Cannot be changed once the selection model exists. */
+    get multiple() {
+        return this.multipleValue ?? this.multipleInput();
     }
-    set hasBackdrop(value) {
-        this._hasBackdrop = coerceBooleanProperty(value);
+    /** Whether moving the active node selects it. Always off in multiple selection. */
+    get autoSelect() {
+        return !this.multiSelection && this.autoSelectInput();
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Tab index of the select, `-1` while it is disabled. A value that is not an integer keeps the last valid one. */
     get tabIndex() {
-        return this.disabled ? -1 : this._tabIndex;
-    }
-    set tabIndex(value) {
-        if (Number.isInteger(value) || value === null) {
-            this._tabIndex = value;
-        }
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        if (value !== this.disabled) {
-            this._disabled = value;
-            if (this.parentFormField) {
-                Promise.resolve().then(() => {
-                    if (this._disabled) {
-                        this.parentFormField.stopFocusMonitor();
-                    }
-                    else {
-                        this.parentFormField.runFocusMonitor();
-                    }
-                });
-            }
-            // Let the parent form field know to run change detection when the disabled state changes.
-            this.stateChanges.next();
-        }
+        return this.resolvedTabIndex();
     }
     /**
      * Function for handling the combination Ctrl + A (select all). By default, the internal handler is used.
      */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get selectAllHandler() {
-        return this._selectAllHandler;
-    }
-    set selectAllHandler(fn) {
-        if (typeof fn !== 'function') {
-            throw Error('`selectAllHandler` must be a function.');
-        }
-        this._selectAllHandler = fn;
+        return this.selectAllHandlerInput() ?? this.defaultSelectAllHandler;
     }
     /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */
-    _selectAllHandler(event, select) {
+    defaultSelectAllHandler(event, select) {
         const searchInput = isInput(event) ? event.target : null;
         if (shouldSelectSearchText(searchInput)) {
             searchInput.select();
@@ -159,97 +91,93 @@ class KbqTreeSelect extends KbqAbstractSelect {
         // `onSelectAll` is emitted by the tree subscription set up in `ngAfterContentInit`.
         select.tree().selectAllOptions(select.selectAll() || select.selectAllToggle());
     }
-    /** Whether the select is focused. */
-    get focused() {
-        return this._focused || this._panelOpen;
-    }
-    set focused(value) {
-        this._focused = value;
-    }
     /** Whether multiple choice is enabled or not. True if multiple or multiline */
     get multiSelection() {
         return this.multiple || this.multiline();
     }
-    /**
-     * Controls when the search functionality is displayed based on the number of available options.
-     *
-     * Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.
-     * @default undefined
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set searchMinOptionsThreshold(value) {
-        this._searchMinOptionsThreshold =
-            this.resolveSearchMinOptionsThreshold(value) ??
-                this.resolveSearchMinOptionsThreshold(this.defaultOptions?.searchMinOptionsThreshold);
-    }
-    get searchMinOptionsThreshold() {
-        return this._searchMinOptionsThreshold;
-    }
     get panelOpen() {
-        return this._panelOpen;
+        return this.panelOpenValue();
     }
     /** Whether the overlay panel is currently on screen. Part of the `KbqSiblingPopup` contract. */
     get isAttached() {
-        return this._panelOpen;
+        return this.panelOpenValue();
     }
     /**
      * Whether the cleaner (clear button) should be shown.
+     *
      * @docs-private
      */
     get canShowCleaner() {
         return !!this.cleaner()?.canShow;
     }
-    /** @docs-private */
-    get colorForState() {
-        const hasLegacyValidateDirective = this.elementRef.nativeElement.classList.contains('kbq-control_has-validate-directive');
-        return (hasLegacyValidateDirective && this.ngControl?.invalid) || this.errorState
-            ? KbqComponentColors.Error
-            : KbqComponentColors.ContrastFade;
+    /**
+     * Whether the cleaner still has a node to remove.
+     *
+     * @docs-private
+     */
+    get canClear() {
+        return !!this.selectionModel?.selected.some((node) => runClearPredicate(this.clearPredicate(), node));
+    }
+    /** Selected nodes the cleaner removes, in selection order. */
+    get clearTargets() {
+        return this.selectionModel?.selected.filter((node) => runClearPredicate(this.clearPredicate(), node)) ?? [];
+    }
+    /**
+     * The tree answers for any node; the option is asked only for its own `[disabled]` input, and a
+     * node inside a collapsed branch has no option to ask.
+     */
+    isNodeDisabled(node) {
+        const tree = this.tree();
+        if (!tree)
+            return false;
+        if (tree.disabled || tree.treeControl.isDisabled(node))
+            return true;
+        return tree.renderedOptions.find((option) => option.data === node)?.disabled ?? false;
+    }
+    /**
+     * Accessible name of the combobox.
+     *
+     * A combobox takes its name from the author only, so the placeholder rendered inside the trigger does
+     * not name it. Falling back to the placeholder text keeps a control that was given neither an
+     * `aria-label` nor an `aria-labelledby` from being announced blank — the shape every consumer in the
+     * repository is in. Left off while `aria-labelledby` is set, which outranks `aria-label` anyway.
+     */
+    get ariaLabelText() {
+        return this.resolvedAriaLabel();
     }
     constructor() {
         super();
         this.elementRef = inject(ElementRef);
         this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.ngZone = inject(NgZone);
+        this.injector = inject(Injector);
         this.renderer = inject(Renderer2);
         this.defaultErrorStateMatcher = inject(ErrorStateMatcher);
         this.scrollStrategyFactory = inject(KBQ_SELECT_SCROLL_STRATEGY);
-        this.dir = inject(Directionality, { optional: true });
+        this.overlayLayers = inject(KBQ_OVERLAY_LAYERS);
         this.parentForm = inject(NgForm, { optional: true });
         this.parentFormGroup = inject(FormGroupDirective, { optional: true });
         this.parentFormField = inject(KBQ_FORM_FIELD, { host: true, optional: true });
         this.ngControl = inject(NgControl, { optional: true, self: true });
-        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
         this.isBrowser = inject(Platform).isBrowser;
         this.defaultOptions = inject(KBQ_TREE_SELECT_OPTIONS, { optional: true });
+        this.errorStateTracker = new KbqErrorStateTracker(this.defaultErrorStateMatcher, this.ngControl, this.parentFormGroup, this.parentForm);
         /** Whether the component is in an error state. */
-        this.errorState = false;
-        /**
-         * Emits whenever the component state changes and should cause the parent
-         * form-field to update. Implemented as part of `KbqFormFieldControl`.
-         * @docs-private
-         */
-        this.stateChanges = new Subject();
+        this.errorState = this.errorStateTracker.errorState;
         /** A name for this control that can be used by `kbq-form-field`. */
         this.controlType = 'select';
-        this.hiddenItems = 0;
+        /**
+         * A `kbq-tree-select` is not a native labelable element, so the form-field's `<label for>` cannot
+         * associate with it. The control is named through `aria-labelledby` instead.
+         */
+        this.isNativeLabelSupported = false;
+        /** Number of the selected items that do not fit into the trigger. */
+        this.hiddenItems = signal(0, ...(ngDevMode ? [{ debugName: "hiddenItems" }] : /* istanbul ignore next */ []));
         /** The cached font-size of the trigger element. */
         this.triggerFontSize = 0;
-        /** The value of the select panel's transform-origin property. */
-        this.transformOrigin = 'top';
-        /** Emits when the panel element is finished transforming in. */
+        /** Emits once the panel has rendered (`'showing'`) or has been removed (`'void'`). */
         this.panelDoneAnimatingStream = new Subject();
         /** Strategy that will be used to handle scrolling while the select panel is open. */
         this.scrollStrategy = this.scrollStrategyFactory();
-        /**
-         * The y-offset of the overlay panel in relation to the trigger.
-         *
-         * @deprecated noop. The trigger↔panel gap is now controlled by the `--kbq-connected-overlay-gap` CSS
-         * variable (transparent padding inside the pane via the `kbq-connected-overlay_below/_above` panel
-         * classes), not by a physical overlay offset — so setting this has no effect. Will be removed in 21.0.0.
-         */
-        this.offsetY = 0;
         /**
          * Minimum space to keep between the overlay and the viewport edge.
          * At least `defaultOffsetY` so CDK's fit check — which runs before the `kbq-connected-overlay_below/_above`
@@ -284,23 +212,39 @@ class KbqTreeSelect extends KbqAbstractSelect {
          */
         this.trigger = viewChild.required('trigger');
         /** Reference to the overlay panel element. */
-        this.panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : []));
+        this.panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
         /** Scrollable option list inside the panel. */
-        this.optionsContainer = viewChild('optionsContainer', ...(ngDevMode ? [{ debugName: "optionsContainer" }] : []));
+        this.optionsContainer = viewChild('optionsContainer', ...(ngDevMode ? [{ debugName: "optionsContainer" }] : /* istanbul ignore next */ []));
+        /** The options container's custom scrollbar viewport, flashed when the panel opens. */
+        this.scrollbarViewport = viewChild(KbqScrollbarViewport, ...(ngDevMode ? [{ debugName: "scrollbarViewport" }] : /* istanbul ignore next */ []));
+        this.overlayDirQuery = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "overlayDirQuery" }] : /* istanbul ignore next */ []));
+        this.tagsQuery = viewChildren(KbqTag, ...(ngDevMode ? [{ debugName: "tagsQuery" }] : /* istanbul ignore next */ []));
+        this.tagsList = kbqQueryListFrom(this.tagsQuery);
         /**
          * Reference to the optional cleaner element for clearing selection.
+         *
          * @docs-private
          */
-        this.cleaner = contentChild(KbqCleaner, ...(ngDevMode ? [{ debugName: "cleaner", descendants: false }] : [{ descendants: false }]));
+        this.cleaner = contentChild(KbqCleaner, { ...(ngDevMode ? { debugName: "cleaner" } : /* istanbul ignore next */ {}), descendants: false });
         /** User-supplied override of the trigger element. */
-        this.customTrigger = contentChild(KbqSelectTrigger, ...(ngDevMode ? [{ debugName: "customTrigger" }] : []));
-        this.customMatcher = contentChild(KbqSelectMatcher, ...(ngDevMode ? [{ debugName: "customMatcher" }] : []));
-        this.customTagTemplateRef = contentChild('kbqSelectTagContent', ...(ngDevMode ? [{ debugName: "customTagTemplateRef", read: TemplateRef }] : [{ read: TemplateRef }]));
-        this.tree = contentChild(KbqTreeSelection, ...(ngDevMode ? [{ debugName: "tree" }] : []));
-        this.search = contentChild(KbqSelectSearch, ...(ngDevMode ? [{ debugName: "search" }] : []));
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
-        this.hiddenItemsText = '+{{ number }}';
+        this.customTrigger = contentChild(KbqSelectTrigger, ...(ngDevMode ? [{ debugName: "customTrigger" }] : /* istanbul ignore next */ []));
+        this.customMatcher = contentChild(KbqSelectMatcher, ...(ngDevMode ? [{ debugName: "customMatcher" }] : /* istanbul ignore next */ []));
+        this.customTagTemplateRef = contentChild('kbqSelectTagContent', { ...(ngDevMode ? { debugName: "customTagTemplateRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.tree = contentChild(KbqTreeSelection, ...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
+        this.search = contentChild(KbqSelectSearch, ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+        /** Message projected for an empty tree — the only thing the panel opens onto without options. */
+        this.noOptionsMessage = contentChild(KbqSelectNoOptions, ...(ngDevMode ? [{ debugName: "noOptionsMessage" }] : /* istanbul ignore next */ []));
+        /**
+         * Text of the counter of the selected items that do not fit into the trigger. `{{ number }}` is
+         * replaced with their number.
+         *
+         * Left unset, the text follows the active locale (`select.hiddenItemsText`); set, it wins over the
+         * locale and survives a locale change.
+         */
+        this.hiddenItemsText = input(undefined, ...(ngDevMode ? [{ debugName: "hiddenItemsText" }] : /* istanbul ignore next */ []));
+        /** Formats the counter of the items that do not fit into the trigger. */
+        this.hiddenItemsTextFormatter = input((hiddenItemsText, hiddenItems) => hiddenItemsText.replace('{{ number }}', hiddenItems.toString()), ...(ngDevMode ? [{ debugName: "hiddenItemsTextFormatter" }] : /* istanbul ignore next */ []));
+        this.localeConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('select', KBQ_SELECT_LOCALE_CONFIGURATION);
         /**
          * Event emitted when the select panel has been toggled.
          * Also serves as the `openedChange` member of the `KbqSiblingPopup` contract — a tooltip sharing
@@ -308,10 +252,16 @@ class KbqTreeSelect extends KbqAbstractSelect {
          * `ngOnInit`) matters beyond this output's original consumers.
          */
         this.openedChange = new EventEmitter();
+        /** @docs-private */
+        this.openedChangeOutput = outputFromObservable(this.openedChange, { alias: 'openedChange' });
         /** Event emitted when the select has been opened. */
         this.openedStream = this.openedChange.pipe(filter((o) => o), map(() => { }));
+        /** @docs-private */
+        this.openedOutput = outputFromObservable(this.openedStream, { alias: 'opened' });
         /** Event emitted when the select has been closed. */
         this.closedStream = this.openedChange.pipe(filter((o) => !o), map(() => { }));
+        /** @docs-private */
+        this.closedOutput = outputFromObservable(this.closedStream, { alias: 'closed' });
         /** Event emitted when the selected value has been changed by the user. */
         this.selectionChange = output();
         /**
@@ -319,43 +269,87 @@ class KbqTreeSelect extends KbqAbstractSelect {
          * checkbox, the Ctrl/Cmd + A shortcut, or a custom `selectAllHandler` that delegates to it.
          */
         this.onSelectAll = output();
+        /** Classes to be passed to the select panel. Supports the same syntax as the `[class]` binding. */
+        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+        this.backdropClass = input('cdk-overlay-transparent-backdrop', ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
         /**
-         * Event that emits whenever the raw value of the select changes. This is here primarily
-         * to facilitate the two-way binding for the `value` input.
-         * @docs-private
+         * Name of the control, for when no element on the page carries it. Defaults to the placeholder.
+         *
+         * Prefer `aria-labelledby` and point it at visible text: a name that duplicates a visible label is one
+         * more string to keep in sync, and a name with no visible counterpart cannot be spoken back by voice
+         * control (WCAG 2.5.3).
          */
-        this.valueChange = output();
-        /** Classes to be passed to the select panel. Supports the same syntax as the `[class]` binding. */
-        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
-        this.backdropClass = input('cdk-overlay-transparent-backdrop', ...(ngDevMode ? [{ debugName: "backdropClass" }] : []));
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+        /**
+         * Id of the element that names the control. Defaults to the `kbq-label` of a wrapping `kbq-form-field`.
+         *
+         * A `role="combobox"` element takes its name from the author only, so neither the placeholder nor the
+         * selected values name it, and the `<label for>` of the form field names labelable elements only, which
+         * a custom control is not. Without a form-field label, point this at whatever visible text names the
+         * control.
+         */
+        this.ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+        /**
+         * Id of the element that names the control: its own `aria-labelledby`, or else the form-field label.
+         *
+         * @internal
+         */
+        this.resolvedAriaLabelledby = computed(() => this.ariaLabelledby() ?? this.parentFormField?.labelId() ?? null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabelledby" }] : /* istanbul ignore next */ []));
+        /** Object used to control when error messages are shown. */
+        this.errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+        /**
+         * Function used to sort the values in a select in multiple mode, by default their order in the panel.
+         * Follows the same logic as `Array.prototype.sort`. Receives two selected data nodes and every data node of the
+         * tree in panel order, collapsed branches included — a node in a collapsed branch has no option.
+         */
+        this.sortComparator = input(undefined, ...(ngDevMode ? [{ debugName: "sortComparator" }] : /* istanbul ignore next */ []));
         /**
-         * Function used to sort the values in a select in multiple mode.
-         * Follows the same logic as `Array.prototype.sort`.
+         * Decides which selected nodes the projected `KbqCleaner` removes: return `true` to clear the node,
+         * `false` to keep it. Receives the data node, not the option — a node in a collapsed branch has no
+         * option. Disabled nodes are kept by default. Bind a stable reference — a new function on every
+         * change detection re-runs the predicate over the whole selection.
+         *
+         * Not consulted by `writeValue` / `reset()`, which always clear everything. The parameter type becomes the select's
+         * `T` in a template: type it with the tree's node, not with an option.
          */
-        this.sortComparator = input(undefined, ...(ngDevMode ? [{ debugName: "sortComparator" }] : []));
+        this.clearPredicate = input(this.defaultOptions?.clearPredicate ?? ((node) => !this.isNodeDisabled(node)), { ...(ngDevMode ? { debugName: "clearPredicate" } : /* istanbul ignore next */ {}), transform: (fn) => {
+                if (typeof fn !== 'function') {
+                    throw Error('`clearPredicate` must be a function.');
+                }
+                return fn;
+            } });
         /**
          * Whether to use a multiline matcher or not. Default is false
          */
-        this.multiline = input(false, ...(ngDevMode ? [{ debugName: "multiline", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.multiline = input(false, { ...(ngDevMode ? { debugName: "multiline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Combined stream of all of the child options' change events. */
         this.optionSelectionChanges = defer(() => {
             if (this.options) {
-                return this.options.changes.pipe(startWith(this.options), switchMap(() => merge(...this.options.map((option) => outputToObservable(option.onSelectionChange)))));
+                return this.options.changes.pipe(startWith(this.options), switchMap(() => merge(...this.options.map((option) => outputToObservable(option.selectionChange)))));
             }
-            return this.ngZone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionSelectionChanges));
+            return this.optionsInitialized.pipe(switchMap(() => this.optionSelectionChanges));
         });
         /** Combined stream of all of the child options userInteraction events. */
         this.userInteractionChanges = defer(() => {
             if (this.options) {
                 return this.options.changes.pipe(startWith(this.options), switchMap(() => merge(...this.options.map((option) => option.userInteraction))));
             }
-            return this.ngZone.onStable.asObservable().pipe(take(1), switchMap(() => this.userInteractionChanges));
+            return this.optionsInitialized.pipe(switchMap(() => this.userInteractionChanges));
         });
-        this._required = false;
-        this._multiple = false;
-        this._autoSelect = true;
+        /** Emits once `options` is assigned, for subscribers that arrive before the content is resolved. */
+        this.optionsInitialized = new Subject();
+        /** Placeholder shown in the trigger while nothing is selected. */
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Whether the select is required. */
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.multipleInput = input(false, { ...(ngDevMode ? { debugName: "multipleInput" } : /* istanbul ignore next */ {}), alias: 'multiple',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.autoSelectInput = input(true, { ...(ngDevMode ? { debugName: "autoSelectInput" } : /* istanbul ignore next */ {}), alias: 'autoSelect',
+            transform: booleanAttribute });
         /** When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). */
-        this.selectAllToggle = input(false, ...(ngDevMode ? [{ debugName: "selectAllToggle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.selectAllToggle = input(false, { ...(ngDevMode ? { debugName: "selectAllToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Whether to render the "select all" master checkbox above the tree. Multiple selection only.
          *
@@ -364,30 +358,61 @@ class KbqTreeSelect extends KbqAbstractSelect {
          * 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).
          */
-        this.selectAll = input(false, ...(ngDevMode ? [{ debugName: "selectAll", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this._hasBackdrop = false;
-        this._tabIndex = 0;
-        this._disabled = false;
-        this._focused = false;
+        this.selectAll = input(false, { ...(ngDevMode ? { debugName: "selectAll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.valueState = signal(undefined, ...(ngDevMode ? [{ debugName: "valueState" }] : /* istanbul ignore next */ []));
+        /** Values of the selected nodes: an array in multiple mode. */
+        this.value = this.valueState.asReadonly();
+        /** @docs-private */
+        this.idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+        /** Unique identifier of the select, generated when not provided. */
+        this.id = computed(() => this.idInput() || this.uid, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** Whether the overlay panel is rendered on top of a backdrop. */
+        this.hasBackdrop = input(false, { ...(ngDevMode ? { debugName: "hasBackdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.tabIndexInput = input(0, { ...(ngDevMode ? { debugName: "tabIndexInput" } : /* istanbul ignore next */ {}), alias: 'tabIndex' });
+        this.validTabIndex = linkedSignal({ ...(ngDevMode ? { debugName: "validTabIndex" } : /* istanbul ignore next */ {}), source: () => this.tabIndexInput(),
+            computation: (value, previous) => (Number.isInteger(value) || value === null ? value : (previous?.value ?? 0)) });
+        /** @docs-private */
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        /** Whether the select is disabled. Also set by the bound form control. */
+        this.disabled = linkedSignal(() => this.disabledInput(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        // One signal per host value. The host bindings of every tree-select in a view run in that view's reactive
+        // consumer, where a signal read again by another binding costs a scan of everything the view has read.
+        this.resolvedTabIndex = computed(() => (this.disabled() ? -1 : this.validTabIndex()), ...(ngDevMode ? [{ debugName: "resolvedTabIndex" }] : /* istanbul ignore next */ []));
+        this.resolvedAriaLabel = computed(() => this.resolvedAriaLabelledby() ? null : this.ariaLabel() || this.placeholder() || null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.disabledAttribute = computed(() => this.disabled() || null, ...(ngDevMode ? [{ debugName: "disabledAttribute" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.disabledClass = computed(() => this.disabled(), ...(ngDevMode ? [{ debugName: "disabledClass" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.invalidClass = computed(() => this.errorState(), ...(ngDevMode ? [{ debugName: "invalidClass" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.selectAllHandlerInput = input(undefined, { ...(ngDevMode ? { debugName: "selectAllHandlerInput" } : /* istanbul ignore next */ {}), alias: 'selectAllHandler',
+            transform: kbqSelectAllHandlerTransform });
+        this.focusedValue = signal(false, ...(ngDevMode ? [{ debugName: "focusedValue" }] : /* istanbul ignore next */ []));
+        this.panelOpenValue = signal(false, ...(ngDevMode ? [{ debugName: "panelOpenValue" }] : /* istanbul ignore next */ []));
+        /** Whether the select is focused. */
+        this.focused = computed(() => this.focusedValue() || this.panelOpenValue(), ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
         /**
          * Minimum width of the panel.
          * If minWidth is larger than window width, it will be ignored.
          */
         this.panelMinWidth = input(this.defaultOptions?.panelMinWidth === undefined
             ? KBQ_PANEL_DEFAULT_MIN_WIDTH
-            : this.defaultOptions.panelMinWidth, ...(ngDevMode ? [{ debugName: "panelMinWidth", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+            : this.defaultOptions.panelMinWidth, { ...(ngDevMode ? { debugName: "panelMinWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
          * Width of the panel. If set to `auto`, the panel will match the trigger width, but will never be
          * narrower than `panelMinWidth`. If set to null or an empty string, the panel will grow to match the
          * longest option's text. Any other value is used as an exact width, and `panelMinWidth` is not applied.
          */
-        this.panelWidth = input(this.defaultOptions?.panelWidth ?? null, ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
+        this.panelWidth = input(this.defaultOptions?.panelWidth ?? null, ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
         /**
          * Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes
          * the panel narrower than the trigger, and never clamps an explicit `panelWidth`.
          * When null, the `--kbq-panel-size-width-max` token applies.
          */
-        this.panelMaxWidth = input(this.defaultOptions?.panelMaxWidth === undefined ? null : this.defaultOptions.panelMaxWidth, ...(ngDevMode ? [{ debugName: "panelMaxWidth", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.panelMaxWidth = input(this.defaultOptions?.panelMaxWidth === undefined ? null : this.defaultOptions.panelMaxWidth, { ...(ngDevMode ? { debugName: "panelMaxWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
          * 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.
@@ -395,66 +420,140 @@ class KbqTreeSelect extends KbqAbstractSelect {
          * 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.
          */
-        this.panelMaxHeight = input(this.defaultOptions?.panelMaxHeight === undefined ? null : this.defaultOptions.panelMaxHeight, ...(ngDevMode ? [{ debugName: "panelMaxHeight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.panelMaxHeight = input(this.defaultOptions?.panelMaxHeight === undefined ? null : this.defaultOptions.panelMaxHeight, { ...(ngDevMode ? { debugName: "panelMaxHeight" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
          * `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
          */
-        this.panelMaxHeightToken = computed(() => kbqResolvePanelMaxHeightToken(this.panelMaxHeight()), ...(ngDevMode ? [{ debugName: "panelMaxHeightToken" }] : []));
-        this._searchMinOptionsThreshold = this.resolveSearchMinOptionsThreshold();
+        this.panelMaxHeightToken = computed(() => kbqResolvePanelMaxHeightToken(this.panelMaxHeight()), ...(ngDevMode ? [{ debugName: "panelMaxHeightToken" }] : /* istanbul ignore next */ []));
+        /**
+         * Controls when the search functionality is displayed based on the number of available options.
+         *
+         * Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.
+         * Defaults to `undefined`.
+         */
+        this.searchMinOptionsThreshold = computed(() => this.resolveSearchMinOptionsThreshold(this.searchMinOptionsThresholdInput()) ??
+            this.resolveSearchMinOptionsThreshold(this.defaultOptions?.searchMinOptionsThreshold), ...(ngDevMode ? [{ debugName: "searchMinOptionsThreshold" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.searchMinOptionsThresholdInput = input(undefined, { ...(ngDevMode ? { debugName: "searchMinOptionsThresholdInput" } : /* istanbul ignore next */ {}), alias: 'searchMinOptionsThreshold' });
+        /**
+         * Colour of the trigger's tags and arrow.
+         *
+         * @docs-private
+         */
+        this.colorForState = computed(() => this.errorState() ? KbqComponentColors.Error : KbqComponentColors.ContrastFade, ...(ngDevMode ? [{ debugName: "colorForState" }] : /* istanbul ignore next */ []));
+        /** Full set of classes for the panel: base class, form-field theme and custom `panelClass`. */
+        this.panelClasses = computed(() => {
+            const panelClass = this.panelClass();
+            const formFieldColor = this.parentFormField?.color();
+            const classes = ['kbq-tree-select__panel', formFieldColor ? `kbq-${formFieldColor}` : ''];
+            if (typeof panelClass === 'string') {
+                classes.push(panelClass);
+            }
+            else if (Array.isArray(panelClass) || panelClass instanceof Set) {
+                classes.push(...panelClass);
+            }
+            else if (panelClass) {
+                classes.push(...Object.keys(panelClass).filter((key) => panelClass[key]));
+            }
+            return classes.filter(Boolean).join(' ');
+        }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+        /** Text of the counter of the items that do not fit into the trigger. */
+        this.hiddenItemsLabel = computed(() => this.hiddenItemsTextFormatter()(this.hiddenItemsText() ?? this.localeConfiguration().hiddenItemsText, this.hiddenItems()), ...(ngDevMode ? [{ debugName: "hiddenItemsLabel" }] : /* istanbul ignore next */ []));
         this.triggerValues = [];
         this.closeSubscription = Subscription.EMPTY;
-        this._panelOpen = false;
         /** The scroll offset the panel is restored to when it attaches — the list always opens at the top. */
         this.scrollTop = 0;
         /** Unique id for this input. */
         this.uid = `kbq-tree-select-${nextUniqueId++}`;
+        /** Id of the overlay panel, referenced by the host's `aria-controls`. */
+        this.panelId = `${this.uid}-panel`;
+        /**
+         * Whether projected content has been resolved. The search field reaches its form control through
+         * its own form field, and that is only guaranteed to have been wired by `ngAfterContentInit`.
+         */
+        this.contentInitialized = signal(false, ...(ngDevMode ? [{ debugName: "contentInitialized" }] : /* istanbul ignore next */ []));
+        /**
+         * The last value the form wrote while the tree could not resolve all of it yet — before the content was
+         * initialized, or before the data held every node it names. Applied again as the data changes, until every node
+         * is found or the selection is reported to the form.
+         */
+        this.pendingValue = null;
+        /** The data nodes {@link pendingValue} was last resolved against. */
+        this.pendingValueDataNodes = null;
+        /** Whether the selection is being set to a value the form wrote, which is no change to report back. */
+        this.writingValue = false;
+        /** Handles of the timers that outlive the call that scheduled them. */
+        this.pendingTimers = new Set();
         this.destroyRef = inject(DestroyRef);
-        /** `View -> model callback called when value changes` */
+        /**
+         * Called when the value changes. Needed to properly implement `ControlValueAccessor`.
+         *
+         * @docs-private
+         */
         this.onChange = () => { };
-        /** `View -> model callback called when select has been touched` */
+        /**
+         * Called when the control is blurred. Needed to properly implement `ControlValueAccessor`.
+         *
+         * @docs-private
+         */
         this.onTouched = () => { };
+        this.emptyValue = signal(true, ...(ngDevMode ? [{ debugName: "emptyValue" }] : /* istanbul ignore next */ []));
+        /** Whether no node is selected. */
+        this.empty = this.emptyValue.asReadonly();
+        /**
+         * Recounts the tags of the trigger that do not fit on its first line and refreshes the "+N"
+         * counter. Runs on window resize and whenever the rendered tags change.
+         *
+         * @docs-private
+         */
         this.calculateHiddenItems = () => {
             if (!this.isBrowser ||
                 this.customTrigger() ||
                 this.customMatcher() ||
-                this.empty ||
+                this.empty() ||
                 !this.multiple ||
                 this.multiline())
                 return;
-            const totalItemsWidth = this.getTotalItemsWidthInMatcher();
-            const [totalVisibleItemsWidth, visibleItems] = this.getTotalVisibleItems();
-            this.hiddenItems = this.selectionModel.selected.length - visibleItems;
+            const { totalItemsWidth, visibleItems } = this.measureMatcherItems();
+            this.hiddenItems.set(this.selectionModel.selected.length - visibleItems);
             this.changeDetectorRef.detectChanges();
-            if (this.hiddenItems) {
+            if (this.hiddenItems()) {
                 const itemsCounter = this.trigger().nativeElement.querySelector('.kbq-select__match-hidden-text');
                 const matcherList = this.trigger().nativeElement.querySelector('.kbq-select__match-list');
-                if (!itemsCounter || !matcherList) {
-                    this.changeDetectorRef.markForCheck();
+                if (!itemsCounter || !matcherList)
                     return;
-                }
                 const itemsCounterShowed = itemsCounter.offsetTop < itemsCounter.offsetHeight;
                 const itemsCounterWidth = Math.floor(itemsCounter.getBoundingClientRect().width);
                 const matcherListWidth = Math.floor(matcherList.getBoundingClientRect().width);
                 const matcherWidth = matcherListWidth + (itemsCounterShowed ? itemsCounterWidth : 0);
                 if (itemsCounterShowed && totalItemsWidth < matcherWidth) {
-                    this.hiddenItems = 0;
+                    this.hiddenItems.set(0);
                     this.changeDetectorRef.detectChanges();
                 }
-                if (totalVisibleItemsWidth === matcherListWidth ||
-                    totalVisibleItemsWidth + itemsCounterWidth < matcherListWidth) {
-                    this.changeDetectorRef.markForCheck();
-                    return;
-                }
             }
-            this.changeDetectorRef.markForCheck();
-        };
-        this.updateLocaleParams = () => {
-            this.hiddenItemsText = this.localeService?.getParams('select').hiddenItemsText;
-            this.changeDetectorRef.markForCheck();
         };
-        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
+        // The selection model is created with the multiplicity of the first binding and cannot follow a change.
+        effect(() => {
+            const multiple = this.multipleInput();
+            if (this.multipleValue !== undefined && multiple !== this.multipleValue) {
+                throw getKbqSelectDynamicMultipleError();
+            }
+        });
+        // A disabled select reports no focus to its form field.
+        let wasDisabled = false;
+        effect(() => {
+            const disabled = this.disabled();
+            if (disabled === wasDisabled)
+                return;
+            wasDisabled = disabled;
+            const formField = this.parentFormField;
+            if (formField) {
+                Promise.resolve().then(() => this.disabled() ? formField.stopFocusMonitor() : formField.runFocusMonitor());
+            }
+        });
         // The tree owns the "select all" row — it is the only place that can put it in front of the nodes
         // and into the key manager's list. Mirrored through an effect rather than assigned once in
         // `ngAfterContentInit` so a `[selectAll]` bound to a changing expression keeps working.
@@ -464,13 +563,30 @@ class KbqTreeSelect extends KbqAbstractSelect {
                 tree.selectAll = this.selectAll();
             }
         });
+        // `search` is projected content and can come and go with an `@if`, so both the wiring that
+        // follows it and the flag the tree reads on blur have to be re-applied, not read once.
+        // Gated on content init because the search reaches its control through its own form field,
+        // which is only guaranteed to have resolved by then.
+        effect((onCleanup) => {
+            const tree = this.tree();
+            const search = this.search();
+            if (!tree || !this.contentInitialized())
+                return;
+            tree.optionShouldHoldFocusOnBlur = !!search;
+            if (!search)
+                return;
+            const subscription = this.subscribeOnSearchChanges(tree, search);
+            onCleanup(() => subscription?.unsubscribe());
+        });
+        this.destroyRef.onDestroy(() => {
+            this.pendingTimers.forEach(clearTimeout);
+            this.pendingTimers.clear();
+        });
         if (this.ngControl) {
             // Note: we provide the value accessor through here, instead of
             // the `providers` to avoid running into a circular import.
             this.ngControl.valueAccessor = this;
         }
-        // Force setter to be called in case id was not specified.
-        this.id = this.id;
         afterNextRender(() => {
             if (this.multiple && !this.multiline()) {
                 merge(fromEvent(this.window, 'resize'), this.tags.changes)
@@ -480,22 +596,20 @@ class KbqTreeSelect extends KbqAbstractSelect {
         });
     }
     ngOnInit() {
-        this.stateChanges.next();
-        // We need `distinctUntilChanged` here, because some browsers will
-        // fire the animation end event twice for the same animation. See:
-        // https://github.com/angular/angular/issues/24084
+        // Only the latest report of a frame is delivered, so a close and a reopen within one frame repeat the
+        // state delivered before; `distinctUntilChanged` keeps `openedChange` from emitting it twice.
         this.panelDoneAnimatingStream
             .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             if (this.panelOpen) {
-                this.scrollTop = 0;
-                setTimeout(() => {
+                this.scheduleTimeout(() => {
                     this.highlightCorrectOption();
                     const search = this.search();
                     if (search) {
                         search.focus();
                     }
                 });
+                this.scrollbarViewport()?.flashScrollIndicators();
                 this.openedChange.emit(true);
             }
             else {
@@ -515,13 +629,20 @@ class KbqTreeSelect extends KbqAbstractSelect {
         if (!tree)
             return;
         tree.resetFocusedItemOnBlur = false;
-        tree.optionShouldHoldFocusOnBlur = !!this.search();
-        this.selectionModel = tree.selectionModel = new SelectionModel(this.multiSelection);
+        this.multipleValue = this.multipleInput();
+        this.selectionModel = new SelectionModel(this.multiSelection);
+        this.syncSelectionState();
         this.selectionModel.changed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this.onChange(this.selectedValues);
+            this.syncSelectionState();
+            // Neither a written value nor the tree re-pointing the selection at reloaded data is the user's change.
+            if (!this.writingValue && !tree.syncingSelection) {
+                this.reportValue();
+            }
             if (this.multiSelection) {
                 this.refreshTriggerValues();
             }
+            // The trigger renders the selection, whichever way it changed (a click, `writeValue`, select all).
+            this.changeDetectorRef.markForCheck();
         });
         this.selectionModel.changed.pipe(delay(0), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             // A multiline trigger grows with every selected option, and this is the one signal guaranteed
@@ -529,30 +650,43 @@ class KbqTreeSelect extends KbqAbstractSelect {
             this.updatePanelAnchor();
             this.setOverlayPosition();
         });
-        // eslint-disable-next-line @angular-eslint/no-lifecycle-call
-        tree.ngAfterContentInit();
+        // Hands the tree the model this component owns. Re-running `tree.ngAfterContentInit()` was the
+        // old way of doing it and left the tree with a second set of subscribers on query lists that are
+        // never re-created — every options change handled twice, for the lifetime of the component.
+        tree.initializeForEmbedding(this.selectionModel);
+        tree.renderedOptions.changes.pipe(delay(0), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            // A value written ahead of its data, such as one loaded over HTTP, is applied once the nodes arrive.
+            if (this.pendingValue && tree.treeControl.dataNodes !== this.pendingValueDataNodes) {
+                this.applyPendingValue();
+            }
+            // Options render after the first value reaches the control, so the trigger is built before any
+            // of them exists and its `disabled` flags can be stale.
+            if (this.multiSelection && this.hasStaleTriggerValues()) {
+                this.refreshTriggerValues();
+            }
+        });
         this.initKeyManager();
         this.options = tree.renderedOptions;
         tree.autoSelect = this.autoSelect;
         // Single place the event is raised, so a click on the master checkbox and Ctrl/Cmd + A — which
         // both go through `selectAllOptions` — emit exactly once and with the same payload.
-        outputToObservable(tree.onSelectAll)
+        outputToObservable(tree.selectAllChange)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(({ options }) => this.onSelectAll.emit(new KbqSelectAllEvent(this, options, tree.allOptionsSelected)));
         // Tree lives inside the select panel: enable hover-to-focus on options even without a
         // wrapping form-field (e.g. filter-bar pipes render the tree-select bare).
         tree.inSelect = true;
-        if (tree.multipleMode === null) {
-            // setTimeout need for prevent an error "NG0100: ExpressionChangedAfterItHasBeenCheckedError"
-            setTimeout(() => (this.tree().multipleMode = this.multiSelection ? MultipleMode.CHECKBOX : null));
+        if (tree.multipleMode === null && this.multiSelection) {
+            tree.multipleMode = MultipleMode.CHECKBOX;
         }
         if (this.multiSelection) {
             tree.noUnselectLast = false;
         }
-        if (this.tempValues) {
-            this.setSelectionByValue(this.tempValues);
-            this.tempValues = null;
+        // A missing value written ahead of the content leaves the selection as empty as it starts.
+        if (this.pendingValue?.value === null || this.pendingValue?.value === undefined) {
+            this.pendingValue = null;
         }
+        this.applyPendingValue();
         this.userInteractionChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             if (!this.multiSelection && this.panelOpen) {
                 this.close();
@@ -562,7 +696,9 @@ class KbqTreeSelect extends KbqAbstractSelect {
         tree.selectionChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
             this.selectionChange.emit(new KbqTreeSelectChange(this, event.option, false, event.options));
             const search = this.search();
-            if (search) {
+            // Guarded the same way every other refocus in the component is: with the field hidden by
+            // `searchMinOptionsThreshold` there is nothing to give the caret back to.
+            if (search && this.shouldShowSearch()) {
                 search.focus();
             }
         });
@@ -574,7 +710,9 @@ class KbqTreeSelect extends KbqAbstractSelect {
                 this.tree().keyManager.setActiveItem(this.options.find(({ data }) => data === added[0]));
             });
         }
-        this.subscribeOnSearchChanges();
+        this.contentInitialized.set(true);
+        this.optionsInitialized.next();
+        this.optionsInitialized.complete();
     }
     ngAfterViewInit() {
         const tree = this.tree();
@@ -584,53 +722,44 @@ class KbqTreeSelect extends KbqAbstractSelect {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.setOverlayPosition());
     }
+    ngAfterViewChecked() {
+        // Syncs the list here so `changes` emits once this view is checked.
+        this.tagsList();
+    }
     ngOnDestroy() {
-        this.stateChanges.complete();
+        this.panelDoneAnimatingStream.complete();
+        this.openedChange.complete();
         this.closeSubscription.unsubscribe();
         this.unsubscribeFromPanelResize();
     }
     updateErrorState() {
-        const oldState = this.errorState;
-        const parent = this.parentFormGroup || this.parentForm;
-        const matcher = this.errorStateMatcher || this.defaultErrorStateMatcher;
-        const control = this.ngControl ? this.ngControl.control : null;
-        const newState = matcher.isErrorState(control, parent);
-        if (newState !== oldState) {
-            this.errorState = newState;
-            this.stateChanges.next();
-        }
-    }
-    hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) {
-        return hiddenItemsText.replace('{{ number }}', hiddenItems.toString());
+        this.errorStateTracker.errorStateMatcher = this.errorStateMatcher();
+        this.errorStateTracker.updateErrorState();
     }
     /**
-     * Clears the current selection.
+     * Clears the nodes `clearPredicate` accepts; disabled ones are kept by default.
+     *
+     * Deselects on the model directly: `tree.setOptionsFromValues([])` starts by clearing the whole
+     * model and would take the kept nodes with it.
+     *
      * @docs-private
      */
     clear() {
-        this.selectionModel.clear();
-        this.tree().keyManager.setActiveItem(-1);
-        this.setSelectionByValue([]);
-        this.onChange(this.selectedValues);
-        this.selectionChange.emit(new KbqTreeSelectChange(this, this.selectedValues));
+        untracked(() => {
+            const targets = this.clearTargets;
+            this.selectionModel.deselect(...targets);
+            this.tree().keyManager.setActiveItem(-1);
+            this.changeDetectorRef.detectChanges();
+            this.reportValue();
+            this.selectionChange.emit(new KbqTreeSelectChange(this, null, false, targets));
+        });
     }
-    /**
-     * Clears the current selection.
-     * @deprecated Activate the projected `KbqCleaner` instead.
-     * @docs-private
-     */
-    clearValue(event) {
-        const cleaner = this.cleaner();
-        if (cleaner) {
-            cleaner.clear(event);
-        }
-        else {
-            event.stopPropagation();
-            event.preventDefault();
-            this.clear();
-            this.focus();
-        }
+    /** Reports the selection to the form, which then holds it instead of a value still waiting for its nodes. */
+    reportValue() {
+        this.pendingValue = null;
+        this.onChange(this.selectedValues);
     }
+    /** Host click handler. A custom matcher that opts out of the default handlers takes it over. */
     handleClick() {
         const customMatcher = this.customMatcher();
         if (customMatcher && !customMatcher.useDefaultHandlers())
@@ -638,15 +767,25 @@ class KbqTreeSelect extends KbqAbstractSelect {
         this.toggle();
     }
     toggle() {
-        if (this.panelOpen) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
+        // Untracked, like the other imperative methods: called from a consumer's `effect()`, the state read on the
+        // way — `panelOpen`, `disabled`, the options, the inputs — would make the effect run again on every open
+        // and close.
+        untracked(() => {
+            if (this.panelOpen) {
+                this.close();
+            }
+            else {
+                this.open();
+            }
+        });
     }
     open() {
-        if (this.disabled || !this.options || !this.options.length || this._panelOpen)
+        untracked(() => this.attachPanel());
+    }
+    attachPanel() {
+        if (this.disabled() || !this.options || this.panelOpenValue())
+            return;
+        if (!this.options.length && !this.noOptionsMessage())
             return;
         // add check for form-field bounding rectangles, since it adds extra padding around the trigger
         this.triggerRect = (this.parentFormField?.getConnectedOverlayOrigin().nativeElement || this.trigger().nativeElement).getBoundingClientRect();
@@ -660,37 +799,51 @@ class KbqTreeSelect extends KbqAbstractSelect {
             this.overlayOrigin = this.parentFormField.getConnectedOverlayOrigin();
         }
         this.updateOverlayWidth(this.panelWidth(), this.panelMinWidth(), this.overlayOrigin ?? this.elementRef);
-        this._panelOpen = true;
+        this.panelOpenValue.set(true);
         this.changeDetectorRef.markForCheck();
         // Set the font size on the panel element once it exists.
-        this.ngZone.onStable
-            .asObservable()
-            .pipe(take(1))
-            .subscribe(() => {
+        afterNextRender(() => {
             if (this.triggerFontSize && this.overlayDir.overlayRef && this.overlayDir.overlayRef.overlayElement) {
                 this.overlayDir.overlayRef.overlayElement.style.fontSize = `${this.triggerFontSize}px`;
             }
             if (this.search()) {
                 this.lockOverlayWidthForSearch(this.panel());
             }
-        });
+        }, { injector: this.injector });
+        this.reportPanelRendered('showing');
     }
     /** Closes the overlay panel and focuses the host element. */
     close() {
-        if (!this._panelOpen) {
+        untracked(() => {
+            if (!this.panelOpenValue()) {
+                return;
+            }
+            this.panelOpenValue.set(false);
+            this.unsubscribeFromPanelResize();
+            // Back to the two default sides, so the next open is not resolved against a first row that has since
+            // changed height.
+            this.positions = this.withOverlapPosition(this.positions, null) ?? this.positions;
+            this.changeDetectorRef.markForCheck();
+            this.onTouched();
+            const search = this.search();
+            if (search) {
+                search.reset();
+            }
+            this.reportPanelRendered('void');
+        });
+    }
+    /**
+     * Reports the panel rendered or removed once the next render has applied `panelOpen`; only the latest
+     * report of a frame is delivered.
+     */
+    reportPanelRendered(state) {
+        this.panelRender?.destroy();
+        // The overlay detaching while the select is destroyed closes it too.
+        if (this.destroyRef.destroyed)
             return;
-        }
-        this._panelOpen = false;
-        this.unsubscribeFromPanelResize();
-        // Back to the two default sides, so the next open is not resolved against a first row that has since
-        // changed height.
-        this.positions = this.withOverlapPosition(this.positions, null) ?? this.positions;
-        this.changeDetectorRef.markForCheck();
-        this.onTouched();
-        const search = this.search();
-        if (search) {
-            search.reset();
-        }
+        this.panelRender = afterNextRender(() => this.panelDoneAnimatingStream.next(state), {
+            injector: this.injector
+        });
     }
     /**
      * Sets the select's value. Part of the ControlValueAccessor interface
@@ -699,11 +852,30 @@ class KbqTreeSelect extends KbqAbstractSelect {
      * @param value New value to be written to the model.
      */
     writeValue(value) {
-        if (this.tree()?.treeControl) {
-            this.setSelectionByValue(value);
-        }
-        else {
-            this.tempValues = value;
+        // Untracked: a form control set from an `effect()` writes here synchronously.
+        untracked(() => {
+            this.pendingValue = { value };
+            // Until then the select has no selection model shared with the tree, and `ngAfterContentInit` applies it.
+            if (this.contentInitialized()) {
+                this.applyPendingValue();
+            }
+        });
+    }
+    /** Applies the value the form wrote last, and lets it go once the data holds every node it names. */
+    applyPendingValue() {
+        const pending = this.pendingValue;
+        const treeControl = this.tree()?.treeControl;
+        if (!pending || !treeControl)
+            return;
+        // Dropped first, so a value that throws is not applied again with every change of the data.
+        this.pendingValue = null;
+        this.pendingValueDataNodes = treeControl.dataNodes;
+        this.setSelectionByValue(pending.value);
+        const { value } = pending;
+        const values = value === null || value === undefined ? [] : this.multiSelection && Array.isArray(value) ? value : [value];
+        // Unless another value was written meanwhile.
+        if (this.pendingValue === null && !values.every((item) => treeControl.hasValue(item))) {
+            this.pendingValue = pending;
         }
     }
     /**
@@ -723,7 +895,6 @@ class KbqTreeSelect extends KbqAbstractSelect {
      *
      * @param fn Callback to be triggered when the component has been touched.
      */
-    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
@@ -734,9 +905,7 @@ class KbqTreeSelect extends KbqAbstractSelect {
      * @param isDisabled Sets whether the component is disabled.
      */
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.changeDetectorRef.markForCheck();
-        this.stateChanges.next();
+        this.disabled.set(isDisabled);
     }
     get selected() {
         return this.multiSelection ? this.selectionModel?.selected : this.selectionModel?.selected[0];
@@ -746,25 +915,25 @@ class KbqTreeSelect extends KbqAbstractSelect {
         return this.multiSelection ? selectedValues : selectedValues[0];
     }
     get triggerValue() {
-        if (this.empty) {
+        if (this.empty()) {
             return '';
         }
+        // Shown in single selection, where `selected` is the node.
         return this.tree().treeControl.getViewValue(this.selected);
     }
-    get empty() {
-        return !this.selectionModel || this.selectionModel.isEmpty();
-    }
-    isRtl() {
-        return this.dir ? this.dir.value === 'rtl' : false;
-    }
+    /** First selected node that is not disabled — the one the panel highlights when it opens. */
     get firstSelected() {
         return this.selectionModel.selected.filter((node) => !this.tree().treeControl.isDisabled(node))[0];
     }
+    /**
+     * Host keydown handler, routing the event to the trigger or the panel handler. A custom matcher
+     * that opts out of the default handlers reaches those two directly instead.
+     */
     handleKeydown(event) {
         const customMatcher = this.customMatcher();
         if (customMatcher && !customMatcher.useDefaultHandlers())
             return;
-        if (!this.disabled) {
+        if (!this.disabled()) {
             if (this.panelOpen) {
                 this.panelKeydownHandler(event);
             }
@@ -777,9 +946,8 @@ class KbqTreeSelect extends KbqAbstractSelect {
         const customMatcher = this.customMatcher();
         if (customMatcher && !customMatcher.useDefaultHandlers())
             return;
-        if (!this.disabled) {
-            this._focused = true;
-            this.stateChanges.next();
+        if (!this.disabled()) {
+            this.focusedValue.set(true);
         }
     }
     /**
@@ -790,25 +958,29 @@ class KbqTreeSelect extends KbqAbstractSelect {
         const customMatcher = this.customMatcher();
         if (customMatcher && !customMatcher.useDefaultHandlers())
             return;
-        this._focused = false;
-        if (!this.disabled && !this.panelOpen) {
+        this.focusedValue.set(false);
+        if (!this.disabled() && !this.panelOpen) {
             this.onTouched();
             this.changeDetectorRef.markForCheck();
-            this.stateChanges.next();
         }
     }
     /** Callback that is invoked when the overlay panel has been attached. */
     onAttached() {
+        // `cdkConnectedOverlay` creates and attaches the overlay in one go, so this is the first point it exists.
+        this.overlayLayers.adopt(this.overlayDir.overlayRef, this.elementRef.nativeElement);
         this.overlayDir.positionChange.pipe(take(1)).subscribe(() => {
             this.changeDetectorRef.detectChanges();
             this.setOverlayPosition();
             // The panel itself is an `overflow: hidden` box; the option list is what scrolls.
-            this.optionsContainer().nativeElement.scrollTop = this.scrollTop;
+            this.scrollbarViewport()?.scrollTo({ top: this.scrollTop });
             this.tree().updateScrollSize();
             // Deliberately out of this frame — see `reanchorPanel`. A microtask still lands before paint.
             queueMicrotask(() => this.reanchorPanel());
         });
         this.subscribeToPanelResize();
+        // This runs on every open, so without dropping the previous subscription every open would add
+        // another one and a single outside click would call `close()` once per open so far.
+        this.closeSubscription.unsubscribe();
         this.closeSubscription = this.closingActions().subscribe(() => this.close());
     }
     /** Element the overlay is positioned and sized against. */
@@ -816,43 +988,51 @@ class KbqTreeSelect extends KbqAbstractSelect {
         return this.parentFormField?.getConnectedOverlayOrigin().nativeElement ?? this.trigger()?.nativeElement;
     }
     isPanelOpen() {
-        return this._panelOpen;
-    }
-    /** Returns the theme to be used on the panel. */
-    getPanelTheme() {
-        return this.parentFormField ? `kbq-${this.parentFormField.color}` : '';
-    }
-    /** Returns the full set of classes for the panel: base class, theme and custom `panelClass`. */
-    getPanelClasses() {
-        const panelClass = this.panelClass();
-        const classes = ['kbq-tree-select__panel', this.getPanelTheme()];
-        if (typeof panelClass === 'string') {
-            classes.push(panelClass);
-        }
-        else if (Array.isArray(panelClass) || panelClass instanceof Set) {
-            classes.push(...panelClass);
-        }
-        else if (panelClass) {
-            classes.push(...Object.keys(panelClass).filter((key) => panelClass[key]));
-        }
-        return classes.filter(Boolean).join(' ');
+        return this.panelOpenValue();
     }
     focus() {
         this.elementRef.nativeElement.focus();
     }
     /**
      * Implemented as part of KbqFormFieldControl.
+     *
      * @docs-private
      */
     onContainerClick() {
         this.focus();
     }
-    /** Invoked when an option is clicked. */
+    /** Removes an option from the selection through the trailing icon of its tag in the trigger. */
     onRemoveSelectedOption(selectedOption, $event) {
         $event.stopPropagation();
-        this.selectionModel.deselect(this.selected.find((value) => this.tree().treeControl.getValue(value) === selectedOption.value));
+        // Only removable tags render the icon, so this is also the index of the icon among them.
+        const removedIndex = this.triggerValues
+            .filter(({ disabled }) => !disabled)
+            .findIndex(({ value }) => value === selectedOption.value);
+        const removed = this.selectionModel.selected.find((node) => this.tree().treeControl.getValue(node) === selectedOption.value);
+        if (removed !== undefined) {
+            this.selectionModel.deselect(removed);
+        }
         this.selectionChange.emit(new KbqTreeSelectChange(this, this.options.find((option) => option.value === selectedOption.value) || selectedOption.value));
-        this.onChange(this.selectedValues);
+        this.reportValue();
+        this.restoreFocusAfterRemoval(removedIndex);
+    }
+    /**
+     * Takes the focus off the remove icon that has just been destroyed along with its tag.
+     *
+     * The trigger is rebuilt synchronously — `selectionModel.changed` runs `refreshTriggerValues()`,
+     * which calls `detectChanges()` — so by the time the click handler returns the icon the keyboard was
+     * on is gone and the focus has fallen back to the document body. Hands it to the icon that took the
+     * removed tag's place, or to the control itself once no removable tag is left.
+     */
+    restoreFocusAfterRemoval(removedIndex) {
+        const removeIcons = this.trigger().nativeElement.querySelectorAll('[kbqTagRemove]');
+        const next = removeIcons[Math.min(removedIndex, removeIcons.length - 1)];
+        if (next) {
+            next.focus();
+        }
+        else {
+            this.focus();
+        }
     }
     triggerKeydownHandler(event) {
         const keyCode = event.keyCode;
@@ -873,7 +1053,7 @@ class KbqTreeSelect extends KbqAbstractSelect {
         const keyCode = event.keyCode;
         const isArrowKey = keyCode === DOWN_ARROW || keyCode === UP_ARROW;
         const tree = this.tree();
-        if ((isArrowKey && event.altKey) || keyCode === ESCAPE || keyCode === TAB) {
+        if ((isArrowKey && event.altKey) || keyCode === ESCAPE) {
             // Close the select on ALT + arrow key to match the native <select>
             event.preventDefault();
             // Prevent ESCAPE from bubbling to ancestor (when inside overlay)
@@ -883,8 +1063,15 @@ class KbqTreeSelect extends KbqAbstractSelect {
             this.close();
             this.focus();
         }
+        else if (keyCode === TAB) {
+            // Deliberately not `preventDefault`-ed. Closing the panel and pulling the focus back to the
+            // host is all this control has to do; the browser then moves on to the next control the way
+            // Tab always does. Swallowing the key trapped the focus inside an open select.
+            this.close();
+            this.focus();
+        }
         else if (keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW) {
-            this.originalOnKeyDown.call(tree, event);
+            tree.handleKeydown(event);
             // LEFT_ARROW moves focus to the parent option when the active one is already collapsed,
             // so the search field has to be given the caret back, the same way the other keys do below.
             const search = this.search();
@@ -912,7 +1099,7 @@ class KbqTreeSelect extends KbqAbstractSelect {
         else if ((keyCode === ENTER || keyCode === SPACE) && tree.keyManager.activeItem) {
             event.preventDefault();
             if (!this.autoSelect) {
-                this.originalOnKeyDown.call(tree, event);
+                tree.handleKeydown(event);
             }
             else {
                 this.close();
@@ -957,9 +1144,20 @@ class KbqTreeSelect extends KbqAbstractSelect {
         // reading the tree's own authoritative node count instead of subtracting from `options.length`
         // sidesteps that race entirely, rather than risking the two going momentarily out of step.
         const optionsCount = this.tree()?.nodesCount ?? this.options.length;
-        return (isUndefined(this.searchMinOptionsThreshold) ||
+        return (isUndefined(this.searchMinOptionsThreshold()) ||
             !!this.search()?.value() ||
-            optionsCount >= this.searchMinOptionsThreshold);
+            optionsCount >= this.searchMinOptionsThreshold());
+    }
+    /**
+     * Runs `callback` after the current task, keeping the handle so that destroying the component
+     * cancels it. A timer left to fire after teardown runs against a component that is already gone.
+     */
+    scheduleTimeout(callback) {
+        const handle = setTimeout(() => {
+            this.pendingTimers.delete(handle);
+            callback();
+        });
+        this.pendingTimers.add(handle);
     }
     closingActions() {
         const backdrop = this.overlayDir.overlayRef.backdropClick();
@@ -969,33 +1167,34 @@ class KbqTreeSelect extends KbqAbstractSelect {
         const detachments = this.overlayDir.overlayRef.detachments();
         return merge(backdrop, outsidePointerEvents, detachments);
     }
-    getTotalItemsWidthInMatcher() {
-        const triggerClone = this.buildTriggerClone();
-        triggerClone.querySelector('.kbq-select__match-hidden-text')?.remove();
-        this.renderer.appendChild(this.trigger().nativeElement, triggerClone);
-        let totalItemsWidth = 0;
-        const selectedItemsViewValueContainers = triggerClone.querySelectorAll('kbq-tag');
-        selectedItemsViewValueContainers.forEach((item) => (totalItemsWidth += this.getItemWidth(item)));
-        triggerClone.remove();
-        return totalItemsWidth;
-    }
-    getTotalVisibleItems() {
+    /**
+     * Measures the tags of the matcher on an off-screen copy of the trigger.
+     *
+     * Two answers are needed — how many tags fit on the first line next to the "+N" counter, and how
+     * wide all of them are together — and they used to cost a clone each. One clone is enough: it is
+     * built, appended and removed once, and the only thing separating the two passes is the counter,
+     * which the second pass drops from the copy.
+     */
+    measureMatcherItems() {
         const triggerClone = this.buildTriggerClone();
         const hiddenText = triggerClone.querySelector('.kbq-select__match-hidden-text');
         if (hiddenText) {
             this.renderer.setStyle(hiddenText, 'display', 'block');
         }
         this.renderer.appendChild(this.trigger().nativeElement, triggerClone);
-        let visibleItemsCount = 0;
-        let totalVisibleItemsWidth = 0;
+        let visibleItems = 0;
         triggerClone.querySelectorAll('kbq-tag').forEach((item) => {
             if (item.offsetTop < item.offsetHeight) {
-                totalVisibleItemsWidth += this.getItemWidth(item);
-                visibleItemsCount++;
+                visibleItems++;
             }
         });
+        hiddenText?.remove();
+        let totalItemsWidth = 0;
+        triggerClone
+            .querySelectorAll('kbq-tag')
+            .forEach((item) => (totalItemsWidth += this.getItemWidth(item)));
         triggerClone.remove();
-        return [totalVisibleItemsWidth, visibleItemsCount];
+        return { totalItemsWidth, visibleItems };
     }
     buildTriggerClone() {
         const triggerClone = this.trigger().nativeElement.cloneNode(true);
@@ -1018,11 +1217,20 @@ class KbqTreeSelect extends KbqAbstractSelect {
         const marginRight = parseFloat(computedStyle.marginRight) || 0;
         return width + marginLeft + marginRight + parseInt(SizeXxs);
     }
+    /** Whether the trigger's tags still agree with the selection about which nodes are disabled. */
+    hasStaleTriggerValues() {
+        const selected = this.selectionModel.selected;
+        return (this.triggerValues.length === selected.length &&
+            selected.some((node, index) => this.triggerValues[index].disabled !== this.isNodeDisabled(node)));
+    }
     refreshTriggerValues() {
+        const treeControl = this.tree().treeControl;
         this.triggerValues = this.selectionModel.selected.map((node) => ({
-            value: this.tree().treeControl.getValue(node),
-            viewValue: this.tree().treeControl.getViewValue(node),
-            disabled: this.tree().treeControl.isDisabled(node)
+            value: treeControl.getValue(node),
+            viewValue: treeControl.getViewValue(node),
+            // `treeControl` alone would miss a node disabled through the option's own input and give it
+            // a remove icon — one-by-one removal of exactly what the cleaner keeps.
+            disabled: this.isNodeDisabled(node)
         }));
         this.changeDetectorRef.detectChanges();
     }
@@ -1031,42 +1239,76 @@ class KbqTreeSelect extends KbqAbstractSelect {
      * found with the designated value, the select trigger is cleared.
      */
     setSelectionByValue(value) {
-        if (this.multiSelection && value) {
-            if (!Array.isArray(value)) {
-                throw getKbqSelectNonArrayValueError();
+        // Restored rather than cleared: a value written while this one is applied must not end the outer write.
+        const wasWritingValue = this.writingValue;
+        this.writingValue = true;
+        try {
+            if (this.multiSelection && value) {
+                if (!Array.isArray(value)) {
+                    throw getKbqSelectNonArrayValueError();
+                }
+                this.tree().setOptionsFromValues(value);
+                this.sortValues();
+            }
+            else {
+                this.tree().setOptionsFromValues([value]);
             }
-            this.tree().setOptionsFromValues(value);
-            this.sortValues();
         }
-        else {
-            this.tree().setOptionsFromValues([value]);
+        finally {
+            this.writingValue = wasWritingValue;
         }
         this.changeDetectorRef.detectChanges();
     }
     initKeyManager() {
         const tree = this.tree();
-        this.originalOnKeyDown = tree.onKeyDown;
-        tree.onKeyDown = () => { };
+        // The select routes every key itself and calls back into `tree.handleKeydown` for the parts it
+        // delegates, so the tree must not also act on the same event from its own host listener.
+        tree.ownsKeyboard = false;
+        // `panelKeydownHandler` forwards every unhandled key to the tree's key manager, and the search
+        // field sits inside the panel — so its query would otherwise drive the tree's type-ahead.
+        tree.typeAhead = !this.search();
         tree.keyManager.change.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             const treeValue = this.tree();
-            if (this._panelOpen && this.panel()) {
+            if (this.panelOpenValue() && this.panel()) {
                 this.scrollActiveOptionIntoView();
             }
-            else if (!this._panelOpen && !this.multiSelection && treeValue.keyManager.activeItem) {
+            else if (!this.panelOpenValue() &&
+                !this.multiSelection &&
+                treeValue.keyManager.activeItem &&
+                // The active option follows a written value, or the selection the tree re-pointed at reloaded data;
+                // selecting it again would report it as the user's.
+                !this.writingValue &&
+                !treeValue.syncingSelection) {
                 treeValue.keyManager.activeItem.selectViaInteraction();
             }
         });
     }
-    /** Sorts the selected values in the selected based on their order in the panel. */
+    /**
+     * Sorts the selected nodes by their order in the panel, collapsed branches included, or with `sortComparator`.
+     * A node missing from the data sorts after every node in it.
+     */
     sortValues() {
-        if (this.multiSelection) {
-            const options = this.options.toArray();
-            this.selectionModel.sort((a, b) => {
-                const sortComparator = this.sortComparator();
-                return sortComparator ? sortComparator(a, b, options) : options.indexOf(a) - options.indexOf(b);
-            });
-            this.stateChanges.next();
+        if (!this.multiSelection)
+            return;
+        const nodes = this.tree().treeControl.dataNodes ?? [];
+        const sortComparator = this.sortComparator();
+        if (sortComparator) {
+            this.selectionModel.sort((a, b) => sortComparator(a, b, nodes));
         }
+        else {
+            // Indexed once: `indexOf` in the comparator would scan the whole data set on every comparison.
+            const order = new Map(nodes.map((node, index) => [node, index]));
+            const indexOf = (node) => order.get(node) ?? nodes.length;
+            this.selectionModel.sort((a, b) => indexOf(a) - indexOf(b));
+        }
+        this.syncSelectionState();
+        // The tags were built while the model emitted, ahead of the sort.
+        this.refreshTriggerValues();
+    }
+    /** Mirrors the selection into the `value` and `empty` signals. */
+    syncSelectionState() {
+        this.emptyValue.set(this.selectionModel.isEmpty());
+        this.valueState.set(this.selectedValues);
     }
     /**
      * Highlights the selected item. If no option is selected, it will highlight
@@ -1092,19 +1334,29 @@ class KbqTreeSelect extends KbqAbstractSelect {
     scrollActiveOptionIntoView() {
         this.tree().keyManager.activeItem?.focus();
     }
-    subscribeOnSearchChanges() {
-        const search = this.search();
-        if (!search?.ngControl.valueChanges)
+    /**
+     * Keeps `isEmptySearchResult` in step with the search field.
+     *
+     * The flag is read back once the tree has had the chance to re-render for the new query. Waiting on
+     * the rendered set alone is not enough: a query that filters nothing out leaves the option list —
+     * and therefore its `changes` — silent, and the flag kept answering for the query before it. The
+     * timer is the floor that covers that case.
+     */
+    subscribeOnSearchChanges(tree, search) {
+        const ngControl = search.ngControl;
+        const valueChanges = ngControl?.valueChanges;
+        if (!ngControl || !valueChanges)
             return;
-        search.ngControl.valueChanges
-            .pipe(audit(() => this.tree().unorderedOptions.changes), takeUntilDestroyed(this.destroyRef))
-            .subscribe((value) => {
-            this.isEmptySearchResult = !!value && this.tree().isEmpty;
+        // Seeded rather than piped through `startWith`, which would open the gate below — and with it a
+        // timer — before the user has typed anything.
+        this.isEmptySearchResult = !!ngControl.value && tree.isEmpty;
+        return valueChanges.pipe(audit(() => merge(tree.unorderedOptions.changes, timer(0)))).subscribe((value) => {
+            this.isEmptySearchResult = !!value && tree.isEmpty;
             this.changeDetectorRef.markForCheck();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqTreeSelect, isStandalone: true, selector: "kbq-tree-select", inputs: { hiddenItemsText: { classPropertyName: "hiddenItemsText", publicName: "hiddenItemsText", isSignal: false, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null }, sortComparator: { classPropertyName: "sortComparator", publicName: "sortComparator", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: false, isRequired: false, transformFunction: null }, selectAllToggle: { classPropertyName: "selectAllToggle", publicName: "selectAllToggle", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectAllHandler: { classPropertyName: "selectAllHandler", publicName: "selectAllHandler", isSignal: false, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, searchMinOptionsThreshold: { classPropertyName: "searchMinOptionsThreshold", publicName: "searchMinOptionsThreshold", isSignal: false, isRequired: false, transformFunction: null }, hiddenItemsTextFormatter: { classPropertyName: "hiddenItemsTextFormatter", publicName: "hiddenItemsTextFormatter", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange", openedStream: "opened", closedStream: "closed", selectionChange: "selectionChange", onSelectAll: "onSelectAll", valueChange: "valueChange" }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.kbq-select_multiple": "multiple", "class.kbq-select_multiline": "multiline()", "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tree-select" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqTreeSelect, isStandalone: true, selector: "kbq-tree-select", inputs: { hiddenItemsText: { classPropertyName: "hiddenItemsText", publicName: "hiddenItemsText", isSignal: true, isRequired: false, transformFunction: null }, hiddenItemsTextFormatter: { classPropertyName: "hiddenItemsTextFormatter", publicName: "hiddenItemsTextFormatter", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, sortComparator: { classPropertyName: "sortComparator", publicName: "sortComparator", isSignal: true, isRequired: false, transformFunction: null }, clearPredicate: { classPropertyName: "clearPredicate", publicName: "clearPredicate", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, multipleInput: { classPropertyName: "multipleInput", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, autoSelectInput: { classPropertyName: "autoSelectInput", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null }, selectAllToggle: { classPropertyName: "selectAllToggle", publicName: "selectAllToggle", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, tabIndexInput: { classPropertyName: "tabIndexInput", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAllHandlerInput: { classPropertyName: "selectAllHandlerInput", publicName: "selectAllHandler", isSignal: true, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, searchMinOptionsThresholdInput: { classPropertyName: "searchMinOptionsThresholdInput", publicName: "searchMinOptionsThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChangeOutput: "openedChange", openedOutput: "opened", closedOutput: "closed", selectionChange: "selectionChange", onSelectAll: "onSelectAll" }, host: { attributes: { "role": "combobox" }, listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.kbq-select_multiple": "multiple", "class.kbq-select_multiline": "multiline()", "class.kbq-disabled": "disabledClass()", "class.kbq-invalid": "invalidClass()", "attr.id": "id()", "attr.aria-expanded": "panelOpen", "attr.aria-controls": "panelOpen ? panelId : null", "attr.aria-label": "ariaLabelText", "attr.aria-labelledby": "resolvedAriaLabelledby()", "attr.aria-invalid": "errorState()", "attr.aria-required": "required()", "attr.aria-disabled": "disabled() || null", "attr.tabindex": "tabIndex", "attr.disabled": "disabledAttribute()" }, classAttribute: "kbq-tree-select" }, providers: [
             { provide: KbqFormFieldControl, useExisting: KbqTreeSelect },
             kbqCleanerFactoryProvider((() => {
                 const treeSelect = inject(KbqTreeSelect);
@@ -1112,22 +1364,16 @@ class KbqTreeSelect extends KbqAbstractSelect {
                     get control() {
                         return treeSelect;
                     },
-                    get keydownTarget() {
-                        return treeSelect.elementRef.nativeElement;
-                    },
                     clearByEscape: false,
-                    clear: (() => treeSelect.clear())
+                    clear: (() => treeSelect.clear()),
+                    canClear: (() => treeSelect.canClear)
                 };
             })),
-            { provide: KbqTree, useExisting: KbqTreeSelect },
             { provide: KBQ_PARENT_POPUP, useExisting: KbqTreeSelect },
             kbqSiblingPopupProvider(KbqTreeSelect)
-        ], queries: [{ propertyName: "cleaner", first: true, predicate: KbqCleaner, isSignal: true }, { propertyName: "customTrigger", first: true, predicate: KbqSelectTrigger, descendants: true, isSignal: true }, { propertyName: "customMatcher", first: true, predicate: KbqSelectMatcher, descendants: true, isSignal: true }, { propertyName: "customTagTemplateRef", first: true, predicate: ["kbqSelectTagContent"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tree", first: true, predicate: KbqTreeSelection, descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: KbqSelectSearch, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqTreeSelect"], usesInheritance: true, ngImport: i0, template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    #trigger\n    cdkOverlayOrigin\n    class=\"kbq-select__trigger\"\n    [class.kbq-select__trigger_empty]=\"empty\"\n    [class.kbq-select__trigger_multiline]=\"multiline()\"\n    [class.kbq-select__trigger_multiple]=\"multiple\"\n    [class.kbq-select__trigger_single]=\"!multiple\"\n>\n    @if (!!customMatcher()) {\n        <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n    } @else {\n        <div class=\"kbq-select__matcher\">\n            @if (empty) {\n                <span class=\"kbq-select__placeholder\">\n                    {{ placeholder || '\\u00A0' }}\n                </span>\n            } @else {\n                @if (!!customTrigger()) {\n                    <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                } @else {\n                    <div class=\"kbq-select__match-container\">\n                        @if (multiSelection) {\n                            <div\n                                #multilineMatchList\n                                [class.kbq-select__match-list]=\"!multiline()\"\n                                [class.kbq-select__multiline-match-list]=\"multiline()\"\n                            >\n                                @if (!customTagTemplateRef()) {\n                                    @for (option of triggerValues; track option) {\n                                        <kbq-tag\n                                            [color]=\"colorForState\"\n                                            [disabled]=\"option.disabled || disabled\"\n                                            [selectable]=\"false\"\n                                        >\n                                            {{ option.viewValue }}\n                                            @if (!option.disabled && !disabled) {\n                                                <i\n                                                    kbq-icon=\"kbq-xmark-s_16\"\n                                                    kbqTagRemove\n                                                    (click)=\"onRemoveSelectedOption(option, $event)\"\n                                                ></i>\n                                            }\n                                        </kbq-tag>\n                                    }\n                                } @else {\n                                    @for (option of triggerValues; track option) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"customTagTemplateRef()\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                        />\n                                    }\n                                }\n                            </div>\n                        } @else {\n                            <span class=\"kbq-select__matcher-text\">\n                                {{ triggerValue }}\n                            </span>\n                        }\n                        @if (!multiline()) {\n                            <div\n                                class=\"kbq-select__match-hidden-text\"\n                                [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n                            >\n                                {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n                            </div>\n                        }\n                    </div>\n                }\n            }\n\n            @if (canShowCleaner) {\n                <div class=\"kbq-select__cleaner\">\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\" [color]=\"colorForState\"></i>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayLockPosition\n    [cdkConnectedOverlayBackdropClass]=\"backdropClass()\"\n    [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n    [cdkConnectedOverlayMinWidth]=\"overlayMinWidth\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        [class]=\"getPanelClasses()\"\n        [style.--kbq-select-panel-size-max-height]=\"panelMaxHeightToken()\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.max-width.px]=\"panelMaxWidth()\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (keydown)=\"panelKeydownHandler($event)\"\n    >\n        @if (search() && shouldShowSearch()) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            class=\"kbq-tree-select__content kbq-scrollbar\"\n            [@fadeInContent]=\"'showing'\"\n            (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n        >\n            @if (isEmptySearchResult) {\n                <ng-content select=\"[kbq-select-search-empty-result]\" />\n            }\n\n            <ng-content select=\"kbq-tree-selection\" />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-tree-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-tree-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-tree-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;min-height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger:not(.kbq-select__trigger_multiline),.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_empty{height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger:not(.kbq-select__trigger_multiline) .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_empty .kbq-select__matcher{overflow:hidden;white-space:nowrap}.kbq-tree-select .kbq-select__matcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-grow:1;align-items:center}.kbq-tree-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right) var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right) var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);max-height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__match-container{flex-direction:column}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__matcher{max-width:100%;padding:calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-right) calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-left)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__cleaner,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__arrow-wrapper{align-self:flex-start;align-items:center;height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));min-width:var(--kbq-form-field-size-addon-width)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__multiline-match-list{display:flex;flex-direction:row;flex-wrap:wrap;margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));gap:var(--kbq-size-xxs)}.kbq-tree-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-tree-select .kbq-select__match-container .kbq-select__match-hidden-text{box-sizing:content-box;flex:0 0 var(--kbq-form-field-size-addon-width);align-self:center;padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-tree-select kbq-select-trigger,.kbq-tree-select [kbq-select-trigger]{width:100%}.kbq-tree-select .kbq-select__arrow-wrapper{display:flex;align-self:center;justify-content:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-form-field-appearance-fill .kbq-tree-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-tree-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-tree-select__panel{min-width:100%;max-width:var(--kbq-panel-size-width-max, 640px);overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-tree-select__panel .kbq-option{font-size:inherit}.kbq-tree-select__panel .kbq-select__no-options-message{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;position:relative;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl);max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-tree-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-tree-select__content{box-sizing:initial;max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-tree-select__panel .kbq-select__footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-tree-select__content .kbq-tree-selection{height:100%}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option{position:relative}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:before,.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-tree-select{color:var(--kbq-foreground-contrast)}.kbq-tree-select.kbq-control_has-validate-directive.ng-invalid,.kbq-tree-select.kbq-invalid{color:var(--kbq-foreground-error)}.kbq-tree-select.kbq-control_has-validate-directive.ng-invalid .kbq-select__placeholder,.kbq-tree-select.kbq-invalid .kbq-select__placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-tree-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-tree-select.kbq-disabled .kbq-select__placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-form-field-default-placeholder)}.kbq-tree-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused){--kbq-option-background: var(--kbq-tree-default-container-background);background:var(--kbq-tree-default-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused) .kbq-option-text,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused) .kbq-option-text{color:var(--kbq-tree-default-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-default-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused) .kbq-option-caption,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused) .kbq-option-caption{color:var(--kbq-tree-default-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused{--kbq-option-background: var(--kbq-tree-states-hover-container-background);background:var(--kbq-tree-states-hover-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-text{color:var(--kbq-tree-states-hover-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-hover-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-caption{color:var(--kbq-tree-states-hover-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option: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-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused){--kbq-option-background: var(--kbq-tree-states-selected-container-background);background:var(--kbq-tree-states-selected-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused) .kbq-option-text,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused) .kbq-option-text{color:var(--kbq-tree-states-selected-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused) .kbq-option-caption,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused) .kbq-option-caption{color:var(--kbq-tree-states-selected-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused{--kbq-option-background: var(--kbq-tree-states-selected-hover-container-background);background:var(--kbq-tree-states-selected-hover-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused .kbq-option-text{color:var(--kbq-tree-states-selected-hover-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-hover-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused .kbq-option-caption{color:var(--kbq-tree-states-selected-hover-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.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-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-hovered:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-hovered:not(.kbq-focused){background:var(--kbq-tree-multiple-states-selected-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-focused,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-focused{background:var(--kbq-tree-multiple-states-selected-hover-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.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-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused:not(.kbq-action-button-focused){border-color:transparent}.kbq-tree-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__search-container{border-bottom-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__no-options-message{color:var(--kbq-foreground-contrast-secondary)}.kbq-tree-select,.kbq-tree-select__panel{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-tree-select__panel{--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)}\n", ".kbq-select,.kbq-tree-select,.kbq-select__panel{--kbq-select-size-single-padding-left: 0;--kbq-select-size-single-padding-right: 0;--kbq-select-size-single-padding-vertical: var(--kbq-size-xs);--kbq-select-size-single-content-gap: var(--kbq-size-xxs);--kbq-select-size-multiple-padding-left: 0;--kbq-select-size-multiple-padding-right: 0;--kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);--kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);--kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqTagRemove, selector: "[kbqTagRemove]" }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: ["editable", "preventEditSubmit", "selected", "value", "selectable", "removable", "tabindex", "disabled"], outputs: ["editChange", "selectionChange", "destroyed", "removed"], exportAs: ["kbqTag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
-            kbqSelectAnimations.transformPanel,
-            kbqSelectAnimations.fadeInContent
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "cleaner", first: true, predicate: KbqCleaner, isSignal: true }, { propertyName: "customTrigger", first: true, predicate: KbqSelectTrigger, descendants: true, isSignal: true }, { propertyName: "customMatcher", first: true, predicate: KbqSelectMatcher, descendants: true, isSignal: true }, { propertyName: "customTagTemplateRef", first: true, predicate: ["kbqSelectTagContent"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tree", first: true, predicate: KbqTreeSelection, descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: KbqSelectSearch, descendants: true, isSignal: true }, { propertyName: "noOptionsMessage", first: true, predicate: KbqSelectNoOptions, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "scrollbarViewport", first: true, predicate: KbqScrollbarViewport, descendants: true, isSignal: true }, { propertyName: "overlayDirQuery", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "tagsQuery", predicate: KbqTag, descendants: true, isSignal: true }], exportAs: ["kbqTreeSelect"], usesInheritance: true, hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    #trigger\n    cdkOverlayOrigin\n    class=\"kbq-select__trigger\"\n    [class.kbq-select__trigger_empty]=\"empty()\"\n    [class.kbq-select__trigger_multiline]=\"multiline()\"\n    [class.kbq-select__trigger_multiple]=\"multiple\"\n    [class.kbq-select__trigger_single]=\"!multiple\"\n>\n    @if (!!customMatcher()) {\n        <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n    } @else {\n        <div class=\"kbq-select__matcher\">\n            @if (empty()) {\n                <span class=\"kbq-select__placeholder\">\n                    {{ placeholder() || '\\u00A0' }}\n                </span>\n            } @else {\n                @if (!!customTrigger()) {\n                    <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                } @else {\n                    <div class=\"kbq-select__match-container\">\n                        @if (multiSelection) {\n                            <div\n                                #multilineMatchList\n                                [class.kbq-select__match-list]=\"!multiline()\"\n                                [class.kbq-select__multiline-match-list]=\"multiline()\"\n                            >\n                                @if (!customTagTemplateRef()) {\n                                    @for (option of triggerValues; track $index) {\n                                        <kbq-tag\n                                            [color]=\"colorForState()\"\n                                            [disabled]=\"option.disabled || disabled()\"\n                                            [selectable]=\"false\"\n                                        >\n                                            {{ option.viewValue }}\n                                            @if (!option.disabled && !disabled()) {\n                                                <!--\n                                                    `tabIndex` defaults to -1, because inside a tag list\n                                                    the tag itself is the tab stop. Here the tag stands on\n                                                    its own in the trigger, so the control has to opt in or\n                                                    it is left mouse-only.\n                                                -->\n                                                <i\n                                                    kbq-icon=\"kbq-xmark-s_16\"\n                                                    kbqTagRemove\n                                                    [tabIndex]=\"0\"\n                                                    (click)=\"onRemoveSelectedOption(option, $event)\"\n                                                ></i>\n                                            }\n                                        </kbq-tag>\n                                    }\n                                } @else {\n                                    @for (option of triggerValues; track $index) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"customTagTemplateRef()\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                        />\n                                    }\n                                }\n                            </div>\n                        } @else {\n                            <span class=\"kbq-select__matcher-text\">\n                                {{ triggerValue }}\n                            </span>\n                        }\n                        @if (!multiline()) {\n                            <div\n                                class=\"kbq-select__match-hidden-text\"\n                                [style.display]=\"hiddenItems() > 0 ? 'block' : 'none'\"\n                            >\n                                {{ hiddenItemsLabel() }}\n                            </div>\n                        }\n                    </div>\n                }\n            }\n\n            @if (canShowCleaner) {\n                <div class=\"kbq-select__cleaner\">\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\" [color]=\"colorForState()\"></i>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayLockPosition\n    [cdkConnectedOverlayBackdropClass]=\"backdropClass()\"\n    [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop()\"\n    [cdkConnectedOverlayMinWidth]=\"overlayMinWidth\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        [attr.id]=\"panelId\"\n        [class]=\"panelClasses()\"\n        [style.--kbq-select-panel-size-max-height]=\"panelMaxHeightToken()\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.max-width.px]=\"panelMaxWidth()\"\n        (keydown)=\"panelKeydownHandler($event)\"\n    >\n        @if (search() && shouldShowSearch()) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div #optionsContainer kbqScrollbarViewport class=\"kbq-tree-select__content\">\n            @if (isEmptySearchResult) {\n                <ng-content select=\"[kbq-select-search-empty-result]\" />\n            }\n\n            <ng-content select=\"kbq-select-no-options, [kbq-select-no-options]\" />\n\n            <ng-content select=\"kbq-tree-selection\" />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-tree-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-tree-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-tree-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;min-height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger:not(.kbq-select__trigger_multiline),.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_empty{height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger:not(.kbq-select__trigger_multiline) .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_empty .kbq-select__matcher{overflow:hidden;white-space:nowrap}.kbq-tree-select .kbq-select__matcher{-webkit-user-select:none;user-select:none;display:flex;flex-grow:1;align-items:center}.kbq-tree-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right) var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right) var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);max-height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__match-container{flex-direction:column}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__matcher{max-width:100%;padding:calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-right) calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-left)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__cleaner,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__arrow-wrapper{align-self:flex-start;align-items:center;height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));min-width:var(--kbq-form-field-size-addon-width)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__multiline-match-list{display:flex;flex-direction:row;flex-wrap:wrap;margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));gap:var(--kbq-size-xxs)}.kbq-tree-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-tree-select .kbq-select__match-container .kbq-select__match-hidden-text{box-sizing:content-box;display:none;flex:0 0 var(--kbq-form-field-size-addon-width);align-self:center;padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-tree-select .kbq-select__match-container .kbq-select__match-hidden-text.kbq-select__match-hidden-text_visible{display:block}.kbq-tree-select kbq-select-trigger,.kbq-tree-select [kbq-select-trigger]{width:100%}.kbq-tree-select .kbq-select__arrow-wrapper{display:flex;align-self:center;justify-content:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-disabled.kbq-tree-select .kbq-select__trigger{-webkit-user-select:none;user-select:none;cursor:default}.kbq-tree-select__panel{min-width:100%;max-width:var(--kbq-panel-size-width-max, 640px);overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}@supports (corner-shape: squircle){.kbq-tree-select__panel{corner-shape:squircle;border-radius:clamp(var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius)) * 1.85,var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius)) * 2.3 - 3.6px,var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius)) * 2)}}.kbq-tree-select__panel .kbq-option{font-size:inherit}.kbq-tree-select__panel .kbq-select__no-options-message{-webkit-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;position:relative;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl);max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-tree-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-tree-select__content{box-sizing:initial;max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-tree-select__panel .kbq-select__footer{-webkit-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-tree-select__content .kbq-tree-selection{height:100%}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option{position:relative}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:before,.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-tree-select{color:var(--kbq-foreground-contrast)}.kbq-tree-select.kbq-invalid{color:var(--kbq-foreground-error)}.kbq-tree-select.kbq-invalid .kbq-select__placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-tree-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-tree-select.kbq-disabled .kbq-select__placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-form-field-default-placeholder)}.kbq-select__search-container{border-bottom-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__no-options-message{color:var(--kbq-foreground-contrast-secondary)}.kbq-tree-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused){--kbq-option-background: var(--kbq-tree-default-container-background);background:var(--kbq-tree-default-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused) .kbq-option-text,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused) .kbq-option-text{color:var(--kbq-tree-default-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-default-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused) .kbq-option-caption,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused) .kbq-option-caption{color:var(--kbq-tree-default-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused{--kbq-option-background: var(--kbq-tree-states-hover-container-background);background:var(--kbq-tree-states-hover-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-text{color:var(--kbq-tree-states-hover-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-hover-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-caption{color:var(--kbq-tree-states-hover-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option: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-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused){--kbq-option-background: var(--kbq-tree-states-selected-container-background);background:var(--kbq-tree-states-selected-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused) .kbq-option-text,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused) .kbq-option-text{color:var(--kbq-tree-states-selected-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused) .kbq-option-caption,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused) .kbq-option-caption{color:var(--kbq-tree-states-selected-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused{--kbq-option-background: var(--kbq-tree-states-selected-hover-container-background);background:var(--kbq-tree-states-selected-hover-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused .kbq-option-text{color:var(--kbq-tree-states-selected-hover-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-hover-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused .kbq-option-caption{color:var(--kbq-tree-states-selected-hover-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.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-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-hovered:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-hovered:not(.kbq-focused){background:var(--kbq-tree-multiple-states-selected-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-focused,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-focused{background:var(--kbq-tree-multiple-states-selected-hover-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.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-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused:not(.kbq-action-button-focused){border-color:transparent}.kbq-tree-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-tree-select,.kbq-tree-select__panel{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-tree-select,.kbq-tree-select__panel{--kbq-select-size-single-padding-left: 0;--kbq-select-size-single-padding-right: 0;--kbq-select-size-single-padding-vertical: var(--kbq-size-xs);--kbq-select-size-single-content-gap: var(--kbq-size-xxs);--kbq-select-size-multiple-padding-left: 0;--kbq-select-size-multiple-padding-right: 0;--kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);--kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);--kbq-select-panel-size-border-radius: var(--kbq-size-border-radius)}.kbq-tree-select__panel{--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)}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqTagRemove, selector: "[kbqTagRemove]", inputs: ["aria-label", "tabIndex"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: ["editable", "preventEditSubmit", "selected", "selectable", "removable", "value", "tabindex", "disabled"], outputs: ["editChange", "selectionChange", "destroyed", "removed"], exportAs: ["kbqTag"] }, { kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeSelect, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-tree-select', imports: [
                         CdkOverlayOrigin,
@@ -1136,6 +1382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         CdkConnectedOverlay,
                         CdkMonitorFocus,
                         KbqTag,
+                        KbqScrollbarViewport,
                         NgTemplateOutlet
                     ], providers: [
                         { provide: KbqFormFieldControl, useExisting: KbqTreeSelect },
@@ -1145,130 +1392,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                                 get control() {
                                     return treeSelect;
                                 },
-                                get keydownTarget() {
-                                    return treeSelect.elementRef.nativeElement;
-                                },
                                 clearByEscape: false,
-                                clear: (() => treeSelect.clear())
+                                clear: (() => treeSelect.clear()),
+                                canClear: (() => treeSelect.canClear)
                             };
                         })),
-                        { provide: KbqTree, useExisting: KbqTreeSelect },
                         { provide: KBQ_PARENT_POPUP, useExisting: KbqTreeSelect },
                         kbqSiblingPopupProvider(KbqTreeSelect)
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tree-select',
                         '[class.kbq-select_multiple]': 'multiple',
                         '[class.kbq-select_multiline]': 'multiline()',
-                        '[class.kbq-disabled]': 'disabled',
-                        '[class.kbq-invalid]': 'errorState',
+                        '[class.kbq-disabled]': 'disabledClass()',
+                        '[class.kbq-invalid]': 'invalidClass()',
+                        // The tree-select is not a native control, so its combobox semantics, its accessible name and
+                        // its invalid/required/disabled states all have to be exposed explicitly.
+                        //
+                        // No `aria-haspopup` here: the panel carries no `role="tree"` yet, and announcing a popup that
+                        // the assistive technology then cannot find is worse than announcing none — the same call
+                        // `KbqDropdownTrigger` made. Add it together with the tree roles.
+                        //
+                        // No `aria-activedescendant` either: it is only read off the element that HAS the focus, and this
+                        // control moves the focus into the panel — onto the option, or into the projected search field —
+                        // for as long as the panel is open. It can only start telling the truth once the option highlight
+                        // stops being driven by real DOM focus (`KbqTreeOption` paints `kbq-focused` from `hasFocus`),
+                        // which is `@koobiq/components/tree`'s call to make.
+                        role: 'combobox',
+                        '[attr.id]': 'id()',
+                        '[attr.aria-expanded]': 'panelOpen',
+                        '[attr.aria-controls]': 'panelOpen ? panelId : null',
+                        '[attr.aria-label]': 'ariaLabelText',
+                        '[attr.aria-labelledby]': 'resolvedAriaLabelledby()',
+                        '[attr.aria-invalid]': 'errorState()',
+                        '[attr.aria-required]': 'required()',
+                        '[attr.aria-disabled]': 'disabled() || null',
                         '[attr.tabindex]': 'tabIndex',
-                        '[attr.disabled]': 'disabled || null',
+                        '[attr.disabled]': 'disabledAttribute()',
                         '(click)': 'handleClick()',
                         '(keydown)': 'handleKeydown($event)',
                         '(focus)': 'onFocus()',
                         '(blur)': 'onBlur()'
-                    }, animations: [
-                        kbqSelectAnimations.transformPanel,
-                        kbqSelectAnimations.fadeInContent
-                    ], exportAs: 'kbqTreeSelect', template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    #trigger\n    cdkOverlayOrigin\n    class=\"kbq-select__trigger\"\n    [class.kbq-select__trigger_empty]=\"empty\"\n    [class.kbq-select__trigger_multiline]=\"multiline()\"\n    [class.kbq-select__trigger_multiple]=\"multiple\"\n    [class.kbq-select__trigger_single]=\"!multiple\"\n>\n    @if (!!customMatcher()) {\n        <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n    } @else {\n        <div class=\"kbq-select__matcher\">\n            @if (empty) {\n                <span class=\"kbq-select__placeholder\">\n                    {{ placeholder || '\\u00A0' }}\n                </span>\n            } @else {\n                @if (!!customTrigger()) {\n                    <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                } @else {\n                    <div class=\"kbq-select__match-container\">\n                        @if (multiSelection) {\n                            <div\n                                #multilineMatchList\n                                [class.kbq-select__match-list]=\"!multiline()\"\n                                [class.kbq-select__multiline-match-list]=\"multiline()\"\n                            >\n                                @if (!customTagTemplateRef()) {\n                                    @for (option of triggerValues; track option) {\n                                        <kbq-tag\n                                            [color]=\"colorForState\"\n                                            [disabled]=\"option.disabled || disabled\"\n                                            [selectable]=\"false\"\n                                        >\n                                            {{ option.viewValue }}\n                                            @if (!option.disabled && !disabled) {\n                                                <i\n                                                    kbq-icon=\"kbq-xmark-s_16\"\n                                                    kbqTagRemove\n                                                    (click)=\"onRemoveSelectedOption(option, $event)\"\n                                                ></i>\n                                            }\n                                        </kbq-tag>\n                                    }\n                                } @else {\n                                    @for (option of triggerValues; track option) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"customTagTemplateRef()\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                        />\n                                    }\n                                }\n                            </div>\n                        } @else {\n                            <span class=\"kbq-select__matcher-text\">\n                                {{ triggerValue }}\n                            </span>\n                        }\n                        @if (!multiline()) {\n                            <div\n                                class=\"kbq-select__match-hidden-text\"\n                                [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n                            >\n                                {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n                            </div>\n                        }\n                    </div>\n                }\n            }\n\n            @if (canShowCleaner) {\n                <div class=\"kbq-select__cleaner\">\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\" [color]=\"colorForState\"></i>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayLockPosition\n    [cdkConnectedOverlayBackdropClass]=\"backdropClass()\"\n    [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n    [cdkConnectedOverlayMinWidth]=\"overlayMinWidth\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        [class]=\"getPanelClasses()\"\n        [style.--kbq-select-panel-size-max-height]=\"panelMaxHeightToken()\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.max-width.px]=\"panelMaxWidth()\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (keydown)=\"panelKeydownHandler($event)\"\n    >\n        @if (search() && shouldShowSearch()) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            class=\"kbq-tree-select__content kbq-scrollbar\"\n            [@fadeInContent]=\"'showing'\"\n            (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n        >\n            @if (isEmptySearchResult) {\n                <ng-content select=\"[kbq-select-search-empty-result]\" />\n            }\n\n            <ng-content select=\"kbq-tree-selection\" />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-tree-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-tree-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-tree-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;min-height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger:not(.kbq-select__trigger_multiline),.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_empty{height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger:not(.kbq-select__trigger_multiline) .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_empty .kbq-select__matcher{overflow:hidden;white-space:nowrap}.kbq-tree-select .kbq-select__matcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-grow:1;align-items:center}.kbq-tree-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right) var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right) var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);max-height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__match-container{flex-direction:column}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__matcher{max-width:100%;padding:calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-right) calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-left)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__cleaner,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__arrow-wrapper{align-self:flex-start;align-items:center;height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));min-width:var(--kbq-form-field-size-addon-width)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__multiline-match-list{display:flex;flex-direction:row;flex-wrap:wrap;margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));gap:var(--kbq-size-xxs)}.kbq-tree-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-tree-select .kbq-select__match-container .kbq-select__match-hidden-text{box-sizing:content-box;flex:0 0 var(--kbq-form-field-size-addon-width);align-self:center;padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-tree-select kbq-select-trigger,.kbq-tree-select [kbq-select-trigger]{width:100%}.kbq-tree-select .kbq-select__arrow-wrapper{display:flex;align-self:center;justify-content:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-form-field-appearance-fill .kbq-tree-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-tree-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-tree-select__panel{min-width:100%;max-width:var(--kbq-panel-size-width-max, 640px);overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-tree-select__panel .kbq-option{font-size:inherit}.kbq-tree-select__panel .kbq-select__no-options-message{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;position:relative;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl);max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-tree-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-tree-select__content{box-sizing:initial;max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-tree-select__panel .kbq-select__footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-tree-select__content .kbq-tree-selection{height:100%}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option{position:relative}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:before,.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-tree-select{color:var(--kbq-foreground-contrast)}.kbq-tree-select.kbq-control_has-validate-directive.ng-invalid,.kbq-tree-select.kbq-invalid{color:var(--kbq-foreground-error)}.kbq-tree-select.kbq-control_has-validate-directive.ng-invalid .kbq-select__placeholder,.kbq-tree-select.kbq-invalid .kbq-select__placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-tree-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-tree-select.kbq-disabled .kbq-select__placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-form-field-default-placeholder)}.kbq-tree-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused){--kbq-option-background: var(--kbq-tree-default-container-background);background:var(--kbq-tree-default-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused) .kbq-option-text,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused) .kbq-option-text{color:var(--kbq-tree-default-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-default-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused) .kbq-option-caption,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused) .kbq-option-caption{color:var(--kbq-tree-default-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused{--kbq-option-background: var(--kbq-tree-states-hover-container-background);background:var(--kbq-tree-states-hover-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-text{color:var(--kbq-tree-states-hover-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-hover-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-caption{color:var(--kbq-tree-states-hover-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option: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-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused){--kbq-option-background: var(--kbq-tree-states-selected-container-background);background:var(--kbq-tree-states-selected-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused) .kbq-option-text,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused) .kbq-option-text{color:var(--kbq-tree-states-selected-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused) .kbq-option-caption,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused) .kbq-option-caption{color:var(--kbq-tree-states-selected-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused{--kbq-option-background: var(--kbq-tree-states-selected-hover-container-background);background:var(--kbq-tree-states-selected-hover-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused .kbq-option-text{color:var(--kbq-tree-states-selected-hover-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-hover-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused .kbq-option-caption{color:var(--kbq-tree-states-selected-hover-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.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-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-hovered:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-hovered:not(.kbq-focused){background:var(--kbq-tree-multiple-states-selected-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-focused,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-focused{background:var(--kbq-tree-multiple-states-selected-hover-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.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-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused:not(.kbq-action-button-focused){border-color:transparent}.kbq-tree-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__search-container{border-bottom-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__no-options-message{color:var(--kbq-foreground-contrast-secondary)}.kbq-tree-select,.kbq-tree-select__panel{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-tree-select__panel{--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)}\n", ".kbq-select,.kbq-tree-select,.kbq-select__panel{--kbq-select-size-single-padding-left: 0;--kbq-select-size-single-padding-right: 0;--kbq-select-size-single-padding-vertical: var(--kbq-size-xs);--kbq-select-size-single-content-gap: var(--kbq-size-xxs);--kbq-select-size-multiple-padding-left: 0;--kbq-select-size-multiple-padding-right: 0;--kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);--kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);--kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], optionsContainer: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], overlayDir: [{
-                type: ViewChild,
-                args: [CdkConnectedOverlay, { static: false }]
-            }], tags: [{
-                type: ViewChildren,
-                args: [KbqTag]
-            }], cleaner: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqCleaner), { ...{ descendants: false }, isSignal: true }] }], customTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectTrigger), { isSignal: true }] }], customMatcher: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectMatcher), { isSignal: true }] }], customTagTemplateRef: [{ type: i0.ContentChild, args: ['kbqSelectTagContent', { ...{ read: TemplateRef }, isSignal: true }] }], tree: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTreeSelection), { isSignal: true }] }], search: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectSearch), { isSignal: true }] }], hiddenItemsText: [{
-                type: Input
-            }], openedChange: [{
-                type: Output
-            }], openedStream: [{
-                type: Output,
-                args: ['opened']
-            }], closedStream: [{
-                type: Output,
-                args: ['closed']
-            }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], onSelectAll: [{ type: i0.Output, args: ["onSelectAll"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], errorStateMatcher: [{
-                type: Input
-            }], sortComparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortComparator", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], placeholder: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], multiple: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], autoSelect: [{
-                type: Input
-            }], selectAllToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllToggle", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], id: [{
-                type: Input
-            }], hasBackdrop: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], selectAllHandler: [{
-                type: Input
-            }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], searchMinOptionsThreshold: [{
-                type: Input
-            }], hiddenItemsTextFormatter: [{
-                type: Input
-            }] } });
+                    }, hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ], exportAs: 'kbqTreeSelect', template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    #trigger\n    cdkOverlayOrigin\n    class=\"kbq-select__trigger\"\n    [class.kbq-select__trigger_empty]=\"empty()\"\n    [class.kbq-select__trigger_multiline]=\"multiline()\"\n    [class.kbq-select__trigger_multiple]=\"multiple\"\n    [class.kbq-select__trigger_single]=\"!multiple\"\n>\n    @if (!!customMatcher()) {\n        <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n    } @else {\n        <div class=\"kbq-select__matcher\">\n            @if (empty()) {\n                <span class=\"kbq-select__placeholder\">\n                    {{ placeholder() || '\\u00A0' }}\n                </span>\n            } @else {\n                @if (!!customTrigger()) {\n                    <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                } @else {\n                    <div class=\"kbq-select__match-container\">\n                        @if (multiSelection) {\n                            <div\n                                #multilineMatchList\n                                [class.kbq-select__match-list]=\"!multiline()\"\n                                [class.kbq-select__multiline-match-list]=\"multiline()\"\n                            >\n                                @if (!customTagTemplateRef()) {\n                                    @for (option of triggerValues; track $index) {\n                                        <kbq-tag\n                                            [color]=\"colorForState()\"\n                                            [disabled]=\"option.disabled || disabled()\"\n                                            [selectable]=\"false\"\n                                        >\n                                            {{ option.viewValue }}\n                                            @if (!option.disabled && !disabled()) {\n                                                <!--\n                                                    `tabIndex` defaults to -1, because inside a tag list\n                                                    the tag itself is the tab stop. Here the tag stands on\n                                                    its own in the trigger, so the control has to opt in or\n                                                    it is left mouse-only.\n                                                -->\n                                                <i\n                                                    kbq-icon=\"kbq-xmark-s_16\"\n                                                    kbqTagRemove\n                                                    [tabIndex]=\"0\"\n                                                    (click)=\"onRemoveSelectedOption(option, $event)\"\n                                                ></i>\n                                            }\n                                        </kbq-tag>\n                                    }\n                                } @else {\n                                    @for (option of triggerValues; track $index) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"customTagTemplateRef()\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                        />\n                                    }\n                                }\n                            </div>\n                        } @else {\n                            <span class=\"kbq-select__matcher-text\">\n                                {{ triggerValue }}\n                            </span>\n                        }\n                        @if (!multiline()) {\n                            <div\n                                class=\"kbq-select__match-hidden-text\"\n                                [style.display]=\"hiddenItems() > 0 ? 'block' : 'none'\"\n                            >\n                                {{ hiddenItemsLabel() }}\n                            </div>\n                        }\n                    </div>\n                }\n            }\n\n            @if (canShowCleaner) {\n                <div class=\"kbq-select__cleaner\">\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\" [color]=\"colorForState()\"></i>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayLockPosition\n    [cdkConnectedOverlayBackdropClass]=\"backdropClass()\"\n    [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop()\"\n    [cdkConnectedOverlayMinWidth]=\"overlayMinWidth\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        [attr.id]=\"panelId\"\n        [class]=\"panelClasses()\"\n        [style.--kbq-select-panel-size-max-height]=\"panelMaxHeightToken()\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.max-width.px]=\"panelMaxWidth()\"\n        (keydown)=\"panelKeydownHandler($event)\"\n    >\n        @if (search() && shouldShowSearch()) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div #optionsContainer kbqScrollbarViewport class=\"kbq-tree-select__content\">\n            @if (isEmptySearchResult) {\n                <ng-content select=\"[kbq-select-search-empty-result]\" />\n            }\n\n            <ng-content select=\"kbq-select-no-options, [kbq-select-no-options]\" />\n\n            <ng-content select=\"kbq-tree-selection\" />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-tree-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-tree-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-tree-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;min-height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger:not(.kbq-select__trigger_multiline),.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_empty{height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger:not(.kbq-select__trigger_multiline) .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_empty .kbq-select__matcher{overflow:hidden;white-space:nowrap}.kbq-tree-select .kbq-select__matcher{-webkit-user-select:none;user-select:none;display:flex;flex-grow:1;align-items:center}.kbq-tree-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right) var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right) var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);max-height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__match-container{flex-direction:column}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__matcher{max-width:100%;padding:calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-right) calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-left)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__cleaner,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__arrow-wrapper{align-self:flex-start;align-items:center;height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));min-width:var(--kbq-form-field-size-addon-width)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__multiline-match-list{display:flex;flex-direction:row;flex-wrap:wrap;margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));gap:var(--kbq-size-xxs)}.kbq-tree-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-tree-select .kbq-select__match-container .kbq-select__match-hidden-text{box-sizing:content-box;display:none;flex:0 0 var(--kbq-form-field-size-addon-width);align-self:center;padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-tree-select .kbq-select__match-container .kbq-select__match-hidden-text.kbq-select__match-hidden-text_visible{display:block}.kbq-tree-select kbq-select-trigger,.kbq-tree-select [kbq-select-trigger]{width:100%}.kbq-tree-select .kbq-select__arrow-wrapper{display:flex;align-self:center;justify-content:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-disabled.kbq-tree-select .kbq-select__trigger{-webkit-user-select:none;user-select:none;cursor:default}.kbq-tree-select__panel{min-width:100%;max-width:var(--kbq-panel-size-width-max, 640px);overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}@supports (corner-shape: squircle){.kbq-tree-select__panel{corner-shape:squircle;border-radius:clamp(var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius)) * 1.85,var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius)) * 2.3 - 3.6px,var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius)) * 2)}}.kbq-tree-select__panel .kbq-option{font-size:inherit}.kbq-tree-select__panel .kbq-select__no-options-message{-webkit-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;position:relative;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl);max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-tree-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-tree-select__content{box-sizing:initial;max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-tree-select__panel .kbq-select__footer{-webkit-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-tree-select__content .kbq-tree-selection{height:100%}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option{position:relative}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:before,.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-tree-select__content .kbq-tree-selection .kbq-tree-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-tree-select{color:var(--kbq-foreground-contrast)}.kbq-tree-select.kbq-invalid{color:var(--kbq-foreground-error)}.kbq-tree-select.kbq-invalid .kbq-select__placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-tree-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-tree-select.kbq-disabled .kbq-select__placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-form-field-default-placeholder)}.kbq-select__search-container{border-bottom-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__no-options-message{color:var(--kbq-foreground-contrast-secondary)}.kbq-tree-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused){--kbq-option-background: var(--kbq-tree-default-container-background);background:var(--kbq-tree-default-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused) .kbq-option-text,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused) .kbq-option-text{color:var(--kbq-tree-default-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-default-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):hover:not(.kbq-focused) .kbq-option-caption,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-hovered:not(.kbq-focused) .kbq-option-caption{color:var(--kbq-tree-default-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused{--kbq-option-background: var(--kbq-tree-states-hover-container-background);background:var(--kbq-tree-states-hover-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-text{color:var(--kbq-tree-states-hover-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-hover-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-caption{color:var(--kbq-tree-states-hover-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled):active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option: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-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused){--kbq-option-background: var(--kbq-tree-states-selected-container-background);background:var(--kbq-tree-states-selected-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused) .kbq-option-text,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused) .kbq-option-text{color:var(--kbq-tree-states-selected-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:hover:not(.kbq-focused) .kbq-option-caption,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered:not(.kbq-focused) .kbq-option-caption{color:var(--kbq-tree-states-selected-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused{--kbq-option-background: var(--kbq-tree-states-selected-hover-container-background);background:var(--kbq-tree-states-selected-hover-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused .kbq-option-text{color:var(--kbq-tree-states-selected-hover-text-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-hover-action-button-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-focused .kbq-option-caption{color:var(--kbq-tree-states-selected-hover-caption-color)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected:active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-selected.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-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-hovered:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:hover:not(.kbq-focused),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-hovered:not(.kbq-focused){background:var(--kbq-tree-multiple-states-selected-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-focused,.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-focused{background:var(--kbq-tree-multiple-states-selected-hover-container-background)}.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:active:not(.kbq-disabled),.kbq-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.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-tree-select__panel .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled).kbq-focused:not(.kbq-action-button-focused){border-color:transparent}.kbq-tree-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-tree-select,.kbq-tree-select__panel{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-tree-select,.kbq-tree-select__panel{--kbq-select-size-single-padding-left: 0;--kbq-select-size-single-padding-right: 0;--kbq-select-size-single-padding-vertical: var(--kbq-size-xs);--kbq-select-size-single-content-gap: var(--kbq-size-xxs);--kbq-select-size-multiple-padding-left: 0;--kbq-select-size-multiple-padding-right: 0;--kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);--kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);--kbq-select-panel-size-border-radius: var(--kbq-size-border-radius)}.kbq-tree-select__panel{--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)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], optionsContainer: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], scrollbarViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqScrollbarViewport), { isSignal: true }] }], overlayDirQuery: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], tagsQuery: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KbqTag), { isSignal: true }] }], cleaner: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqCleaner), { ...{ descendants: false }, isSignal: true }] }], customTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectTrigger), { isSignal: true }] }], customMatcher: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectMatcher), { isSignal: true }] }], customTagTemplateRef: [{ type: i0.ContentChild, args: ['kbqSelectTagContent', { ...{ read: TemplateRef }, isSignal: true }] }], tree: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTreeSelection), { isSignal: true }] }], search: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectSearch), { isSignal: true }] }], noOptionsMessage: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectNoOptions), { isSignal: true }] }], hiddenItemsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenItemsText", required: false }] }], hiddenItemsTextFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenItemsTextFormatter", required: false }] }], openedChangeOutput: [{ type: i0.Output, args: ["openedChange"] }], openedOutput: [{ type: i0.Output, args: ["opened"] }], closedOutput: [{ type: i0.Output, args: ["closed"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], onSelectAll: [{ type: i0.Output, args: ["onSelectAll"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], sortComparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortComparator", required: false }] }], clearPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearPredicate", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], multipleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], autoSelectInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }], selectAllToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllToggle", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], tabIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectAllHandlerInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllHandler", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], searchMinOptionsThresholdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchMinOptionsThreshold", required: false }] }] } });
 
+/**
+ * The module declares nothing — `KbqTreeSelect` is standalone and brings its own imports — so the
+ * entries below are here either to be re-exported or for the providers they carry (`OverlayModule`,
+ * `KbqTagsModule`, `KbqTreeModule`).
+ */
 class KbqTreeSelectModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeSelectModule, imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeSelectModule, imports: [OverlayModule,
             KbqTreeModule,
-            KbqIconModule,
             KbqTagsModule,
-            KbqPseudoCheckboxModule,
             KbqSelectSearch,
             KbqSelectFooter,
             KbqSelectMatcher,
             KbqSelectTrigger,
             KbqSelectSearchEmptyResult,
-            NgTemplateOutlet,
-            A11yModule,
+            KbqSelectNoOptions,
             KbqTreeSelect], exports: [KbqTreeSelect,
+            // `kbq-tree-selection` content is mandatory, so importing the tree-select without the tree
+            // gives a consumer a control they cannot fill.
+            KbqTreeModule,
             KbqSelectSearch,
             KbqSelectFooter,
             KbqSelectMatcher,
             KbqSelectTrigger,
             KbqSelectSearchEmptyResult,
+            KbqSelectNoOptions,
             KbqFormFieldModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeSelectModule, imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeSelectModule, imports: [OverlayModule,
             KbqTreeModule,
-            KbqIconModule,
             KbqTagsModule,
-            KbqPseudoCheckboxModule,
-            A11yModule,
-            KbqTreeSelect, KbqFormFieldModule] }); }
+            KbqSelectNoOptions,
+            KbqTreeSelect, 
+            // `kbq-tree-selection` content is mandatory, so importing the tree-select without the tree
+            // gives a consumer a control they cannot fill.
+            KbqTreeModule,
+            KbqFormFieldModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         OverlayModule,
                         KbqTreeModule,
-                        KbqIconModule,
                         KbqTagsModule,
-                        KbqPseudoCheckboxModule,
                         KbqSelectSearch,
                         KbqSelectFooter,
                         KbqSelectMatcher,
                         KbqSelectTrigger,
                         KbqSelectSearchEmptyResult,
-                        NgTemplateOutlet,
-                        A11yModule,
+                        KbqSelectNoOptions,
                         KbqTreeSelect
                     ],
                     exports: [
                         KbqTreeSelect,
+                        // `kbq-tree-selection` content is mandatory, so importing the tree-select without the tree
+                        // gives a consumer a control they cannot fill.
+                        KbqTreeModule,
                         KbqSelectSearch,
                         KbqSelectFooter,
                         KbqSelectMatcher,
                         KbqSelectTrigger,
                         KbqSelectSearchEmptyResult,
+                        KbqSelectNoOptions,
                         KbqFormFieldModule
                     ]
                 }]