@koobiq/components 20.4.2 → 21.0.1

package/fesm2022/koobiq-components-tree.mjs

@@ -1,18 +1,19 @@
 import { SelectionModel, DataSource } from '@angular/cdk/collections';
 import { BehaviorSubject, merge, Observable, of, Subject, asyncScheduler } from 'rxjs';
-import { escapeRegExp, KbqPseudoCheckbox, KbqOptionActionComponent, kbqFocusAndReveal, kbqGetElementHeight, kbqFocusOptionActionOnTab, hasModifierKey, KbqActionContainer, KBQ_TITLE_TEXT_REF, KBQ_OPTION_ACTION_PARENT, getSelectAllState, MultipleMode, ruRULocaleData, KBQ_LOCALE_SERVICE, FocusKeyManager, SPACE, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, TAB, DOWN_ARROW, UP_ARROW, ENTER, HOME, END, PAGE_UP, PAGE_DOWN, toggleSelectAll, getKbqSelectNonArrayValueError, KbqPseudoCheckboxModule } from '@koobiq/components/core';
-import { take, map, delay } from 'rxjs/operators';
+import * as i1 from '@koobiq/components/core';
+import { escapeRegExp, KbqStateSaving, KbqPseudoCheckbox, KbqOptionActionComponent, kbqFocusAndReveal, kbqGetElementHeight, kbqFocusOptionActionOnTab, hasModifierKey, KbqActionContainer, KBQ_TITLE_TEXT_REF, KBQ_OPTION_ACTION_PARENT, MultipleMode, getSelectAllState, kbqQueryListFrom, KbqLocaleOverridesDirective, KBQ_SELECT_LOCALE_CONFIGURATION, kbqOptionalNumberAttribute, kbqSelectAllHandlerTransform, resolveMultipleMode, FocusKeyManager, kbqLeaveTabOrderOnTabOut, SPACE, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, TAB, DOWN_ARROW, UP_ARROW, ENTER, HOME, END, PAGE_UP, PAGE_DOWN, toggleSelectAll, getKbqSelectNonArrayValueError, KbqPseudoCheckboxModule } from '@koobiq/components/core';
+import { take, map, delay, filter } from 'rxjs/operators';
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, input, Directive, ViewContainerRef, ChangeDetectorRef, IterableDiffers, DestroyRef, Input, ContentChildren, ViewChild, ElementRef, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, NgZone, contentChild, output, EventEmitter, ContentChild, Renderer2, forwardRef, HostAttributeToken, QueryList, viewChild, signal, effect, Output, NgModule } from '@angular/core';
+import { signal, inject, TemplateRef, input, Directive, ViewContainerRef, IterableDiffers, ChangeDetectorRef, viewChild, contentChildren, DestroyRef, effect, untracked, isDevMode, ElementRef, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, EnvironmentInjector, NgZone, Renderer2, contentChild, linkedSignal, output, EventEmitter, afterNextRender, forwardRef, Injector, QueryList, NgModule } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
+import { _getFocusedElementPierceShadowDom, Platform } from '@angular/cdk/platform';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { KbqIcon, KbqIconModule } from '@koobiq/components/icon';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Clipboard } from '@angular/cdk/clipboard';
-import { Platform } from '@angular/cdk/platform';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { KBQ_FORM_FIELD } from '@koobiq/components/form-field';
 import { AsyncScheduler } from 'rxjs/internal/scheduler/AsyncScheduler';
