@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-tree.mjs

@@ -0,0 +1,1448 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, input, booleanAttribute, numberAttribute, ElementRef, signal, contentChildren, computed, afterEveryRender, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, model, output, contentChild, DestroyRef, afterNextRender, forwardRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { createTreeCollection, createFilter, virtualWindow, indeterminateKeys, cascadeSelection, nextSelection, moveIndex } from '@slotted/core/collection';
+import { createControllable } from '@slotted/core/state';
+import { createTypeahead, isPrintable } from '@slotted/core/typeahead';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+
+/**
+ * `expandOn` is `row` because the band is a larger target than any chevron and
+ * it is what a file browser does. `selectionIndicator` is `auto` rather than a
+ * mode, because the right mark depends on the mode beside it: a box for a set
+ * the reader ticks, a highlight for the one thing they chose. `loop` is off,
+ * for the reason `listbox` states.
+ */
+const FALLBACK = {
+    disallowEmptySelection: false,
+    disallowSelectAll: false,
+    expandOn: 'row',
+    focusMode: 'auto',
+    guides: true,
+    itemSize: 32,
+    loop: false,
+    navigateDisabled: false,
+    overscan: 4,
+    pageSize: 10,
+    selectOnFocus: false,
+    selectionBehavior: 'toggle',
+    selectionCascade: 'none',
+    selectionIndicator: 'auto',
+    selectionMode: 'single',
+    size: 'md',
+    structure: 'auto',
+    typeahead: true,
+    typeaheadTimeout: 500,
+    variant: 'plain',
+    virtual: false,
+};
+const TREE_DEFAULTS = new InjectionToken('slotted tree defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its trees behave, rather than repeating
+ * twenty inputs on every hierarchy in a product. A tree that states any of them
+ * itself still wins: an explicit input is never overridden by the token.
+ */
+function provideTreeDefaults(defaults) {
+    return {
+        provide: TREE_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a tree behaves as here, before it states anything of its own. */
+function injectTreeDefaults() {
+    return inject(TREE_DEFAULTS);
+}
+/**
+ * `aria-activedescendant` names a node by its id, and a node's own label names
+ * the node, so every node needs two ids and the same strings have to be
+ * produced on the server and in the browser. A counter held by the injector
+ * produces them; `Math.random` would not match for hydration.
+ */
+class SlTreeIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-tree-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * What a part asks the tree around it.
+ *
+ * It is an abstract class rather than an interface so it can be the injection
+ * token as well as the type, and it exists in a file of its own so the parts do
+ * not import the component that renders them: the component's own template
+ * applies the node component, and a direct import each way is a cycle.
+ */
+class SlTreeContext {
+}
+
+/** The selector the tree reads its visible rows through, in DOM order. */
+const NODE_SELECTOR = "[data-part='node']";
+/**
+ * One node, and the facts the tree reads back off it.
+ *
+ * The visible collection is read from the DOM rather than from a registry, as
+ * `listbox` and `menu` already do: document order is reading order, a collapsed
+ * branch renders no group and therefore contributes no rows, and nothing has to
+ * be registered, unregistered or ordered by mount time. The flattening a tree
+ * would otherwise need is the browser's own.
+ *
+ * `aria-disabled` and never the native attribute: the pattern needs a disabled
+ * node to keep its place in the set, and `navigateDisabled` is what decides
+ * whether the arrows land on it.
+ */
+class SlTreeNode {
+    /** The key this node selects and expands by. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The node's name, when it is a plain string. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this node has children that have not been rendered yet. A branch
+     * says so before it can prove it, which is what makes lazy loading possible.
+     */
+    hasChildren = input(false, { ...(ngDevMode ? { debugName: "hasChildren" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the children are on their way. Writes `aria-busy` on the group. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Unstated rather than `false`, so the node defers to the tree. */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /**
+     * What typeahead matches and what a reader hears. Defaults to the label's own
+     * text, which is wrong exactly when the label holds a mark or a number.
+     */
+    textValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
+    /** Whether a query matched this node's own name or one below it. */
+    match = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "match" }] : /* istanbul ignore next */ []));
+    /**
+     * Rendered at its own place on the canvas whether or not the window covers
+     * it. The tree pins the active node and the range anchor; nothing else sets
+     * it, because an `aria-activedescendant` whose target has been recycled names
+     * an id that is not in the document.
+     */
+    pinned = input(false, { ...(ngDevMode ? { debugName: "pinned" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Where the node sits on the canvas, in pixels. Windowed rows only. */
+    offset = input(undefined, { ...(ngDevMode ? { debugName: "offset" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : numberAttribute(state)) });
+    /**
+     * How deep the node sits, stated only by the flat shape. Everywhere else the
+     * markup says it: a node inside another is one level deeper, and the number
+     * is a fact about the tree rather than one more thing a consumer can get
+     * wrong.
+     */
+    level = input(undefined, { ...(ngDevMode ? { debugName: "level" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : numberAttribute(state)) });
+    tree = inject(SlTreeContext);
+    /**
+     * The node this one is written inside, found through the element injector
+     * rather than through a context signal: projected content keeps the injector
+     * of the place it was declared, which is exactly the nesting the depth is
+     * counted from.
+     */
+    parent = inject(SlTreeNode, { optional: true, skipSelf: true });
+    host = inject(ElementRef);
+    /**
+     * The nodes this one is rendered inside, counted in the document once it is
+     * attached. A template that calls itself declares every instance at the root,
+     * so the injector finds no parent for any of them and the whole tree would
+     * draw flat; the document still nests them, and so does the level the
+     * platform reports.
+     */
+    renderedDepth = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderedDepth" }] : /* istanbul ignore next */ []));
+    /**
+     * The nodes written inside this one. Angular creates projected content with
+     * the parent's own view and only decides where to place it, so the query
+     * answers a branch that is closed and whose group is therefore not rendered —
+     * which is what keeps a collapsed branch a branch.
+     */
+    childNodes = contentChildren(SlTreeNode, { ...(ngDevMode ? { debugName: "childNodes" } : /* istanbul ignore next */ {}), descendants: true });
+    /** A branch is a node that holds children or says it will. */
+    branch = computed(() => this.hasChildren() || this.childNodes().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "branch" }] : /* istanbul ignore next */ []));
+    /**
+     * Annotated rather than inferred: the depth of a node reads the depth of the
+     * node it is written inside, and an inferred type would be defined in terms
+     * of itself.
+     */
+    depth = computed(() => this.level() ?? this.renderedDepth() ?? (this.parent === null ? 0 : this.parent.depth() + 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
+    expanded = computed(() => this.branch() && this.tree.isExpanded(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    selected = computed(() => this.tree.isSelected(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    indeterminate = computed(() => this.tree.isIndeterminate(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    holdsSelection = computed(() => !this.expanded() && this.tree.holdsSelection(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "holdsSelection" }] : /* istanbul ignore next */ []));
+    current = computed(() => this.tree.isActive(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    id = computed(() => this.tree.nodeId(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    labelId = computed(() => this.tree.labelId(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    resolvedDisabled = computed(() => (this.disabled() ?? false) === true || this.tree.treeDisabled() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    ariaExpanded = computed(() => this.branch() ? (this.expanded() ? 'true' : 'false') : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []));
+    chosen = computed(() => this.tree.selection() === 'none' ? null : this.selected() ? 'true' : 'false', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chosen" }] : /* istanbul ignore next */ []));
+    ariaSelected = computed(() => this.tree.indicatorMode() === 'checkbox' ? null : this.chosen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSelected" }] : /* istanbul ignore next */ []));
+    ariaChecked = computed(() => this.tree.indicatorMode() === 'checkbox' ? this.chosen() : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaChecked" }] : /* istanbul ignore next */ []));
+    /**
+     * The level the node reports is the tree's answer and not the depth it was
+     * handed: the depth places the row, and the property is written only where
+     * the nesting no longer says it.
+     */
+    levelAttr = computed(() => this.tree.levelOf(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "levelAttr" }] : /* istanbul ignore next */ []));
+    setSize = computed(() => this.tree.setSizeOf(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "setSize" }] : /* istanbul ignore next */ []));
+    posInSet = computed(() => this.tree.posInSetOf(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "posInSet" }] : /* istanbul ignore next */ []));
+    tabIndex = computed(() => this.tree.nodeTabIndex(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /*
+         * Projected content is created with the parent's view, before a closed
+         * branch has placed its group in the document, so one read at creation
+         * finds no ancestor. The count waits until the node is attached, and stops
+         * there: a view is never moved to another parent.
+         */
+        const measure = afterEveryRender({
+            read: () => {
+                const element = this.host.nativeElement;
+                const root = element.closest("[data-ui='tree']");
+                if (root === null)
+                    return;
+                let depth = 0;
+                let node = element.parentElement?.closest(NODE_SELECTOR);
+                while (node && root.contains(node)) {
+                    depth += 1;
+                    node = node.parentElement?.closest(NODE_SELECTOR);
+                }
+                this.renderedDepth.set(depth);
+                measure.destroy();
+            },
+        });
+    }
+    onRowClick(event) {
+        if (this.resolvedDisabled())
+            return;
+        this.tree.press(this.value(), event);
+    }
+    onExpanderClick(event) {
+        event.stopPropagation();
+        if (!this.branch() || this.resolvedDisabled())
+            return;
+        this.tree.pressExpander(this.value(), event);
+    }
+    onIndicatorClick(event) {
+        event.stopPropagation();
+        if (this.resolvedDisabled())
+            return;
+        this.tree.pressIndicator(this.value(), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeNode, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTreeNode, isStandalone: true, selector: "li[slTreeNode]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, match: { classPropertyName: "match", publicName: "match", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "node", "role": "treeitem" }, properties: { "attr.id": "id()", "attr.data-key": "value()", "attr.data-depth": "depth()", "style.--slotted-tree-depth": "depth()", "style.--slotted-tree-row-offset.px": "offset()", "attr.data-text-value": "textValue() ?? null", "attr.data-branch": "branch() ? '' : null", "attr.data-expanded": "expanded() ? '' : null", "attr.data-selected": "selected() ? '' : null", "attr.data-selected-within": "holdsSelection() ? '' : null", "attr.data-indeterminate": "indeterminate() ? '' : null", "attr.data-current": "current() ? '' : null", "attr.data-disabled": "resolvedDisabled() ? '' : null", "attr.data-loading": "loading() ? '' : null", "attr.data-match": "match() ?? null", "attr.data-pinned": "pinned() ? '' : null", "attr.aria-labelledby": "labelId()", "attr.aria-expanded": "ariaExpanded()", "attr.aria-selected": "ariaSelected()", "attr.aria-checked": "ariaChecked()", "attr.aria-disabled": "resolvedDisabled() ? 'true' : null", "attr.aria-level": "levelAttr()", "attr.aria-setsize": "setSize()", "attr.aria-posinset": "posInSet()", "attr.tabindex": "tabIndex()" } }, queries: [{ propertyName: "childNodes", predicate: SlTreeNode, descendants: true, isSignal: true }], exportAs: ["slTreeNode"], ngImport: i0, template: `<div data-part="row" (click)="onRowClick($event)">
+      @if (tree.showGuides() && depth() > 0) {
+        <span data-part="guide" aria-hidden="true"></span>
+      }
+      @if (branch() && loading()) {
+        <!-- The wait stands in the chevron's own cell, so a branch that starts
+             fetching moves neither its own name nor the rows below it. -->
+        <span data-part="loader" data-ui="spinner" aria-hidden="true"></span>
+      } @else {
+        <span data-part="expander" aria-hidden="true" (click)="onExpanderClick($event)">
+          <!-- A leaf keeps the box and draws nothing in it. -->
+          @if (branch()) {
+            <span slIcon><svg slGlyph name="chevron-right"></svg></span>
+          }
+        </span>
+      }
+      @if (tree.indicatorMode() === 'checkbox') {
+        <!-- The dash outranks the check: a branch partly chosen shows the state
+             its children are in. -->
+        <span data-part="indicator" aria-hidden="true" (click)="onIndicatorClick($event)"
+          ><span slIcon><svg slGlyph [name]="indeterminate() ? 'minus' : 'check'"></svg></span
+        ></span>
+      }
+      <ng-content select="[slTreeIcon]" />
+      <span data-part="label" [attr.id]="labelId()"
+        >{{ label() }}<ng-content select="[slTreeLabel]"
+      /></span>
+      <ng-content select="[slTreeDescription]" />
+      <ng-content select="[slTreeMeta]" />
+      <ng-content select="[slTreeActions]" />
+    </div>
+    @if (branch() && expanded()) {
+      <!-- The group is placed only while the branch is open. One kept in the
+           DOM and merely hidden would put every descendant of every closed
+           branch into the reading order the root counts.
+
+           The element is the consumer's rather than this template's, and the
+           reason is the HTML parser: Angular parses a template as HTML, where
+           an li closes the li before it, so a node written inside a node needs
+           the list between them. React has no such rule and needs no such
+           element, and the asymmetry is written in the design rather than
+           levelled away. -->
+      <ng-content select="[slTreeGroup]" />
+    }
+    <ng-content />`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeNode, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[slTreeNode]',
+                    standalone: true,
+                    exportAs: 'slTreeNode',
+                    imports: [SlGlyph, SlIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `<div data-part="row" (click)="onRowClick($event)">
+      @if (tree.showGuides() && depth() > 0) {
+        <span data-part="guide" aria-hidden="true"></span>
+      }
+      @if (branch() && loading()) {
+        <!-- The wait stands in the chevron's own cell, so a branch that starts
+             fetching moves neither its own name nor the rows below it. -->
+        <span data-part="loader" data-ui="spinner" aria-hidden="true"></span>
+      } @else {
+        <span data-part="expander" aria-hidden="true" (click)="onExpanderClick($event)">
+          <!-- A leaf keeps the box and draws nothing in it. -->
+          @if (branch()) {
+            <span slIcon><svg slGlyph name="chevron-right"></svg></span>
+          }
+        </span>
+      }
+      @if (tree.indicatorMode() === 'checkbox') {
+        <!-- The dash outranks the check: a branch partly chosen shows the state
+             its children are in. -->
+        <span data-part="indicator" aria-hidden="true" (click)="onIndicatorClick($event)"
+          ><span slIcon><svg slGlyph [name]="indeterminate() ? 'minus' : 'check'"></svg></span
+        ></span>
+      }
+      <ng-content select="[slTreeIcon]" />
+      <span data-part="label" [attr.id]="labelId()"
+        >{{ label() }}<ng-content select="[slTreeLabel]"
+      /></span>
+      <ng-content select="[slTreeDescription]" />
+      <ng-content select="[slTreeMeta]" />
+      <ng-content select="[slTreeActions]" />
+    </div>
+    @if (branch() && expanded()) {
+      <!-- The group is placed only while the branch is open. One kept in the
+           DOM and merely hidden would put every descendant of every closed
+           branch into the reading order the root counts.
+
+           The element is the consumer's rather than this template's, and the
+           reason is the HTML parser: Angular parses a template as HTML, where
+           an li closes the li before it, so a node written inside a node needs
+           the list between them. React has no such rule and needs no such
+           element, and the asymmetry is written in the design rather than
+           levelled away. -->
+      <ng-content select="[slTreeGroup]" />
+    }
+    <ng-content />`,
+                    host: {
+                        'data-part': 'node',
+                        role: 'treeitem',
+                        '[attr.id]': 'id()',
+                        '[attr.data-key]': 'value()',
+                        '[attr.data-depth]': 'depth()',
+                        '[style.--slotted-tree-depth]': 'depth()',
+                        '[style.--slotted-tree-row-offset.px]': 'offset()',
+                        '[attr.data-text-value]': 'textValue() ?? null',
+                        '[attr.data-branch]': "branch() ? '' : null",
+                        '[attr.data-expanded]': "expanded() ? '' : null",
+                        '[attr.data-selected]': "selected() ? '' : null",
+                        '[attr.data-selected-within]': "holdsSelection() ? '' : null",
+                        '[attr.data-indeterminate]': "indeterminate() ? '' : null",
+                        '[attr.data-current]': "current() ? '' : null",
+                        '[attr.data-disabled]': "resolvedDisabled() ? '' : null",
+                        '[attr.data-loading]': "loading() ? '' : null",
+                        '[attr.data-match]': 'match() ?? null',
+                        '[attr.data-pinned]': "pinned() ? '' : null",
+                        '[attr.aria-labelledby]': 'labelId()',
+                        '[attr.aria-expanded]': 'ariaExpanded()',
+                        '[attr.aria-selected]': 'ariaSelected()',
+                        '[attr.aria-checked]': 'ariaChecked()',
+                        '[attr.aria-disabled]': "resolvedDisabled() ? 'true' : null",
+                        '[attr.aria-level]': 'levelAttr()',
+                        '[attr.aria-setsize]': 'setSize()',
+                        '[attr.aria-posinset]': 'posInSet()',
+                        '[attr.tabindex]': 'tabIndex()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], textValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "textValue", required: false }] }], match: [{ type: i0.Input, args: [{ isSignal: true, alias: "match", required: false }] }], pinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinned", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], childNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SlTreeNode), { ...{ descendants: true }, isSignal: true }] }] } });
+/**
+ * The list a branch's children are written in.
+ *
+ * It exists because Angular parses a template as HTML: an `li` closes the `li`
+ * before it, so a node written inside a node needs the list between them. The
+ * node decides whether the group is placed; the consumer decides what element
+ * it is.
+ */
+class SlTreeGroup {
+    /** Whether the children are still on their way. */
+    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTreeGroup, isStandalone: true, selector: "ul[slTreeGroup]", inputs: { busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "group", "role": "group" }, properties: { "attr.aria-busy": "busy() ? 'true' : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ul[slTreeGroup]',
+                    standalone: true,
+                    host: {
+                        'data-part': 'group',
+                        role: 'group',
+                        '[attr.aria-busy]': "busy() ? 'true' : null",
+                    },
+                }]
+        }], propDecorators: { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }] } });
+/** The node's leading picture, which the consumer owns whole. */
+class SlTreeIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTreeIcon, isStandalone: true, selector: "[slTreeIcon]", host: { attributes: { "data-part": "icon", "aria-hidden": "true" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTreeIcon]',
+                    standalone: true,
+                    host: { 'data-part': 'icon', 'aria-hidden': 'true' },
+                }]
+        }] });
+/** The node's name, when it is richer than a string. */
+class SlTreeLabel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTreeLabel, isStandalone: true, selector: "[slTreeLabel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeLabel, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slTreeLabel]', standalone: true }]
+        }] });
+/** A second line under the name. */
+class SlTreeDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTreeDescription, isStandalone: true, selector: "[slTreeDescription]", host: { attributes: { "data-part": "description" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTreeDescription]',
+                    standalone: true,
+                    host: { 'data-part': 'description' },
+                }]
+        }] });
+/** The trailing count, size or badge. */
+class SlTreeMeta {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeMeta, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTreeMeta, isStandalone: true, selector: "[slTreeMeta]", host: { attributes: { "data-part": "meta" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeMeta, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slTreeMeta]', standalone: true, host: { 'data-part': 'meta' } }]
+        }] });
+/** The trailing controls. They stay in the DOM and stay reachable. */
+class SlTreeActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTreeActions, isStandalone: true, selector: "[slTreeActions]", host: { attributes: { "data-part": "actions" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeActions, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slTreeActions]', standalone: true, host: { 'data-part': 'actions' } }]
+        }] });
+/** What the tree shows when it holds nothing. */
+class SlTreeEmpty {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTreeEmpty, isStandalone: true, selector: "[slTreeEmpty]", host: { attributes: { "data-part": "empty" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTreeEmpty, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slTreeEmpty]', standalone: true, host: { 'data-part': 'empty' } }]
+        }] });
+
+function toKeys(value) {
+    if (value === undefined || value === null)
+        return [];
+    return typeof value === 'string' ? [value] : value;
+}
+function same(a, b) {
+    return a.length === b.length && a.every((key, index) => key === b[index]);
+}
+/**
+ * A hierarchy the reader opens, walks and chooses from.
+ *
+ * ── Where the visible list comes from ───────────────────────────────────
+ *
+ * From the DOM, in document order, which is the flattening a tree would
+ * otherwise have to keep in step with the expanded set. A collapsed branch
+ * renders no group and therefore contributes no rows, so what the keyboard
+ * counts and what the reader sees cannot disagree.
+ *
+ * `nodes` is a second thing and not a replacement: it is the hierarchy the tree
+ * holds, and it answers the three questions the DOM cannot — what is under a
+ * branch that is closed, which a cascade needs; what every branch is, which
+ * `expandAll` opens; and what matches a query, whose ancestors the filter
+ * keeps.
+ *
+ * ── Three mutable values ────────────────────────────────────────────────
+ *
+ * The pattern is explicit that focus and selection are two: "DOM focus (the
+ * active element) is functionally distinct from the selected state". Expansion
+ * is the third and belongs to neither.
+ */
+class SlTree {
+    /* ── The three values a reader moves ─────────────────────────────────── */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    expandedKeys = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []));
+    activeKey = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+    /** The request behind each move, carrying the reason a boolean cannot say. */
+    valueRequest = output();
+    expandedKeysRequest = output();
+    activeKeyRequest = output();
+    /** A node was activated: pressed, or `Enter` on the keyboard. */
+    nodeActivate = output();
+    /* ── The axes ────────────────────────────────────────────────────────── */
+    defaults = injectTreeDefaults();
+    size = input(this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = input(this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    structure = input(this.defaults.structure, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "structure" }] : /* istanbul ignore next */ []));
+    selectionMode = input(this.defaults.selectionMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    selectionBehavior = input(this.defaults.selectionBehavior, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionBehavior" }] : /* istanbul ignore next */ []));
+    selectionIndicator = input(this.defaults.selectionIndicator, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionIndicator" }] : /* istanbul ignore next */ []));
+    selectionCascade = input(this.defaults.selectionCascade, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionCascade" }] : /* istanbul ignore next */ []));
+    expandOn = input(this.defaults.expandOn, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandOn" }] : /* istanbul ignore next */ []));
+    focusMode = input(this.defaults.focusMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusMode" }] : /* istanbul ignore next */ []));
+    guides = input(this.defaults.guides, { ...(ngDevMode ? { debugName: "guides" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loop = input(this.defaults.loop, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    typeahead = input(this.defaults.typeahead, { ...(ngDevMode ? { debugName: "typeahead" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    typeaheadTimeout = input(this.defaults.typeaheadTimeout, { ...(ngDevMode ? { debugName: "typeaheadTimeout" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    selectOnFocus = input(this.defaults.selectOnFocus, { ...(ngDevMode ? { debugName: "selectOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    navigateDisabled = input(this.defaults.navigateDisabled, { ...(ngDevMode ? { debugName: "navigateDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disallowEmptySelection = input(this.defaults.disallowEmptySelection, { ...(ngDevMode ? { debugName: "disallowEmptySelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disallowSelectAll = input(this.defaults.disallowSelectAll, { ...(ngDevMode ? { debugName: "disallowSelectAll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    pageSize = input(this.defaults.pageSize, { ...(ngDevMode ? { debugName: "pageSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    virtual = input(this.defaults.virtual, { ...(ngDevMode ? { debugName: "virtual" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    itemSize = input(this.defaults.itemSize, { ...(ngDevMode ? { debugName: "itemSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    overscan = input(this.defaults.overscan, { ...(ngDevMode ? { debugName: "overscan" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledBy = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    /* ── The hierarchy, when the tree was handed one ─────────────────────── */
+    nodes = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    getKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getKey" }] : /* istanbul ignore next */ []));
+    getLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getLabel" }] : /* istanbul ignore next */ []));
+    getChildren = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getChildren" }] : /* istanbul ignore next */ []));
+    getLevel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getLevel" }] : /* istanbul ignore next */ []));
+    hasChildren = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+    getChildrenCount = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getChildrenCount" }] : /* istanbul ignore next */ []));
+    isNodeDisabled = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNodeDisabled" }] : /* istanbul ignore next */ []));
+    isNodeLoading = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNodeLoading" }] : /* istanbul ignore next */ []));
+    /**
+     * A query the tree filters by. The consumer owns the string and the control
+     * it is typed into; the tree keeps the ancestors of every hit.
+     */
+    query = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    /** The row's content, re-rendered per node rather than projected once. */
+    nodeContent = contentChild('slTreeNodeContent', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodeContent" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    ids = inject(SlTreeIdFactory);
+    base = this.ids.next();
+    typeaheadHandle = createTypeahead({
+        timeout: this.defaults.typeaheadTimeout,
+    });
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        destroyRef.onDestroy(() => this.typeaheadHandle.destroy());
+        /**
+         * The viewport is measured as soon as there is one, and again whenever it
+         * changes size — not only when the reader scrolls.
+         *
+         * Measuring on `scroll` alone left the window with a viewport of nought
+         * until the first scroll, and a window of nought renders one row: a tree of
+         * four thousand showed its first name and nothing else until the reader
+         * nudged the wheel, at which point the rest appeared at once. It is the
+         * kind of defect that only exists on the first paint, which is exactly
+         * where a reader meets it.
+         */
+        afterNextRender(() => this.measure());
+        const root = this.host.nativeElement;
+        if (typeof ResizeObserver !== 'undefined') {
+            const observer = new ResizeObserver(() => this.measure());
+            observer.observe(root);
+            destroyRef.onDestroy(() => observer.disconnect());
+        }
+    }
+    measure() {
+        const root = this.host.nativeElement;
+        this.viewportSize.set(root.clientHeight);
+        this.scrollOffset.set(root.scrollTop);
+    }
+    /* ── What the axes resolve to ────────────────────────────────────────── */
+    selection = computed(() => this.selectionMode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    treeDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeDisabled" }] : /* istanbul ignore next */ []));
+    showGuides = computed(() => this.guides(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showGuides" }] : /* istanbul ignore next */ []));
+    expandOnRow = computed(() => this.expandOn(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandOnRow" }] : /* istanbul ignore next */ []));
+    /**
+     * `auto` reads the mode beside it: a box for a set the reader ticks, a
+     * highlight for the one thing they chose, and neither when nothing is
+     * selectable. The pattern's own note recommends exactly this convention.
+     */
+    indicatorMode = computed(() => {
+        const stated = this.selectionIndicator();
+        if (stated !== 'auto')
+            return stated;
+        if (this.selection() === 'multiple')
+            return 'checkbox';
+        return this.selection() === 'single' ? 'highlight' : 'none';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorMode" }] : /* istanbul ignore next */ []));
+    /**
+     * The flat shape is the windowed one, and it is the handed collection's
+     * alone: a slice of rows cannot preserve nesting, and a node written in a
+     * template cannot render its children as its own siblings.
+     */
+    structureMode = computed(() => {
+        if (this.collection() === undefined)
+            return 'nested';
+        const stated = this.structure();
+        if (stated !== 'auto')
+            return stated;
+        return this.virtual() ? 'flat' : 'nested';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "structureMode" }] : /* istanbul ignore next */ []));
+    mode = computed(() => {
+        const stated = this.focusMode();
+        if (stated !== 'auto')
+            return stated;
+        return this.virtual() && this.collection() !== undefined ? 'activedescendant' : 'roving';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    collection = computed(() => {
+        const held = this.nodes();
+        const key = this.getKey();
+        if (held === undefined || key === undefined)
+            return undefined;
+        const level = this.getLevel();
+        return createTreeCollection({
+            ...(level === undefined ? { roots: held } : { items: held, getLevel: level }),
+            getKey: key,
+            ...(this.getLabel() === undefined ? {} : { getLabel: this.getLabel() }),
+            ...(this.getChildren() === undefined ? {} : { getChildren: this.getChildren() }),
+            ...(this.hasChildren() === undefined ? {} : { hasChildren: this.hasChildren() }),
+            ...(this.getChildrenCount() === undefined
+                ? {}
+                : { getChildrenCount: this.getChildrenCount() }),
+            ...(this.isNodeDisabled() === undefined
+                ? {}
+                : { isDisabled: this.isNodeDisabled() }),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collection" }] : /* istanbul ignore next */ []));
+    selected = computed(() => toKeys(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /* ── The filter ─────────────────────────────────────────────────────── */
+    filtered = computed(() => {
+        const held = this.collection();
+        const query = this.query();
+        if (held === undefined || query === undefined || query.trim() === '')
+            return undefined;
+        const filter = createFilter();
+        const hits = new Set();
+        for (const node of held.nodes)
+            if (filter.contains(node.label, query))
+                hits.add(node.key);
+        const kept = new Set(hits);
+        for (const key of hits)
+            for (const ancestor of held.ancestorsOf(key))
+                kept.add(ancestor);
+        return { hits, kept };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+    /* ── The window ─────────────────────────────────────────────────────── */
+    viewportSize = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportSize" }] : /* istanbul ignore next */ []));
+    scrollOffset = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollOffset" }] : /* istanbul ignore next */ []));
+    visible = computed(() => {
+        const held = this.collection();
+        return held === undefined ? [] : held.visible(this.expandedKeys());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    windowed = computed(() => this.virtual() && this.collection() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "windowed" }] : /* istanbul ignore next */ []));
+    slice = computed(() => {
+        if (!this.windowed())
+            return undefined;
+        const rows = this.visible();
+        const activeIndex = rows.findIndex((node) => node.key === this.activeKey());
+        const anchorIndex = rows.findIndex((node) => node.key === this.anchor);
+        return virtualWindow({
+            itemCount: rows.length,
+            itemSize: this.itemSize(),
+            overscan: this.overscan(),
+            pinned: [activeIndex, anchorIndex].filter((index) => index !== -1),
+            scrollOffset: this.scrollOffset(),
+            viewportSize: this.viewportSize(),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slice" }] : /* istanbul ignore next */ []));
+    canvasSize = computed(() => {
+        const slice = this.slice();
+        return slice === undefined ? null : `${slice.totalSize}px`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasSize" }] : /* istanbul ignore next */ []));
+    canvasOffset = computed(() => {
+        const slice = this.slice();
+        return slice === undefined ? null : `${slice.startOffset}px`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasOffset" }] : /* istanbul ignore next */ []));
+    onScroll() {
+        this.measure();
+    }
+    /* ── The render plan ────────────────────────────────────────────────── */
+    plan = computed(() => {
+        const held = this.collection();
+        if (held === undefined)
+            return [];
+        const label = (item) => {
+            const read = this.getLabel();
+            return read === undefined
+                ? (this.getKey()(item) ?? '')
+                : read(item);
+        };
+        const loading = this.isNodeLoading();
+        const filtered = this.filtered();
+        const flat = this.structureMode() === 'flat';
+        const entry = (node, offset) => ({
+            key: node.key,
+            item: node.item,
+            label: label(node.item),
+            level: node.level,
+            disabled: node.disabled,
+            branch: node.hasChildren,
+            loading: loading?.(node.item) === true,
+            match: filtered === undefined ? undefined : filtered.hits.has(node.key) ? 'hit' : 'ancestor',
+            offset,
+            children: [],
+        });
+        if (flat) {
+            const rows = this.visible();
+            const slice = this.slice();
+            if (slice === undefined)
+                return rows.map((node) => entry(node, undefined));
+            const inside = rows
+                .slice(slice.startIndex, slice.endIndex)
+                .map((node) => entry(node, undefined));
+            const pinned = [...slice.pinnedBefore, ...slice.pinnedAfter]
+                .map((index) => ({ index, node: rows[index] }))
+                .filter((row) => row.node !== undefined)
+                .map((row) => entry(row.node, row.index * this.itemSize()));
+            return [...pinned, ...inside];
+        }
+        const walk = (keys) => keys
+            .map((key) => held.nodeFor(key))
+            .filter((node) => node !== undefined)
+            .filter((node) => filtered === undefined || filtered.kept.has(node.key))
+            .map((node) => {
+            const row = entry(node, undefined);
+            if (node.hasChildren && this.isExpanded(node.key))
+                row.children = walk(node.children);
+            return row;
+        });
+        return walk(held.roots);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "plan" }] : /* istanbul ignore next */ []));
+    holdsNothing = computed(() => {
+        const held = this.collection();
+        if (held === undefined)
+            return false;
+        const filtered = this.filtered();
+        return held.nodes.length === 0 || (filtered !== undefined && filtered.kept.size === 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "holdsNothing" }] : /* istanbul ignore next */ []));
+    /* ── What every part reads ──────────────────────────────────────────── */
+    positions = computed(() => this.structureMode() === 'flat' ? this.collection() : undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positions" }] : /* istanbul ignore next */ []));
+    indeterminateSet = computed(() => {
+        const held = this.collection();
+        if (this.selectionCascade() !== 'descendants' || held === undefined)
+            return new Set();
+        return new Set(indeterminateKeys(held, this.selected()));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminateSet" }] : /* istanbul ignore next */ []));
+    isSelected(key) {
+        return this.selected().includes(key);
+    }
+    /**
+     * A branch the reader opened, or one a query is holding open.
+     *
+     * A filter that asked for the expansion instead would move the reader's own
+     * set and have to put it back when the query emptied, and a reader who
+     * cleared a search would find branches open that they never opened. Holding
+     * the path open for as long as the query lasts keeps the set the reader owns
+     * untouched, and keeps `aria-expanded` telling the truth about what is on
+     * screen.
+     */
+    isExpanded(key) {
+        if (this.expandedKeys().includes(key))
+            return true;
+        const filtered = this.filtered();
+        return filtered !== undefined && filtered.kept.has(key) && !filtered.hits.has(key);
+    }
+    isActive(key) {
+        return this.activeKey() === key;
+    }
+    isIndeterminate(key) {
+        return this.indeterminateSet().has(key);
+    }
+    holdsSelection(key) {
+        const held = this.collection();
+        if (held === undefined || this.isSelected(key))
+            return false;
+        return held.descendantsOf(key).some((child) => this.isSelected(child));
+    }
+    nodeId(key) {
+        return `${this.base}-node-${key}`;
+    }
+    labelId(key) {
+        return `${this.base}-label-${key}`;
+    }
+    nodeTabIndex(key) {
+        if (this.mode() === 'activedescendant')
+            return null;
+        if (this.activeKey() === null)
+            return -1;
+        return this.activeKey() === key ? 0 : -1;
+    }
+    levelOf(key) {
+        const node = this.positions()?.nodeFor(key);
+        return node === undefined ? null : node.level + 1;
+    }
+    setSizeOf(key) {
+        return this.positions()?.nodeFor(key)?.setSize ?? null;
+    }
+    posInSetOf(key) {
+        return this.positions()?.nodeFor(key)?.posInSet ?? null;
+    }
+    activeDescendant = computed(() => {
+        const key = this.activeKey();
+        return this.mode() === 'activedescendant' && key !== null ? this.nodeId(key) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
+    canvasTabIndex = computed(() => this.mode() === 'activedescendant' || this.activeKey() === null ? 0 : -1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasTabIndex" }] : /* istanbul ignore next */ []));
+    /* ── The rows, read from the DOM ────────────────────────────────────── */
+    canvas() {
+        return this.host.nativeElement.querySelector("[data-part='canvas']");
+    }
+    readRows() {
+        const canvas = this.canvas();
+        if (canvas === null)
+            return [];
+        return [...canvas.querySelectorAll(NODE_SELECTOR)].map((element) => ({
+            key: element.dataset['key'] ?? '',
+            depth: Number(element.dataset['depth'] ?? 0),
+            branch: element.dataset['branch'] !== undefined,
+            disabled: element.getAttribute('aria-disabled') === 'true',
+            label: element.dataset['textValue'] ??
+                element.querySelector("[data-part='label']")?.textContent?.trim() ??
+                '',
+            element,
+        }));
+    }
+    parentOf(rows, index) {
+        const depth = rows[index]?.depth ?? 0;
+        for (let step = index - 1; step >= 0; step -= 1) {
+            if (rows[step].depth < depth)
+                return step;
+        }
+        return -1;
+    }
+    renderedDescendants(rows, index) {
+        const depth = rows[index]?.depth ?? 0;
+        const held = [];
+        for (let step = index + 1; step < rows.length; step += 1) {
+            const row = rows[step];
+            if (row.depth <= depth)
+                break;
+            held.push(row.key);
+        }
+        return held;
+    }
+    /* ── Moving the three values ────────────────────────────────────────── */
+    anchor = undefined;
+    requestValue(keys, reason, source) {
+        const outward = (held) => this.selection() === 'multiple' ? held : (held[0] ?? null);
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.selected(),
+            equals: same,
+            onRequest: (request) => {
+                const outwardRequest = {
+                    value: outward(request.value),
+                    previous: outward(request.previous),
+                    reason: request.reason,
+                    source: request.source,
+                    get cancelled() {
+                        return request.cancelled;
+                    },
+                    cancel: () => request.cancel(),
+                };
+                this.valueRequest.emit(outwardRequest);
+                cancelled = request.cancelled;
+            },
+        });
+        state.request(keys, reason, source);
+        if (cancelled)
+            return;
+        this.value.set(outward(keys));
+        this.onChange(outward(keys));
+        this.onTouched();
+    }
+    requestExpanded(keys, reason, source) {
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.expandedKeys(),
+            equals: same,
+            onRequest: (request) => {
+                this.expandedKeysRequest.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        state.request(keys, reason, source);
+        if (!cancelled)
+            this.expandedKeys.set(keys);
+    }
+    requestActive(key, reason, source) {
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.activeKey(),
+            onRequest: (request) => {
+                this.activeKeyRequest.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        state.request(key, reason, source);
+        if (!cancelled)
+            this.activeKey.set(key);
+    }
+    setExpanded(key, open, reason, source) {
+        const held = this.expandedKeys();
+        if (held.includes(key) === open)
+            return;
+        const next = open ? [...held, key] : held.filter((candidate) => candidate !== key);
+        /* Closing a branch that holds the active node moves the active node to the
+           branch, and that request goes out first: a consumer that accepts one and
+           refuses the other is left with a coherent pair, where the reverse order
+           would strand the keyboard on an element the next render removes. */
+        const active = this.activeKey();
+        if (!open && active !== null && active !== key) {
+            const rows = this.readRows();
+            const index = rows.findIndex((row) => row.key === key);
+            if (index !== -1 && this.renderedDescendants(rows, index).includes(active)) {
+                this.requestActive(key, reason === 'programmatic' ? 'programmatic' : reason, source);
+            }
+        }
+        this.requestExpanded(next, reason, source);
+    }
+    applySelection(key, event, intent, reason) {
+        if (this.selection() === 'none' || this.readOnly())
+            return;
+        const held = this.collection();
+        const rows = this.readRows();
+        if (this.selectionCascade() === 'descendants' &&
+            held !== undefined &&
+            (intent === 'toggle' || intent === 'replace')) {
+            const result = cascadeSelection({
+                collection: held,
+                selected: this.selected(),
+                key,
+                action: 'toggle',
+            });
+            if (result.changed)
+                this.requestValue(result.selected, reason, event);
+            return;
+        }
+        const result = nextSelection({
+            action: intent,
+            mode: this.selection(),
+            behavior: this.selectionBehavior(),
+            selected: this.selected(),
+            keys: rows.filter((row) => !row.disabled).map((row) => row.key),
+            key,
+            anchor: this.anchor ?? key,
+            disabled: (candidate) => rows.find((row) => row.key === candidate)?.disabled === true,
+            disallowEmpty: this.disallowEmptySelection(),
+            disallowSelectAll: this.disallowSelectAll(),
+        });
+        this.anchor = result.anchor;
+        if (result.changed)
+            this.requestValue(result.selected, reason, event);
+    }
+    /* ── The pointer ────────────────────────────────────────────────────── */
+    press(key, event) {
+        if (this.treeDisabled())
+            return;
+        const rows = this.readRows();
+        const row = rows.find((candidate) => candidate.key === key);
+        if (row === undefined || row.disabled)
+            return;
+        this.requestActive(key, 'pointer', event);
+        if (row.branch && this.expandOn() === 'row') {
+            this.setExpanded(key, !this.isExpanded(key), 'pointer', event);
+        }
+        if (this.selection() !== 'none') {
+            const intent = event.shiftKey
+                ? 'range'
+                : event.ctrlKey || event.metaKey
+                    ? 'toggle'
+                    : this.selectionBehavior() === 'replace'
+                        ? 'replace'
+                        : 'toggle';
+            this.applySelection(key, event, intent, 'pointer');
+        }
+        this.nodeActivate.emit({ key, reason: 'pointer' });
+    }
+    pressExpander(key, event) {
+        if (this.treeDisabled())
+            return;
+        this.requestActive(key, 'pointer', event);
+        this.setExpanded(key, !this.isExpanded(key), 'pointer', event);
+    }
+    pressIndicator(key, event) {
+        if (this.treeDisabled())
+            return;
+        this.requestActive(key, 'pointer', event);
+        this.applySelection(key, event, 'toggle', 'pointer');
+    }
+    /* ── The keyboard ───────────────────────────────────────────────────── */
+    moveTo(rows, index, event) {
+        const row = rows[index];
+        if (row === undefined)
+            return;
+        this.requestActive(row.key, 'keyboard', event);
+        row.element.focus();
+        if (this.selectOnFocus())
+            this.applySelection(row.key, event, 'replace', 'keyboard');
+    }
+    move(rows, intent, event) {
+        const next = moveIndex({
+            enabled: rows.map((row) => this.navigateDisabled() || !row.disabled),
+            from: rows.findIndex((row) => row.key === this.activeKey()),
+            intent,
+            loop: this.loop(),
+            page: this.pageSize(),
+        });
+        if (next !== -1)
+            this.moveTo(rows, next, event);
+    }
+    onKeyDown(event) {
+        if (event.defaultPrevented || this.treeDisabled())
+            return;
+        /* Arrow navigation stands down while focus is inside a control the reader
+           is typing in, which is what makes an inline rename composable. */
+        const target = event.target;
+        if (target.closest('input, textarea, [contenteditable="true"]') !== null)
+            return;
+        const rows = this.readRows();
+        if (rows.length === 0)
+            return;
+        const index = rows.findIndex((row) => row.key === this.activeKey());
+        const row = index === -1 ? undefined : rows[index];
+        const canvas = this.canvas();
+        const rtl = canvas !== null && getComputedStyle(canvas).direction === 'rtl';
+        const forward = rtl ? 'ArrowLeft' : 'ArrowRight';
+        const backward = rtl ? 'ArrowRight' : 'ArrowLeft';
+        const take = () => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            take();
+            const intent = event.key === 'ArrowDown' ? 'next' : 'previous';
+            if (event.shiftKey && this.selection() === 'multiple') {
+                const next = moveIndex({
+                    enabled: rows.map((candidate) => this.navigateDisabled() || !candidate.disabled),
+                    from: index,
+                    intent,
+                    loop: this.loop(),
+                });
+                if (next !== -1) {
+                    this.moveTo(rows, next, event);
+                    this.applySelection(rows[next].key, event, 'toggle', 'keyboard');
+                }
+                return;
+            }
+            this.move(rows, intent, event);
+            return;
+        }
+        if (event.key === 'Home' || event.key === 'End') {
+            take();
+            const edge = event.key === 'Home' ? 0 : rows.length - 1;
+            if (event.ctrlKey && event.shiftKey && row !== undefined) {
+                this.anchor = rows[edge].key;
+                this.applySelection(row.key, event, 'range', 'keyboard');
+                return;
+            }
+            this.move(rows, event.key === 'Home' ? 'first' : 'last', event);
+            return;
+        }
+        if (event.key === 'PageDown' || event.key === 'PageUp') {
+            take();
+            this.move(rows, event.key === 'PageDown' ? 'pageDown' : 'pageUp', event);
+            return;
+        }
+        if (event.key === forward) {
+            take();
+            if (row === undefined || !row.branch)
+                return;
+            if (!this.isExpanded(row.key)) {
+                this.setExpanded(row.key, true, 'keyboard', event);
+                return;
+            }
+            if (index + 1 < rows.length && rows[index + 1].depth > row.depth) {
+                this.moveTo(rows, index + 1, event);
+            }
+            return;
+        }
+        if (event.key === backward) {
+            take();
+            if (row === undefined)
+                return;
+            if (row.branch && this.isExpanded(row.key)) {
+                this.setExpanded(row.key, false, 'keyboard', event);
+                return;
+            }
+            const parent = this.parentOf(rows, index);
+            if (parent !== -1)
+                this.moveTo(rows, parent, event);
+            return;
+        }
+        if (event.key === 'Enter') {
+            take();
+            if (row === undefined)
+                return;
+            if (row.branch && this.expandOn() === 'row') {
+                this.setExpanded(row.key, !this.isExpanded(row.key), 'keyboard', event);
+            }
+            if (this.selection() !== 'none')
+                this.applySelection(row.key, event, 'replace', 'keyboard');
+            this.nodeActivate.emit({ key: row.key, reason: 'keyboard' });
+            return;
+        }
+        if (event.key === ' ') {
+            take();
+            if (row === undefined)
+                return;
+            this.applySelection(row.key, event, event.shiftKey ? 'range' : 'toggle', 'keyboard');
+            return;
+        }
+        if ((event.key === 'a' || event.key === 'A') && (event.ctrlKey || event.metaKey)) {
+            take();
+            this.applySelection(row?.key ?? '', event, 'all', 'keyboard');
+            return;
+        }
+        if (event.key === '*') {
+            take();
+            if (row === undefined)
+                return;
+            const parent = this.parentOf(rows, index);
+            const siblings = rows
+                .filter((candidate, step) => candidate.depth === row.depth && this.parentOf(rows, step) === parent)
+                .filter((candidate) => candidate.branch)
+                .map((candidate) => candidate.key);
+            const next = [...new Set([...this.expandedKeys(), ...siblings])];
+            if (!same(next, this.expandedKeys()))
+                this.requestExpanded(next, 'keyboard', event);
+            return;
+        }
+        if (!this.typeahead() || !isPrintable(event.key) || event.ctrlKey || event.metaKey)
+            return;
+        const match = this.typeaheadHandle.match(event.key, rows.map((candidate) => candidate.label), index);
+        if (match === -1)
+            return;
+        take();
+        this.moveTo(rows, match, event);
+    }
+    onFocusIn(event) {
+        if (event.target !== this.canvas() || this.mode() === 'activedescendant')
+            return;
+        const rows = this.readRows();
+        /* The pattern: the selected node when there is one, otherwise the first. */
+        const wanted = rows.find((row) => this.isSelected(row.key) && !row.disabled) ??
+            rows.find((row) => !row.disabled);
+        if (wanted === undefined)
+            return;
+        this.requestActive(wanted.key, 'keyboard', event);
+        wanted.element.focus();
+    }
+    /* ── The imperative surface ─────────────────────────────────────────── */
+    focus() {
+        const rows = this.readRows();
+        const wanted = rows.find((row) => row.key === this.activeKey()) ?? rows[0];
+        (wanted?.element ?? this.canvas())?.focus();
+    }
+    expand(key) {
+        const held = this.collection();
+        const path = held === undefined ? [] : held.ancestorsOf(key);
+        const next = [...new Set([...this.expandedKeys(), ...path, key])];
+        if (!same(next, this.expandedKeys()))
+            this.requestExpanded(next, 'programmatic', undefined);
+    }
+    collapse(key) {
+        this.setExpanded(key, false, 'programmatic', undefined);
+    }
+    expandAll() {
+        const held = this.collection();
+        if (held === undefined)
+            return;
+        this.requestExpanded(held.branchKeys, 'programmatic', undefined);
+    }
+    collapseAll() {
+        this.requestExpanded([], 'programmatic', undefined);
+    }
+    scrollToKey(key, align = 'nearest') {
+        this.expand(key);
+        const row = this.readRows().find((candidate) => candidate.key === key);
+        row?.element.scrollIntoView({ block: align === 'nearest' ? 'nearest' : align });
+    }
+    /* ── Reactive Forms ─────────────────────────────────────────────────── */
+    formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(state) {
+        this.formDisabled.set(state);
+    }
+    /**
+     * The family owns validity only for `required`, which is the one rule it can
+     * decide from the value alone: everything else about a hierarchy is the
+     * consumer's own.
+     */
+    validate(control) {
+        if (!this.required())
+            return null;
+        return toKeys(control.value).length === 0 ? { required: true } : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTree, isStandalone: true, selector: "[slTree]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, expandedKeys: { classPropertyName: "expandedKeys", publicName: "expandedKeys", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, structure: { classPropertyName: "structure", publicName: "structure", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, selectionIndicator: { classPropertyName: "selectionIndicator", publicName: "selectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, selectionCascade: { classPropertyName: "selectionCascade", publicName: "selectionCascade", isSignal: true, isRequired: false, transformFunction: null }, expandOn: { classPropertyName: "expandOn", publicName: "expandOn", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null }, guides: { classPropertyName: "guides", publicName: "guides", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, typeaheadTimeout: { classPropertyName: "typeaheadTimeout", publicName: "typeaheadTimeout", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, navigateDisabled: { classPropertyName: "navigateDisabled", publicName: "navigateDisabled", isSignal: true, isRequired: false, transformFunction: null }, disallowEmptySelection: { classPropertyName: "disallowEmptySelection", publicName: "disallowEmptySelection", isSignal: true, isRequired: false, transformFunction: null }, disallowSelectAll: { classPropertyName: "disallowSelectAll", publicName: "disallowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, getKey: { classPropertyName: "getKey", publicName: "getKey", isSignal: true, isRequired: false, transformFunction: null }, getLabel: { classPropertyName: "getLabel", publicName: "getLabel", isSignal: true, isRequired: false, transformFunction: null }, getChildren: { classPropertyName: "getChildren", publicName: "getChildren", isSignal: true, isRequired: false, transformFunction: null }, getLevel: { classPropertyName: "getLevel", publicName: "getLevel", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, getChildrenCount: { classPropertyName: "getChildrenCount", publicName: "getChildrenCount", isSignal: true, isRequired: false, transformFunction: null }, isNodeDisabled: { classPropertyName: "isNodeDisabled", publicName: "isNodeDisabled", isSignal: true, isRequired: false, transformFunction: null }, isNodeLoading: { classPropertyName: "isNodeLoading", publicName: "isNodeLoading", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", expandedKeys: "expandedKeysChange", activeKey: "activeKeyChange", valueRequest: "valueRequest", expandedKeysRequest: "expandedKeysRequest", activeKeyRequest: "activeKeyRequest", nodeActivate: "nodeActivate" }, host: { attributes: { "data-ui": "tree", "data-part": "root" }, listeners: { "scroll": "onScroll()" }, properties: { "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-structure": "structureMode()", "attr.data-indicator": "indicatorMode()", "attr.data-expand-on": "expandOnRow()", "attr.data-selection": "selection()", "attr.data-focus-mode": "mode()", "attr.data-guides": "showGuides() ? \"true\" : \"false\"", "attr.data-disabled": "treeDisabled() ? \"\" : null", "attr.data-readonly": "readOnly() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-required": "required() ? \"\" : null", "attr.data-loading": "loading() ? \"\" : null" } }, providers: [
+            { provide: SlTreeContext, useExisting: forwardRef(() => SlTree) },
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlTree), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlTree), multi: true },
+        ], queries: [{ propertyName: "nodeContent", first: true, predicate: ["slTreeNodeContent"], descendants: true, isSignal: true }], exportAs: ["slTree"], ngImport: i0, template: `<ul
+      data-part="canvas"
+      role="tree"
+      #canvas
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-labelledby]="ariaLabelledBy()"
+      [attr.aria-multiselectable]="selection() === 'multiple' ? 'true' : null"
+      [attr.aria-activedescendant]="activeDescendant()"
+      [attr.aria-busy]="loading() ? 'true' : null"
+      [attr.aria-disabled]="treeDisabled() ? 'true' : null"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [attr.aria-required]="required() ? 'true' : null"
+      [attr.tabindex]="canvasTabIndex()"
+      [style.--_canvas-size]="canvasSize()"
+      [style.--_canvas-offset]="canvasOffset()"
+      (keydown)="onKeyDown($event)"
+      (focusin)="onFocusIn($event)"
+    >
+      @if (plan(); as rows) {
+        @for (node of rows; track node.key) {
+          <ng-container
+            [ngTemplateOutlet]="nodeRow"
+            [ngTemplateOutletContext]="{ $implicit: node }"
+          />
+        }
+      }
+      <ng-content />
+    </ul>
+    @if (holdsNothing()) {
+      <ng-content select="[slTreeEmpty]" />
+    }
+
+    <ng-template #nodeRow let-node>
+      <li
+        slTreeNode
+        [value]="node.key"
+        [label]="node.label"
+        [level]="node.level"
+        [hasChildren]="node.branch"
+        [disabled]="node.disabled"
+        [loading]="node.loading"
+        [match]="node.match"
+        [textValue]="node.label"
+        [pinned]="node.offset !== undefined"
+        [offset]="node.offset"
+      >
+        @if (nodeContent(); as content) {
+          <ng-container
+            [ngTemplateOutlet]="content"
+            [ngTemplateOutletContext]="{ $implicit: node.item, key: node.key }"
+          />
+        }
+        @if (node.children.length > 0) {
+          <ul slTreeGroup [busy]="node.loading">
+            @for (child of node.children; track child.key) {
+              <ng-container
+                [ngTemplateOutlet]="nodeRow"
+                [ngTemplateOutletContext]="{ $implicit: child }"
+              />
+            }
+          </ul>
+        }
+      </li>
+    </ng-template>`, isInline: true, styles: ["@layer slotted.components{[data-ui=tree]{--_surface: var(--slotted-tree-surface, var(--slotted-surface, #ffffff));--_text: var(--slotted-tree-text, var(--slotted-text, #0f172a));--_muted: var(--slotted-tree-text-muted, var(--slotted-text-muted, #5b6b7f));--_border-color: var(--slotted-tree-border-color, var(--slotted-control-border-color));--_border-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-tree-radius, var(--slotted-radius-md, 6px));--_shadow: var(--slotted-tree-shadow, var(--slotted-control-shadow));--_highlight: var(--slotted-tree-highlight, var(--slotted-tone-secondary-subtle-hover));--_highlight-active: var( --slotted-tree-highlight-active, var(--slotted-tone-secondary-subtle-active) );--_selected-surface: var(--slotted-tree-selected-surface, var(--slotted-tone-accent-surface));--_selected-text: var(--slotted-tree-selected-text, var(--slotted-tone-accent-text));--_selected-edge: var(--slotted-tree-selected-edge, var(--slotted-tone-accent-border));--_guide-color: var( --slotted-tree-guide-color, color-mix(in oklab, var(--slotted-border-strong) 60%, var(--slotted-border-subtle)) );--_indent: var( --slotted-tree-indent, calc(var(--_icon-size) / 2 + var(--slotted-space-4, .5rem)) );--_inset-block: var(--slotted-tree-padding-block, var(--slotted-space-2, .25rem));--_inset-inline: var(--slotted-tree-padding-inline, var(--slotted-space-2, .25rem));--_row-inset: var(--slotted-control-padding-inline-md, .8125rem);--_row-height: var(--slotted-control-height-md, 34px);--_font-size: var(--slotted-control-font-size-md, 13px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, .5rem);--_check-size: var(--slotted-selection-size-md, 16px);--_rows: var(--slotted-tree-rows, 12);--_measure: var(--slotted-tree-measure, 28rem);box-sizing:border-box;color:var(--_text);container-name:slotted-tree;container-type:inline-size;display:block;font-family:var(--slotted-font-family-sans);font-size:var(--_font-size);inline-size:100%;max-inline-size:var(--_measure);text-align:start}[data-ui=tree][data-size=sm]{--_row-inset: var(--slotted-control-padding-inline-sm, .625rem);--_row-height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_secondary-font-size: var(--slotted-font-size-xs, .75rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, .375rem);--_check-size: var(--slotted-selection-size-sm, 14px)}[data-ui=tree][data-size=lg]{--_row-inset: var(--slotted-control-padding-inline-lg, 1rem);--_row-height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_secondary-font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, .5rem);--_check-size: var(--slotted-selection-size-lg, 18px)}[data-ui=tree][data-variant=framed]{background-color:var(--_surface);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow)}[data-ui=tree] [data-part=canvas]{max-block-size:calc(var(--_rows) * var(--_row-height) + 2 * var(--_inset-block));outline:none;overflow:auto;padding-block:var(--_inset-block);padding-inline:0}[data-ui=tree] :is([data-part=canvas],[data-part=group]){list-style:none;margin-block:0;margin-inline:0;padding-inline:0}[data-ui=tree] [data-part=group]{padding-block:0;padding-inline:0}[data-ui=tree] [data-part=node]{display:block;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;outline:none}[data-ui=tree] [data-part=row]{align-items:center;background-color:transparent;color:inherit;cursor:pointer;display:flex;min-block-size:var(--_row-height);outline:none;padding-block:0;padding-inline:calc(var(--_inset-inline) + var(--slotted-tree-depth, 0) * var(--_indent)) var(--_row-inset);position:relative;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard));-webkit-user-select:none;user-select:none}[data-ui=tree] [data-part=guide]{background-image:repeating-linear-gradient(to right,var(--_guide-color) 0 var(--_border-width),transparent var(--_border-width) var(--_indent));inline-size:calc(var(--slotted-tree-depth, 0) * var(--_indent));inset-block:0;inset-inline-start:calc(var(--_inset-inline) + var(--_icon-size) / 2);pointer-events:none;position:absolute}[data-ui=tree] [data-part=guide]:dir(rtl){background-image:repeating-linear-gradient(to left,var(--_guide-color) 0 var(--_border-width),transparent var(--_border-width) var(--_indent))}[data-ui=tree][data-guides=false] [data-part=guide]{background-image:none}[data-ui=tree] [data-part=expander]{--slotted-icon-size: var(--_icon-size);block-size:var(--_icon-size);color:var(--_muted);display:flex;flex:none;inline-size:var(--_icon-size);margin-inline-end:var(--_gap)}[data-ui=tree] [data-part=expander]>[data-ui=icon]{transition:rotate var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=tree] [data-part=expander]:dir(rtl)>[data-ui=icon]{rotate:180deg}[data-ui=tree] [data-part=node][data-expanded]>[data-part=row] [data-part=expander]>[data-ui=icon]{rotate:90deg}[data-ui=tree][data-expand-on=expander] [data-part=node][data-branch]>[data-part=row] [data-part=expander]{box-sizing:content-box;cursor:pointer;margin-block:calc((var(--slotted-target-min, 24px) - var(--_icon-size)) / -2);margin-inline-end:calc(var(--_gap) - (var(--slotted-target-min, 24px) - var(--_icon-size)) / 2);margin-inline-start:calc((var(--slotted-target-min, 24px) - var(--_icon-size)) / -2);padding-block:calc((var(--slotted-target-min, 24px) - var(--_icon-size)) / 2);padding-inline:calc((var(--slotted-target-min, 24px) - var(--_icon-size)) / 2)}[data-ui=tree][data-selection=none][data-expand-on=expander] [data-part=row],[data-ui=tree][data-selection=none] [data-part=node]:not([data-branch])>[data-part=row]{cursor:default}[data-ui=tree][data-readonly] [data-part=row]{cursor:default}[data-ui=tree] [data-part=indicator]{--_mark-inset: var(--slotted-tree-mark-inset, 2px);--_check-border: var(--slotted-border-width-medium, 1.5px);--_mark-size: calc(var(--_check-size) - 2 * var(--_mark-inset));--slotted-icon-size: var(--_mark-size);background-color:var(--_surface);block-size:var(--_check-size);border:var(--_check-border) solid var(--slotted-border-strong);border-radius:var(--slotted-radius-xs, 2px);box-sizing:border-box;cursor:pointer;flex:none;inline-size:var(--_check-size);margin-inline-end:var(--_gap);position:relative;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),border-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=tree] [data-part=indicator]>[data-ui=icon]{clip-path:inset(0% 100% 0% 0%);color:var(--slotted-tone-accent-on-solid);inset-block-start:calc(var(--_mark-inset) - var(--_check-border));inset-inline-start:calc(var(--_mark-inset) - var(--_check-border));opacity:0;pointer-events:none;position:absolute;transition:clip-path var(--slotted-duration-medium) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),opacity var(--slotted-duration-medium) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=tree] [data-part=node]:is([data-selected],[data-indeterminate])>[data-part=row] [data-part=indicator]{background-color:var(--slotted-tone-accent-solid);border-color:var(--slotted-tone-accent-solid)}[data-ui=tree] [data-part=node]:is([data-selected],[data-indeterminate])>[data-part=row] [data-part=indicator]>[data-ui=icon]{clip-path:inset(0% 0% 0% 0%);opacity:1}[data-ui=tree] [data-part=node][data-disabled]>[data-part=row] [data-part=indicator]{background-color:var(--slotted-disabled-background, Canvas);border-color:var(--slotted-disabled-border, GrayText);cursor:not-allowed}[data-ui=tree]:is([data-indicator=highlight],[data-indicator=none]) [data-part=indicator]{display:none}[data-ui=tree] [data-part=icon]{block-size:var(--_icon-size);color:var(--_muted);flex:none;inline-size:var(--_icon-size);margin-inline-end:var(--_gap)}[data-ui=tree][data-part=root]:has([data-part=icon]) [data-part=row]:not(:has([data-part=icon])) [data-part=label]{margin-inline-start:calc(var(--_icon-size) + var(--_gap))}[data-ui=tree] :is([data-part=label],[data-part=description],[data-part=meta],[data-part=empty]){unicode-bidi:plaintext}[data-ui=tree] [data-part=label]{flex:0 1 auto;line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=tree] [data-part=label]:has([data-ui=skeleton]){flex:1 1 auto;max-inline-size:62%}[data-ui=tree] [data-part=node]:nth-child(2n)>[data-part=row] [data-part=label]:has([data-ui=skeleton]){max-inline-size:44%}[data-ui=tree] [data-part=node]:nth-child(3n)>[data-part=row] [data-part=label]:has([data-ui=skeleton]){max-inline-size:73%}[data-ui=tree] [data-part=label] mark{background-color:color-mix(in oklab,var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%),transparent);color:inherit;font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=tree] [data-part=node][data-selected]>[data-part=row] [data-part=label] mark{background-color:transparent}[data-ui=tree] [data-part=description]{color:var(--_muted);margin-inline-start:var(--_gap);flex:0 1 auto;font-size:var(--_secondary-font-size);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=tree] [data-part=meta]{color:var(--_muted);flex:none;font-size:var(--_secondary-font-size);font-variant-numeric:tabular-nums;margin-inline-start:auto;padding-inline-start:var(--_gap)}[data-ui=tree] [data-part=loader]{--slotted-spinner-size: var(--_icon-size);block-size:var(--_icon-size);color:var(--_muted);flex:none;inline-size:var(--_icon-size);margin-inline-end:var(--_gap)}[data-ui=tree] [data-part=actions]{align-items:center;display:flex;flex:none;gap:var(--slotted-space-1, .125rem);margin-inline-start:auto;padding-inline-start:var(--_gap)}[data-ui=tree] [data-part=meta]~[data-part=actions]{margin-inline-start:0}[data-ui=tree] [data-part=empty]{color:var(--_muted);padding-block:var(--slotted-space-5, .75rem);padding-inline:var(--_row-inset);text-align:center}[data-ui=tree] [data-part=node]:not([data-disabled]):not([data-loading])>[data-part=row]:hover{background-color:var(--_highlight)}[data-ui=tree] [data-part=node]:not([data-disabled]):not([data-loading])>[data-part=row]:active{background-color:var(--_highlight-active)}[data-ui=tree] [data-part=node][data-current]:not([data-disabled])>[data-part=row]{background-color:var(--_highlight)}[data-ui=tree] [data-part=node][data-selected]:not([data-disabled])>[data-part=row]{background-color:var(--_selected-surface);color:var(--_selected-text)}[data-ui=tree] [data-part=node][data-selected]:not([data-disabled])>[data-part=row] :is([data-part=icon],[data-part=meta],[data-part=expander]){color:inherit}[data-ui=tree] [data-part=node][data-selected-within]:not([data-selected]):not([data-disabled])>[data-part=row]{color:var(--_selected-text)}[data-ui=tree] [data-part=node][data-selected-within]:not([data-selected]):not([data-disabled])>[data-part=row] [data-part=expander]{color:inherit}[data-ui=tree] [data-part=node][data-disabled]>[data-part=row]{color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=tree] [data-part=node][data-disabled]>[data-part=row] :is([data-part=icon],[data-part=meta],[data-part=expander],[data-part=description]){color:inherit}[data-ui=tree] [data-part=node][data-loading]>[data-part=row]{cursor:progress}[data-ui=tree] [data-part=node]:focus-visible>[data-part=row],[data-ui=tree] [data-part=canvas]:focus-visible [data-part=node][data-current]>[data-part=row]{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=tree][data-invalid]{--slotted-focus-ring-color: var(--slotted-focus-ring-color-invalid);--_border-color: var(--slotted-tone-danger-border);--_invalid-edge-width: var(--slotted-control-invalid-edge-width, 1px);--_shadow: inset 0 0 0 var(--_invalid-edge-width) var(--slotted-tone-danger-border)}[data-ui=tree][data-disabled]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=tree][data-disabled][data-variant=framed]{background-color:var(--slotted-disabled-background, Canvas);border-color:var(--slotted-disabled-border, GrayText);box-shadow:none}[data-ui=tree][data-structure=flat]{max-block-size:calc(var(--_rows) * var(--_row-height) + 2 * var(--_inset-block));overflow:auto}[data-ui=tree][data-structure=flat] [data-part=canvas]{block-size:var(--_canvas-size, auto);max-block-size:none;overflow:visible;padding-block-start:calc(var(--_inset-block) + var(--_canvas-offset, 0px));position:relative}[data-ui=tree] [data-part=node][data-pinned]{inset-block-start:var(--slotted-tree-row-offset, 0px);inset-inline:0;position:absolute}@container slotted-tree (max-width: 320px){[data-ui=tree] [data-part=canvas]{--_indent: calc(var(--_icon-size) / 2 + var(--slotted-space-3, .375rem))}}@container slotted-tree (max-width: 240px){[data-ui=tree] [data-part=canvas]{--_indent: calc(var(--_icon-size) / 2 + var(--slotted-space-2, .25rem));--_row-inset: var(--slotted-control-padding-inline-sm, .625rem)}[data-ui=tree] [data-part=description]{display:none}}@media(forced-colors:active){[data-ui=tree] [data-part=node][data-selected]>[data-part=row]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=tree] [data-part=node][data-disabled]>[data-part=row]{color:GrayText}[data-ui=tree] [data-part=indicator]>[data-ui=icon]{forced-color-adjust:none}}@media(forced-colors:active){[data-ui=tree][data-variant=framed][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)))}}}\n", "@layer slotted.components{[data-ui=highlight] [data-part=match]{background-color:var( --slotted-highlight-background, color-mix( in oklab, var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent ) );-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:var(--slotted-radius-none, 0px);color:var(--slotted-highlight-color, var(--slotted-tone-accent-text));font-weight:inherit;letter-spacing:inherit;padding:0;text-decoration-color:var(--slotted-highlight-rule-color, var(--slotted-tone-accent-border));text-decoration-line:underline;text-decoration-thickness:var(--slotted-border-width-thin, 1px);text-underline-offset:var(--slotted-space-1, .125rem)}[data-ui=highlight] [data-part=match][data-current]{background-color:var(--slotted-highlight-current-background, var(--slotted-tone-accent-solid));color:var(--slotted-highlight-current-color, var(--slotted-tone-accent-on-solid));text-decoration-line:none}[data-ui=highlight]:is([data-disabled],[data-disabled] *) [data-part=match]{background-color:var(--slotted-highlight-disabled-background, transparent);color:inherit;text-decoration-line:underline}@media(forced-colors:active){[data-ui=highlight] [data-part=match],[data-ui=highlight]:is([data-disabled],[data-disabled] *) [data-part=match]{background-color:Mark;color:MarkText;forced-color-adjust:none}[data-ui=highlight] [data-part=match][data-current]{background-color:Highlight;color:HighlightText}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SlTreeGroup, selector: "ul[slTreeGroup]", inputs: ["busy"] }, { kind: "component", type: SlTreeNode, selector: "li[slTreeNode]", inputs: ["value", "label", "hasChildren", "loading", "disabled", "textValue", "match", "pinned", "offset", "level"], exportAs: ["slTreeNode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTree, decorators: [{
+            type: Component,
+            args: [{ selector: '[slTree]', standalone: true, exportAs: 'slTree', imports: [NgTemplateOutlet, SlTreeGroup, SlTreeNode], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: SlTreeContext, useExisting: forwardRef(() => SlTree) },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlTree), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlTree), multi: true },
+                    ], template: `<ul
+      data-part="canvas"
+      role="tree"
+      #canvas
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-labelledby]="ariaLabelledBy()"
+      [attr.aria-multiselectable]="selection() === 'multiple' ? 'true' : null"
+      [attr.aria-activedescendant]="activeDescendant()"
+      [attr.aria-busy]="loading() ? 'true' : null"
+      [attr.aria-disabled]="treeDisabled() ? 'true' : null"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [attr.aria-required]="required() ? 'true' : null"
+      [attr.tabindex]="canvasTabIndex()"
+      [style.--_canvas-size]="canvasSize()"
+      [style.--_canvas-offset]="canvasOffset()"
+      (keydown)="onKeyDown($event)"
+      (focusin)="onFocusIn($event)"
+    >
+      @if (plan(); as rows) {
+        @for (node of rows; track node.key) {
+          <ng-container
+            [ngTemplateOutlet]="nodeRow"
+            [ngTemplateOutletContext]="{ $implicit: node }"
+          />
+        }
+      }
+      <ng-content />
+    </ul>
+    @if (holdsNothing()) {
+      <ng-content select="[slTreeEmpty]" />
+    }
+
+    <ng-template #nodeRow let-node>
+      <li
+        slTreeNode
+        [value]="node.key"
+        [label]="node.label"
+        [level]="node.level"
+        [hasChildren]="node.branch"
+        [disabled]="node.disabled"
+        [loading]="node.loading"
+        [match]="node.match"
+        [textValue]="node.label"
+        [pinned]="node.offset !== undefined"
+        [offset]="node.offset"
+      >
+        @if (nodeContent(); as content) {
+          <ng-container
+            [ngTemplateOutlet]="content"
+            [ngTemplateOutletContext]="{ $implicit: node.item, key: node.key }"
+          />
+        }
+        @if (node.children.length > 0) {
+          <ul slTreeGroup [busy]="node.loading">
+            @for (child of node.children; track child.key) {
+              <ng-container
+                [ngTemplateOutlet]="nodeRow"
+                [ngTemplateOutletContext]="{ $implicit: child }"
+              />
+            }
+          </ul>
+        }
+      </li>
+    </ng-template>`, host: {
+                        'data-ui': 'tree',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-structure]': 'structureMode()',
+                        '[attr.data-indicator]': 'indicatorMode()',
+                        '[attr.data-expand-on]': 'expandOnRow()',
+                        '[attr.data-selection]': 'selection()',
+                        '[attr.data-focus-mode]': 'mode()',
+                        '[attr.data-guides]': 'showGuides() ? "true" : "false"',
+                        '[attr.data-disabled]': 'treeDisabled() ? "" : null',
+                        '[attr.data-readonly]': 'readOnly() ? "" : null',
+                        '[attr.data-invalid]': 'invalid() ? "" : null',
+                        '[attr.data-required]': 'required() ? "" : null',
+                        '[attr.data-loading]': 'loading() ? "" : null',
+                        '(scroll)': 'onScroll()',
+                    }, styles: ["@layer slotted.components{[data-ui=tree]{--_surface: var(--slotted-tree-surface, var(--slotted-surface, #ffffff));--_text: var(--slotted-tree-text, var(--slotted-text, #0f172a));--_muted: var(--slotted-tree-text-muted, var(--slotted-text-muted, #5b6b7f));--_border-color: var(--slotted-tree-border-color, var(--slotted-control-border-color));--_border-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-tree-radius, var(--slotted-radius-md, 6px));--_shadow: var(--slotted-tree-shadow, var(--slotted-control-shadow));--_highlight: var(--slotted-tree-highlight, var(--slotted-tone-secondary-subtle-hover));--_highlight-active: var( --slotted-tree-highlight-active, var(--slotted-tone-secondary-subtle-active) );--_selected-surface: var(--slotted-tree-selected-surface, var(--slotted-tone-accent-surface));--_selected-text: var(--slotted-tree-selected-text, var(--slotted-tone-accent-text));--_selected-edge: var(--slotted-tree-selected-edge, var(--slotted-tone-accent-border));--_guide-color: var( --slotted-tree-guide-color, color-mix(in oklab, var(--slotted-border-strong) 60%, var(--slotted-border-subtle)) );--_indent: var( --slotted-tree-indent, calc(var(--_icon-size) / 2 + var(--slotted-space-4, .5rem)) );--_inset-block: var(--slotted-tree-padding-block, var(--slotted-space-2, .25rem));--_inset-inline: var(--slotted-tree-padding-inline, var(--slotted-space-2, .25rem));--_row-inset: var(--slotted-control-padding-inline-md, .8125rem);--_row-height: var(--slotted-control-height-md, 34px);--_font-size: var(--slotted-control-font-size-md, 13px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, .5rem);--_check-size: var(--slotted-selection-size-md, 16px);--_rows: var(--slotted-tree-rows, 12);--_measure: var(--slotted-tree-measure, 28rem);box-sizing:border-box;color:var(--_text);container-name:slotted-tree;container-type:inline-size;display:block;font-family:var(--slotted-font-family-sans);font-size:var(--_font-size);inline-size:100%;max-inline-size:var(--_measure);text-align:start}[data-ui=tree][data-size=sm]{--_row-inset: var(--slotted-control-padding-inline-sm, .625rem);--_row-height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_secondary-font-size: var(--slotted-font-size-xs, .75rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, .375rem);--_check-size: var(--slotted-selection-size-sm, 14px)}[data-ui=tree][data-size=lg]{--_row-inset: var(--slotted-control-padding-inline-lg, 1rem);--_row-height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_secondary-font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, .5rem);--_check-size: var(--slotted-selection-size-lg, 18px)}[data-ui=tree][data-variant=framed]{background-color:var(--_surface);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow)}[data-ui=tree] [data-part=canvas]{max-block-size:calc(var(--_rows) * var(--_row-height) + 2 * var(--_inset-block));outline:none;overflow:auto;padding-block:var(--_inset-block);padding-inline:0}[data-ui=tree] :is([data-part=canvas],[data-part=group]){list-style:none;margin-block:0;margin-inline:0;padding-inline:0}[data-ui=tree] [data-part=group]{padding-block:0;padding-inline:0}[data-ui=tree] [data-part=node]{display:block;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;outline:none}[data-ui=tree] [data-part=row]{align-items:center;background-color:transparent;color:inherit;cursor:pointer;display:flex;min-block-size:var(--_row-height);outline:none;padding-block:0;padding-inline:calc(var(--_inset-inline) + var(--slotted-tree-depth, 0) * var(--_indent)) var(--_row-inset);position:relative;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard));-webkit-user-select:none;user-select:none}[data-ui=tree] [data-part=guide]{background-image:repeating-linear-gradient(to right,var(--_guide-color) 0 var(--_border-width),transparent var(--_border-width) var(--_indent));inline-size:calc(var(--slotted-tree-depth, 0) * var(--_indent));inset-block:0;inset-inline-start:calc(var(--_inset-inline) + var(--_icon-size) / 2);pointer-events:none;position:absolute}[data-ui=tree] [data-part=guide]:dir(rtl){background-image:repeating-linear-gradient(to left,var(--_guide-color) 0 var(--_border-width),transparent var(--_border-width) var(--_indent))}[data-ui=tree][data-guides=false] [data-part=guide]{background-image:none}[data-ui=tree] [data-part=expander]{--slotted-icon-size: var(--_icon-size);block-size:var(--_icon-size);color:var(--_muted);display:flex;flex:none;inline-size:var(--_icon-size);margin-inline-end:var(--_gap)}[data-ui=tree] [data-part=expander]>[data-ui=icon]{transition:rotate var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=tree] [data-part=expander]:dir(rtl)>[data-ui=icon]{rotate:180deg}[data-ui=tree] [data-part=node][data-expanded]>[data-part=row] [data-part=expander]>[data-ui=icon]{rotate:90deg}[data-ui=tree][data-expand-on=expander] [data-part=node][data-branch]>[data-part=row] [data-part=expander]{box-sizing:content-box;cursor:pointer;margin-block:calc((var(--slotted-target-min, 24px) - var(--_icon-size)) / -2);margin-inline-end:calc(var(--_gap) - (var(--slotted-target-min, 24px) - var(--_icon-size)) / 2);margin-inline-start:calc((var(--slotted-target-min, 24px) - var(--_icon-size)) / -2);padding-block:calc((var(--slotted-target-min, 24px) - var(--_icon-size)) / 2);padding-inline:calc((var(--slotted-target-min, 24px) - var(--_icon-size)) / 2)}[data-ui=tree][data-selection=none][data-expand-on=expander] [data-part=row],[data-ui=tree][data-selection=none] [data-part=node]:not([data-branch])>[data-part=row]{cursor:default}[data-ui=tree][data-readonly] [data-part=row]{cursor:default}[data-ui=tree] [data-part=indicator]{--_mark-inset: var(--slotted-tree-mark-inset, 2px);--_check-border: var(--slotted-border-width-medium, 1.5px);--_mark-size: calc(var(--_check-size) - 2 * var(--_mark-inset));--slotted-icon-size: var(--_mark-size);background-color:var(--_surface);block-size:var(--_check-size);border:var(--_check-border) solid var(--slotted-border-strong);border-radius:var(--slotted-radius-xs, 2px);box-sizing:border-box;cursor:pointer;flex:none;inline-size:var(--_check-size);margin-inline-end:var(--_gap);position:relative;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),border-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=tree] [data-part=indicator]>[data-ui=icon]{clip-path:inset(0% 100% 0% 0%);color:var(--slotted-tone-accent-on-solid);inset-block-start:calc(var(--_mark-inset) - var(--_check-border));inset-inline-start:calc(var(--_mark-inset) - var(--_check-border));opacity:0;pointer-events:none;position:absolute;transition:clip-path var(--slotted-duration-medium) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),opacity var(--slotted-duration-medium) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=tree] [data-part=node]:is([data-selected],[data-indeterminate])>[data-part=row] [data-part=indicator]{background-color:var(--slotted-tone-accent-solid);border-color:var(--slotted-tone-accent-solid)}[data-ui=tree] [data-part=node]:is([data-selected],[data-indeterminate])>[data-part=row] [data-part=indicator]>[data-ui=icon]{clip-path:inset(0% 0% 0% 0%);opacity:1}[data-ui=tree] [data-part=node][data-disabled]>[data-part=row] [data-part=indicator]{background-color:var(--slotted-disabled-background, Canvas);border-color:var(--slotted-disabled-border, GrayText);cursor:not-allowed}[data-ui=tree]:is([data-indicator=highlight],[data-indicator=none]) [data-part=indicator]{display:none}[data-ui=tree] [data-part=icon]{block-size:var(--_icon-size);color:var(--_muted);flex:none;inline-size:var(--_icon-size);margin-inline-end:var(--_gap)}[data-ui=tree][data-part=root]:has([data-part=icon]) [data-part=row]:not(:has([data-part=icon])) [data-part=label]{margin-inline-start:calc(var(--_icon-size) + var(--_gap))}[data-ui=tree] :is([data-part=label],[data-part=description],[data-part=meta],[data-part=empty]){unicode-bidi:plaintext}[data-ui=tree] [data-part=label]{flex:0 1 auto;line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=tree] [data-part=label]:has([data-ui=skeleton]){flex:1 1 auto;max-inline-size:62%}[data-ui=tree] [data-part=node]:nth-child(2n)>[data-part=row] [data-part=label]:has([data-ui=skeleton]){max-inline-size:44%}[data-ui=tree] [data-part=node]:nth-child(3n)>[data-part=row] [data-part=label]:has([data-ui=skeleton]){max-inline-size:73%}[data-ui=tree] [data-part=label] mark{background-color:color-mix(in oklab,var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%),transparent);color:inherit;font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=tree] [data-part=node][data-selected]>[data-part=row] [data-part=label] mark{background-color:transparent}[data-ui=tree] [data-part=description]{color:var(--_muted);margin-inline-start:var(--_gap);flex:0 1 auto;font-size:var(--_secondary-font-size);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=tree] [data-part=meta]{color:var(--_muted);flex:none;font-size:var(--_secondary-font-size);font-variant-numeric:tabular-nums;margin-inline-start:auto;padding-inline-start:var(--_gap)}[data-ui=tree] [data-part=loader]{--slotted-spinner-size: var(--_icon-size);block-size:var(--_icon-size);color:var(--_muted);flex:none;inline-size:var(--_icon-size);margin-inline-end:var(--_gap)}[data-ui=tree] [data-part=actions]{align-items:center;display:flex;flex:none;gap:var(--slotted-space-1, .125rem);margin-inline-start:auto;padding-inline-start:var(--_gap)}[data-ui=tree] [data-part=meta]~[data-part=actions]{margin-inline-start:0}[data-ui=tree] [data-part=empty]{color:var(--_muted);padding-block:var(--slotted-space-5, .75rem);padding-inline:var(--_row-inset);text-align:center}[data-ui=tree] [data-part=node]:not([data-disabled]):not([data-loading])>[data-part=row]:hover{background-color:var(--_highlight)}[data-ui=tree] [data-part=node]:not([data-disabled]):not([data-loading])>[data-part=row]:active{background-color:var(--_highlight-active)}[data-ui=tree] [data-part=node][data-current]:not([data-disabled])>[data-part=row]{background-color:var(--_highlight)}[data-ui=tree] [data-part=node][data-selected]:not([data-disabled])>[data-part=row]{background-color:var(--_selected-surface);color:var(--_selected-text)}[data-ui=tree] [data-part=node][data-selected]:not([data-disabled])>[data-part=row] :is([data-part=icon],[data-part=meta],[data-part=expander]){color:inherit}[data-ui=tree] [data-part=node][data-selected-within]:not([data-selected]):not([data-disabled])>[data-part=row]{color:var(--_selected-text)}[data-ui=tree] [data-part=node][data-selected-within]:not([data-selected]):not([data-disabled])>[data-part=row] [data-part=expander]{color:inherit}[data-ui=tree] [data-part=node][data-disabled]>[data-part=row]{color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=tree] [data-part=node][data-disabled]>[data-part=row] :is([data-part=icon],[data-part=meta],[data-part=expander],[data-part=description]){color:inherit}[data-ui=tree] [data-part=node][data-loading]>[data-part=row]{cursor:progress}[data-ui=tree] [data-part=node]:focus-visible>[data-part=row],[data-ui=tree] [data-part=canvas]:focus-visible [data-part=node][data-current]>[data-part=row]{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=tree][data-invalid]{--slotted-focus-ring-color: var(--slotted-focus-ring-color-invalid);--_border-color: var(--slotted-tone-danger-border);--_invalid-edge-width: var(--slotted-control-invalid-edge-width, 1px);--_shadow: inset 0 0 0 var(--_invalid-edge-width) var(--slotted-tone-danger-border)}[data-ui=tree][data-disabled]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=tree][data-disabled][data-variant=framed]{background-color:var(--slotted-disabled-background, Canvas);border-color:var(--slotted-disabled-border, GrayText);box-shadow:none}[data-ui=tree][data-structure=flat]{max-block-size:calc(var(--_rows) * var(--_row-height) + 2 * var(--_inset-block));overflow:auto}[data-ui=tree][data-structure=flat] [data-part=canvas]{block-size:var(--_canvas-size, auto);max-block-size:none;overflow:visible;padding-block-start:calc(var(--_inset-block) + var(--_canvas-offset, 0px));position:relative}[data-ui=tree] [data-part=node][data-pinned]{inset-block-start:var(--slotted-tree-row-offset, 0px);inset-inline:0;position:absolute}@container slotted-tree (max-width: 320px){[data-ui=tree] [data-part=canvas]{--_indent: calc(var(--_icon-size) / 2 + var(--slotted-space-3, .375rem))}}@container slotted-tree (max-width: 240px){[data-ui=tree] [data-part=canvas]{--_indent: calc(var(--_icon-size) / 2 + var(--slotted-space-2, .25rem));--_row-inset: var(--slotted-control-padding-inline-sm, .625rem)}[data-ui=tree] [data-part=description]{display:none}}@media(forced-colors:active){[data-ui=tree] [data-part=node][data-selected]>[data-part=row]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=tree] [data-part=node][data-disabled]>[data-part=row]{color:GrayText}[data-ui=tree] [data-part=indicator]>[data-ui=icon]{forced-color-adjust:none}}@media(forced-colors:active){[data-ui=tree][data-variant=framed][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)))}}}\n", "@layer slotted.components{[data-ui=highlight] [data-part=match]{background-color:var( --slotted-highlight-background, color-mix( in oklab, var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent ) );-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:var(--slotted-radius-none, 0px);color:var(--slotted-highlight-color, var(--slotted-tone-accent-text));font-weight:inherit;letter-spacing:inherit;padding:0;text-decoration-color:var(--slotted-highlight-rule-color, var(--slotted-tone-accent-border));text-decoration-line:underline;text-decoration-thickness:var(--slotted-border-width-thin, 1px);text-underline-offset:var(--slotted-space-1, .125rem)}[data-ui=highlight] [data-part=match][data-current]{background-color:var(--slotted-highlight-current-background, var(--slotted-tone-accent-solid));color:var(--slotted-highlight-current-color, var(--slotted-tone-accent-on-solid));text-decoration-line:none}[data-ui=highlight]:is([data-disabled],[data-disabled] *) [data-part=match]{background-color:var(--slotted-highlight-disabled-background, transparent);color:inherit;text-decoration-line:underline}@media(forced-colors:active){[data-ui=highlight] [data-part=match],[data-ui=highlight]:is([data-disabled],[data-disabled] *) [data-part=match]{background-color:Mark;color:MarkText;forced-color-adjust:none}[data-ui=highlight] [data-part=match][data-current]{background-color:Highlight;color:HighlightText}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], expandedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedKeys", required: false }] }, { type: i0.Output, args: ["expandedKeysChange"] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }, { type: i0.Output, args: ["activeKeyChange"] }], valueRequest: [{ type: i0.Output, args: ["valueRequest"] }], expandedKeysRequest: [{ type: i0.Output, args: ["expandedKeysRequest"] }], activeKeyRequest: [{ type: i0.Output, args: ["activeKeyRequest"] }], nodeActivate: [{ type: i0.Output, args: ["nodeActivate"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], structure: [{ type: i0.Input, args: [{ isSignal: true, alias: "structure", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], selectionIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionIndicator", required: false }] }], selectionCascade: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionCascade", required: false }] }], expandOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOn", required: false }] }], focusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusMode", required: false }] }], guides: [{ type: i0.Input, args: [{ isSignal: true, alias: "guides", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], typeaheadTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadTimeout", required: false }] }], selectOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnFocus", required: false }] }], navigateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateDisabled", required: false }] }], disallowEmptySelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "disallowEmptySelection", required: false }] }], disallowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "disallowSelectAll", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], getKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "getKey", required: false }] }], getLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "getLabel", required: false }] }], getChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "getChildren", required: false }] }], getLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "getLevel", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], getChildrenCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "getChildrenCount", required: false }] }], isNodeDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNodeDisabled", required: false }] }], isNodeLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNodeLoading", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], nodeContent: [{ type: i0.ContentChild, args: ['slTreeNodeContent', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlTree, SlTreeActions, SlTreeContext, SlTreeDescription, SlTreeEmpty, SlTreeGroup, SlTreeIcon, SlTreeIdFactory, SlTreeLabel, SlTreeMeta, SlTreeNode, TREE_DEFAULTS, injectTreeDefaults, provideTreeDefaults };
+//# sourceMappingURL=slotted-angular-tree.mjs.map