@@ -20,7 +21,7 @@ import { AsyncScheduler } from 'rxjs/internal/scheduler/AsyncScheduler';
 /** Base tree control. It has basic toggle/expand/collapse operations on a single data node. */
 class BaseTreeControl {
     constructor() {
-        /** A selection model with multi-selection to track expansion status. */
+        /** A selection model with multi-selection to track expansion status: it holds the key of every expanded node. */
         this.expansionModel = new SelectionModel(true);
         this.filterModel = new SelectionModel(true);
         this.filterValue = new BehaviorSubject('');
@@ -30,29 +31,29 @@ class BaseTreeControl {
         if (this.filterValue.value?.length) {
             return;
         }
-        this.expansionModel.toggle(dataNode);
+        this.expansionModel.toggle(this.expansionKey(dataNode));
     }
     /** Expands one single data node. */
     expand(dataNode) {
         if (this.filterValue.value?.length) {
             return;
         }
-        this.expansionModel.select(dataNode);
+        this.expansionModel.select(this.expansionKey(dataNode));
     }
     /** Collapses one single data node. */
     collapse(dataNode) {
         if (this.filterValue.value?.length) {
             return;
         }
-        this.expansionModel.deselect(dataNode);
+        this.expansionModel.deselect(this.expansionKey(dataNode));
     }
     /** Whether a given data node is expanded or not. Returns true if the data node is expanded. */
     isExpanded(dataNode) {
-        return this.expansionModel.isSelected(dataNode);
+        return this.expansionModel.isSelected(this.expansionKey(dataNode));
     }
     /** Toggles a subtree rooted at `node` recursively. */
     toggleDescendants(dataNode) {
-        if (this.expansionModel.isSelected(dataNode)) {
+        if (this.isExpanded(dataNode)) {
             this.collapseDescendants(dataNode);
         }
         else {
@@ -67,17 +68,26 @@ class BaseTreeControl {
     expandDescendants(dataNode) {
         const toBeProcessed = [dataNode];
         toBeProcessed.push(...this.getDescendants(dataNode));
-        this.expansionModel.select(...toBeProcessed);
+        this.expansionModel.select(...toBeProcessed.map((node) => this.expansionKey(node)));
     }
     /** Collapses a subtree rooted at given data node recursively. */
     collapseDescendants(dataNode) {
         const toBeProcessed = [dataNode];
         toBeProcessed.push(...this.getDescendants(dataNode));
-        this.expansionModel.deselect(...toBeProcessed);
+        this.expansionModel.deselect(...toBeProcessed.map((node) => this.expansionKey(node)));
+    }
+    /** The key `expansionModel` holds for a data node. */
+    expansionKey(dataNode) {
+        return this.trackBy ? this.trackBy(dataNode) : dataNode;
     }
 }
 
 const kbqTreeSelectAllValue = 'selectAll';
+/**
+ * Default first stage of the filter pipeline: keeps the nodes whose view value matches the query.
+ *
+ * @docs-private
+ */
 class FilterByViewValue {
     constructor(control) {
         this.control = control;
@@ -95,6 +105,12 @@ class FilterByViewValue {
         return this.result;
     }
 }
+/**
+ * Default last stage of the filter pipeline: re-adds the ancestors of every matched node so the
+ * matches stay reachable in the rendered hierarchy.
+ *
+ * @docs-private
+ */
 class FilterParentsForNodes {
     constructor(control) {
         this.control = control;
@@ -124,6 +140,7 @@ class FilterByValues {
         this.result = Array.from(new Set([...(prevFilter?.result || []), ...found]));
         return this.result;
     }
+    // TODO: nothing in the library uses it; kept as public API at the DS-2196 review. Document or deprecate it.
     getValues() {
         return this.values;
     }
@@ -148,7 +165,9 @@ class FlatTreeControl extends BaseTreeControl {
     /** compareValues will be used to comparing values. */
     compareViewValues = defaultCompareViewValues, 
     /** isDisabled will be used to determine if the node is disabled. */
-    isDisabled = () => false) {
+    isDisabled = () => false, 
+    /** Further options: the `trackBy` the nodes are expanded by. */
+    options) {
         super();
         this.getLevel = getLevel;
         this.isExpandable = isExpandable;
@@ -157,8 +176,13 @@ class FlatTreeControl extends BaseTreeControl {
         this.compareValues = compareValues;
         this.compareViewValues = compareViewValues;
         this.isDisabled = isDisabled;
+        // Positions in each `dataNodes` array: a tree looks up every rendered row, and `indexOf` would make that
+        // rows × nodes. Keyed weakly by the array, so replacing `dataNodes` releases the old nodes.
+        this.nodeIndexes = new WeakMap();
+        this.trackBy = options?.trackBy;
         this.setFilters(new FilterByViewValue(this), new FilterParentsForNodes(this));
     }
+    // TODO: nothing in the library uses it; kept as public API at the DS-2196 review. Document or deprecate it.
     getFilters() {
         return this.filters;
     }
@@ -172,7 +196,7 @@ class FlatTreeControl extends BaseTreeControl {
      * with correct levels.
      */
     getDescendants(dataNode) {
-        const startIndex = this.dataNodes.indexOf(dataNode);
+        const startIndex = this.indexOfNode(dataNode);
         const results = [];
         // Goes through flattened tree nodes in the `dataNodes` array, and get all descendants.
         // The level of descendants of a tree node must be greater than the level of the given
@@ -192,16 +216,34 @@ class FlatTreeControl extends BaseTreeControl {
      * data nodes of the tree.
      */
     expandAll() {
-        this.expansionModel.select(...this.dataNodes);
+        this.expansionModel.select(...this.dataNodes.map((node) => this.expansionKey(node)));
     }
-    getParents(node, result) {
-        if (node.parent) {
-            result.unshift(node.parent);
-            return this.getParents(node.parent, result);
-        }
-        else {
+    /**
+     * Ancestors of a data node, outermost first.
+     *
+     * Derived from `dataNodes` rather than from a `parent` back-reference: the flattened nodes are in
+     * depth-first order, so scanning backwards from the node, the first node of a smaller level is its
+     * parent, and repeating with that level yields the whole chain. A data node whose shape carries no
+     * `parent` therefore resolves just as well as one that does.
+     *
+     * @param result Collector the ancestors are prepended to. Provided so callers can accumulate into
+     * an existing array; a fresh one is used when omitted.
+     */
+    getParents(node, result = []) {
+        const startIndex = this.indexOfNode(node);
+        if (startIndex === -1) {
             return result;
         }
+        let level = this.getLevel(node);
+        for (let i = startIndex - 1; i >= 0 && level > 0; i--) {
+            const candidate = this.dataNodes[i];
+            const candidateLevel = this.getLevel(candidate);
+            if (candidateLevel < level) {
+                result.unshift(candidate);
+                level = candidateLevel;
+            }
+        }
+        return result;
     }
     hasValue(value) {
         return this.dataNodes?.find((node) => this.compareValues(this.getValue(node), value));
@@ -216,7 +258,7 @@ class FlatTreeControl extends BaseTreeControl {
         this.filterModel.clear();
         this.filterModel.select(...result);
         // set current expansion state according to filtered tree
-        this.expansionModel.setSelection(...result.filter((node) => this.isExpandable(node)));
+        this.expansionModel.setSelection(...result.filter((node) => this.isExpandable(node)).map((node) => this.expansionKey(node)));
         this.updateFilterValue(value || result);
         Promise.resolve().then(() => this.restoreExpansionState());
     }
@@ -233,14 +275,49 @@ class FlatTreeControl extends BaseTreeControl {
             this.expansionModel.setSelection(...this.expandedItemsBeforeFiltration);
         }
     }
+    /**
+     * Position of the node in `dataNodes`, constant-time while the index matches the array. With `trackBy` a node
+     * rebuilt as a new object since is found by its key, as the expansion methods accept it too.
+     */
+    indexOfNode(node) {
+        const { dataNodes, trackBy } = this;
+        if (!dataNodes)
+            return -1;
+        const cached = this.nodeIndexes.get(dataNodes)?.get(node);
+        // Checked against the array: `dataNodes` can be mutated in place.
+        if (cached !== undefined && dataNodes[cached] === node)
+            return cached;
+        const index = dataNodes.indexOf(node);
+        // A node that is not there leaves the index as it is.
+        if (index === -1) {
+            if (!trackBy)
+                return index;
+            const key = trackBy(node);
+            return dataNodes.findIndex((candidate) => trackBy(candidate) === key);
+        }
+        const positions = new Map();
+        dataNodes.forEach((dataNode, position) => {
+            if (!positions.has(dataNode))
+                positions.set(dataNode, position);
+        });
+        this.nodeIndexes.set(dataNodes, positions);
+        return index;
+    }
 }
 
 /** Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type. */
 class NestedTreeControl extends BaseTreeControl {
-    /** Construct with nested tree function getChildren. */
-    constructor(getChildren) {
+    /**
+     * Construct with nested tree function getChildren.
+     *
+     * @param getChildren Must emit **synchronously** (e.g. `of(children)` or a `BehaviorSubject`).
+     * `getDescendants` walks the tree with `take(1)` and returns as soon as the recursion unwinds, so
+     * an asynchronous source yields an incomplete — usually empty — descendant list.
+     */
+    constructor(getChildren, options) {
         super();
         this.getChildren = getChildren;
+        this.trackBy = options?.trackBy;
     }
     /**
      * Expands all dataNodes in the tree.
@@ -251,7 +328,7 @@ class NestedTreeControl extends BaseTreeControl {
     expandAll() {
         this.expansionModel.clear();
         const allNodes = this.dataNodes.reduce((accumulator, dataNode) => [...accumulator, ...this.getDescendants(dataNode), dataNode], []);
-        this.expansionModel.select(...allNodes);
+        this.expansionModel.select(...allNodes.map((node) => this.expansionKey(node)));
     }
     /** Gets a list of descendant dataNodes of a subtree rooted at given data node recursively. */
     getDescendants(dataNode) {
@@ -278,33 +355,41 @@ class NestedTreeControl extends BaseTreeControl {
  * Transform nested nodes of type `T` to flattened nodes of type `F`.
  *
  * For example, the input data of type `T` is nested, and contains its children data:
- *   SomeNode: {
+ *
+ * ```ts
+ * SomeNode: {
  *     key: 'Fruits',
  *     children: [
- *       NodeOne: {
- *         key: 'Apple',
- *       },
- *       NodeTwo: {
- *        key: 'Pear',
- *      }
- *    ]
- *  }
- *  After flattener flatten the tree, the structure will become
- *  SomeNode: {
- *    key: 'Fruits',
- *    expandable: true,
- *    level: 1
- *  },
- *  NodeOne: {
- *    key: 'Apple',
- *    expandable: false,
- *    level: 2
- *  },
- *  NodeTwo: {
- *   key: 'Pear',
- *   expandable: false,
- *   level: 2
+ *         NodeOne: {
+ *             key: 'Apple'
+ *         },
+ *         NodeTwo: {
+ *             key: 'Pear'
+ *         }
+ *     ]
+ * }
+ * ```
+ *
+ * After flattener flatten the tree, the structure will become
+ *
+ * ```ts
+ * SomeNode: {
+ *     key: 'Fruits',
+ *     expandable: true,
+ *     level: 1
+ * },
+ * NodeOne: {
+ *     key: 'Apple',
+ *     expandable: false,
+ *     level: 2
+ * },
+ * NodeTwo: {
+ *     key: 'Pear',
+ *     expandable: false,
+ *     level: 2
  * }
+ * ```
+ *
  * and the output flattened type is `F` with additional information.
  */
 class KbqTreeFlattener {
@@ -314,6 +399,7 @@ class KbqTreeFlattener {
         this.isExpandable = isExpandable;
         this.getChildren = getChildren;
     }
+    /** @docs-private */
     flattenNode(node, level, resultNodes, parent) {
         const flatNode = this.transformFunction(node, level, parent);
         resultNodes.push(flatNode);
@@ -332,6 +418,7 @@ class KbqTreeFlattener {
         }
         return resultNodes;
     }
+    /** @docs-private */
     flattenChildren(children, level, resultNodes, parent) {
         children.forEach((child) => {
             this.flattenNode(child, level + 1, resultNodes, parent);
@@ -350,6 +437,8 @@ class KbqTreeFlattener {
     /**
      * Expand flattened node with current expansion status.
      * The returned list may have different length.
+     *
+     * Reads only `isExpanded` of the tree control, so it takes a control of any key type.
      */
     expandFlattenedNodes(nodes, treeControl) {
         const results = [];
@@ -379,17 +468,19 @@ var KbqTreeDataSourceChangeTypes;
  * Data source for flat tree.
  * The data source need to handle expansion/collapsion of the tree node and change the data feed
  * to `KbqTree`.
- * The nested tree nodes of type `T` are flattened through `MсTreeFlattener`, and converted
+ * The nested tree nodes of type `T` are flattened through `KbqTreeFlattener`, and converted
  * to type `F` for `KbqTree` to consume.
  */
 class KbqTreeFlatDataSource extends DataSource {
     get data() {
-        return this._data.value;
+        return this._data();
     }
     set data(value) {
-        this._data.next(value);
-        this.flattenedData.next(this.treeFlattener.flattenNodes(this.data));
-        this.treeControl.dataNodes = this.flattenedData.value;
+        this._data.set(value);
+        const flattened = this.treeFlattener.flattenNodes(this.data);
+        // Assigned before emitting: the tree renders inside `next`, and its rows look themselves up in `dataNodes`.
+        this.treeControl.dataNodes = flattened;
+        this.flattenedData.next(flattened);
     }
     constructor(treeControl, treeFlattener, initialData = []) {
         super();
@@ -398,7 +489,12 @@ class KbqTreeFlatDataSource extends DataSource {
         this.flattenedData = new BehaviorSubject([]);
         this.expandedData = new BehaviorSubject([]);
         this.filteredData = new BehaviorSubject([]);
-        this._data = new BehaviorSubject(initialData);
+        this._data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : /* istanbul ignore next */ []));
+        this._data.set(initialData);
+        // The setter flattens the data for the tree.
+        if (initialData.length) {
+            this.data = initialData;
+        }
     }
     connect(collectionViewer) {
         return merge(collectionViewer.viewChange, this.treeControl.expansionModel.changed.pipe(map((value) => ({ type: KbqTreeDataSourceChangeTypes.Expansion, value }))), this.treeControl.filterValue.pipe(map((value) => ({ type: KbqTreeDataSourceChangeTypes.Filter, value }))), this.flattenedData).pipe(map((changeObj) => {
@@ -465,12 +561,12 @@ class KbqTreeNodeOutletContext {
 class KbqTreeNodeDef {
     constructor() {
         this.template = inject(TemplateRef);
-        this.data = input(undefined, ...(ngDevMode ? [{ debugName: "data", alias: 'kbqTreeNode' }] : [{ alias: 'kbqTreeNode' }]));
+        this.data = input(undefined, { ...(ngDevMode ? { debugName: "data" } : /* istanbul ignore next */ {}), alias: 'kbqTreeNode' });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeNodeDef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqTreeNodeDef, isStandalone: true, selector: "[kbqTreeNodeDef]", inputs: { when: { classPropertyName: "when", publicName: "kbqTreeNodeDefWhen", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "kbqTreeNode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeNodeDef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqTreeNodeDef, isStandalone: true, selector: "[kbqTreeNodeDef]", inputs: { when: { classPropertyName: "when", publicName: "kbqTreeNodeDefWhen", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "kbqTreeNode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeNodeDef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeNodeDef, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTreeNodeDef]',
@@ -481,12 +577,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
 class KbqTreeNodeOutlet {
     constructor() {
         this.viewContainer = inject(ViewContainerRef);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeNodeOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTreeNodeOutlet, isStandalone: true, selector: "[kbqTreeNodeOutlet]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeNodeOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqTreeNodeOutlet, isStandalone: true, selector: "[kbqTreeNodeOutlet]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeNodeOutlet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeNodeOutlet, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTreeNodeOutlet]'
@@ -495,6 +590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
 
 /**
  * Returns an error to be thrown when there is no usable data.
+ *
  * @docs-private
  */
 function getTreeNoValidDataSourceError() {
@@ -502,6 +598,7 @@ function getTreeNoValidDataSourceError() {
 }
 /**
  * Returns an error to be thrown when there are multiple nodes that are missing a when function.
+ *
  * @docs-private
  */
 function getTreeMultipleDefaultNodeDefsError() {
@@ -509,6 +606,7 @@ function getTreeMultipleDefaultNodeDefsError() {
 }
 /**
  * Returns an error to be thrown when there are no matching node defs for a particular set of data.
+ *
  * @docs-private
  */
 function getTreeMissingMatchingNodeDefError() {
@@ -516,62 +614,169 @@ function getTreeMissingMatchingNodeDefError() {
 }
 /**
  * Returns an error to be thrown when there are tree control.
+ *
  * @docs-private
  */
 function getTreeControlMissingError() {
     return Error(`Could not find a tree control for the tree.`);
 }
 /**
- * Returns an error to be thrown when tree control did not implement functions for flat/nested node.
+ * Returns an error to be thrown when the selection mode of a tree is changed while its `SelectionModel`
+ * belongs to a host `KbqTreeSelect`.
+ *
  * @docs-private
  */
-function getTreeControlFunctionsMissingError() {
-    return Error(`Could not find functions for nested/flat tree in tree control.`);
+function getKbqTreeSelectionOwnedMultipleError() {
+    return Error('Cannot change the multiplicity of `multiple` on a `kbq-tree-selection` rendered inside a ' +
+        '`kbq-tree-select`: the select owns the selection model. Set `multiple` on the select instead.');
 }
 
+/**
+ * Coerces a raw persisted payload into a `KbqTreeState`, returning `null` for anything unrecognizable.
+ *
+ * Web storage is origin-wide and user-writable, so a payload is never trusted — without this, an entry
+ * such as `{"a": null}` would reach `hasValue()` while restoring.
+ */
+const normalizeTreeState = (parsed) => {
+    if (!Array.isArray(parsed))
+        return null;
+    const values = parsed.filter((value) => typeof value === 'string');
+    // An array that held nothing usable is somebody else's payload, not "nothing was expanded" — the
+    // difference matters, because only the second one is a state worth keeping.
+    return values.length || !parsed.length ? values : null;
+};
+/**
+ * Rendering core of the tree.
+ *
+ * Originally forked from `@angular/cdk/tree` and maintained independently since: the node/outlet
+ * contract, the option-based selection model and the filtering pipeline have all diverged, so
+ * `@angular/cdk/tree` is deliberately not a dependency of this package and upstream fixes have to be
+ * ported by hand.
+ *
+ * `C` narrows the tree control a concrete tree accepts, and so the type its `treeControl` binding is checked against.
+ * The bound leaves out `expansionModel` and `trackBy`, the members typed by the control's key, so that it admits
+ * a control of any key type: the model makes a control invariant in that type.
+ */
 class KbqTreeBase {
+    /** Controls the expanded state and holds the data nodes of the tree. */
+    get treeControl() {
+        return this.treeControlInput();
+    }
+    /** {@link treeControl} as state saving reads it: by node value, which only a `FlatTreeControl` has. */
+    get flatTreeControl() {
+        const treeControl = this.treeControl;
+        return treeControl;
+    }
+    /** Outlet within the tree's template where the data nodes are inserted. */
+    get nodeOutlet() {
+        return this.nodeOutletQuery();
+    }
+    /**
+     * Provides a stream containing the latest data array to render. Influenced by the tree's
+     * stream of view window (what dataNodes are currently on screen).
+     * Data source can be an observable of data array, or a data array to render.
+     */
+    get dataSource() {
+        return this._dataSource;
+    }
     constructor() {
         this.differs = inject(IterableDiffers);
         this.changeDetectorRef = inject(ChangeDetectorRef);
+        /**
+         * Persistence of the expanded state, applied as a host directive by the concrete tree components.
+         * Optional because `KbqTreeBase` is exported: a tree without the directive persists nothing.
+         */
+        this.stateSaving = inject(KbqStateSaving, { optional: true });
+        /** @docs-private */
+        this.treeControlInput = input(undefined, { ...(ngDevMode ? { debugName: "treeControlInput" } : /* istanbul ignore next */ {}), alias: 'treeControl' });
         /**
          * Tracking function that will be used to check the differences in data changes. Used similarly
          * to `ngFor` `trackBy` function. Optimize node operations by identifying a node based on its data
          * relative to the function to know if a node should be added/removed/moved.
          * Accepts a function that takes two parameters, `index` and `item`.
+         *
+         * Views are reused for nodes the function reports as unchanged, which a data source that rebuilds
+         * its node objects on every emission — a flattener among them — otherwise cannot get.
+         *
+         * Defaults to the `trackBy` of the tree control, read when the tree initializes and when the data source changes.
          */
-        this.trackBy = input(undefined, ...(ngDevMode ? [{ debugName: "trackBy" }] : []));
-        // TODO(tinayuangao): Setup a listener for scrolling, emit the calculated view to viewChange.
-        //     Remove the MAX_VALUE in viewChange
+        this.trackBy = input(undefined, ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+        this.nodeOutletQuery = viewChild(KbqTreeNodeOutlet, ...(ngDevMode ? [{ debugName: "nodeOutletQuery" }] : /* istanbul ignore next */ []));
+        /** The tree node template for the tree */
+        this.nodeDefs = contentChildren(KbqTreeNodeDef, ...(ngDevMode ? [{ debugName: "nodeDefs" }] : /* istanbul ignore next */ []));
         /**
          * Stream containing the latest information on what rows are being displayed on screen.
          * Can be used by the data source to as a heuristic of what data should be provided.
+         *
+         * The tree renders every expanded node eagerly, so the window is the whole data set; a data source
+         * cannot use it to page or virtualize. Windowing would have to emit a real range from a scroll
+         * listener here first.
          */
         this.viewChange = new BehaviorSubject({ start: 0, end: Number.MAX_VALUE });
         /** Level of nodes */
         this.levels = new Map();
+        /** Most recently constructed node of this tree, see `registerNode`. */
+        this.recentNode = null;
+        /** Node rendered for a given outlet context, so a reused view can be handed its new data. */
+        this.nodesByContext = new WeakMap();
+        /**
+         * Values from the persisted state whose node has not appeared in `treeControl.dataNodes` yet —
+         * applied as the nodes show up, and dropped the first time each node is seen.
+         */
+        this.pendingValues = new Set();
+        /** The `dataNodes` the last restore ran against, so an unchanged list is not walked again. */
+        this.lastRestoredDataNodes = null;
+        /**
+         * Whether the persisted state has been read. `KbqTreeSelect` calls `ngAfterContentInit()` by hand on
+         * the tree it projects into its panel, and a second read would resurrect values the user dismissed.
+         */
+        this.hasRead = false;
+        /** Whether the dev-mode warnings below have already been logged, so each is logged once. */
+        this.warnedAboutTreeControl = false;
+        this.warnedAboutValues = false;
+        /** @docs-private */
+        this.dataSourceInput = input(undefined, { ...(ngDevMode ? { debugName: "dataSourceInput" } : /* istanbul ignore next */ {}), alias: 'dataSource' });
+        this._dataSource = null;
         this.destroyRef = inject(DestroyRef);
-    }
-    /**
-     * Provides a stream containing the latest data array to render. Influenced by the tree's
-     * stream of view window (what dataNodes are currently on screen).
-     * Data source can be an observable of data array, or a data array to render.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get dataSource() {
-        return this._dataSource;
-    }
-    set dataSource(dataSource) {
-        if (this._dataSource !== dataSource) {
-            this.switchDataSource(dataSource);
-        }
+        /** Whether `ngAfterContentChecked` has run, i.e. the node definitions the first render needs are resolved. */
+        this.contentChecked = false;
+        // Switching the source drops the rendered nodes and resubscribes, which a bound value alone does not do. A
+        // binding back to `undefined` clears the tree as `null` does; an unbound input equals the initial `null`.
+        effect(() => {
+            const dataSource = this.dataSourceInput() ?? null;
+            untracked(() => {
+                if (dataSource !== this._dataSource)
+                    this.switchDataSource(dataSource);
+            });
+        });
     }
     ngOnInit() {
-        this.dataDiffer = this.differs.find([]).create(this.trackBy());
+        this.dataDiffer = this.createDataDiffer();
         if (!this.treeControl) {
             throw getTreeControlMissingError();
         }
     }
+    ngAfterContentInit() {
+        // Before `ngAfterContentChecked` connects the data source, so the restored nodes are expanded
+        // ahead of the first render rather than causing a second one.
+        if (this.hasRead || !this.persists)
+            return;
+        this.hasRead = true;
+        // The state lives under the new key now, so restore from it.
+        this.stateSaving.keyChanges.subscribe(() => this.restoreState());
+        this.restoreState();
+    }
+    /** Reads the persisted expansion and applies it. Runs while initializing, and again on a key change. */
+    restoreState() {
+        if (!this.persists)
+            return;
+        const savedState = this.stateSaving.read(normalizeTreeState);
+        this.pendingValues = new Set(savedState ?? []);
+        // The memo that keeps one batch of nodes from being examined twice. A restore from another key
+        // has new values to match against the same nodes, so it has to be allowed to look again.
+        this.lastRestoredDataNodes = null;
+        this.restorePending();
+    }
     ngOnDestroy() {
         this.nodeOutlet.viewContainer.clear();
         if (this._dataSource && typeof this.dataSource.disconnect === 'function') {
@@ -583,20 +788,65 @@ class KbqTreeBase {
         }
     }
     ngAfterContentChecked() {
-        const defaultNodeDefs = this.nodeDefs.filter((def) => !def.when);
+        const defaultNodeDefs = this.nodeDefs().filter((def) => !def.when);
         if (defaultNodeDefs.length > 1) {
             throw getTreeMultipleDefaultNodeDefsError();
         }
         this.defaultNodeDef = defaultNodeDefs[0];
-        if (this.dataSource && this.nodeDefs && !this.dataSubscription) {
+        this.contentChecked = true;
+        if (this.dataSource && this.nodeDefs().length && !this.dataSubscription) {
             this.observeRenderChanges();
         }
     }
+    /**
+     * Persists the values of the currently expanded nodes.
+     *
+     * Called for every expansion and collapse a user performs. Expansion driven by the application —
+     * `treeControl.expandAll()`, or writing to `expansionModel` — is not persisted; call this to record it.
+     *
+     * A no-op while a filter is active: what is expanded then is the result set, not a chosen state.
+     */
+    saveState() {
+        // Untracked, as in `clearSavedState()`: called from a consumer's `effect()`, the inputs read on the way would
+        // make the effect run again whenever they change.
+        untracked(() => {
+            if (!this.persists || this.treeControl.filterValue.value?.length)
+                return;
+            this.stateSaving.write(this.expandedValues());
+        });
+    }
+    /**
+     * Removes the state persisted for this tree.
+     *
+     * Persistence itself stays on — the next expansion is written again.
+     */
+    clearSavedState() {
+        untracked(() => this.stateSaving?.clear());
+    }
+    /**
+     * Whether state is currently persisted for this tree — restored on init, or written since.
+     * Always `false` while `useStateSaving` is unset, and `false` again after `clearSavedState()`.
+     */
+    get hasSavedState() {
+        return this.stateSaving?.state != null;
+    }
     /** Check for changes made in the data and render each change (node added/removed/moved). */
     renderNodeChanges(data, dataDiffer = this.dataDiffer, viewContainer = this.nodeOutlet.viewContainer, parentData) {
+        if (this.applyNodeChanges(data, dataDiffer, viewContainer, parentData)) {
+            this.changeDetectorRef.detectChanges();
+        }
+    }
+    /**
+     * Applies the data changes to the view container without running change detection, and reports
+     * whether anything moved. Split out of `renderNodeChanges` so a subclass can update the state its
+     * own template reads before the single change-detection pass, instead of running a second one.
+     *
+     * @docs-private
+     */
+    applyNodeChanges(data, dataDiffer, viewContainer, parentData) {
         const changes = dataDiffer.diff(data);
         if (!changes) {
-            return;
+            return false;
         }
         changes.forEachOperation((item, adjustedPreviousIndex, currentIndex) => {
             if (item.previousIndex == null) {
@@ -611,7 +861,30 @@ class KbqTreeBase {
                 viewContainer.move(view, currentIndex);
             }
         });
-        this.changeDetectorRef.detectChanges();
+        // A node kept its identity but is a different object — what a data source that rebuilds its
+        // nodes on every emission produces, a flattener among them. The view is reused, so the object
+        // it and its `KbqTreeNode` still hold is gone from `dataNodes`, and every lookup keyed on the
+        // node reference (`getDescendants`, `isExpanded`, the selection) would miss it.
+        changes.forEachIdentityChange((record) => {
+            this.refreshNodeData(viewContainer, record.currentIndex, record.item);
+        });
+        return true;
+    }
+    refreshNodeData(viewContainer, index, nodeData) {
+        const view = viewContainer.get(index);
+        if (!view) {
+            return;
+        }
+        const { context } = view;
+        const previousData = context.$implicit;
+        context.$implicit = nodeData;
+        this.levels.delete(previousData);
+        this.levels.set(nodeData, context.level);
+        const node = this.nodesByContext.get(context);
+        if (node) {
+            node.data = nodeData;
+            node.refresh();
+        }
     }
     /**
      * Finds the matching node definition that should be used for this node data. If there is only
@@ -620,10 +893,11 @@ class KbqTreeBase {
      * definition.
      */
     getNodeDef(data, i) {
-        if (this.nodeDefs.length === 1) {
-            return this.nodeDefs.first;
+        const nodeDefs = this.nodeDefs();
+        if (nodeDefs.length === 1) {
+            return nodeDefs[0];
         }
-        const nodeDef = this.nodeDefs.find((def) => def.when && def.when(i, data)) || this.defaultNodeDef;
+        const nodeDef = nodeDefs.find((def) => def.when && def.when(i, data)) || this.defaultNodeDef;
         if (!nodeDef) {
             throw getTreeMissingMatchingNodeDefError();
         }
@@ -637,6 +911,7 @@ class KbqTreeBase {
         const node = this.getNodeDef(nodeData, index);
         // Node context that will be provided to created embedded view
         const context = new KbqTreeNodeOutletContext(nodeData);
+        context.index = index;
         // If the tree is flat tree, then use the `getLevel` function in flat tree control
         // Otherwise, use the level of parent node.
         const treeControl = this.treeControl;
@@ -653,12 +928,106 @@ class KbqTreeBase {
         // Use default tree nodeOutlet, or nested node's nodeOutlet
         const container = viewContainer ? viewContainer : this.nodeOutlet.viewContainer;
         container.createEmbeddedView(node.template, context, index);
-        // Set the data to just created `KbqTreeNode`.
-        // The `KbqTreeNode` created from `createEmbeddedView` will be saved in static variable
-        //     `mostRecentTreeNode`. We get it from static variable and pass the node data to it.
-        if (KbqTreeNode.mostRecentTreeNode) {
-            KbqTreeNode.mostRecentTreeNode.data = nodeData;
+        // The `KbqTreeNode` instantiated by `createEmbeddedView` registers itself here on construction,
+        // which is the only handle onto it — the embedded view exposes its context, not its directives.
+        // It is remembered against that context so a later re-render can reach it again.
+        if (this.recentNode) {
+            this.recentNode.data = nodeData;
+            this.nodesByContext.set(context, this.recentNode);
+            this.recentNode = null;
+        }
+    }
+    /**
+     * Called by a `KbqTreeNode` while it is being constructed, so `insertNode` can hand it its data.
+     *
+     * @docs-private
+     */
+    registerNode(node) {
+        this.recentNode = node;
+    }
+    /** Whether this tree reads and writes its expanded state at all. */
+    get persists() {
+        if (!this.stateSaving?.useStateSaving())
+            return false;
+        // A tree that is not in the document has no stable key — the default resolver derives one from
+        // the path to `<body>`. That is the ordinary state of a tree projected into an overlay, such as
+        // the one `kbq-tree-select` renders into its panel, whose expansion is transient UI rather than
+        // a setting worth carrying to the next visit.
+        if (!this.stateSaving.host?.isConnected)
+            return false;
+        if (typeof this.flatTreeControl.getValue !== 'function') {
+            if (isDevMode() && !this.warnedAboutTreeControl) {
+                this.warnedAboutTreeControl = true;
+                // eslint-disable-next-line no-console
+                console.warn('kbq-tree: state saving is enabled, but the tree control has no `getValue`. ' +
+                    'Expansion is persisted by node value, and a node object does not survive a ' +
+                    'reload, so nothing is persisted. Use `FlatTreeControl`, or unset ' +
+                    '`useStateSaving`.');
+            }
+            return false;
         }
+        return true;
+    }
+    /**
+     * Expands every pending value whose node is present, and stops tracking it.
+     *
+     * Idempotent, and safe to call on every render: the pending set only shrinks, so a tree that has
+     * restored everything does no work at all.
+     */
+    restorePending() {
+        if (!this.pendingValues.size)
+            return;
+        const currentNodes = this.treeControl.dataNodes;
+        // Nothing new to match against. Deliberately does not record an empty list, so the first real
+        // batch of an asynchronously loaded tree is still examined.
+        if (currentNodes === this.lastRestoredDataNodes || !currentNodes?.length)
+            return;
+        this.lastRestoredDataNodes = currentNodes;
+        const treeControl = this.flatTreeControl;
+        const found = [];
+        for (const value of this.pendingValues) {
+            const node = treeControl.hasValue(value);
+            if (node) {
+                found.push(node);
+                this.pendingValues.delete(value);
+            }
+        }
+        // Straight at the model rather than through `expand()`, which is a no-op while a filter is
+        // active — restoring must not depend on what the user happens to be searching for.
+        if (found.length) {
+            const { trackBy } = treeControl;
+            const keys = trackBy ? found.map((node) => trackBy(node)) : found;
+            this.stateSaving.applying(() => treeControl.expansionModel.select(...keys));
+        }
+    }
+    /** The values of the nodes that are currently expanded, plus the ones still waiting to appear. */
+    expandedValues() {
+        const treeControl = this.flatTreeControl;
+        const expanded = [];
+        let skipped = false;
+        // With `trackBy` the model holds keys, which have no value: only the current nodes map back to them.
+        const expandedNodes = treeControl.trackBy
+            ? (treeControl.dataNodes ?? []).filter((node) => treeControl.isExpanded(node))
+            : treeControl.expansionModel.selected;
+        for (const node of expandedNodes) {
+            const value = treeControl.getValue(node);
+            if (typeof value === 'string') {
+                expanded.push(value);
+            }
+            else {
+                skipped = true;
+            }
+        }
+        if (skipped && isDevMode() && !this.warnedAboutValues) {
+            this.warnedAboutValues = true;
+            // eslint-disable-next-line no-console
+            console.warn('kbq-tree: `getValue` returned a value that is not a string for at least one node. ' +
+                'Expansion is persisted as JSON keyed by that value, so those nodes are left out.');
+        }
+        // Union with what is still pending: on a tree whose data arrives in batches the expanded nodes
+        // are only part of what was saved, and writing the snapshot alone would drop every branch that
+        // has not been loaded yet.
+        return [...new Set([...expanded, ...this.pendingValues])];
     }
     /** Set up a subscription for the data provided by the data source. */
     observeRenderChanges() {
@@ -675,9 +1044,15 @@ class KbqTreeBase {
             dataStream = of(this._dataSource);
         }
         if (dataStream) {
-            this.dataSubscription = dataStream
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe((data) => this.renderNodeChanges(data));
+            this.dataSubscription = dataStream.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data) => {
+                this.renderNodeChanges(data);
+                // On a microtask, and only while something is still pending: expanding re-enters this
+                // very subscription — the flat data source merges `expansionModel.changed` — and
+                // `renderNodeChanges` has just run `detectChanges()`.
+                if (this.pendingValues.size) {
+                    Promise.resolve().then(() => this.restorePending());
+                }
+            });
         }
         else {
             throw getTreeNoValidDataSourceError();
@@ -696,35 +1071,48 @@ class KbqTreeBase {
             this.dataSubscription.unsubscribe();
             this.dataSubscription = null;
         }
-        // Remove the all dataNodes if there is now no data source
-        if (!dataSource) {
-            this.nodeOutlet.viewContainer.clear();
-        }
+        // Every rendered node belongs to the previous source, so none of them survives the switch. The
+        // differ is reset below and no longer reports them as removals, which makes these two the only
+        // things that drop the old nodes — for a null source and for a replacement source alike. Left
+        // to the differ, `levels` would keep an entry, and with it a strong reference, for every node
+        // of every source the tree has ever been given.
+        this.nodeOutlet.viewContainer.clear();
+        this.levels.clear();
         this._dataSource = dataSource;
-        if (this.nodeDefs) {
+        // The differ remembers the nodes of the previous source. Left in place, the first diff against
+        // the new source is computed as a delta from data that is no longer rendered, so views are
+        // reused for unrelated nodes or dropped entirely.
+        this.dataDiffer = this.createDataDiffer();
+        // Not before the first `ngAfterContentChecked`: that is where the default node definition is resolved,
+        // and a render ahead of it finds no definition for the nodes and throws, taking the subscription down
+        // with it and leaving the tree permanently empty. The initial render is picked up there; a later
+        // source swap is observed here right away.
+        if (dataSource && this.contentChecked && this.nodeDefs().length) {
             this.observeRenderChanges();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqTreeBase, isStandalone: true, inputs: { treeControl: { classPropertyName: "treeControl", publicName: "treeControl", isSignal: false, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "nodeDefs", predicate: KbqTreeNodeDef }], viewQueries: [{ propertyName: "nodeOutlet", first: true, predicate: KbqTreeNodeOutlet, descendants: true, static: true }], ngImport: i0 }); }
+    createDataDiffer() {
+        // The bound of `C` leaves `trackBy` out; the key type is the control's own, so it is read as `unknown` here.
+        const controlTrackBy = this.treeControl?.trackBy;
+        const trackBy = this.trackBy() ?? (controlTrackBy && ((_, node) => controlTrackBy(node)));
+        return this.differs.find([]).create(trackBy);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.25", type: KbqTreeBase, isStandalone: true, inputs: { treeControlInput: { classPropertyName: "treeControlInput", publicName: "treeControl", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, dataSourceInput: { classPropertyName: "dataSourceInput", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "nodeDefs", predicate: KbqTreeNodeDef, isSignal: true }], viewQueries: [{ propertyName: "nodeOutletQuery", first: true, predicate: KbqTreeNodeOutlet, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeBase, decorators: [{
             type: Directive
-        }], propDecorators: { treeControl: [{
-                type: Input
-            }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], nodeOutlet: [{
-                type: ViewChild,
-                args: [KbqTreeNodeOutlet, { static: true }]
-            }], nodeDefs: [{
-                type: ContentChildren,
-                args: [KbqTreeNodeDef]
-            }], dataSource: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { treeControlInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeControl", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], nodeOutletQuery: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqTreeNodeOutlet), { isSignal: true }] }], nodeDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqTreeNodeDef), { isSignal: true }] }], dataSourceInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }] } });
+// `KbqTree` declares `role="tree"`, whose owned elements have to be `treeitem`s — and a bare
+// `kbq-tree-node` is the only kind of row it can render, since `KbqTreeOption` needs a parent only
+// `KbqTreeSelection` provides. The nodes are rendered flat into a single outlet, so the depth an AT
+// reports comes from `aria-level` rather than from the DOM.
 class KbqTreeNode {
     /**
-     * The most recently created `KbqTreeNode`. We save it in static variable so we can retrieve it
-     * in `KbqTree` and set the data to it.
+     * The most recently created `KbqTreeNode`, across every tree on the page.
+     *
+     * @deprecated Kept for backwards compatibility only — the tree hands a node its data through
+     * `KbqTreeBase.registerNode`, which is scoped to the tree that owns the node. Will be removed in 22.0.0.
      */
     static { this.mostRecentTreeNode = null; }
     get data() {
@@ -744,89 +1132,102 @@ class KbqTreeNode {
         this.elementRef = inject(ElementRef);
         this.tree = inject(KbqTreeBase);
         this.destroyed = new Subject();
+        /**
+         * Emits after the tree reused this node's view for a different data object, so a directive on the
+         * same element can re-derive what it computed from the previous one.
+         *
+         * @docs-private
+         */
+        this.refreshed = new Subject();
         KbqTreeNode.mostRecentTreeNode = this;
+        this.tree.registerNode(this);
     }
     ngOnDestroy() {
         this.destroyed.next();
         this.destroyed.complete();
+        this.refreshed.complete();
+    }
+    /**
+     * Called by the tree once `data` has been replaced on a reused view. State a subclass derived from
+     * the previous node — its value, its level — is stale at this point and has to be recomputed.
+     *
+     * @docs-private
+     */
+    refresh() {
+        this.refreshed.next();
     }
     focus() {
         this.elementRef.nativeElement.focus();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeNode, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTreeNode, isStandalone: true, selector: "kbq-tree-node", exportAs: ["kbqTreeNode"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeNode, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqTreeNode, isStandalone: true, selector: "kbq-tree-node", host: { attributes: { "role": "treeitem" }, properties: { "attr.aria-level": "level + 1" } }, exportAs: ["kbqTreeNode"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeNode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeNode, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tree-node',
+                    host: {
+                        role: 'treeitem',
+                        '[attr.aria-level]': 'level + 1'
+                    },
                     exportAs: 'kbqTreeNode'
                 }]
         }], ctorParameters: () => [] });
 
 /** @docs-private */
 class KbqTreeNodeToggleBaseDirective {
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get recursive() {
-        return this._recursive;
-    }
-    set recursive(value) {
-        this._recursive = coerceBooleanProperty(value);
+    constructor() {
+        this.tree = inject(KbqTreeBase);
+        this.treeNode = inject(KbqTreeNode);
+        this.node = input(undefined, ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+        /** Whether toggling expands or collapses the whole subtree instead of the node alone. */
+        this.recursive = input(false, { ...(ngDevMode ? { debugName: "recursive" } : /* istanbul ignore next */ {}), alias: 'kbqTreeNodeToggleRecursive', transform: booleanAttribute });
+        /**
+         * Backing input of `disabled`. Bind through the `disabled` attribute; read the `disabled` getter,
+         * which also reports the toggle disabled while a filter is active.
+         *
+         * @docs-private
+         */
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
+        /** Set while a filter is active: filtering already decides what is expanded. */
+        this.filterDisabled = toSignal(this.tree.treeControl.filterValue.pipe(map((value) => !!value?.length)), { initialValue: false });
+        this.disabledState = computed(() => this.disabledInput() || this.filterDisabled(), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
     }
-    // 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;
-        }
+        return this.disabledState();
     }
     get iconState() {
-        return this.tree.treeControl.isExpanded(this.node());
-    }
-    constructor() {
-        this.tree = inject(KbqTreeBase);
-        this.treeNode = inject(KbqTreeNode);
-        this.node = input(undefined, ...(ngDevMode ? [{ debugName: "node" }] : []));
-        this._recursive = false;
-        this._disabled = false;
-        this.tree.treeControl.filterValue.subscribe((value) => (this.disabled = !!value?.length));
+        // The node `toggle()` acts on when `node` is not bound: an unbound `node` would reach the control's
+        // `trackBy` as `undefined`.
+        return this.tree.treeControl.isExpanded(this.node() ?? this.treeNode.data);
     }
     toggle(event) {
         if (this.disabled)
             return;
-        if (this.recursive) {
+        if (this.recursive()) {
             this.tree.treeControl.toggleDescendants(this.treeNode.data);
         }
         else {
             this.tree.treeControl.toggle(this.treeNode.data);
         }
+        this.tree.saveState();
         event.stopPropagation();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeNodeToggleBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqTreeNodeToggleBaseDirective, isStandalone: true, inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, recursive: { classPropertyName: "recursive", publicName: "kbqTreeNodeToggleRecursive", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeNodeToggleBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqTreeNodeToggleBaseDirective, isStandalone: true, inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, recursive: { classPropertyName: "recursive", publicName: "kbqTreeNodeToggleRecursive", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeNodeToggleBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeNodeToggleBaseDirective, decorators: [{
             type: Directive
-        }], ctorParameters: () => [], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], recursive: [{
-                type: Input,
-                args: ['kbqTreeNodeToggleRecursive']
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], recursive: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqTreeNodeToggleRecursive", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 class KbqTreeNodeToggleComponent extends KbqTreeNodeToggleBaseDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeNodeToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqTreeNodeToggleComponent, isStandalone: true, selector: "kbq-tree-node-toggle", host: { listeners: { "click": "toggle($event)" }, properties: { "class.kbq-expanded": "iconState", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tree-node-toggle" }, exportAs: ["kbqTreeNodeToggle"], usesInheritance: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeNodeToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqTreeNodeToggleComponent, isStandalone: true, selector: "kbq-tree-node-toggle", host: { attributes: { "aria-hidden": "true" }, listeners: { "click": "toggle($event)" }, properties: { "class.kbq-expanded": "iconState", "attr.disabled": "disabled || null", "attr.aria-disabled": "disabled || null" }, classAttribute: "kbq-tree-node-toggle" }, exportAs: ["kbqTreeNodeToggle"], usesInheritance: true, ngImport: i0, template: `
         <ng-content>
             <i kbq-icon="kbq-chevron-down-s_16" [color]="'contrast-fade'"></i>
         </ng-content>
-    `, isInline: true, styles: [".kbq-tree-node-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:100%;padding-left:var(--kbq-tree-size-toggle-padding);padding-right:var(--kbq-tree-size-toggle-padding);cursor:pointer}.kbq-tree-node-toggle .kbq-icon{transform:rotate(-90deg)}.kbq-tree-node-toggle.kbq-expanded .kbq-icon{transform:rotate(0)}.kbq-tree-node-toggle[disabled]{cursor:default}.kbq-tree-node-toggle[disabled] .kbq-icon{color:var(--kbq-tree-states-disabled-tree-toggle-color)}.kbq-tree-selection:focus{outline:none}.kbq-tree-option{--kbq-option-background: var(--kbq-tree-default-container-background);background:var(--kbq-tree-default-container-background)}.kbq-tree-option .kbq-option-text{color:var(--kbq-tree-default-text-color)}.kbq-tree-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-default-action-button-color)}.kbq-tree-option .kbq-option-caption{color:var(--kbq-tree-default-caption-color)}.kbq-tree-option:not(.kbq-disabled):hover,.kbq-tree-option:not(.kbq-disabled).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused{--kbq-option-background: var(--kbq-tree-states-hover-container-background);background:var(--kbq-tree-states-hover-container-background)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-text{color:var(--kbq-tree-states-hover-text-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-caption{color:var(--kbq-tree-states-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled):active,.kbq-tree-option:not(.kbq-disabled).kbq-active{--kbq-option-background: var(--kbq-tree-states-active-container-background);background:var(--kbq-tree-states-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected{--kbq-option-background: var(--kbq-tree-states-selected-container-background);background:var(--kbq-tree-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-text{color:var(--kbq-tree-states-selected-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-caption{color:var(--kbq-tree-states-selected-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-states-selected-hover-container-background);background:var(--kbq-tree-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-text{color:var(--kbq-tree-states-selected-hover-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-caption{color:var(--kbq-tree-states-selected-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-states-selected-active-container-background);background:var(--kbq-tree-states-selected-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected),.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected{--kbq-option-background: var(--kbq-tree-multiple-states-selected-container-background);background:var(--kbq-tree-multiple-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):hover,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-multiple-states-selected-hover-container-background);background:var(--kbq-tree-multiple-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):active,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-multiple-states-selected-active-container-background);background:var(--kbq-tree-multiple-states-selected-active-container-background)}.kbq-tree-option.kbq-disabled{--kbq-option-background: var(--kbq-tree-states-disabled-container-background);background:var(--kbq-tree-states-disabled-container-background)}.kbq-tree-option.kbq-disabled .kbq-option-text{color:var(--kbq-tree-states-disabled-text-color)}.kbq-tree-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-disabled-action-button-color)}.kbq-tree-option.kbq-disabled .kbq-option-caption{color:var(--kbq-tree-states-disabled-caption-color)}.kbq-tree-option.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-tree-node-toggle .kbq-icon){color:var(--kbq-states-icon-disabled)}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused){border-color:var(--kbq-tree-states-focused-focus-outline-color)}.kbq-tree-option{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)}.kbq-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-content-gap-vertical: 0px;--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-tree-node-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:100%;cursor:pointer}.kbq-tree-node-toggle .kbq-icon{transform:rotate(-90deg)}.kbq-tree-node-toggle.kbq-expanded .kbq-icon{transform:rotate(0)}.kbq-tree-node-toggle[disabled]{cursor:default}.kbq-tree-node-toggle[disabled] .kbq-icon{color:var(--kbq-tree-states-disabled-tree-toggle-color)}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeNodeToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeNodeToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-tree-node-toggle', imports: [KbqIcon], template: `
         <ng-content>
@@ -834,16 +1235,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         </ng-content>
     `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tree-node-toggle',
+                        // The expanded state is announced on the owning `treeitem` through `aria-expanded`, and the
+                        // Left/Right arrow keys drive it, so exposing the chevron as a second control would only add
+                        // a duplicate stop for assistive tech.
+                        'aria-hidden': 'true',
                         '[class.kbq-expanded]': 'iconState',
                         '[attr.disabled]': 'disabled || null',
+                        '[attr.aria-disabled]': 'disabled || null',
                         '(click)': 'toggle($event)'
-                    }, exportAs: 'kbqTreeNodeToggle', styles: [".kbq-tree-node-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:100%;padding-left:var(--kbq-tree-size-toggle-padding);padding-right:var(--kbq-tree-size-toggle-padding);cursor:pointer}.kbq-tree-node-toggle .kbq-icon{transform:rotate(-90deg)}.kbq-tree-node-toggle.kbq-expanded .kbq-icon{transform:rotate(0)}.kbq-tree-node-toggle[disabled]{cursor:default}.kbq-tree-node-toggle[disabled] .kbq-icon{color:var(--kbq-tree-states-disabled-tree-toggle-color)}.kbq-tree-selection:focus{outline:none}.kbq-tree-option{--kbq-option-background: var(--kbq-tree-default-container-background);background:var(--kbq-tree-default-container-background)}.kbq-tree-option .kbq-option-text{color:var(--kbq-tree-default-text-color)}.kbq-tree-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-default-action-button-color)}.kbq-tree-option .kbq-option-caption{color:var(--kbq-tree-default-caption-color)}.kbq-tree-option:not(.kbq-disabled):hover,.kbq-tree-option:not(.kbq-disabled).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused{--kbq-option-background: var(--kbq-tree-states-hover-container-background);background:var(--kbq-tree-states-hover-container-background)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-text{color:var(--kbq-tree-states-hover-text-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-caption{color:var(--kbq-tree-states-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled):active,.kbq-tree-option:not(.kbq-disabled).kbq-active{--kbq-option-background: var(--kbq-tree-states-active-container-background);background:var(--kbq-tree-states-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected{--kbq-option-background: var(--kbq-tree-states-selected-container-background);background:var(--kbq-tree-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-text{color:var(--kbq-tree-states-selected-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-caption{color:var(--kbq-tree-states-selected-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-states-selected-hover-container-background);background:var(--kbq-tree-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-text{color:var(--kbq-tree-states-selected-hover-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-caption{color:var(--kbq-tree-states-selected-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-states-selected-active-container-background);background:var(--kbq-tree-states-selected-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected),.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected{--kbq-option-background: var(--kbq-tree-multiple-states-selected-container-background);background:var(--kbq-tree-multiple-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):hover,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-multiple-states-selected-hover-container-background);background:var(--kbq-tree-multiple-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):active,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-multiple-states-selected-active-container-background);background:var(--kbq-tree-multiple-states-selected-active-container-background)}.kbq-tree-option.kbq-disabled{--kbq-option-background: var(--kbq-tree-states-disabled-container-background);background:var(--kbq-tree-states-disabled-container-background)}.kbq-tree-option.kbq-disabled .kbq-option-text{color:var(--kbq-tree-states-disabled-text-color)}.kbq-tree-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-disabled-action-button-color)}.kbq-tree-option.kbq-disabled .kbq-option-caption{color:var(--kbq-tree-states-disabled-caption-color)}.kbq-tree-option.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-tree-node-toggle .kbq-icon){color:var(--kbq-states-icon-disabled)}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused){border-color:var(--kbq-tree-states-focused-focus-outline-color)}.kbq-tree-option{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)}.kbq-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-content-gap-vertical: 0px;--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
+                    }, exportAs: 'kbqTreeNodeToggle', styles: [".kbq-tree-node-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:100%;cursor:pointer}.kbq-tree-node-toggle .kbq-icon{transform:rotate(-90deg)}.kbq-tree-node-toggle.kbq-expanded .kbq-icon{transform:rotate(0)}.kbq-tree-node-toggle[disabled]{cursor:default}.kbq-tree-node-toggle[disabled] .kbq-icon{color:var(--kbq-tree-states-disabled-tree-toggle-color)}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
         }] });
+// No ARIA on this host: the directive is routinely applied to the `kbq-tree-option` element itself,
+// where the option already owns `role`, `aria-disabled` and the rest of the treeitem semantics.
 class KbqTreeNodeToggleDirective extends KbqTreeNodeToggleBaseDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeNodeToggleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTreeNodeToggleDirective, isStandalone: true, selector: "[kbq-tree-node-toggle], [kbqTreeNodeToggle]", host: { listeners: { "click": "toggle($event)" }, properties: { "attr.disabled": "disabled || null" } }, exportAs: ["kbqTreeNodeToggle"], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeNodeToggleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqTreeNodeToggleDirective, isStandalone: true, selector: "[kbq-tree-node-toggle], [kbqTreeNodeToggle]", host: { listeners: { "click": "toggle($event)" }, properties: { "attr.disabled": "disabled || null" } }, exportAs: ["kbqTreeNodeToggle"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeNodeToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeNodeToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-tree-node-toggle], [kbqTreeNodeToggle]',
@@ -857,24 +1265,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
 
 /** Injection token used to provide the parent component to options. */
 const KBQ_TREE_OPTION_PARENT_COMPONENT = new InjectionToken('KBQ_TREE_OPTION_PARENT_COMPONENT');
-/**
- * Represents a change event for a tree option.
- *
- * @param source - The tree option that has been modified or selected.
- * @param isUserInput - DEPRECATED Will be removed in version 20.
- */
+/** Represents a change event for a tree option. */
 class KbqTreeOptionChange {
-    constructor(source, isUserInput = false) {
+    constructor(
+    /** The tree option that has been modified or selected. */
+    source) {
         this.source = source;
-        this.isUserInput = isUserInput;
     }
 }
 let uniqueIdCounter = 0;
+const samePredicates = (a, b) => a.disabled === b.disabled && a.expanded === b.expanded;
 class KbqTreeOption extends KbqTreeNode {
+    /** Container of the option text, measured by `kbq-title`. */
+    get parentTextElement() {
+        return this.titleContainer();
+    }
     // Same element as `parentTextElement` — `.kbq-option-text` clips the text, so it is measured against itself.
     get textElement() {
         return this.parentTextElement;
     }
+    // Getters rather than the signal queries themselves: `KbqOptionActionComponent` reads the triggers as
+    // directive instances through KBQ_OPTION_ACTION_PARENT — see #DS-5079.
+    /** Tooltip trigger projected into the option. */
+    get tooltipTrigger() {
+        return this.tooltipTriggerQuery();
+    }
+    /** Dropdown trigger projected into the option. */
+    get dropdownTrigger() {
+        return this.dropdownTriggerQuery();
+    }
     get externalPseudoCheckbox() {
         return !!this.pseudoCheckbox();
     }
@@ -884,34 +1303,23 @@ class KbqTreeOption extends KbqTreeNode {
     set value(value) {
         this._value = value;
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Whether the option is disabled: through its own input, the tree, or the tree control's `isDisabled`. */
     get disabled() {
         if (this.selectAllRow()) {
-            return this._disabled || this.tree.disabled;
+            return this.disabledInput() || this.tree.disabled;
         }
-        return this._disabled || this.tree.disabled || this.tree.treeControl.isDisabled(this.data);
+        return this.disabledInput() || this.tree.disabled || this.tree.treeControl.isDisabled(this.data);
     }
-    set disabled(value) {
-        const newValue = coerceBooleanProperty(value);
-        if (newValue !== this._disabled) {
-            this._disabled = newValue;
-        }
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Whether the option renders a pseudo-checkbox. Falls back to the tree's own mode until bound. */
     get showCheckbox() {
-        return this._showCheckbox !== undefined ? this._showCheckbox : this.tree.showCheckbox;
-    }
-    set showCheckbox(value) {
-        this._showCheckbox = coerceBooleanProperty(value);
+        return this.showCheckboxInput() ?? this.tree.showCheckbox;
     }
     get selected() {
-        return this._selected;
+        return this.selectedState();
     }
     set selected(value) {
         const isSelected = coerceBooleanProperty(value);
-        if (isSelected !== this._selected) {
+        if (isSelected !== this.selectedState()) {
             this.setSelected(isSelected);
         }
     }
@@ -922,6 +1330,12 @@ class KbqTreeOption extends KbqTreeNode {
         // TODO: Add input property alternative for node envs.
         return (this.getHostElement().textContent || '').trim();
     }
+    get hasFocus() {
+        return this.focused();
+    }
+    set hasFocus(value) {
+        this.focused.set(value);
+    }
     get isExpandable() {
         if (this.selectAllRow()) {
             return false;
@@ -938,28 +1352,86 @@ class KbqTreeOption extends KbqTreeNode {
     get isToggleInDefaultPlace() {
         return !!(this.toggleElementDirective() || this.toggleElementComponent());
     }
+    get checkboxState() {
+        return this.checkbox();
+    }
+    set checkboxState(value) {
+        this.checkbox.set(value);
+    }
+    /**
+     * `aria-expanded` of the row as of the last check, reported for every branch and omitted on a leaf.
+     *
+     * Deliberately not `isExpandable`, which also asks whether the toggle is operable: filtering
+     * disables every toggle while leaving the matched branches expanded, and a branch that stops
+     * reporting `aria-expanded` is announced as a leaf while its children are on screen.
+     */
+    get ariaExpanded() {
+        // The one tracked read of `predicates`, which subscribes the row to the signals the predicates read: the
+        // other bindings read the snapshot `ngDoCheck` takes along with it, as a second read of this row's own signal
+        // would walk the producers of every row checked before it.
+        return this.predicates().expanded;
+    }
+    /**
+     * `aria-checked` of the row: tri-state for a checkbox option, and the "select all" state for the
+     * row that drives it. `null` for a plain option, which reports `aria-selected` instead.
+     */
+    get ariaChecked() {
+        // The checkbox state is read here rather than in `ngDoCheck`: this read is what brings the row back once the
+        // state changes.
+        return this.checkedCheckboxRow ? this.toAriaChecked(this.checkboxState) : this.checkedSelectAllState;
+    }
+    /** `aria-selected` of the row as of the last check. Options with a checkbox report `aria-checked` instead. */
+    get ariaSelected() {
+        return this.checkedAriaSelected;
+    }
     constructor() {
         const tree = inject(KBQ_TREE_OPTION_PARENT_COMPONENT);
         super();
         this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.ngZone = inject(NgZone);
+        this.environmentInjector = inject(EnvironmentInjector);
         this.destroyRef = inject(DestroyRef);
-        this.onFocus = new Subject();
-        this.onBlur = new Subject();
+        this.ngZone = inject(NgZone);
+        this.renderer = inject(Renderer2);
+        this.focusEvents = new Subject();
+        this.blurEvents = new Subject();
+        /** Emits when the option takes focus. */
+        this.onFocus = this.focusEvents.asObservable();
+        /** Emits when the option loses focus. */
+        this.onBlur = this.blurEvents.asObservable();
         this.preventBlur = false;
-        this.toggleElementDirective = contentChild(KbqTreeNodeToggleDirective, ...(ngDevMode ? [{ debugName: "toggleElementDirective" }] : []));
-        this.toggleElementComponent = contentChild(KbqTreeNodeToggleComponent, ...(ngDevMode ? [{ debugName: "toggleElementComponent" }] : []));
-        this.pseudoCheckbox = contentChild(KbqPseudoCheckbox, ...(ngDevMode ? [{ debugName: "pseudoCheckbox" }] : []));
-        this.actionButton = contentChild(KbqOptionActionComponent, ...(ngDevMode ? [{ debugName: "actionButton" }] : []));
-        this.checkboxThirdState = input(false, ...(ngDevMode ? [{ debugName: "checkboxThirdState" }] : []));
-        this._disabled = false;
+        this.titleContainer = viewChild('kbqTitleContainer', ...(ngDevMode ? [{ debugName: "titleContainer" }] : /* istanbul ignore next */ []));
+        this.toggleElementDirective = contentChild(KbqTreeNodeToggleDirective, ...(ngDevMode ? [{ debugName: "toggleElementDirective" }] : /* istanbul ignore next */ []));
+        this.toggleElementComponent = contentChild(KbqTreeNodeToggleComponent, ...(ngDevMode ? [{ debugName: "toggleElementComponent" }] : /* istanbul ignore next */ []));
+        this.pseudoCheckbox = contentChild(KbqPseudoCheckbox, ...(ngDevMode ? [{ debugName: "pseudoCheckbox" }] : /* istanbul ignore next */ []));
+        this.actionButton = contentChild(KbqOptionActionComponent, ...(ngDevMode ? [{ debugName: "actionButton" }] : /* istanbul ignore next */ []));
+        this.tooltipTriggerQuery = contentChild(KbqTooltipTrigger, ...(ngDevMode ? [{ debugName: "tooltipTriggerQuery" }] : /* istanbul ignore next */ []));
+        this.dropdownTriggerQuery = contentChild(KbqDropdownTrigger, ...(ngDevMode ? [{ debugName: "dropdownTriggerQuery" }] : /* istanbul ignore next */ []));
+        this.checkboxThirdState = input(false, ...(ngDevMode ? [{ debugName: "checkboxThirdState" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        /**
+         * `disabled` as of the last check, which the host bindings read: the tree control's `isDisabled` predicate gives
+         * no notice of a change and may be costly, so a check asks it once.
+         */
+        this.checkedDisabled = false;
+        /**
+         * What the tree control's `isDisabled` and `isExpandable` say about the row. Derived, so a predicate reading a
+         * signal brings the row back once that signal changes; `ngDoCheck` sets it on every check for one reading plain
+         * state. Read by a single host binding, see `ariaExpanded`.
+         */
+        this.predicates = linkedSignal(() => this.resolvePredicates(), { ...(ngDevMode ? { debugName: "predicates" } : /* istanbul ignore next */ {}), equal: samePredicates });
+        // Values of the ARIA host bindings as of the last check, resolved by `ngDoCheck`.
+        this.checkedAriaSelected = null;
+        this.checkedSelectAllState = null;
+        this.checkedCheckboxRow = false;
         /**
          * Whether the option can be selected by user interaction (click, keyboard, select all).
          * A non-selectable option remains focusable, navigable and expandable.
          * Programmatic selection (`setSelected`, `select`, value accessor) is not affected.
          * Options that are not rendered (e.g. collapsed) are not checked by "select all".
          */
-        this.selectable = input(true, ...(ngDevMode ? [{ debugName: "selectable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.selectable = input(true, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Whether this option is the tree's "select all" row rather than a rendered data node.
          *
@@ -967,40 +1439,90 @@ class KbqTreeOption extends KbqTreeNode {
          * (`getValue`, `isDisabled`, `isExpandable`, descendants) is skipped — those accessors belong to the
          * consumer and must never be handed a node their data source has never seen. Its checkbox state and
          * selection are driven from the outside instead.
+         *
          * @docs-private
          */
-        this.selectAllRow = input(false, ...(ngDevMode ? [{ debugName: "selectAllRow", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.onSelectionChange = output();
+        this.selectAllRow = input(false, { ...(ngDevMode ? { debugName: "selectAllRow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.showCheckboxInput = input(undefined, { ...(ngDevMode ? { debugName: "showCheckboxInput" } : /* istanbul ignore next */ {}), alias: 'showCheckbox',
+            transform: booleanAttribute });
+        /** Emits whenever the selected state of the option changes. */
+        this.selectionChange = output();
+        /** @deprecated Use `selectionChange` instead. Will be removed in 22.0.0. */
+        this.onSelectionChange = output({ alias: 'onSelectionChange' });
+        // Not an `output()`: `KbqTreeSelect` merges this stream with rxjs, which an `OutputEmitterRef`
+        // cannot feed without wrapping every call site in `outputToObservable`.
         this.userInteraction = new EventEmitter();
-        this._selected = false;
+        this.selectedState = signal(false, ...(ngDevMode ? [{ debugName: "selectedState" }] : /* istanbul ignore next */ []));
         this._id = `kbq-tree-option-${uniqueIdCounter++}`;
-        this.hasFocus = false;
+        this.focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+        // Raised from reporting a focus until `hasFocus` is: `kbqFocusAndReveal` fires `focusin` synchronously, and its
+        // listener calls back into `focus()` while `hasFocus` is still false.
+        this.focusReported = false;
+        this.checkbox = signal('unchecked', ...(ngDevMode ? [{ debugName: "checkbox" }] : /* istanbul ignore next */ []));
         this.updateCheckboxState = () => {
             if (this.selectAllRow())
                 return;
-            if (this.checkboxThirdState() && this.isExpandable) {
-                if (this.descendantsAllSelected()) {
-                    this.checkboxState = 'checked';
-                }
-                else if (this.descendantsPartiallySelected()) {
-                    this.checkboxState = 'indeterminate';
-                }
-                else {
-                    this.checkboxState = this.selected ? 'checked' : 'unchecked';
-                }
-            }
-            else {
-                this.checkboxState = this.selected ? 'checked' : 'unchecked';
-            }
+            this.syncCheckboxState();
             this.updateParentsCheckboxState(this.data);
         };
         this.tree = tree;
+        // Not a host listener: one would check the views on every row the pointer crosses, and only a tree in a select
+        // reacts to it.
+        const unlisten = this.ngZone.runOutsideAngular(() => this.renderer.listen(this.elementRef.nativeElement, 'mouseenter', () => this.onMouseenter()));
+        this.destroyRef.onDestroy(unlisten);
+    }
+    ngOnInit() {
+        // Selected from its first check: the tree's sweep reaches a new row a macrotask later, and a row it marked
+        // would render unselected first and then report a selection nobody made.
+        if (!this.selectAllRow())
+            this.selectedState.set(!!this.tree.selectionModel?.isSelected(this.data));
+    }
+    ngDoCheck() {
+        // Asked once per check, for a predicate reading plain state; a set to an equal value does nothing.
+        const predicates = this.resolvePredicates();
+        this.predicates.set(predicates);
+        if (predicates.disabled !== this.checkedDisabled) {
+            this.checkedDisabled = predicates.disabled;
+            this.changeDetectorRef.markForCheck();
+        }
+        // Resolved here, untracked: a tree checks its rows under the one reactive consumer of its view, where a signal
+        // read again costs a walk over every signal read before it. The host bindings read each signal of the row once
+        // (`selected`, `checkboxState`, `predicates`, the mode through `tree.multiple`), which brings the row back here
+        // on a change.
+        if (this.selectAllRow()) {
+            this.checkedAriaSelected = null;
+            this.checkedCheckboxRow = false;
+            this.checkedSelectAllState = this.toAriaChecked(this.tree.selectAllState);
+        }
+        else {
+            const showCheckbox = this.showCheckbox;
+            this.checkedAriaSelected = showCheckbox ? null : this.selected;
+            this.checkedCheckboxRow = showCheckbox;
+            this.checkedSelectAllState = null;
+        }
     }
     ngAfterContentInit() {
         if (this.selectAllRow())
             return;
-        Promise.resolve().then(this.updateCheckboxState);
+        // Its own state only: rendering a row changes no ancestor's, and the tree recomputes every row once the data
+        // nodes change.
+        Promise.resolve().then(() => this.syncCheckboxState());
+        this.value = this.tree.treeControl.getValue(this.data);
+    }
+    /**
+     * The value and the checkbox state were derived from the node this view held before it was reused,
+     * and `ngAfterContentInit` does not run again. A stale `value` drops the row out of the tree's
+     * `renderedOptions`, so it renders but can no longer be focused, selected or copied.
+     *
+     * @docs-private
+     */
+    refresh() {
+        super.refresh();
+        if (this.selectAllRow())
+            return;
         this.value = this.tree.treeControl.getValue(this.data);
+        this.markForCheck();
     }
     descendantsAllSelected() {
         const descendants = this.tree.treeControl.getDescendants(this.data);
@@ -1011,132 +1533,202 @@ class KbqTreeOption extends KbqTreeNode {
         return descendants.some((child) => this.tree?.selectionModel.isSelected(child));
     }
     updateParentsCheckboxState(node) {
-        this.tree.treeControl.getParents(node, []).forEach((parent) => {
-            const parentOption = this.tree.unorderedOptions.find((option) => option.data === parent);
-            parentOption?.updateCheckboxState();
+        const parents = new Set(this.tree.treeControl.getParents(node, []));
+        if (!parents.size)
+            return;
+        // Each ancestor reads its state off the selection rather than off its children, so recomputing it is enough.
+        this.tree.unorderedOptions.forEach((option) => {
+            if (parents.has(option.data))
+                option.syncCheckboxState();
         });
     }
     toggle() {
-        this.selected = !this.selected;
+        // Untracked, like the other imperative methods: called from a consumer's `effect()`, the state read on the
+        // way — `selected`, focus, `disabled`, the inputs — would make the effect run again whenever it changes.
+        untracked(() => (this.selected = !this.selected));
     }
     setSelected(selected) {
-        if (this.selectAllRow() || this._selected === selected || !this.tree.selectionModel) {
-            return;
-        }
-        this._selected = selected;
-        if (selected) {
-            this.tree.selectionModel.select(this.data);
-        }
-        else {
-            this.tree.selectionModel.deselect(this.data);
-        }
-        if (this.showCheckbox) {
-            this.updateCheckboxState();
-        }
-        this.markForCheck();
+        untracked(() => {
+            if (this.selectAllRow() || this.selectedState() === selected || !this.tree.selectionModel) {
+                return;
+            }
+            this.selectedState.set(selected);
+            if (selected) {
+                this.tree.selectionModel.select(this.data);
+            }
+            else {
+                this.tree.selectionModel.deselect(this.data);
+            }
+            if (this.showCheckbox) {
+                this.updateCheckboxState();
+            }
+        });
     }
     focus(focusOrigin) {
-        if (focusOrigin === 'program' || this.disabled || this.actionButton()?.hasFocus)
-            return;
-        // With the pointer already on this node, revealing it would shift the tree out from under it.
-        kbqFocusAndReveal(this.elementRef.nativeElement, focusOrigin === 'mouse');
-        if (!this.hasFocus) {
-            this.onFocus.next({ option: this });
-            Promise.resolve().then(() => {
-                this.hasFocus = true;
-                this.markForCheck();
-            });
-        }
+        untracked(() => {
+            if (focusOrigin === 'program' || this.disabled || this.actionButton()?.hasFocus)
+                return;
+            // With the pointer already on this node, revealing it would shift the tree out from under it.
+            kbqFocusAndReveal(this.elementRef.nativeElement, focusOrigin === 'mouse');
+            if (!this.hasFocus && !this.focusReported) {
+                const event = { option: this };
+                this.focusReported = true;
+                this.focusEvents.next(event);
+                this.tree.reportOptionFocus?.(event);
+                Promise.resolve().then(() => {
+                    this.focusReported = false;
+                    this.hasFocus = true;
+                    // The view only: focus changes no checkbox state.
+                    this.changeDetectorRef.markForCheck();
+                });
+            }
+        });
     }
     blur() {
         if (this.preventBlur) {
             return;
         }
-        // When animations are enabled, Angular may end up removing the option from the DOM a little
-        // earlier than usual, causing it to be blurred and throwing off the logic in the tree
-        // that moves focus not the next item. To work around the issue, we defer marking the option
-        // as not focused until the next time the zone stabilizes.
-        this.ngZone.onStable
-            .asObservable()
-            .pipe(take(1))
-            .subscribe(() => {
-            this.ngZone.run(() => {
-                if (this.actionButton()?.hasFocus || this.tree.optionShouldHoldFocusOnBlur) {
-                    return;
-                }
-                this.hasFocus = false;
-                this.onBlur.next({ option: this });
-            });
-        });
-    }
-    /** @docs-private */
+        // Deferred until the focus has settled: whatever takes it — this option's action button, or another option,
+        // which marks itself focused on a microtask — records it only after this blur. Reported before that, the move
+        // reads as the focus leaving the options: the option would drop its focused state while its own action button
+        // holds the focus, and the tree its active option.
+        afterNextRender(() => {
+            // Focus can be back by the time this runs (a blur and a focus in the same task): then nothing was lost.
+            if (_getFocusedElementPierceShadowDom() === this.elementRef.nativeElement)
+                return;
+            if (this.actionButton()?.hasFocus || this.tree.optionShouldHoldFocusOnBlur) {
+                return;
+            }
+            this.hasFocus = false;
+            const event = { option: this };
+            this.blurEvents.next(event);
+            this.tree.reportOptionBlur?.(event);
+        }, 
+        // The environment injector, not the option's: an option removed while focused is blurred as its view is
+        // destroyed, and the tree still has to hear about it to move focus.
+        { injector: this.environmentInjector });
+    }
+    /** @docs-private */
     getHeight() {
         return kbqGetElementHeight(this.elementRef.nativeElement);
     }
+    /**
+     * Label the key manager's type-ahead matches against.
+     *
+     * The "select all" row is navigable but is not a data node, and its label is a localized phrase —
+     * answering type-ahead with it would hijack every query starting with that letter.
+     *
+     * @docs-private
+     */
+    getLabel() {
+        return this.selectAllRow() ? '' : this.viewValue;
+    }
     select(setFocus = true) {
-        if (this.selectAllRow() || this._selected) {
-            return;
-        }
-        this._selected = true;
-        if (setFocus && !this.hasFocus) {
-            this.focus();
-        }
-        this.updateCheckboxState();
-        this.markForCheck();
-        this.emitSelectionChangeEvent();
+        untracked(() => {
+            if (this.selectAllRow() || this.selectedState()) {
+                return;
+            }
+            this.selectedState.set(true);
+            if (setFocus && !this.hasFocus) {
+                this.focus();
+            }
+            // Its own state only: an ancestor's reads the selection model, which this leaves as it is.
+            this.syncCheckboxState();
+            this.emitSelectionChangeEvent();
+        });
     }
     deselect() {
-        if (this.selectAllRow() || !this._selected) {
-            return;
-        }
-        this._selected = false;
-        this.updateCheckboxState();
-        this.markForCheck();
-        this.emitSelectionChangeEvent();
+        untracked(() => {
+            if (this.selectAllRow() || !this.selectedState()) {
+                return;
+            }
+            this.selectedState.set(false);
+            // Its own state only, as in `select`.
+            this.syncCheckboxState();
+            this.emitSelectionChangeEvent();
+        });
     }
     onKeydown($event) {
         kbqFocusOptionActionOnTab($event, this.actionButton());
     }
     selectViaInteraction($event) {
-        if (this.disabled || !this.selectable()) {
-            return;
-        }
-        this.markForCheck();
-        this.userInteraction.emit();
-        const shiftKey = $event ? hasModifierKey($event, 'shiftKey') : false;
-        // ctrlKey is for Windows, metaKey is for MacOS
-        const ctrlKey = $event ? hasModifierKey($event, 'ctrlKey', 'metaKey') : false;
-        this.tree.setSelectedOptionsByClick(this, shiftKey, ctrlKey);
+        untracked(() => {
+            if (this.disabled || !this.selectable()) {
+                return;
+            }
+            this.userInteraction.emit();
+            const shiftKey = $event ? hasModifierKey($event, 'shiftKey') : false;
+            // ctrlKey is for Windows, metaKey is for MacOS
+            const ctrlKey = $event ? hasModifierKey($event, 'ctrlKey', 'metaKey') : false;
+            this.tree.setSelectedOptionsByClick(this, shiftKey, ctrlKey);
+        });
     }
     emitSelectionChangeEvent() {
         // The tree can still hold an option whose node was re-rendered away until it rebuilds its list.
         if (this.destroyRef.destroyed)
             return;
-        this.onSelectionChange.emit(new KbqTreeOptionChange(this));
+        const event = new KbqTreeOptionChange(this);
+        this.selectionChange.emit(event);
+        this.onSelectionChange.emit(event);
     }
     getHostElement() {
         return this.elementRef.nativeElement;
     }
     markForCheck() {
         this.changeDetectorRef.markForCheck();
-        if (this.showCheckbox) {
-            this.updateCheckboxState();
+        // Its own state only: after a selection, data or mode change the tree calls this on every option. A projected
+        // checkbox shows the state while the tree's own is hidden.
+        if (this.showCheckbox || this.externalPseudoCheckbox) {
+            this.syncCheckboxState();
         }
     }
     /** @docs-private */
     onMouseenter() {
         if (this.disabled || !this.tree.inSelect)
             return;
-        this.focus('mouse');
+        // Focusing the option it already holds would only run change detection.
+        if (this.hasFocus && _getFocusedElementPierceShadowDom() === this.elementRef.nativeElement)
+            return;
+        this.ngZone.run(() => this.focus('mouse'));
+    }
+    /** Recomputes the option's own checkbox state, leaving its ancestors as they are. */
+    syncCheckboxState() {
+        if (this.selectAllRow())
+            return;
+        if (this.checkboxThirdState() && this.isExpandable) {
+            // One descendant walk, not two: each walk covers the whole subtree, and the roll-up runs this method for
+            // every ancestor.
+            const descendants = this.tree.treeControl.getDescendants(this.data);
+            const selectedCount = descendants.filter((child) => this.tree.selectionModel.isSelected(child)).length;
+            if (selectedCount === descendants.length) {
+                this.checkboxState = 'checked';
+            }
+            else if (selectedCount > 0) {
+                this.checkboxState = 'indeterminate';
+            }
+            else {
+                this.checkboxState = this.selected ? 'checked' : 'unchecked';
+            }
+        }
+        else {
+            this.checkboxState = this.selected ? 'checked' : 'unchecked';
+        }
+    }
+    toAriaChecked(state) {
+        return state === 'indeterminate' ? 'mixed' : `${state === 'checked'}`;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqTreeOption, isStandalone: true, selector: "kbq-tree-option", inputs: { checkboxThirdState: { classPropertyName: "checkboxThirdState", publicName: "checkboxThirdState", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectAllRow: { classPropertyName: "selectAllRow", publicName: "selectAllRow", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "focusin": "focus()", "mouseenter": "onMouseenter()", "blur": "blur()", "click": "selectViaInteraction($event)", "keydown": "onKeydown($event)" }, properties: { "class.kbq-tree-option_multiple": "tree.multiple", "class.kbq-selected": "selected", "class.kbq-focused": "hasFocus", "class.kbq-disabled": "disabled", "class.kbq-action-button-focused": "actionButton()?.active", "attr.id": "id", "attr.tabindex": "-1", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tree-option" }, providers: [
+    resolvePredicates() {
+        const branch = !this.selectAllRow() && this.tree.treeControl.isExpandable(this.data);
+        return { disabled: this.disabled, expanded: branch ? this.isExpanded : null };
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqTreeOption, isStandalone: true, selector: "kbq-tree-option", inputs: { checkboxThirdState: { classPropertyName: "checkboxThirdState", publicName: "checkboxThirdState", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectAllRow: { classPropertyName: "selectAllRow", publicName: "selectAllRow", isSignal: true, isRequired: false, transformFunction: null }, showCheckboxInput: { classPropertyName: "showCheckboxInput", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "treeitem" }, listeners: { "focusin": "focus()", "blur": "blur()", "click": "selectViaInteraction($event)", "keydown": "onKeydown($event)" }, properties: { "class.kbq-tree-option_multiple": "tree.multiple", "class.kbq-selected": "selected", "class.kbq-focused": "hasFocus", "class.kbq-disabled": "checkedDisabled", "class.kbq-action-button-focused": "actionButton()?.active", "attr.id": "id", "attr.tabindex": "-1", "attr.aria-disabled": "checkedDisabled || null", "attr.aria-expanded": "ariaExpanded", "attr.aria-checked": "ariaChecked", "attr.aria-selected": "ariaSelected" }, classAttribute: "kbq-tree-option" }, providers: [
             { provide: KbqTreeNode, useExisting: KbqTreeOption },
             { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTreeOption },
             { provide: KBQ_OPTION_ACTION_PARENT, useExisting: KbqTreeOption }
-        ], queries: [{ propertyName: "toggleElementDirective", first: true, predicate: KbqTreeNodeToggleDirective, descendants: true, isSignal: true }, { propertyName: "toggleElementComponent", first: true, predicate: KbqTreeNodeToggleComponent, descendants: true, isSignal: true }, { propertyName: "pseudoCheckbox", first: true, predicate: KbqPseudoCheckbox, descendants: true, isSignal: true }, { propertyName: "actionButton", first: true, predicate: KbqOptionActionComponent, descendants: true, isSignal: true }, { propertyName: "tooltipTrigger", first: true, predicate: KbqTooltipTrigger, descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: KbqDropdownTrigger, descendants: true }], viewQueries: [{ propertyName: "parentTextElement", first: true, predicate: ["kbqTitleContainer"], descendants: true }], exportAs: ["kbqTreeOption"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]\" />\n\n@if (externalPseudoCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\" />\n} @else if (showCheckbox) {\n    <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"checkboxState\" />\n}\n\n<ng-content select=\"kbq-checkbox\" />\n\n<ng-content select=\"[kbq-icon]\" />\n\n<ng-content select=\"kbq-progress-spinner\" />\n\n<span #kbqTitleContainer class=\"kbq-option-text\">\n    <ng-content />\n</span>\n\n@if (actionButton()) {\n    <kbq-action-container>\n        <ng-content select=\"kbq-option-action\" />\n    </kbq-action-container>\n}\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select,.kbq-tree-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tree-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-tree-option{position:relative;box-sizing:border-box;display:flex;align-items:center;min-height:32px;overflow-wrap:break-word;border-width:var(--kbq-tree-size-container-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tree-option-border-radius);padding-top:calc(var(--kbq-tree-size-container-padding-vertical) - var(--kbq-tree-size-container-focus-outline-width));padding-right:calc(var(--kbq-tree-size-container-padding-right) - var(--kbq-tree-size-container-focus-outline-width));padding-bottom:calc(var(--kbq-tree-size-container-padding-vertical) - var(--kbq-tree-size-container-focus-outline-width));gap:var(--kbq-tree-size-container-content-gap-horizontal)}.kbq-tree-option .kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-tree-option .kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-tree-option .kbq-option-text:empty{display:none}.kbq-tree-option .kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.kbq-tree-option:has(.kbq-option-caption)>[kbq-tree-node-toggle],.kbq-tree-option:has(.kbq-option-caption)>[kbqTreeNodeToggle],.kbq-tree-option:has(.kbq-option-caption)>.kbq-tree-node-toggle,.kbq-tree-option:has(.kbq-option-caption)>.kbq-pseudo-checkbox,.kbq-tree-option:has(.kbq-option-caption)>kbq-checkbox,.kbq-tree-option:has(.kbq-option-caption)>[kbq-icon],.kbq-tree-option:has(.kbq-option-caption)>kbq-progress-spinner{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-tree-option:has(.kbq-option-caption)>.kbq-tree-node-toggle{height:var(--kbq-typography-text-normal-line-height);margin-top:0}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not(.kbq-disabled){cursor:pointer}.kbq-tree-option:is(.kbq-checked,.kbq-selected,.kbq-focused):has(+:is(.kbq-checked,.kbq-selected,.kbq-focused)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-tree-option:is(.kbq-checked,.kbq-selected,.kbq-focused)+:is(.kbq-checked,.kbq-selected,.kbq-focused){border-top-left-radius:0;border-top-right-radius:0}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-content-gap-vertical: 0px;--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "component", type: KbqActionContainer, selector: "kbq-action-container", exportAs: ["kbqActionContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "toggleElementDirective", first: true, predicate: KbqTreeNodeToggleDirective, descendants: true, isSignal: true }, { propertyName: "toggleElementComponent", first: true, predicate: KbqTreeNodeToggleComponent, descendants: true, isSignal: true }, { propertyName: "pseudoCheckbox", first: true, predicate: KbqPseudoCheckbox, descendants: true, isSignal: true }, { propertyName: "actionButton", first: true, predicate: KbqOptionActionComponent, descendants: true, isSignal: true }, { propertyName: "tooltipTriggerQuery", first: true, predicate: KbqTooltipTrigger, descendants: true, isSignal: true }, { propertyName: "dropdownTriggerQuery", first: true, predicate: KbqDropdownTrigger, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "titleContainer", first: true, predicate: ["kbqTitleContainer"], descendants: true, isSignal: true }], exportAs: ["kbqTreeOption"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]\" />\n\n@if (externalPseudoCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\" />\n} @else if (showCheckbox) {\n    <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"checkboxState\" />\n}\n\n<ng-content select=\"kbq-checkbox\" />\n\n<ng-content select=\"[kbq-icon]\" />\n\n<ng-content select=\"kbq-progress-spinner\" />\n\n<span #kbqTitleContainer class=\"kbq-option-text\">\n    <ng-content />\n</span>\n\n@if (actionButton()) {\n    <kbq-action-container>\n        <ng-content select=\"kbq-option-action\" />\n    </kbq-action-container>\n}\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-tree-option{-webkit-user-select:none;user-select:none}.kbq-tree-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-tree-option{position:relative;box-sizing:border-box;display:flex;align-items:center;min-height:32px;overflow-wrap:break-word;border-width:var(--kbq-tree-size-container-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tree-option-border-radius)}@supports (corner-shape: squircle){.kbq-tree-option{corner-shape:squircle;border-radius:clamp(var(--kbq-tree-option-border-radius) * 1.85,var(--kbq-tree-option-border-radius) * 2.3 - 3.6px,var(--kbq-tree-option-border-radius) * 2)}}.kbq-tree-option{padding-top:calc(var(--kbq-tree-size-container-padding-vertical) - var(--kbq-tree-size-container-focus-outline-width));padding-right:calc(var(--kbq-tree-size-container-padding-right) - var(--kbq-tree-size-container-focus-outline-width));padding-bottom:calc(var(--kbq-tree-size-container-padding-vertical) - var(--kbq-tree-size-container-focus-outline-width));gap:var(--kbq-tree-size-container-content-gap-horizontal)}.kbq-tree-option .kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-tree-option .kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-tree-option .kbq-option-text:empty{display:none}.kbq-tree-option .kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-tree-option:has(.kbq-option-caption)>[kbq-tree-node-toggle],.kbq-tree-option:has(.kbq-option-caption)>[kbqTreeNodeToggle],.kbq-tree-option:has(.kbq-option-caption)>.kbq-tree-node-toggle,.kbq-tree-option:has(.kbq-option-caption)>.kbq-pseudo-checkbox,.kbq-tree-option:has(.kbq-option-caption)>kbq-checkbox,.kbq-tree-option:has(.kbq-option-caption)>[kbq-icon],.kbq-tree-option:has(.kbq-option-caption)>kbq-progress-spinner{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-tree-option:has(.kbq-option-caption)>.kbq-tree-node-toggle{height:var(--kbq-typography-text-normal-line-height);margin-top:0}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not(.kbq-disabled){cursor:pointer}.kbq-tree-option:is(.kbq-checked,.kbq-selected,.kbq-focused):has(+:is(.kbq-checked,.kbq-selected,.kbq-focused)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-tree-option:is(.kbq-checked,.kbq-selected,.kbq-focused)+:is(.kbq-checked,.kbq-selected,.kbq-focused){border-top-left-radius:0;border-top-right-radius:0}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "component", type: KbqActionContainer, selector: "kbq-action-container", exportAs: ["kbqActionContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeOption, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-tree-option', imports: [
                         KbqPseudoCheckbox,
@@ -1147,34 +1739,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         { provide: KBQ_OPTION_ACTION_PARENT, useExisting: KbqTreeOption }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tree-option',
+                        // The "select all" row is a treeitem too: `role="checkbox"` would be an invalid child of
+                        // `role="tree"`, and `aria-checked` already carries its state.
+                        role: 'treeitem',
                         '[class.kbq-tree-option_multiple]': 'tree.multiple',
                         '[class.kbq-selected]': 'selected',
                         '[class.kbq-focused]': 'hasFocus',
-                        '[class.kbq-disabled]': 'disabled',
+                        '[class.kbq-disabled]': 'checkedDisabled',
                         '[class.kbq-action-button-focused]': 'actionButton()?.active',
                         '[attr.id]': 'id',
                         '[attr.tabindex]': '-1',
-                        '[attr.disabled]': 'disabled || null',
+                        '[attr.aria-disabled]': 'checkedDisabled || null',
+                        '[attr.aria-expanded]': 'ariaExpanded',
+                        // `aria-level` comes from `KbqTreeNode`: a second binding here would read `level` twice.
+                        '[attr.aria-checked]': 'ariaChecked',
+                        '[attr.aria-selected]': 'ariaSelected',
                         '(focusin)': 'focus()',
-                        '(mouseenter)': 'onMouseenter()',
                         '(blur)': 'blur()',
                         '(click)': 'selectViaInteraction($event)',
                         '(keydown)': 'onKeydown($event)'
-                    }, exportAs: 'kbqTreeOption', template: "<ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]\" />\n\n@if (externalPseudoCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\" />\n} @else if (showCheckbox) {\n    <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"checkboxState\" />\n}\n\n<ng-content select=\"kbq-checkbox\" />\n\n<ng-content select=\"[kbq-icon]\" />\n\n<ng-content select=\"kbq-progress-spinner\" />\n\n<span #kbqTitleContainer class=\"kbq-option-text\">\n    <ng-content />\n</span>\n\n@if (actionButton()) {\n    <kbq-action-container>\n        <ng-content select=\"kbq-option-action\" />\n    </kbq-action-container>\n}\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select,.kbq-tree-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tree-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-tree-option{position:relative;box-sizing:border-box;display:flex;align-items:center;min-height:32px;overflow-wrap:break-word;border-width:var(--kbq-tree-size-container-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tree-option-border-radius);padding-top:calc(var(--kbq-tree-size-container-padding-vertical) - var(--kbq-tree-size-container-focus-outline-width));padding-right:calc(var(--kbq-tree-size-container-padding-right) - var(--kbq-tree-size-container-focus-outline-width));padding-bottom:calc(var(--kbq-tree-size-container-padding-vertical) - var(--kbq-tree-size-container-focus-outline-width));gap:var(--kbq-tree-size-container-content-gap-horizontal)}.kbq-tree-option .kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-tree-option .kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-tree-option .kbq-option-text:empty{display:none}.kbq-tree-option .kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.kbq-tree-option:has(.kbq-option-caption)>[kbq-tree-node-toggle],.kbq-tree-option:has(.kbq-option-caption)>[kbqTreeNodeToggle],.kbq-tree-option:has(.kbq-option-caption)>.kbq-tree-node-toggle,.kbq-tree-option:has(.kbq-option-caption)>.kbq-pseudo-checkbox,.kbq-tree-option:has(.kbq-option-caption)>kbq-checkbox,.kbq-tree-option:has(.kbq-option-caption)>[kbq-icon],.kbq-tree-option:has(.kbq-option-caption)>kbq-progress-spinner{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-tree-option:has(.kbq-option-caption)>.kbq-tree-node-toggle{height:var(--kbq-typography-text-normal-line-height);margin-top:0}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not(.kbq-disabled){cursor:pointer}.kbq-tree-option:is(.kbq-checked,.kbq-selected,.kbq-focused):has(+:is(.kbq-checked,.kbq-selected,.kbq-focused)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-tree-option:is(.kbq-checked,.kbq-selected,.kbq-focused)+:is(.kbq-checked,.kbq-selected,.kbq-focused){border-top-left-radius:0;border-top-right-radius:0}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-content-gap-vertical: 0px;--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { parentTextElement: [{
-                type: ViewChild,
-                args: ['kbqTitleContainer']
-            }], toggleElementDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTreeNodeToggleDirective), { isSignal: true }] }], toggleElementComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTreeNodeToggleComponent), { isSignal: true }] }], pseudoCheckbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqPseudoCheckbox), { isSignal: true }] }], actionButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqOptionActionComponent), { isSignal: true }] }], tooltipTrigger: [{
-                type: ContentChild,
-                args: [KbqTooltipTrigger]
-            }], dropdownTrigger: [{
-                type: ContentChild,
-                args: [KbqDropdownTrigger]
-            }], checkboxThirdState: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxThirdState", required: false }] }], disabled: [{
-                type: Input
-            }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectAllRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllRow", required: false }] }], showCheckbox: [{
-                type: Input
-            }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });
+                    }, exportAs: 'kbqTreeOption', template: "<ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]\" />\n\n@if (externalPseudoCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\" />\n} @else if (showCheckbox) {\n    <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"checkboxState\" />\n}\n\n<ng-content select=\"kbq-checkbox\" />\n\n<ng-content select=\"[kbq-icon]\" />\n\n<ng-content select=\"kbq-progress-spinner\" />\n\n<span #kbqTitleContainer class=\"kbq-option-text\">\n    <ng-content />\n</span>\n\n@if (actionButton()) {\n    <kbq-action-container>\n        <ng-content select=\"kbq-option-action\" />\n    </kbq-action-container>\n}\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-tree-option{-webkit-user-select:none;user-select:none}.kbq-tree-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-tree-option{position:relative;box-sizing:border-box;display:flex;align-items:center;min-height:32px;overflow-wrap:break-word;border-width:var(--kbq-tree-size-container-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tree-option-border-radius)}@supports (corner-shape: squircle){.kbq-tree-option{corner-shape:squircle;border-radius:clamp(var(--kbq-tree-option-border-radius) * 1.85,var(--kbq-tree-option-border-radius) * 2.3 - 3.6px,var(--kbq-tree-option-border-radius) * 2)}}.kbq-tree-option{padding-top:calc(var(--kbq-tree-size-container-padding-vertical) - var(--kbq-tree-size-container-focus-outline-width));padding-right:calc(var(--kbq-tree-size-container-padding-right) - var(--kbq-tree-size-container-focus-outline-width));padding-bottom:calc(var(--kbq-tree-size-container-padding-vertical) - var(--kbq-tree-size-container-focus-outline-width));gap:var(--kbq-tree-size-container-content-gap-horizontal)}.kbq-tree-option .kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-tree-option .kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-tree-option .kbq-option-text:empty{display:none}.kbq-tree-option .kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-tree-option:has(.kbq-option-caption)>[kbq-tree-node-toggle],.kbq-tree-option:has(.kbq-option-caption)>[kbqTreeNodeToggle],.kbq-tree-option:has(.kbq-option-caption)>.kbq-tree-node-toggle,.kbq-tree-option:has(.kbq-option-caption)>.kbq-pseudo-checkbox,.kbq-tree-option:has(.kbq-option-caption)>kbq-checkbox,.kbq-tree-option:has(.kbq-option-caption)>[kbq-icon],.kbq-tree-option:has(.kbq-option-caption)>kbq-progress-spinner{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-tree-option:has(.kbq-option-caption)>.kbq-tree-node-toggle{height:var(--kbq-typography-text-normal-line-height);margin-top:0}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not(.kbq-disabled){cursor:pointer}.kbq-tree-option:is(.kbq-checked,.kbq-selected,.kbq-focused):has(+:is(.kbq-checked,.kbq-selected,.kbq-focused)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-tree-option:is(.kbq-checked,.kbq-selected,.kbq-focused)+:is(.kbq-checked,.kbq-selected,.kbq-focused){border-top-left-radius:0;border-top-right-radius:0}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { titleContainer: [{ type: i0.ViewChild, args: ['kbqTitleContainer', { isSignal: true }] }], toggleElementDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTreeNodeToggleDirective), { isSignal: true }] }], toggleElementComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTreeNodeToggleComponent), { isSignal: true }] }], pseudoCheckbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqPseudoCheckbox), { isSignal: true }] }], actionButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqOptionActionComponent), { isSignal: true }] }], tooltipTriggerQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTooltipTrigger), { isSignal: true }] }], dropdownTriggerQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqDropdownTrigger), { isSignal: true }] }], checkboxThirdState: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxThirdState", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectAllRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllRow", required: false }] }], showCheckboxInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });
 
 /** Regex used to split a string on its CSS units. */
 const cssUnitPattern = /([A-Za-z%]+)$/;
@@ -1185,49 +1770,65 @@ class KbqTreeNodePadding {
     set level(value) {
         this.setLevelInput(value);
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get indent() {
-        return this._indent;
-    }
-    set indent(indent) {
-        this.setIndentInput(indent);
-    }
     get leftPadding() {
-        return (this.withIcon ? 0 : this.iconWidth) + this._indent;
+        return (this.withIcon ? 0 : this.iconWidth) + this.parsedIndent().value;
     }
     get leftPaddingForFirstLevel() {
         const border = 2;
-        return (this.withIcon ? 0 : this.iconWidth) + this._indent - border;
+        return (this.withIcon ? 0 : this.iconWidth) + this.parsedIndent().value - border;
+    }
+    /** CSS units used for the indentation value. */
+    get indentUnits() {
+        return this.parsedIndent().units;
     }
     constructor() {
         this.treeNode = inject(KbqTreeNode);
         this.tree = inject(KbqTreeBase);
         this.renderer = inject(Renderer2);
         this.element = inject(ElementRef);
-        this.option = inject(KbqTreeOption);
+        // Optional so the directive also works on a bare `kbq-tree-node`, which has no option around it.
+        this.option = inject(KbqTreeOption, { optional: true });
         this.dir = inject(Directionality, { optional: true });
-        this._indent = 12;
-        /** CSS units used for the indentation value. */
-        this.indentUnits = 'px';
+        /** Indentation added per nesting level. Accepts a bare number (px) or a value with CSS units. */
+        this.indent = input(12, { ...(ngDevMode ? { debugName: "indent" } : /* istanbul ignore next */ {}), alias: 'kbqTreeNodePaddingIndent' });
+        this.parsedIndent = computed(() => {
+            const indent = this.indent();
+            if (typeof indent !== 'string') {
+                return { value: coerceNumberProperty(indent), units: 'px' };
+            }
+            const [value, units] = indent.split(cssUnitPattern);
+            return { value: coerceNumberProperty(value), units: units || 'px' };
+        }, ...(ngDevMode ? [{ debugName: "parsedIndent" }] : /* istanbul ignore next */ []));
+        /**
+         * Horizontal room a toggle takes up in a row: its own 16px box plus the option's 8px `gap`. A node
+         * without a toggle reserves the same amount so its content lines up with a sibling that has one —
+         * which is why widening the toggle itself pushes every branch row out of line.
+         */
         this.iconWidth = 24;
         this.dir?.change?.pipe(takeUntilDestroyed()).subscribe(() => this.setPadding());
+        // The node the padding was computed from is gone once its view is reused, and the replacement
+        // can sit at a different level.
+        this.treeNode.refreshed.pipe(takeUntilDestroyed()).subscribe(() => this.setPadding());
+        effect(() => {
+            this.parsedIndent();
+            this.setPadding();
+        });
     }
     ngAfterViewInit() {
-        this.withIcon = this.option.isToggleInDefaultPlace;
+        this.withIcon = this.option?.isToggleInDefaultPlace ?? false;
         this.setPadding();
     }
     paddingIndent() {
         const treeControl = this.tree.treeControl;
         const nodeLevel = this.treeNode.data && treeControl.getLevel ? treeControl.getLevel(this.treeNode.data) : 0;
         const level = this.level || nodeLevel;
-        return level > 0 ? `${level * this._indent + this.leftPadding}px` : `${this.leftPaddingForFirstLevel}px`;
+        const { value, units } = this.parsedIndent();
+        return level > 0 ? `${level * value + this.leftPadding}${units}` : `${this.leftPaddingForFirstLevel}${units}`;
     }
     /**
      * This has been extracted to a util because of TS 4 and VE.
      * View Engine doesn't support property rename inheritance.
      * TS 4.0 doesn't allow properties to override accessors or vice-versa.
-     * @docs-private
      */
     setLevelInput(value) {
         // Set to null as the fallback value so that _setPadding can fall back to the node level if the
@@ -1236,58 +1837,40 @@ class KbqTreeNodePadding {
         this._level = coerceNumberProperty(value, null);
         this.setPadding();
     }
-    /**
-     * This has been extracted to a util because of TS 4 and VE.
-     * View Engine doesn't support property rename inheritance.
-     * TS 4.0 doesn't allow properties to override accessors or vice-versa.
-     * @docs-private
-     */
-    setIndentInput(indent) {
-        let value = indent;
-        let units = 'px';
-        if (typeof indent === 'string') {
-            const parts = indent.split(cssUnitPattern);
-            value = parts[0];
-            units = parts[1] || units;
-        }
-        this.indentUnits = units;
-        this._indent = coerceNumberProperty(value);
-        this.setPadding();
-    }
     setPadding() {
         const padding = this.paddingIndent();
         const paddingProp = this.dir?.value === 'rtl' ? 'paddingRight' : 'paddingLeft';
         this.renderer.setStyle(this.element.nativeElement, paddingProp, padding);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeNodePadding, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTreeNodePadding, isStandalone: true, selector: "[kbqTreeNodePadding]", inputs: { indent: ["kbqTreeNodePaddingIndent", "indent"] }, exportAs: ["kbqTreeNodePadding"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeNodePadding, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqTreeNodePadding, isStandalone: true, selector: "[kbqTreeNodePadding]", inputs: { indent: { classPropertyName: "indent", publicName: "kbqTreeNodePaddingIndent", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["kbqTreeNodePadding"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeNodePadding, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeNodePadding, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTreeNodePadding]',
                     exportAs: 'kbqTreeNodePadding'
                 }]
-        }], ctorParameters: () => [], propDecorators: { indent: [{
-                type: Input,
-                args: ['kbqTreeNodePaddingIndent']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqTreeNodePaddingIndent", required: false }] }] } });
 
 class KbqTree extends KbqTreeBase {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTree, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqTree, isStandalone: true, selector: "kbq-tree", host: { classAttribute: "kbq-tree" }, exportAs: ["kbqTree"], usesInheritance: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTree, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqTree, isStandalone: true, selector: "kbq-tree", host: { attributes: { "role": "tree" }, classAttribute: "kbq-tree" }, providers: [{ provide: KbqTreeBase, useExisting: KbqTree }], exportAs: ["kbqTree"], usesInheritance: true, hostDirectives: [{ directive: i1.KbqStateSaving, inputs: ["useStateSaving", "useStateSaving", "stateSavingKey", "stateSavingKey"] }], ngImport: i0, template: `
         <ng-container kbqTreeNodeOutlet />
-    `, isInline: true, styles: [".kbq-tree{display:block}.kbq-tree-selection:focus{outline:none}.kbq-tree-option{--kbq-option-background: var(--kbq-tree-default-container-background);background:var(--kbq-tree-default-container-background)}.kbq-tree-option .kbq-option-text{color:var(--kbq-tree-default-text-color)}.kbq-tree-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-default-action-button-color)}.kbq-tree-option .kbq-option-caption{color:var(--kbq-tree-default-caption-color)}.kbq-tree-option:not(.kbq-disabled):hover,.kbq-tree-option:not(.kbq-disabled).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused{--kbq-option-background: var(--kbq-tree-states-hover-container-background);background:var(--kbq-tree-states-hover-container-background)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-text{color:var(--kbq-tree-states-hover-text-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-caption{color:var(--kbq-tree-states-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled):active,.kbq-tree-option:not(.kbq-disabled).kbq-active{--kbq-option-background: var(--kbq-tree-states-active-container-background);background:var(--kbq-tree-states-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected{--kbq-option-background: var(--kbq-tree-states-selected-container-background);background:var(--kbq-tree-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-text{color:var(--kbq-tree-states-selected-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-caption{color:var(--kbq-tree-states-selected-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-states-selected-hover-container-background);background:var(--kbq-tree-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-text{color:var(--kbq-tree-states-selected-hover-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-caption{color:var(--kbq-tree-states-selected-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-states-selected-active-container-background);background:var(--kbq-tree-states-selected-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected),.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected{--kbq-option-background: var(--kbq-tree-multiple-states-selected-container-background);background:var(--kbq-tree-multiple-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):hover,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-multiple-states-selected-hover-container-background);background:var(--kbq-tree-multiple-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):active,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-multiple-states-selected-active-container-background);background:var(--kbq-tree-multiple-states-selected-active-container-background)}.kbq-tree-option.kbq-disabled{--kbq-option-background: var(--kbq-tree-states-disabled-container-background);background:var(--kbq-tree-states-disabled-container-background)}.kbq-tree-option.kbq-disabled .kbq-option-text{color:var(--kbq-tree-states-disabled-text-color)}.kbq-tree-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-disabled-action-button-color)}.kbq-tree-option.kbq-disabled .kbq-option-caption{color:var(--kbq-tree-states-disabled-caption-color)}.kbq-tree-option.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-tree-node-toggle .kbq-icon){color:var(--kbq-states-icon-disabled)}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused){border-color:var(--kbq-tree-states-focused-focus-outline-color)}.kbq-tree-option{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)}.kbq-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-content-gap-vertical: 0px;--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "directive", type: KbqTreeNodeOutlet, selector: "[kbqTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-tree{display:block}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "directive", type: KbqTreeNodeOutlet, selector: "[kbqTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTree, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTree, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-tree', imports: [
                         KbqTreeNodeOutlet
                     ], template: `
         <ng-container kbqTreeNodeOutlet />
-    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'kbq-tree'
-                    }, exportAs: 'kbqTree', styles: [".kbq-tree{display:block}.kbq-tree-selection:focus{outline:none}.kbq-tree-option{--kbq-option-background: var(--kbq-tree-default-container-background);background:var(--kbq-tree-default-container-background)}.kbq-tree-option .kbq-option-text{color:var(--kbq-tree-default-text-color)}.kbq-tree-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-default-action-button-color)}.kbq-tree-option .kbq-option-caption{color:var(--kbq-tree-default-caption-color)}.kbq-tree-option:not(.kbq-disabled):hover,.kbq-tree-option:not(.kbq-disabled).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused{--kbq-option-background: var(--kbq-tree-states-hover-container-background);background:var(--kbq-tree-states-hover-container-background)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-text{color:var(--kbq-tree-states-hover-text-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-caption{color:var(--kbq-tree-states-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled):active,.kbq-tree-option:not(.kbq-disabled).kbq-active{--kbq-option-background: var(--kbq-tree-states-active-container-background);background:var(--kbq-tree-states-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected{--kbq-option-background: var(--kbq-tree-states-selected-container-background);background:var(--kbq-tree-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-text{color:var(--kbq-tree-states-selected-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-caption{color:var(--kbq-tree-states-selected-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-states-selected-hover-container-background);background:var(--kbq-tree-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-text{color:var(--kbq-tree-states-selected-hover-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-caption{color:var(--kbq-tree-states-selected-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-states-selected-active-container-background);background:var(--kbq-tree-states-selected-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected),.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected{--kbq-option-background: var(--kbq-tree-multiple-states-selected-container-background);background:var(--kbq-tree-multiple-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):hover,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-multiple-states-selected-hover-container-background);background:var(--kbq-tree-multiple-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):active,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-multiple-states-selected-active-container-background);background:var(--kbq-tree-multiple-states-selected-active-container-background)}.kbq-tree-option.kbq-disabled{--kbq-option-background: var(--kbq-tree-states-disabled-container-background);background:var(--kbq-tree-states-disabled-container-background)}.kbq-tree-option.kbq-disabled .kbq-option-text{color:var(--kbq-tree-states-disabled-text-color)}.kbq-tree-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-disabled-action-button-color)}.kbq-tree-option.kbq-disabled .kbq-option-caption{color:var(--kbq-tree-states-disabled-caption-color)}.kbq-tree-option.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-tree-node-toggle .kbq-icon){color:var(--kbq-states-icon-disabled)}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused){border-color:var(--kbq-tree-states-focused-focus-outline-color)}.kbq-tree-option{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)}.kbq-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-content-gap-vertical: 0px;--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
+    `, providers: [{ provide: KbqTreeBase, useExisting: KbqTree }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'kbq-tree',
+                        role: 'tree'
+                    }, hostDirectives: [
+                        { directive: KbqStateSaving, inputs: ['useStateSaving', 'stateSavingKey'] }
+                    ], exportAs: 'kbqTree', styles: [".kbq-tree{display:block}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
         }] });
 
 const KBQ_SELECTION_TREE_VALUE_ACCESSOR = {
@@ -1295,6 +1878,8 @@ const KBQ_SELECTION_TREE_VALUE_ACCESSOR = {
     useExisting: forwardRef(() => KbqTreeSelection),
     multi: true
 };
+/** How long the key manager collects keystrokes before matching them against the option labels. */
+const typeAheadDebounce = 200;
 class KbqTreeSelectAllEvent {
     constructor(source, options) {
         this.source = source;
@@ -1330,30 +1915,95 @@ class KbqTreeSelectionChange {
     }
 }
 class KbqTreeSelection extends KbqTreeBase {
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /**
+     * Accessible name written to the host.
+     *
+     * The host is the very element the consumer writes, and a host binding runs after their own
+     * `[attr.aria-label]` binding on that element — an unset input reporting `null` would erase the name
+     * they just set, because `[attr.]` never reaches the aliased input. Whatever is already on the
+     * element therefore stands in for an unset input.
+     */
+    get resolvedAriaLabel() {
+        return this.ariaLabel() || this.elementRef.nativeElement.getAttribute('aria-label');
+    }
+    /** Labelling element of the host. Falls back to the element's own attribute, see `resolvedAriaLabel`. */
+    get resolvedAriaLabelledby() {
+        return this.ariaLabelledby() || this.elementRef.nativeElement.getAttribute('aria-labelledby');
+    }
+    get unorderedOptions() {
+        return this.unorderedOptionsList();
+    }
+    /**
+     * Whether clicking a node clears the rest of the selection. Defaults to `true`, and to `false` for
+     * `multiple="checkbox"`.
+     *
+     * Assigning it — from a template binding or imperatively, as `KbqTreeSelect` does — replaces the
+     * derived default, so a later {@link multiple} change leaves the value alone.
+     */
     get autoSelect() {
-        return this._autoSelect;
+        return this.autoSelectState() ?? this.mode() !== MultipleMode.CHECKBOX;
     }
     set autoSelect(value) {
-        this._autoSelect = coerceBooleanProperty(value);
+        this.autoSelectState.set(coerceBooleanProperty(value));
     }
+    /** Emits when an option of the tree takes focus. */
     get optionFocusChanges() {
-        return merge(...this.renderedOptions.map((option) => option.onFocus));
+        return this.optionFocusEvents.asObservable();
     }
+    /** Emits when an option of the tree loses focus. */
     get optionBlurChanges() {
-        return merge(...this.renderedOptions.map((option) => option.onBlur));
+        return this.optionBlurEvents.asObservable();
     }
+    /**
+     * Selection mode of the tree.
+     *
+     * `checkbox` renders a checkbox in every node, `keyboard` selects without one. A bare `multiple` and
+     * `true` both mean `checkbox`; `single`, `false` and an absent attribute mean single selection. The mode
+     * can be changed at any time — narrowing it to single selection keeps the first selected node and
+     * reports the shortened value through the `ControlValueAccessor`.
+     *
+     * A tree rendered inside a `kbq-tree-select` shares its `SelectionModel` with the select, so the
+     * select decides how many nodes may be selected: switching this input between single and multiple
+     * selection there throws. Switching between `checkbox` and `keyboard` only changes the presentation
+     * and is allowed.
+     *
+     * The getter reports whether more than one node can be selected; read {@link multipleMode} for the mode
+     * itself.
+     */
     get multiple() {
-        return !!this.multipleMode;
+        return !!this.mode();
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Resolved selection mode, or `null` when only one node can be selected. */
+    get multipleMode() {
+        return this.mode();
+    }
+    set multipleMode(value) {
+        this.setMultipleMode(value);
+    }
+    /**
+     * Whether the last selected node can be deselected.
+     * Derived from the mode until assigned, like {@link autoSelect}.
+     */
     get noUnselectLast() {
-        return this._noUnselectLast;
+        return this.noUnselectLastState() ?? this.mode() !== MultipleMode.CHECKBOX;
     }
     set noUnselectLast(value) {
-        this._noUnselectLast = coerceBooleanProperty(value);
+        this.noUnselectLastState.set(coerceBooleanProperty(value));
+    }
+    /**
+     * Whether typing printable characters moves the focus to the next option whose label starts with
+     * them. On by default.
+     *
+     * Turn it off wherever the tree shares its keystrokes with a text field: an embedder such as
+     * `KbqTreeSelect` routes everything the user types — the search query included — into this key
+     * manager, and type-ahead would move the active option out from under the query.
+     */
+    get typeAhead() {
+        return this.typeAheadState();
+    }
+    // Written imperatively by `KbqTreeSelect`, like `autoSelect` and `noUnselectLast`.
+    set typeAhead(value) {
+        this.typeAheadState.set(value);
     }
     /**
      * Whether to render the "select all" master checkbox above the nodes. Multiple selection only.
@@ -1361,11 +2011,10 @@ class KbqTreeSelection extends KbqTreeBase {
      * Enabling it also makes Ctrl/Cmd + A a two-way toggle, so the shortcut and the checkbox never
      * disagree (`selectAllToggle` is implied).
      */
-    // Written imperatively by `KbqTreeSelect`, like `autoSelect` and `noUnselectLast`, so it cannot be a
-    // signal input; the signal behind it is what keeps the template in step.
     get selectAll() {
         return this.selectAllEnabled();
     }
+    // Written imperatively by `KbqTreeSelect`, like `autoSelect` and `noUnselectLast`.
     set selectAll(value) {
         this.selectAllEnabled.set(value);
     }
@@ -1384,6 +2033,10 @@ class KbqTreeSelection extends KbqTreeBase {
     get selectAllState() {
         return getSelectAllState(this.selectAllAdapter);
     }
+    /** Label of the "select all" row. Follows the active locale. */
+    get selectAllText() {
+        return this.localeConfiguration().selectAll;
+    }
     /**
      * Data nodes "select all" acts on, and the ones its checkbox state is derived from.
      *
@@ -1391,27 +2044,24 @@ class KbqTreeSelection extends KbqTreeBase {
      * is looking at, and selecting them would contradict a master checkbox that can only report on what
      * is on screen. Without a filter the whole data set qualifies, collapsed branches included.
      */
-    // `any`, not `unknown`: `treeControl`/`selectionModel` are themselves `any`-typed data-node generics
-    // pre-dating this feature (`KbqTreeBase<any>`, `SelectionModel<SelectionModelOption>`), so `unknown`
-    // here would only relocate the unsafety into a cast at every call site, not remove it.
     get selectAllTargets() {
-        // `treeControl` is an `@Input`, so it is still unset on the change-detection pass that sets it:
+        // `treeControl` is an input, so it is still unset on the change-detection pass that sets it:
         // a consumer reading `allOptionsSelected`/`selectAllState` off a template reference — which is
         // exactly how the docs suggest swapping the trigger label — would otherwise get a TypeError
         // before the tree is wired up. Nothing is selectable yet at that point, so an empty set is right.
         if (!this.treeControl) {
             return [];
         }
-        const nonSelectableDataNodes = this.renderedOptions
+        const nonSelectableDataNodes = new Set(this.renderedOptions
             .filter((option) => option.disabled || !option.selectable())
-            .map((option) => option.data);
+            .map((option) => option.data));
         const candidates = this.treeControl.filterValue.value?.length
             ? this.renderedOptions.map((option) => option.data)
             : (this.treeControl.dataNodes ?? []);
-        // The `includes` check comes first on purpose: the "select all" row is itself a non-selectable
+        // The `has` check comes first on purpose: the "select all" row is itself a non-selectable
         // rendered option with no `data`, and `isDisabled` belongs to the consumer — it must never be
         // handed a node their data source has never seen.
-        return candidates.filter((node) => !nonSelectableDataNodes.includes(node) && !this.treeControl.isDisabled(node));
+        return candidates.filter((node) => !nonSelectableDataNodes.has(node) && !this.treeControl.isDisabled(node));
     }
     /** Adapter shared by the master checkbox and the Ctrl/Cmd + A handler, so the two cannot drift apart. */
     get selectAllAdapter() {
@@ -1422,29 +2072,16 @@ class KbqTreeSelection extends KbqTreeBase {
             setSelected: (node, selected) => selected ? this.selectionModel.select(node) : this.selectionModel.deselect(node)
         };
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Whether the tree is disabled, bound with `[disabled]` or set by a form control. */
     get disabled() {
-        return this._disabled;
+        return this.disabledState();
     }
-    set disabled(rawValue) {
-        const value = coerceBooleanProperty(rawValue);
-        if (this._disabled !== value) {
-            this._disabled = value;
-            this.markOptionsForCheck();
-        }
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Tab index of the tree, `-1` while it is disabled. */
     get tabIndex() {
-        return this.disabled ? -1 : this._tabIndex;
-    }
-    set tabIndex(value) {
-        this._tabIndex = value;
-        this.userTabIndex = value;
+        return this.disabled ? -1 : this.tabIndexState();
     }
     get showCheckbox() {
-        return this.multipleMode === MultipleMode.CHECKBOX;
+        return this.mode() === MultipleMode.CHECKBOX;
     }
     get isEmpty() {
         return this.sortedNodes.length === 0;
@@ -1457,13 +2094,23 @@ class KbqTreeSelection extends KbqTreeBase {
     get nodesCount() {
         return this.sortedNodes.length;
     }
+    /**
+     * Whether the tree is changing the selection model itself — to a value the form wrote, or onto the nodes of
+     * reloaded data — rather than acting on the user. A host sharing the model, such as `KbqTreeSelect`, reports
+     * no such change.
+     *
+     * @docs-private
+     */
+    get syncingSelection() {
+        return this.writingValue;
+    }
     constructor() {
-        const multiple = inject(new HostAttributeToken('multiple'), { optional: true });
         super();
         this.elementRef = inject(ElementRef);
         this.scheduler = inject(AsyncScheduler);
         this.clipboard = inject(Clipboard, { optional: true });
         this.platform = inject(Platform);
+        this.injector = inject(Injector);
         this.focusMonitor = inject(FocusMonitor);
         /**
          * Whether this tree-selection is rendered inside a select panel (enables option
@@ -1473,38 +2120,122 @@ class KbqTreeSelection extends KbqTreeBase {
          */
         this.inSelect = !!inject(KBQ_FORM_FIELD, { optional: true, host: true });
         this.renderedOptions = new QueryList();
+        /**
+         * Accessible name of the tree. Set it whenever the tree has no visible label of its own; a tree
+         * embedded in a `kbq-tree-select` is labelled by the select instead.
+         */
+        this.ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+        /** Id of the element that labels the tree, for when the label is rendered next to it. */
+        this.ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
         this.resetFocusedItemOnBlur = true;
-        this.multipleMode = null;
         this.userTabIndex = null;
         // this parameter used when select has a search field
         this.optionShouldHoldFocusOnBlur = false;
+        /**
+         * Whether the tree acts on keyboard input itself. Turned off by an embedding host that owns the
+         * keyboard, such as `KbqTreeSelect`.
+         */
+        this.ownsKeyboard = true;
         /** Reference to the built-in "select all" row, rendered only while `selectAll` is on. */
-        this.selectAllOption = viewChild(KbqTreeOption, ...(ngDevMode ? [{ debugName: "selectAllOption" }] : []));
+        this.selectAllOption = viewChild(KbqTreeOption, ...(ngDevMode ? [{ debugName: "selectAllOption" }] : /* istanbul ignore next */ []));
+        this.unorderedOptionsQuery = contentChildren(KbqTreeOption, ...(ngDevMode ? [{ debugName: "unorderedOptionsQuery" }] : /* istanbul ignore next */ []));
+        this.unorderedOptionsList = kbqQueryListFrom(this.unorderedOptionsQuery);
         this.navigationChange = output();
+        /**
+         * Emits when the selection changes. A stream rather than an `output()`: `KbqTreeSelect` pipes it with rxjs.
+         */
         this.selectionChange = new EventEmitter();
-        this.onSelectAll = output();
+        /** @docs-private */
+        this.selectionChangeOutput = outputFromObservable(this.selectionChange, { alias: 'selectionChange' });
+        /** Emits after "select all" ran, with the options it could act on. */
+        this.selectAllChange = output();
+        /** @deprecated Use `selectAllChange` instead. Will be removed in 22.0.0. */
+        this.onSelectAll = output({ alias: 'onSelectAll' });
+        /**
+         * Emits when the active option is copied with Ctrl/Cmd + C. Subscribing replaces the built-in
+         * clipboard handler, so the event has to stay an `EventEmitter`: the decision is made by reading
+         * `observed`, which `OutputEmitterRef` does not have. A template listener subscribes to it through
+         * the output below.
+         */
+        this.copyChange = new EventEmitter();
+        /** @docs-private */
+        this.copyChangeOutput = outputFromObservable(this.copyChange, { alias: 'copyChange' });
+        /** @deprecated Use `copyChange` instead. Will be removed in 22.0.0. */
         this.onCopy = new EventEmitter();
+        /** @docs-private */
+        this.onCopyOutput = outputFromObservable(this.onCopy, { alias: 'onCopy' });
         this.sortedNodes = [];
         this.lastSyncedDataNodes = null;
-        this._autoSelect = true;
-        this._noUnselectLast = true;
+        /** @docs-private */
+        this.autoSelectInput = input(undefined, { ...(ngDevMode ? { debugName: "autoSelectInput" } : /* istanbul ignore next */ {}), alias: 'autoSelect',
+            transform: booleanAttribute });
+        /** `undefined` while the value is derived from the mode. Written by `KbqTreeSelect` as well. */
+        this.autoSelectState = linkedSignal(() => this.autoSelectInput(), ...(ngDevMode ? [{ debugName: "autoSelectState" }] : /* istanbul ignore next */ []));
+        // Options report here, so a subscriber also hears the rows rendered after it subscribed.
+        this.optionFocusEvents = new Subject();
+        this.optionBlurEvents = new Subject();
+        /** @docs-private */
+        this.multipleInput = input(undefined, { ...(ngDevMode ? { debugName: "multipleInput" } : /* istanbul ignore next */ {}), alias: 'multiple' });
+        /**
+         * Backing signal of {@link multipleMode}. A signal rather than a field because the mode is also written
+         * from inside the component and by `KbqTreeSelect`: options read it through `multiple` and
+         * `showCheckbox`, and only a signal read re-runs their `OnPush` views and host bindings.
+         */
+        this.mode = signal(null, ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.noUnselectLastInput = input(undefined, { ...(ngDevMode ? { debugName: "noUnselectLastInput" } : /* istanbul ignore next */ {}), alias: 'noUnselectLast',
+            transform: booleanAttribute });
+        /** `undefined` while the value is derived from the mode. Written by `KbqTreeSelect` as well. */
+        this.noUnselectLastState = linkedSignal(() => this.noUnselectLastInput(), ...(ngDevMode ? [{ debugName: "noUnselectLastState" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.typeAheadInput = input(true, { ...(ngDevMode ? { debugName: "typeAheadInput" } : /* istanbul ignore next */ {}), alias: 'typeAhead',
+            transform: booleanAttribute });
+        this.typeAheadState = linkedSignal(() => this.typeAheadInput(), ...(ngDevMode ? [{ debugName: "typeAheadState" }] : /* istanbul ignore next */ []));
         /** 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.selectAllEnabled = signal(false, ...(ngDevMode ? [{ debugName: "selectAllEnabled" }] : []));
-        /** Label of the "select all" row. Kept in step with the locale service. */
-        this.selectAllText = ruRULocaleData.select.selectAll;
-        this._disabled = false;
-        this._tabIndex = 0;
-        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
-        /** Updates locale parameters from the locale service. */
-        this.updateLocaleParams = () => {
-            // Locale data registered by a consumer through `KBQ_LOCALE_DATA`/`addLocale` may predate this key.
-            this.selectAllText = this.localeService?.getParams('select')?.selectAll ?? ruRULocaleData.select.selectAll;
-            this.changeDetectorRef.markForCheck();
-        };
-        /** `View -> model callback called when value changes` */
+        this.selectAllToggle = input(false, { ...(ngDevMode ? { debugName: "selectAllToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.selectAllInput = input(false, { ...(ngDevMode ? { debugName: "selectAllInput" } : /* istanbul ignore next */ {}), alias: 'selectAll',
+            transform: booleanAttribute });
+        this.selectAllEnabled = linkedSignal(() => this.selectAllInput(), ...(ngDevMode ? [{ debugName: "selectAllEnabled" }] : /* istanbul ignore next */ []));
+        this.localeConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('select', KBQ_SELECT_LOCALE_CONFIGURATION);
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        this.disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.tabIndexInput = input(undefined, { ...(ngDevMode ? { debugName: "tabIndexInput" } : /* istanbul ignore next */ {}), alias: 'tabIndex',
+            transform: kbqOptionalNumberAttribute });
+        this.tabIndexState = signal(0, ...(ngDevMode ? [{ debugName: "tabIndexState" }] : /* istanbul ignore next */ []));
+        this.selectionModelSubscription = null;
+        // A selection change asks for a sweep here, not through `renderedOptions.changes`: the key manager and an
+        // embedding select listen to that, and no row changed.
+        this.selectionSweeps = new Subject();
+        /** Whether a value report is queued for the end of the current tick. Cleared by `writeValue` to cancel it. */
+        this.pendingValueReport = false;
+        /** Backs {@link syncingSelection}: a change of the selection made by code is no change to report back. */
+        this.writingValue = false;
+        /**
+         * The last value the form wrote while some of the nodes it names were not in the data yet. Applied again as the
+         * data changes, until every node is found or the selection is reported to the form.
+         */
+        this.unresolvedValue = null;
+        this.destroyed = false;
+        /** `treeControl.dataNodes` the options' checkbox states were last recomputed against. */
+        this.checkboxSyncedDataNodes = null;
+        /** @docs-private */
+        this.selectAllHandlerInput = input(undefined, { ...(ngDevMode ? { debugName: "selectAllHandlerInput" } : /* istanbul ignore next */ {}), alias: 'selectAllHandler',
+            transform: kbqSelectAllHandlerTransform });
+        /**
+         * 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.updateRenderedOptions = () => {
             const orderedOptions = [];
@@ -1515,8 +2246,19 @@ class KbqTreeSelection extends KbqTreeBase {
             if (selectAllOption) {
                 orderedOptions.push(selectAllOption);
             }
+            // Indexed once per render, as a search per node is quadratic in the rows. The first option wins in both maps.
+            const optionsByNode = new Map();
+            const optionsByValue = new Map();
+            this.unorderedOptions.forEach((option) => {
+                if (!optionsByNode.has(option.data))
+                    optionsByNode.set(option.data, option);
+                if (!optionsByValue.has(option.value))
+                    optionsByValue.set(option.value, option);
+            });
             this.sortedNodes.forEach((node) => {
-                const found = this.unorderedOptions.find((option) => option.value === this.treeControl.getValue(node));
+                // By node first: nodes do not have to carry distinct values, and a value match would hand every node with
+                // the same value the first option holding it.
+                const found = optionsByNode.get(node) ?? optionsByValue.get(this.treeControl.getValue(node));
                 if (found) {
                     orderedOptions.push(found);
                 }
@@ -1525,24 +2267,45 @@ class KbqTreeSelection extends KbqTreeBase {
             this.renderedOptions.notifyOnChanges();
             this.updateScrollSize();
         };
-        if (multiple === MultipleMode.CHECKBOX || multiple === MultipleMode.KEYBOARD) {
-            this.multipleMode = multiple;
-        }
-        else if (multiple !== null) {
-            this.multipleMode = MultipleMode.CHECKBOX;
-        }
-        if (this.multipleMode === MultipleMode.CHECKBOX) {
-            this.autoSelect = false;
-            this.noUnselectLast = false;
-        }
-        this.selectionModel = new SelectionModel(this.multiple);
-        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
+        this.destroyRef.onDestroy(() => (this.destroyed = true));
+        // Single selection until the `multiple` input says otherwise. A model has to exist this early
+        // because `KbqTreeOption.setSelected` refuses to touch the selection without one, and a static
+        // `multiple` attribute reaches the input right after the constructor, before any node exists.
+        this.selectionModel = this.ownSelectionModel = new SelectionModel(false);
+        effect(() => {
+            this.multipleInput();
+            untracked(() => this.applyMultipleInput());
+        });
+        effect(() => {
+            this.disabledInput();
+            untracked(() => this.applyDisabledInput());
+        });
+        // Unbound, the input leaves the default, which follows the rendered options; bound back to `undefined` or
+        // `null`, it restores that default.
+        effect(() => {
+            const tabIndex = this.tabIndexInput();
+            untracked(() => {
+                if (tabIndex !== undefined) {
+                    this.userTabIndex = tabIndex;
+                    this.tabIndexState.set(tabIndex);
+                }
+                else if (this.userTabIndex !== null) {
+                    this.userTabIndex = null;
+                    this.updateTabIndex();
+                }
+            });
+        });
+        effect(() => {
+            this.typeAheadState();
+            untracked(() => this.applyTypeAhead());
+        });
         // `unorderedOptions.changes` never fires for the "select all" row — it is a view child — so the
         // rendered list has to be rebuilt whenever the view query resolves or drops it.
         effect(() => {
             this.selectAllOption();
             if (this.renderedOptions) {
-                this.updateRenderedOptions();
+                // Untracked: the options are read too, and their changes come through `unorderedOptions.changes`.
+                untracked(() => this.updateRenderedOptions());
             }
         });
     }
@@ -1550,14 +2313,144 @@ class KbqTreeSelection extends KbqTreeBase {
     toggleSelectAll() {
         this.selectAllOptions(true);
     }
+    /**
+     * Sets the mode from the `multiple` binding, once per bound value: an unbound input leaves what
+     * `KbqTreeSelect` or the {@link multipleMode} setter wrote, and a value bound back to `undefined` means
+     * single selection.
+     *
+     * Called by an effect, and by `writeValue` ahead of it: a forms directive on this element writes the
+     * value from its own `ngOnChanges`, which runs before any effect of the view.
+     */
+    applyMultipleInput() {
+        const multiple = this.multipleInput();
+        if (multiple === this.appliedMultipleInput)
+            return;
+        this.appliedMultipleInput = multiple;
+        this.setMultipleMode(resolveMultipleMode(multiple));
+    }
+    /**
+     * Sets the disabled state from the `disabled` binding, once per bound value, so that whichever of the binding
+     * and the form control changed last wins. An unbound input leaves what the form control wrote.
+     *
+     * Called by an effect, and by `setDisabledState` ahead of it: a forms directive on this element calls that
+     * from its own `ngOnChanges`, after the binding is set but before any effect of the view runs.
+     */
+    applyDisabledInput() {
+        const disabled = this.disabledInput();
+        if (disabled === this.appliedDisabledInput)
+            return;
+        this.appliedDisabledInput = disabled;
+        this.disabledState.set(!!disabled);
+    }
+    /**
+     * Applies a new selection mode, rebuilding the `SelectionModel` when the multiplicity itself changes —
+     * CDK freezes that flag at construction, so the model has to be replaced rather than reconfigured.
+     */
+    setMultipleMode(next) {
+        if (next === this.mode()) {
+            return;
+        }
+        const rebuildNeeded = this.selectionModel.isMultipleSelection() !== !!next;
+        // `KbqTreeSelect` hands the tree its own model and subscribes to it as well, so the multiplicity is
+        // the select's to decide; replacing a model we do not own would drop those subscriptions. Thrown
+        // rather than ignored: Angular caches the bound value either way, so a silently dropped write
+        // leaves the binding and the tree permanently out of step with no way to retry.
+        if (rebuildNeeded && this.selectionModel !== this.ownSelectionModel) {
+            throw getKbqTreeSelectionOwnedMultipleError();
+        }
+        this.mode.set(next);
+        // While the checkbox is hidden, the options leave its state as it was.
+        if (next === MultipleMode.CHECKBOX)
+            this.scheduleCheckboxSync(true);
+        if (rebuildNeeded) {
+            this.rebuildSelectionModel(!!next);
+        }
+    }
+    /** Replaces the `SelectionModel` with one of the given multiplicity, keeping what the new one can hold. */
+    rebuildSelectionModel(multiple) {
+        // Copied because CDK hands back its own cached array.
+        const selected = [...this.selectionModel.selected];
+        // Narrowing keeps one node: the first selected one in render order, falling back to the model's own
+        // order when every selected node sits inside a collapsed branch and is therefore not rendered.
+        // Asked of the model rather than of the option, whose mirror is only re-synced a macrotask later.
+        const rendered = this.renderedOptions?.find((option) => this.selectionModel.isSelected(option.data))?.data;
+        const kept = multiple ? selected : selected.slice(0, 1);
+        if (!multiple && rendered !== undefined && selected.includes(rendered)) {
+            kept[0] = rendered;
+        }
+        const dropped = selected.filter((node) => !kept.includes(node));
+        const droppedOptions = (this.renderedOptions?.toArray() ?? []).filter((option) => dropped.includes(option.data));
+        // `initiallySelectedValues` seeds the model without emitting.
+        this.selectionModel = this.ownSelectionModel = new SelectionModel(multiple, kept);
+        this.bindSelectionModel();
+        // Reconciles both directions against the model that is actually in use now, so no node is left
+        // painted by a stale mirror — a node whose option was created while it was already selected has
+        // one, and so does every node the narrowing just dropped.
+        this.renderedOptions?.forEach((option) => option.setSelected(this.selectionModel.isSelected(option.data)));
+        if (droppedOptions.length) {
+            // The nodes lost their selection without going through the model, so nothing else would
+            // announce it.
+            this.selectionChange.emit(new KbqTreeSelectionChange(this, droppedOptions[0], droppedOptions));
+        }
+        // Reported on every multiplicity change, not only when the selection shrank: `getSelectedValues`
+        // returns a bare value in single selection and an array in multiple, so widening changes the shape
+        // the form control has to hold even though nothing was dropped.
+        this.scheduleValueReport();
+    }
+    /**
+     * Reports the value once the current change-detection pass is over: a bound `[multiple]` is written
+     * during change detection, and reporting straight back to the form control there would raise
+     * "Expression has changed after it was checked". Coalesced so that several mode changes in one tick
+     * produce one notification, and dropped if the form writes a value or the tree is gone by the time it runs.
+     */
+    scheduleValueReport() {
+        if (this.pendingValueReport) {
+            return;
+        }
+        this.pendingValueReport = true;
+        Promise.resolve().then(() => {
+            if (!this.pendingValueReport)
+                return;
+            this.pendingValueReport = false;
+            if (!this.destroyed) {
+                this.reportValue();
+            }
+        });
+    }
+    /** Reports the selection to the form, which then holds it instead of a value still waiting for its nodes. */
+    reportValue() {
+        this.unresolvedValue = null;
+        this.onChange(this.getSelectedValues());
+    }
+    /** (Re)points the change subscription at the current {@link selectionModel}. */
+    bindSelectionModel() {
+        this.selectionModelSubscription?.unsubscribe();
+        this.selectionModelSubscription = this.selectionModel.changed
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            if (!this.writingValue) {
+                this.reportValue();
+            }
+            this.selectionSweeps.next();
+            // The "select all" row renders the selection state.
+            this.changeDetectorRef.markForCheck();
+        });
+    }
     ngAfterContentInit() {
+        super.ngAfterContentInit();
         if (this.platform.isBrowser) {
-            this.unorderedOptions.changes.subscribe(this.updateRenderedOptions);
+            this.unorderedOptions.changes
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(this.updateRenderedOptions);
         }
         this.keyManager = new FocusKeyManager(this.renderedOptions)
             .withVerticalOrientation(true)
             .withHorizontalOrientation(null);
+        this.applyTypeAhead();
         this.keyManager.change.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            // `aria-activedescendant` is bound to the active option, and nothing else in this view
+            // changes when the key manager moves.
+            this.changeDetectorRef.markForCheck();
             if (this.keyManager.activeItem) {
                 this.emitNavigationEvent(this.keyManager.activeItem);
                 // todo need check this logic
@@ -1566,21 +2459,22 @@ class KbqTreeSelection extends KbqTreeBase {
                 }
             }
         });
-        this.keyManager.tabOut.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.allowFocusEscape());
-        this.selectionModel.changed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this.onChange(this.getSelectedValues());
-            this.renderedOptions.notifyOnChanges();
-        });
-        this.renderedOptions.changes
-            .pipe(delay(0, this.scheduler), takeUntilDestroyed(this.destroyRef))
-            .subscribe((options) => {
-            this.resetOptions();
+        kbqLeaveTabOrderOnTabOut(this.keyManager.tabOut, this.elementRef.nativeElement, () => this.tabIndex, this.destroyRef);
+        this.bindSelectionModel();
+        this.listenToOptionsFocus();
+        // A render and the selection changes of one task each notify, each with its own timer: the first to fire sweeps
+        // for all of them and the rest are dropped. `auditTime` would tie the later ones to the first one's timer.
+        let sweeps = 0;
+        merge(this.renderedOptions.changes, this.selectionSweeps)
+            .pipe(map(() => sweeps), delay(0, this.scheduler), filter((sweepsWhenNotified) => sweepsWhenNotified === sweeps), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            sweeps++;
             // Check to see if we need to update our tab index
             this.updateTabIndex();
             this.syncSelectionModelToDataNodes();
-            const selectedValues = this.multiple ? this.getSelectedValues() : [this.getSelectedValues()];
-            options.forEach((option) => {
-                if (selectedValues.includes(option.value)) {
+            this.renderedOptions.forEach((option) => {
+                // By node rather than by value: rows may share a value.
+                if (this.selectionModel.isSelected(option.data)) {
                     option.select(false);
                 }
                 else {
@@ -1590,11 +2484,39 @@ class KbqTreeSelection extends KbqTreeBase {
             });
         });
     }
+    /**
+     * Rebuilds the tree around a selection model owned by an embedding host, such as `KbqTreeSelect`.
+     *
+     * The host has to take the model over before the tree starts reacting to it, and re-running
+     * `ngAfterContentInit()` is not a way to do that: neither `unorderedOptions` nor `renderedOptions` is
+     * ever re-created, so a second run would only leave a second set of subscribers on both — every options
+     * change handled twice, and the whole option sweep run twice per emission. Only the subscription that
+     * depends on the model has to move, which is exactly what `bindSelectionModel` does.
+     */
+    initializeForEmbedding(selectionModel) {
+        this.selectionModel = selectionModel;
+        this.bindSelectionModel();
+    }
+    ngAfterContentChecked() {
+        // Syncs the list here so `changes` emits after the projected items are bound and before the host bindings.
+        this.unorderedOptionsList();
+        super.ngAfterContentChecked();
+    }
     ngAfterViewInit() {
-        this.focusMonitor.monitor(this.elementRef, true);
+        // Reports the focus leaving only when it lands outside the tree (or nowhere): the host hands it to an option
+        // on entry, and options hand it on to each other or to their action buttons, none of which blurs the tree.
+        this.focusMonitor
+            .monitor(this.elementRef, true)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((origin) => {
+            if (!origin)
+                this.blur();
+        });
     }
     ngOnDestroy() {
         super.ngOnDestroy();
+        this.optionFocusEvents.complete();
+        this.optionBlurEvents.complete();
         this.focusMonitor.stopMonitoring(this.elementRef);
     }
     focus($event) {
@@ -1610,17 +2532,45 @@ class KbqTreeSelection extends KbqTreeBase {
         }
         this.keyManager.setFocusOrigin('program');
     }
+    /** @docs-private */
     highlightSelectedOption() {
-        this.renderedOptions.find((item) => item.data === this.selectionModel.selected[0])?.focus();
+        untracked(() => {
+            // The selection can hold nodes that are not rendered — collapsed branches, or references left
+            // over from a data replacement. Falling back keeps `focus()` from ending with nothing focused
+            // at all, since it already took the branch that skips `setFirstItemActive`.
+            const target = this.renderedOptions.find((item) => item.data === this.selectionModel.selected[0]) ??
+                this.keyManager.activeItem;
+            if (target) {
+                target.focus();
+            }
+            else {
+                this.keyManager.setFirstItemActive();
+            }
+        });
     }
     blur() {
-        if (!this.hasFocusedOption() && this.resetFocusedItemOnBlur) {
-            this.keyManager.setActiveItem(-1);
-        }
-        this.onTouched();
-        this.changeDetectorRef.markForCheck();
+        untracked(() => {
+            if (!this.hasFocusedOption() && this.resetFocusedItemOnBlur) {
+                this.keyManager.setActiveItem(-1);
+            }
+            this.onTouched();
+            this.changeDetectorRef.markForCheck();
+        });
     }
+    /**
+     * Host listener for keyboard input.
+     *
+     * Does nothing while an embedding host owns the keyboard — `KbqTreeSelect` routes every key through
+     * its own panel handler and calls back into `handleKeydown` for the parts it delegates, so without
+     * this guard the same event would be acted on twice.
+     */
     onKeyDown(event) {
+        if (!this.ownsKeyboard)
+            return;
+        this.handleKeydown(event);
+    }
+    /** Runs the tree's own keyboard handling, whether or not it owns the keyboard. */
+    handleKeydown(event) {
         this.keyManager.setFocusOrigin('keyboard');
         const keyCode = event.keyCode;
         if ([SPACE, LEFT_ARROW, RIGHT_ARROW].includes(keyCode) || isVerticalMovement(event)) {
@@ -1642,14 +2592,22 @@ class KbqTreeSelection extends KbqTreeBase {
             const activeItem = this.keyManager.activeItem;
             if (activeItem.isExpandable && activeItem.isExpanded) {
                 this.treeControl.collapse(activeItem.data);
+                this.saveState();
             }
             else {
                 this.setActiveParentOption(activeItem);
             }
             return;
         }
-        else if (keyCode === RIGHT_ARROW && this.keyManager.activeItem?.isExpandable) {
-            this.treeControl.expand(this.keyManager.activeItem.data);
+        else if (keyCode === RIGHT_ARROW && this.keyManager.activeItem) {
+            const activeItem = this.keyManager.activeItem;
+            if (activeItem.isExpandable && !activeItem.isExpanded) {
+                this.treeControl.expand(activeItem.data);
+                this.saveState();
+            }
+            else if (activeItem.isExpandable) {
+                this.setActiveFirstChildOption(activeItem);
+            }
             return;
         }
         else if (keyCode === DOWN_ARROW) {
@@ -1674,12 +2632,26 @@ class KbqTreeSelection extends KbqTreeBase {
         else if (keyCode === PAGE_DOWN) {
             this.keyManager.setNextPageItemActive();
         }
+        else {
+            // Whatever is left is either a printable character, which the key manager turns into a
+            // type-ahead query, or a key nothing here reacts to. Every key handled above returns or is
+            // matched before this point, so the manager only ever sees the leftovers.
+            //
+            // Ctrl/Cmd/Alt combinations are the application's shortcuts, not text: the key manager feeds
+            // its letter stream from the `default` branch without a modifier guard of its own, so Ctrl+S
+            // would otherwise type-ahead to the first option starting with "S" and move focus there.
+            if (!hasModifierKey(event, 'ctrlKey', 'metaKey', 'altKey')) {
+                this.keyManager.onKeydown(event);
+            }
+            return;
+        }
         if (this.keyManager.activeItem && isVerticalMovement(event)) {
             this.setSelectedOptionsByKey(this.keyManager.activeItem, hasModifierKey(event, 'shiftKey'), 
             // ctrlKey is for Windows, metaKey is for MacOS
             hasModifierKey(event, 'ctrlKey', 'metaKey'));
         }
     }
+    /** @docs-private */
     updateScrollSize() {
         if (!this.renderedOptions.first) {
             return;
@@ -1692,6 +2664,7 @@ class KbqTreeSelection extends KbqTreeBase {
         }
         this.keyManager.withScrollSize(Math.floor(this.getHeight() / optionHeight));
     }
+    /** @docs-private */
     setSelectedOptionsByKey(option, shiftKey, ctrlKey) {
         if (shiftKey && this.multiple) {
             this.selectActiveOptions();
@@ -1708,6 +2681,15 @@ class KbqTreeSelection extends KbqTreeBase {
             this.emitChangeEvent(option);
         }
     }
+    /** @docs-private */
+    reportOptionFocus(event) {
+        this.optionFocusEvents.next(event);
+    }
+    /** @docs-private */
+    reportOptionBlur(event) {
+        this.optionBlurEvents.next(event);
+    }
+    /** @docs-private */
     setSelectedOptionsByClick(option, shiftKey, ctrlKey) {
         if (option.disabled || !option.selectable()) {
             return;
@@ -1734,11 +2716,13 @@ class KbqTreeSelection extends KbqTreeBase {
         }
         this.emitChangeEvent(option);
     }
+    /** @docs-private */
     selectActiveOptions() {
         const options = this.renderedOptions.toArray();
         let fromIndex = this.keyManager.previousActiveItemIndex;
         let toIndex = (this.keyManager.previousActiveItemIndex = this.keyManager.activeItemIndex);
-        const selectedOptionState = options[fromIndex]?.selected;
+        // Asked of the model: an option's own state lags it until the next sweep.
+        const selectedOptionState = this.selectionModel.isSelected(options[fromIndex]?.data);
         if (toIndex === fromIndex || fromIndex === -1) {
             if (options[toIndex]?.selectable()) {
                 options[toIndex].toggle();
@@ -1748,19 +2732,23 @@ class KbqTreeSelection extends KbqTreeBase {
         if (fromIndex > toIndex) {
             [fromIndex, toIndex] = [toIndex, fromIndex];
         }
-        options
+        const nodes = options
             .slice(fromIndex, toIndex + 1)
             .filter((item) => !item.disabled && item.selectable())
-            .forEach((renderedOption) => {
-            if (!selectedOptionState && this.noUnselectLast && this.selectionModel.selected.length === 1) {
-                return;
-            }
-            renderedOption.setSelected(selectedOptionState);
-        });
-    }
-    setFocusedOption(option) {
-        this.keyManager.setActiveItem(option);
+            .map((item) => item.data);
+        // One write for the range, so the selection changes once rather than once per row.
+        if (selectedOptionState) {
+            this.selectionModel.select(...nodes);
+            return;
+        }
+        const selected = nodes.filter((node) => this.selectionModel.isSelected(node));
+        // With `noUnselectLast` the last selected node stays, the range giving up its own in order until then.
+        const released = this.noUnselectLast
+            ? Math.max(0, Math.min(selected.length, this.selectionModel.selected.length - 1))
+            : selected.length;
+        this.selectionModel.deselect(...selected.slice(0, released));
     }
+    /** @docs-private */
     toggleFocusedOption() {
         const focusedOption = this.keyManager.activeItem;
         // The row is not selectable, so nothing below would act on it. Handling it here covers both focus
@@ -1776,14 +2764,51 @@ class KbqTreeSelection extends KbqTreeBase {
             this.emitChangeEvent(focusedOption);
         }
     }
+    /** @docs-private */
     renderNodeChanges(data, dataDiffer = this.dataDiffer, viewContainer = this.nodeOutlet.viewContainer, parentData) {
-        super.renderNodeChanges(data, dataDiffer, viewContainer, parentData);
+        // Not `super.renderNodeChanges`: that would run change detection over this very view before
+        // `sortedNodes` is refreshed, so the "select all" row — which is rendered off `isEmpty` — would
+        // need a second pass to catch up. One pass, after the state its template reads is current.
+        const changed = this.applyNodeChanges(data, dataDiffer, viewContainer, parentData);
         this.sortedNodes = this.getSortedNodes(viewContainer);
-        this.nodeOutlet.changeDetectorRef.detectChanges();
+        this.changeDetectorRef.detectChanges();
+        // The options query lists the options in the order their views were created, not in the order of the rows, so
+        // rows that only moved (reused through `trackBy`) never make it emit.
+        if (changed && this.renderedOptionsOutOfOrder())
+            this.updateRenderedOptions();
+        this.scheduleCheckboxSync(false);
+        // The "select all" row is rendered ahead of what its state reads: new rows bind their inputs after it and join
+        // `renderedOptions` only once bound, and a consumer's data source can assign `dataNodes` after it emits.
+        // Nothing else in the tree reads that state but the checkbox sync above, so a tree without the row is done in
+        // this one pass. Marked for check, which reaches the views above too: a template reading `allOptionsSelected`
+        // by reference reads the same state.
+        if (!this.showSelectAll)
+            return;
+        const dataNodes = this.treeControl.dataNodes;
+        afterNextRender(() => {
+            if (changed || this.treeControl.dataNodes !== dataNodes)
+                this.changeDetectorRef.markForCheck();
+        }, { injector: this.injector });
+    }
+    /**
+     * Recomputes every option's checkbox state where no selection change follows to do it: after `dataNodes` is
+     * replaced, which moves the descendants a branch counts, and once a hidden checkbox appears. A microtask later, as
+     * a consumer's data source can assign `dataNodes` after it emits.
+     */
+    scheduleCheckboxSync(force) {
+        Promise.resolve().then(() => {
+            const dataNodes = this.treeControl?.dataNodes ?? null;
+            if (this.destroyed || (!force && dataNodes === this.checkboxSyncedDataNodes))
+                return;
+            this.checkboxSyncedDataNodes = dataNodes;
+            this.unorderedOptions.forEach((option) => option.markForCheck());
+        });
     }
+    /** @docs-private */
     emitNavigationEvent(option) {
         this.navigationChange.emit(new KbqTreeNavigationChange(this, option));
     }
+    /** @docs-private */
     emitChangeEvent(option) {
         this.selectionChange.emit(new KbqTreeSelectionChange(this, option, [option]));
     }
@@ -1792,46 +2817,63 @@ class KbqTreeSelection extends KbqTreeBase {
      * which toggles the selection of all non-disabled, selectable options.
      */
     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;
     }
-    _selectAllHandler(event, tree) {
+    defaultSelectAllHandler(event, tree) {
         event.preventDefault();
         tree.selectAllOptions();
     }
-    selectAllOptions(allowDeselect = this.selectAll || this.selectAllToggle()) {
-        // The row's own `(click)` and the Ctrl/Cmd + A shortcut both funnel through here, so this is the
-        // single place to refuse acting while the whole tree is disabled — mirrors the guard every other
-        // row already gets via `KbqTreeOption.selectViaInteraction()`.
-        if (this.disabled)
-            return;
-        // Selection is applied at the data-node level (incl. collapsed/non-rendered nodes unless a filter
-        // is active), while the emitted events carry the selectable rendered options.
-        const selectableOptions = this.renderedOptions.filter((option) => !option.disabled && option.selectable());
-        // `toggleSelectAll` returns the data nodes whose selection actually flipped — the source of
-        // truth, unlike the cached `option.selected` which lags until change detection.
-        const changed = toggleSelectAll(this.selectAllAdapter, { allowDeselect });
-        const changedData = new Set(changed);
-        const changedOptions = selectableOptions.filter((option) => changedData.has(option.data));
-        // Skip `selectionChange` on a no-op (e.g. Ctrl+A while everything is already selected and
-        // `allowDeselect` is off) so `KbqTreeSelectionChange.option` is never `undefined`.
-        if (changedOptions.length > 0) {
-            this.selectionChange.emit(new KbqTreeSelectionChange(this, changedOptions[0], changedOptions));
-        }
-        this.onSelectAll.emit(new KbqTreeSelectAllEvent(this, selectableOptions));
+    selectAllOptions(allowDeselect) {
+        // Untracked, its default included, like the other imperative methods: called from a consumer's `effect()`,
+        // the state read on the way — the options, `disabled`, the mode, the inputs — would make the effect run
+        // again whenever it changes.
+        untracked(() => {
+            // The row's own `(click)` and the Ctrl/Cmd + A shortcut both funnel through here, so this is the
+            // single place to refuse acting while the whole tree is disabled — mirrors the guard every other
+            // row already gets via `KbqTreeOption.selectViaInteraction()`.
+            if (this.disabled)
+                return;
+            // Selection is applied at the data-node level (incl. collapsed/non-rendered nodes unless a filter
+            // is active), while the emitted events carry the selectable rendered options.
+            const selectableOptions = this.renderedOptions.filter((option) => !option.disabled && option.selectable());
+            // A multiple selection takes the nodes in one write, so it changes once rather than once per node. A single
+            // one cannot hold them, and keeps the node-by-node writes it always had.
+            const batched = this.selectionModel.isMultipleSelection();
+            const adapter = this.selectAllAdapter;
+            // `toggleSelectAll` returns the data nodes whose selection actually flipped — the source of
+            // truth, unlike the cached `option.selected` which lags until change detection.
+            const changed = toggleSelectAll(batched ? { ...adapter, setSelected: () => { } } : adapter, {
+                allowDeselect: allowDeselect ?? (this.selectAll || this.selectAllToggle())
+            });
+            if (batched && changed.length) {
+                if (this.selectionModel.isSelected(changed[0])) {
+                    this.selectionModel.deselect(...changed);
+                }
+                else {
+                    this.selectionModel.select(...changed);
+                }
+            }
+            const changedData = new Set(changed);
+            const changedOptions = selectableOptions.filter((option) => changedData.has(option.data));
+            // Skip `selectionChange` on a no-op (e.g. Ctrl+A while everything is already selected and
+            // `allowDeselect` is off) so `KbqTreeSelectionChange.option` is never `undefined`.
+            if (changedOptions.length > 0) {
+                this.selectionChange.emit(new KbqTreeSelectionChange(this, changedOptions[0], changedOptions));
+            }
+            const selectAllEvent = new KbqTreeSelectAllEvent(this, selectableOptions);
+            this.selectAllChange.emit(selectAllEvent);
+            this.onSelectAll.emit(selectAllEvent);
+        });
     }
     copyActiveOption(event) {
         if (!this.keyManager.activeItem)
             return;
         const option = this.keyManager.activeItem;
         option.preventBlur = true;
-        if (this.onCopy.observed) {
-            this.onCopy.emit(new KbqTreeCopyEvent(this, this.keyManager.activeItem, event));
+        if (this.copyChange.observed || this.onCopy.observed) {
+            const copyEvent = new KbqTreeCopyEvent(this, option, event);
+            this.copyChange.emit(copyEvent);
+            this.onCopy.emit(copyEvent);
         }
         else {
             this.onCopyDefaultHandler();
@@ -1840,20 +2882,44 @@ class KbqTreeSelection extends KbqTreeBase {
         option.preventBlur = false;
     }
     writeValue(value) {
-        if (this.multiple && value && !Array.isArray(value)) {
-            throw getKbqSelectNonArrayValueError();
-        }
-        if (value) {
-            this.setOptionsFromValues(this.multiple ? value : [value]);
-        }
-        else {
-            this.selectionModel.clear();
+        untracked(() => {
+            this.applyMultipleInput();
+            if (this.multiple && value && !Array.isArray(value)) {
+                throw getKbqSelectNonArrayValueError();
+            }
+            // The form holds the value it writes, so a mode change has nothing left to report.
+            this.pendingValueReport = false;
+            this.applyWrittenValue(value);
+        });
+    }
+    /** Selects the nodes of a value the form wrote, and keeps the value for the data still to come if any is missing. */
+    applyWrittenValue(value) {
+        // A node value can be falsy, `0` or `''`: only a missing value clears the single selection.
+        const values = this.multiple
+            ? Array.isArray(value)
+                ? value
+                : null
+            : value === null || value === undefined
+                ? null
+                : [value];
+        this.syncSelection(() => (values ? this.setOptionsFromValues(values) : this.selectionModel.clear()));
+        this.unresolvedValue = values?.some((item) => !this.treeControl.hasValue(item)) ? { value } : null;
+    }
+    /** Runs a change of the selection made by code, which reports nothing back to the form or to a host. */
+    syncSelection(change) {
+        // 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 {
+            change();
+        }
+        finally {
+            this.writingValue = wasWritingValue;
         }
     }
     registerOnChange(fn) {
         this.onChange = fn;
     }
-    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
@@ -1861,20 +2927,28 @@ class KbqTreeSelection extends KbqTreeBase {
      * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
      */
     setDisabledState(isDisabled) {
-        this._disabled = isDisabled;
-        this.changeDetectorRef.markForCheck();
+        untracked(() => {
+            this.applyDisabledInput();
+            this.disabledState.set(isDisabled);
+        });
     }
+    /** @docs-private */
     setOptionsFromValues(values) {
-        this.selectionModel.clear();
-        const valuesToSelect = values.reduce((result, value) => {
-            return this.treeControl.hasValue(value) ? [...result, this.treeControl.hasValue(value)] : [...result];
-        }, []);
-        this.selectionModel.select(...valuesToSelect);
+        untracked(() => {
+            this.selectionModel.clear();
+            const valuesToSelect = values.reduce((result, value) => {
+                return this.treeControl.hasValue(value) ? [...result, this.treeControl.hasValue(value)] : [...result];
+            }, []);
+            this.selectionModel.select(...valuesToSelect);
+        });
     }
     /**
      * Rebinds orphan node references in selectionModel to current treeControl.dataNodes by value.
      * Needed after dataSource.data is replaced — selectionModel holds references to old node
      * objects, but options render with new ones, so toggle()/isSelected() break on identity.
+     *
+     * A value the form wrote ahead of its nodes is applied again instead, which resolves every node anew.
+     * Either way the selection only follows the data, so nothing is reported.
      */
     syncSelectionModelToDataNodes() {
         const currentNodes = this.treeControl.dataNodes;
@@ -1883,6 +2957,10 @@ class KbqTreeSelection extends KbqTreeBase {
         if (currentNodes === this.lastSyncedDataNodes)
             return;
         this.lastSyncedDataNodes = currentNodes;
+        if (this.unresolvedValue) {
+            this.applyWrittenValue(this.unresolvedValue.value);
+            return;
+        }
         if (this.selectionModel.isEmpty() || !currentNodes?.length)
             return;
         const selected = this.selectionModel.selected;
@@ -1902,23 +2980,23 @@ class KbqTreeSelection extends KbqTreeBase {
             const replacement = this.treeControl.hasValue(this.treeControl.getValue(node));
             return replacement ?? node;
         });
-        this.selectionModel.setSelection(...reconciled);
+        this.syncSelection(() => this.selectionModel.setSelection(...reconciled));
     }
+    /** @docs-private */
     getSelectedValues() {
         const selectedValues = this.selectionModel.selected.map((selected) => this.treeControl.getValue(selected));
         return this.multiple ? selectedValues : selectedValues[0];
     }
-    getItemHeight() {
-        return this.renderedOptions.first ? this.renderedOptions.first.getHeight() : 0;
-    }
     setStateChildren(option, state) {
-        const valuesToChange = this.treeControl.getDescendants(option.data);
-        if (state) {
-            this.selectionModel.select(...valuesToChange);
-        }
-        else {
-            this.selectionModel.deselect(...valuesToChange);
-        }
+        untracked(() => {
+            const valuesToChange = this.treeControl.getDescendants(option.data);
+            if (state) {
+                this.selectionModel.select(...valuesToChange);
+            }
+            else {
+                this.selectionModel.deselect(...valuesToChange);
+            }
+        });
     }
     onCopyDefaultHandler() {
         this.clipboard?.copy(this.keyManager.activeItem.value);
@@ -1951,11 +3029,48 @@ class KbqTreeSelection extends KbqTreeBase {
             level = option.level;
         }
     }
+    /** `-1` is the key manager's way of keeping the letter stream running but never matching on it. */
+    applyTypeAhead() {
+        this.keyManager?.withTypeAhead(typeAheadDebounce, this.typeAhead ? 0 : -1);
+    }
+    /**
+     * Moves focus to the first child of an already-expanded option — ArrowRight on an expanded node.
+     *
+     * The mirror of `setActiveParentOption`: the first rendered option after the active one is its
+     * first child whenever its level is greater, so nothing has to be re-derived from `treeControl`.
+     * A disabled child cannot take focus, so the walk continues while the options stay inside the
+     * subtree, and stops as soon as the level falls back to the active option's own.
+     */
+    setActiveFirstChildOption(activeOption) {
+        const options = this.renderedOptions.toArray();
+        for (let index = this.keyManager.activeItemIndex + 1; index < options.length; index++) {
+            const option = options[index];
+            if (option.level <= activeOption.level) {
+                return;
+            }
+            if (!option.disabled) {
+                this.keyManager.setActiveItem(index);
+                return;
+            }
+        }
+    }
     getHeight() {
         return kbqGetElementHeight(this.elementRef.nativeElement);
     }
+    /** A tree with nothing rendered leaves the tab order, unless a tab index other than `0` is bound. */
     updateTabIndex() {
-        this._tabIndex = this.renderedOptions.length === 0 ? -1 : 0;
+        this.tabIndexState.set(this.userTabIndex || (this.renderedOptions.length === 0 ? -1 : 0));
+    }
+    /**
+     * Whether the same options as before now stand for the rows in another order. A different count means rows were
+     * added or removed, which the options query reports itself.
+     */
+    renderedOptionsOutOfOrder() {
+        const options = this.renderedOptions.toArray();
+        const offset = this.selectAllOption() ? 1 : 0;
+        if (options.length - offset !== this.sortedNodes.length)
+            return false;
+        return this.sortedNodes.some((node, index) => options[index + offset].data !== node);
     }
     getSortedNodes(viewContainer) {
         const array = [];
@@ -1965,41 +3080,29 @@ class KbqTreeSelection extends KbqTreeBase {
         }
         return array;
     }
-    allowFocusEscape() {
-        if (this._tabIndex !== -1) {
-            this._tabIndex = -1;
-            setTimeout(() => {
-                this._tabIndex = this.userTabIndex || 0;
-                this.changeDetectorRef.markForCheck();
-            });
-        }
-    }
-    resetOptions() {
-        this.dropSubscriptions();
-        this.listenToOptionsFocus();
-    }
-    dropSubscriptions() {
-        if (this.optionFocusSubscription) {
-            this.optionFocusSubscription.unsubscribe();
-            this.optionFocusSubscription = null;
-        }
-        if (this.optionBlurSubscription) {
-            this.optionBlurSubscription.unsubscribe();
-            this.optionBlurSubscription = null;
-        }
-    }
     listenToOptionsFocus() {
-        this.optionFocusSubscription = this.optionFocusChanges.subscribe((event) => {
+        // Both streams complete with the tree.
+        this.optionFocusEvents.subscribe((event) => {
             const index = this.renderedOptions.toArray().indexOf(event.option);
             this.renderedOptions.filter((option) => option.hasFocus).forEach((option) => (option.hasFocus = false));
             if (this.isValidIndex(index)) {
                 this.keyManager.updateActiveItem(index);
             }
         });
-        this.optionBlurSubscription = this.optionBlurChanges.subscribe(() => this.blur());
+        // Moving the active option blurs the one being left, so an option blur alone does not mean the
+        // options lost the focus — and resetting here would drop the active option the key manager has just
+        // set, because `KbqTreeOption.hasFocus` is cleared synchronously but only raised a microtask later, so
+        // `hasFocusedOption()` reports nothing focused for the whole move. Only a blur of the option the
+        // key manager still points at is the focus actually leaving the options.
+        this.optionBlurEvents.subscribe(({ option }) => {
+            if (option === this.keyManager.activeItem && !this.hasFocusedOption() && this.resetFocusedItemOnBlur) {
+                this.keyManager.setActiveItem(-1);
+            }
+        });
     }
     /**
      * Utility to ensure all indexes are valid.
+     *
      * @param index The index to be checked.
      * @returns True if the index is valid for our list of options.
      */
@@ -2010,9 +3113,6 @@ class KbqTreeSelection extends KbqTreeBase {
     hasFocusedOption() {
         return this.renderedOptions.some((option) => option.hasFocus);
     }
-    markOptionsForCheck() {
-        this.renderedOptions.forEach((option) => option.markForCheck());
-    }
     updateOptionsFocus() {
         this.renderedOptions.filter((option) => option.hasFocus).forEach((option) => (option.hasFocus = false));
     }
@@ -2025,28 +3125,27 @@ class KbqTreeSelection extends KbqTreeBase {
         }
         return $event.relatedTarget.classList.contains('kbq-tree-option');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeSelection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqTreeSelection, isStandalone: true, selector: "kbq-tree-selection", inputs: { treeControl: { classPropertyName: "treeControl", publicName: "treeControl", isSignal: false, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: false, isRequired: false, transformFunction: null }, noUnselectLast: { classPropertyName: "noUnselectLast", publicName: "noUnselectLast", isSignal: false, isRequired: false, transformFunction: null }, selectAllToggle: { classPropertyName: "selectAllToggle", publicName: "selectAllToggle", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, selectAllHandler: { classPropertyName: "selectAllHandler", publicName: "selectAllHandler", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { navigationChange: "navigationChange", selectionChange: "selectionChange", onSelectAll: "onSelectAll", onCopy: "onCopy" }, host: { listeners: { "blur": "blur()", "focus": "focus($event)", "keydown": "onKeyDown($event)", "window:resize": "updateScrollSize()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tree-selection" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeSelection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqTreeSelection, isStandalone: true, selector: "kbq-tree-selection", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, autoSelectInput: { classPropertyName: "autoSelectInput", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null }, multipleInput: { classPropertyName: "multipleInput", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, noUnselectLastInput: { classPropertyName: "noUnselectLastInput", publicName: "noUnselectLast", isSignal: true, isRequired: false, transformFunction: null }, typeAheadInput: { classPropertyName: "typeAheadInput", publicName: "typeAhead", isSignal: true, isRequired: false, transformFunction: null }, selectAllToggle: { classPropertyName: "selectAllToggle", publicName: "selectAllToggle", isSignal: true, isRequired: false, transformFunction: null }, selectAllInput: { classPropertyName: "selectAllInput", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabIndexInput: { classPropertyName: "tabIndexInput", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, selectAllHandlerInput: { classPropertyName: "selectAllHandlerInput", publicName: "selectAllHandler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigationChange: "navigationChange", selectionChangeOutput: "selectionChange", selectAllChange: "selectAllChange", onSelectAll: "onSelectAll", copyChangeOutput: "copyChange", onCopyOutput: "onCopy" }, host: { attributes: { "role": "tree" }, listeners: { "focus": "focus($event)", "keydown": "onKeyDown($event)", "window:resize": "updateScrollSize()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "attr.aria-disabled": "disabled || null", "attr.aria-multiselectable": "multiple || null", "attr.aria-label": "resolvedAriaLabel", "attr.aria-labelledby": "resolvedAriaLabelledby", "attr.aria-activedescendant": "keyManager?.activeItem?.id" }, classAttribute: "kbq-tree-selection" }, providers: [
             KBQ_SELECTION_TREE_VALUE_ACCESSOR,
             { provide: KBQ_TREE_OPTION_PARENT_COMPONENT, useExisting: KbqTreeSelection },
             { provide: KbqTreeBase, useExisting: KbqTreeSelection }
-        ], queries: [{ propertyName: "unorderedOptions", predicate: KbqTreeOption }], viewQueries: [{ propertyName: "selectAllOption", first: true, predicate: KbqTreeOption, descendants: true, isSignal: true }, { propertyName: "nodeOutlet", first: true, predicate: KbqTreeNodeOutlet, descendants: true, static: true }], exportAs: ["kbqTreeSelection"], usesInheritance: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "unorderedOptionsQuery", predicate: KbqTreeOption, isSignal: true }], viewQueries: [{ propertyName: "selectAllOption", first: true, predicate: KbqTreeOption, descendants: true, isSignal: true }], exportAs: ["kbqTreeSelection"], usesInheritance: true, hostDirectives: [{ directive: i1.KbqStateSaving, inputs: ["useStateSaving", "useStateSaving", "stateSavingKey", "stateSavingKey"] }, { directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: `
         @if (showSelectAll) {
-            <!-- Every read of selectAllState re-filters the rendered nodes against the data set, and
-                 allOptionsSelected is that same walk asking whether the state is "checked" — one read
-                 covers all four. -->
+            <!-- Every read of selectAllState re-filters the rendered nodes against the data set, so the
+                 two bindings below share one through @let. The row's own aria-checked host binding walks
+                 it a second time: Ivy evaluates that binding after this template, and the option reads
+                 the state through KBQ_TREE_OPTION_PARENT_COMPONENT rather than from here. -->
             @let selectAllCheckboxState = selectAllState;
 
+            <!-- role and aria-checked come from the option's own host bindings: a host binding runs
+                 after the parent template's, so an override here would be the one that loses. -->
             <kbq-tree-option
                 class="kbq-tree-option_select-all"
                 kbqTreeNodePadding
                 [selectAllRow]="true"
                 [selectable]="false"
                 [class.kbq-selected]="selectAllCheckboxState === 'checked'"
-                [attr.role]="'checkbox'"
-                [attr.aria-checked]="
-                    selectAllCheckboxState === 'indeterminate' ? 'mixed' : selectAllCheckboxState === 'checked'
-                "
                 (click)="toggleSelectAll()"
             >
                 <kbq-pseudo-checkbox [state]="selectAllCheckboxState" />
@@ -2054,9 +3153,9 @@ class KbqTreeSelection extends KbqTreeBase {
             </kbq-tree-option>
         }
         <ng-container kbqTreeNodeOutlet />
-    `, isInline: true, styles: [".kbq-tree-selection{display:block}.kbq-tree-selection:focus{outline:none}.kbq-tree-option{--kbq-option-background: var(--kbq-tree-default-container-background);background:var(--kbq-tree-default-container-background)}.kbq-tree-option .kbq-option-text{color:var(--kbq-tree-default-text-color)}.kbq-tree-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-default-action-button-color)}.kbq-tree-option .kbq-option-caption{color:var(--kbq-tree-default-caption-color)}.kbq-tree-option:not(.kbq-disabled):hover,.kbq-tree-option:not(.kbq-disabled).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused{--kbq-option-background: var(--kbq-tree-states-hover-container-background);background:var(--kbq-tree-states-hover-container-background)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-text{color:var(--kbq-tree-states-hover-text-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-caption{color:var(--kbq-tree-states-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled):active,.kbq-tree-option:not(.kbq-disabled).kbq-active{--kbq-option-background: var(--kbq-tree-states-active-container-background);background:var(--kbq-tree-states-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected{--kbq-option-background: var(--kbq-tree-states-selected-container-background);background:var(--kbq-tree-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-text{color:var(--kbq-tree-states-selected-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-caption{color:var(--kbq-tree-states-selected-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-states-selected-hover-container-background);background:var(--kbq-tree-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-text{color:var(--kbq-tree-states-selected-hover-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-caption{color:var(--kbq-tree-states-selected-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-states-selected-active-container-background);background:var(--kbq-tree-states-selected-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected),.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected{--kbq-option-background: var(--kbq-tree-multiple-states-selected-container-background);background:var(--kbq-tree-multiple-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):hover,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-multiple-states-selected-hover-container-background);background:var(--kbq-tree-multiple-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):active,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-multiple-states-selected-active-container-background);background:var(--kbq-tree-multiple-states-selected-active-container-background)}.kbq-tree-option.kbq-disabled{--kbq-option-background: var(--kbq-tree-states-disabled-container-background);background:var(--kbq-tree-states-disabled-container-background)}.kbq-tree-option.kbq-disabled .kbq-option-text{color:var(--kbq-tree-states-disabled-text-color)}.kbq-tree-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-disabled-action-button-color)}.kbq-tree-option.kbq-disabled .kbq-option-caption{color:var(--kbq-tree-states-disabled-caption-color)}.kbq-tree-option.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-tree-node-toggle .kbq-icon){color:var(--kbq-states-icon-disabled)}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused){border-color:var(--kbq-tree-states-focused-focus-outline-color)}.kbq-tree-option{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)}.kbq-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-content-gap-vertical: 0px;--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "directive", type: KbqTreeNodeOutlet, selector: "[kbqTreeNodeOutlet]" }, { kind: "component", type: KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "disabled", "selectable", "selectAllRow", "showCheckbox"], outputs: ["onSelectionChange"], exportAs: ["kbqTreeOption"] }, { kind: "directive", type: KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: ["kbqTreeNodePaddingIndent"], exportAs: ["kbqTreeNodePadding"] }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-tree-selection{display:block}.kbq-tree-selection:focus{outline:none}.kbq-tree-option{--kbq-option-background: var(--kbq-tree-default-container-background);background:var(--kbq-tree-default-container-background)}.kbq-tree-option .kbq-option-text{color:var(--kbq-tree-default-text-color)}.kbq-tree-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-default-action-button-color)}.kbq-tree-option .kbq-option-caption{color:var(--kbq-tree-default-caption-color)}.kbq-tree-option:not(.kbq-disabled):hover,.kbq-tree-option:not(.kbq-disabled).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused{--kbq-option-background: var(--kbq-tree-states-hover-container-background);background:var(--kbq-tree-states-hover-container-background)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-text{color:var(--kbq-tree-states-hover-text-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-caption{color:var(--kbq-tree-states-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled):active,.kbq-tree-option:not(.kbq-disabled).kbq-active{--kbq-option-background: var(--kbq-tree-states-active-container-background);background:var(--kbq-tree-states-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected{--kbq-option-background: var(--kbq-tree-states-selected-container-background);background:var(--kbq-tree-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-text{color:var(--kbq-tree-states-selected-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-caption{color:var(--kbq-tree-states-selected-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-states-selected-hover-container-background);background:var(--kbq-tree-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-text{color:var(--kbq-tree-states-selected-hover-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-caption{color:var(--kbq-tree-states-selected-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-states-selected-active-container-background);background:var(--kbq-tree-states-selected-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected),.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected{--kbq-option-background: var(--kbq-tree-multiple-states-selected-container-background);background:var(--kbq-tree-multiple-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):hover,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-multiple-states-selected-hover-container-background);background:var(--kbq-tree-multiple-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):active,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-multiple-states-selected-active-container-background);background:var(--kbq-tree-multiple-states-selected-active-container-background)}.kbq-tree-option.kbq-disabled{--kbq-option-background: var(--kbq-tree-states-disabled-container-background);background:var(--kbq-tree-states-disabled-container-background)}.kbq-tree-option.kbq-disabled .kbq-option-text{color:var(--kbq-tree-states-disabled-text-color)}.kbq-tree-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-disabled-action-button-color)}.kbq-tree-option.kbq-disabled .kbq-option-caption{color:var(--kbq-tree-states-disabled-caption-color)}.kbq-tree-option.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-tree-node-toggle .kbq-icon){color:var(--kbq-states-icon-disabled)}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused){border-color:var(--kbq-tree-states-focused-focus-outline-color)}.kbq-tree-option{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)}.kbq-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "directive", type: KbqTreeNodeOutlet, selector: "[kbqTreeNodeOutlet]" }, { kind: "component", type: KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "disabled", "selectable", "selectAllRow", "showCheckbox"], outputs: ["selectionChange", "onSelectionChange"], exportAs: ["kbqTreeOption"] }, { kind: "directive", type: KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: ["kbqTreeNodePaddingIndent"], exportAs: ["kbqTreeNodePadding"] }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeSelection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeSelection, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-tree-selection', imports: [
                         KbqTreeNodeOutlet,
@@ -2065,21 +3164,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqPseudoCheckbox
                     ], template: `
         @if (showSelectAll) {
-            <!-- Every read of selectAllState re-filters the rendered nodes against the data set, and
-                 allOptionsSelected is that same walk asking whether the state is "checked" — one read
-                 covers all four. -->
+            <!-- Every read of selectAllState re-filters the rendered nodes against the data set, so the
+                 two bindings below share one through @let. The row's own aria-checked host binding walks
+                 it a second time: Ivy evaluates that binding after this template, and the option reads
+                 the state through KBQ_TREE_OPTION_PARENT_COMPONENT rather than from here. -->
             @let selectAllCheckboxState = selectAllState;
 
+            <!-- role and aria-checked come from the option's own host bindings: a host binding runs
+                 after the parent template's, so an override here would be the one that loses. -->
             <kbq-tree-option
                 class="kbq-tree-option_select-all"
                 kbqTreeNodePadding
                 [selectAllRow]="true"
                 [selectable]="false"
                 [class.kbq-selected]="selectAllCheckboxState === 'checked'"
-                [attr.role]="'checkbox'"
-                [attr.aria-checked]="
-                    selectAllCheckboxState === 'indeterminate' ? 'mixed' : selectAllCheckboxState === 'checked'
-                "
                 (click)="toggleSelectAll()"
             >
                 <kbq-pseudo-checkbox [state]="selectAllCheckboxState" />
@@ -2093,39 +3191,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         { provide: KbqTreeBase, useExisting: KbqTreeSelection }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tree-selection',
+                        role: 'tree',
                         '[attr.tabindex]': 'tabIndex',
                         '[attr.disabled]': 'disabled || null',
-                        '(blur)': 'blur()',
+                        '[attr.aria-disabled]': 'disabled || null',
+                        '[attr.aria-multiselectable]': 'multiple || null',
+                        '[attr.aria-label]': 'resolvedAriaLabel',
+                        '[attr.aria-labelledby]': 'resolvedAriaLabelledby',
+                        // The active option takes real DOM focus (`KbqTreeOption.focus`) and is advertised here on top
+                        // of that, so an AT that follows either model reports the same row.
+                        '[attr.aria-activedescendant]': 'keyManager?.activeItem?.id',
                         '(focus)': 'focus($event)',
                         '(keydown)': 'onKeyDown($event)',
                         '(window:resize)': 'updateScrollSize()'
-                    }, exportAs: 'kbqTreeSelection', styles: [".kbq-tree-selection{display:block}.kbq-tree-selection:focus{outline:none}.kbq-tree-option{--kbq-option-background: var(--kbq-tree-default-container-background);background:var(--kbq-tree-default-container-background)}.kbq-tree-option .kbq-option-text{color:var(--kbq-tree-default-text-color)}.kbq-tree-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-default-action-button-color)}.kbq-tree-option .kbq-option-caption{color:var(--kbq-tree-default-caption-color)}.kbq-tree-option:not(.kbq-disabled):hover,.kbq-tree-option:not(.kbq-disabled).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused{--kbq-option-background: var(--kbq-tree-states-hover-container-background);background:var(--kbq-tree-states-hover-container-background)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-text{color:var(--kbq-tree-states-hover-text-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-caption{color:var(--kbq-tree-states-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled):active,.kbq-tree-option:not(.kbq-disabled).kbq-active{--kbq-option-background: var(--kbq-tree-states-active-container-background);background:var(--kbq-tree-states-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected{--kbq-option-background: var(--kbq-tree-states-selected-container-background);background:var(--kbq-tree-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-text{color:var(--kbq-tree-states-selected-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-caption{color:var(--kbq-tree-states-selected-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-states-selected-hover-container-background);background:var(--kbq-tree-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-text{color:var(--kbq-tree-states-selected-hover-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-caption{color:var(--kbq-tree-states-selected-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-states-selected-active-container-background);background:var(--kbq-tree-states-selected-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected),.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected{--kbq-option-background: var(--kbq-tree-multiple-states-selected-container-background);background:var(--kbq-tree-multiple-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):hover,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-multiple-states-selected-hover-container-background);background:var(--kbq-tree-multiple-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):active,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-multiple-states-selected-active-container-background);background:var(--kbq-tree-multiple-states-selected-active-container-background)}.kbq-tree-option.kbq-disabled{--kbq-option-background: var(--kbq-tree-states-disabled-container-background);background:var(--kbq-tree-states-disabled-container-background)}.kbq-tree-option.kbq-disabled .kbq-option-text{color:var(--kbq-tree-states-disabled-text-color)}.kbq-tree-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-disabled-action-button-color)}.kbq-tree-option.kbq-disabled .kbq-option-caption{color:var(--kbq-tree-states-disabled-caption-color)}.kbq-tree-option.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-tree-node-toggle .kbq-icon){color:var(--kbq-states-icon-disabled)}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused){border-color:var(--kbq-tree-states-focused-focus-outline-color)}.kbq-tree-option{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)}.kbq-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-content-gap-vertical: 0px;--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { nodeOutlet: [{
-                type: ViewChild,
-                args: [KbqTreeNodeOutlet, { static: true }]
-            }], selectAllOption: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqTreeOption), { isSignal: true }] }], unorderedOptions: [{
-                type: ContentChildren,
-                args: [KbqTreeOption]
-            }], treeControl: [{
-                type: Input
-            }], navigationChange: [{ type: i0.Output, args: ["navigationChange"] }], selectionChange: [{
-                type: Output
-            }], onSelectAll: [{ type: i0.Output, args: ["onSelectAll"] }], onCopy: [{
-                type: Output
-            }], autoSelect: [{
-                type: Input
-            }], noUnselectLast: [{
-                type: Input
-            }], selectAllToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllToggle", required: false }] }], selectAll: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], disabled: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input
-            }], selectAllHandler: [{
-                type: Input
-            }] } });
+                    }, hostDirectives: [
+                        { directive: KbqStateSaving, inputs: ['useStateSaving', 'stateSavingKey'] },
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ], exportAs: 'kbqTreeSelection', styles: [".kbq-tree-selection{display:block}.kbq-tree-selection:focus{outline:none}.kbq-tree-option{--kbq-option-background: var(--kbq-tree-default-container-background);background:var(--kbq-tree-default-container-background)}.kbq-tree-option .kbq-option-text{color:var(--kbq-tree-default-text-color)}.kbq-tree-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-default-action-button-color)}.kbq-tree-option .kbq-option-caption{color:var(--kbq-tree-default-caption-color)}.kbq-tree-option:not(.kbq-disabled):hover,.kbq-tree-option:not(.kbq-disabled).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused{--kbq-option-background: var(--kbq-tree-states-hover-container-background);background:var(--kbq-tree-states-hover-container-background)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-text{color:var(--kbq-tree-states-hover-text-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-caption{color:var(--kbq-tree-states-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled):active,.kbq-tree-option:not(.kbq-disabled).kbq-active{--kbq-option-background: var(--kbq-tree-states-active-container-background);background:var(--kbq-tree-states-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected{--kbq-option-background: var(--kbq-tree-states-selected-container-background);background:var(--kbq-tree-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-text{color:var(--kbq-tree-states-selected-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-caption{color:var(--kbq-tree-states-selected-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-states-selected-hover-container-background);background:var(--kbq-tree-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-text{color:var(--kbq-tree-states-selected-hover-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-caption{color:var(--kbq-tree-states-selected-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-states-selected-active-container-background);background:var(--kbq-tree-states-selected-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected),.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected{--kbq-option-background: var(--kbq-tree-multiple-states-selected-container-background);background:var(--kbq-tree-multiple-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):hover,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-multiple-states-selected-hover-container-background);background:var(--kbq-tree-multiple-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):active,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-multiple-states-selected-active-container-background);background:var(--kbq-tree-multiple-states-selected-active-container-background)}.kbq-tree-option.kbq-disabled{--kbq-option-background: var(--kbq-tree-states-disabled-container-background);background:var(--kbq-tree-states-disabled-container-background)}.kbq-tree-option.kbq-disabled .kbq-option-text{color:var(--kbq-tree-states-disabled-text-color)}.kbq-tree-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-disabled-action-button-color)}.kbq-tree-option.kbq-disabled .kbq-option-caption{color:var(--kbq-tree-states-disabled-caption-color)}.kbq-tree-option.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-tree-node-toggle .kbq-icon){color:var(--kbq-states-icon-disabled)}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused){border-color:var(--kbq-tree-states-focused-focus-outline-color)}.kbq-tree-option{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)}.kbq-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], selectAllOption: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqTreeOption), { isSignal: true }] }], unorderedOptionsQuery: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqTreeOption), { isSignal: true }] }], navigationChange: [{ type: i0.Output, args: ["navigationChange"] }], selectionChangeOutput: [{ type: i0.Output, args: ["selectionChange"] }], selectAllChange: [{ type: i0.Output, args: ["selectAllChange"] }], onSelectAll: [{ type: i0.Output, args: ["onSelectAll"] }], copyChangeOutput: [{ type: i0.Output, args: ["copyChange"] }], onCopyOutput: [{ type: i0.Output, args: ["onCopy"] }], autoSelectInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }], multipleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], noUnselectLastInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "noUnselectLast", required: false }] }], typeAheadInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeAhead", required: false }] }], selectAllToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllToggle", required: false }] }], selectAllInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], selectAllHandlerInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllHandler", required: false }] }] } });
 
 const KBQ_TREE_DIRECTIVES = [
     KbqTreeNodeOutlet,
@@ -2139,8 +3222,8 @@ const KBQ_TREE_DIRECTIVES = [
     KbqTreeNodeToggleDirective
 ];
 class KbqTreeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeModule, imports: [KbqPseudoCheckboxModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeModule, imports: [KbqPseudoCheckboxModule,
             KbqIconModule,
             KbqActionContainer, KbqTreeNodeOutlet,
             KbqTreeNodeDef,
@@ -2159,13 +3242,13 @@ class KbqTreeModule {
             KbqTreeOption,
             KbqTreeNodeToggleComponent,
             KbqTreeNodeToggleDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeModule, providers: [{ provide: AsyncScheduler, useValue: asyncScheduler }], imports: [KbqPseudoCheckboxModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeModule, providers: [{ provide: AsyncScheduler, useValue: asyncScheduler }], imports: [KbqPseudoCheckboxModule,
             KbqIconModule,
             KbqActionContainer, KbqTreeSelection,
             KbqTreeOption,
             KbqTreeNodeToggleComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [