@neuravision/ng-construct 0.5.0 → 0.7.0

package/fesm2022/neuravision-ng-construct.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, output, signal, computed, ChangeDetectionStrategy, Component, Injectable, forwardRef, model, booleanAttribute, viewChild, contentChildren, effect, DOCUMENT as DOCUMENT$1, isDevMode, contentChild, ElementRef, TemplateRef, Directive, viewChildren, Renderer2, numberAttribute, Pipe } from '@angular/core';
+import { InjectionToken, inject, input, output, signal, computed, ChangeDetectionStrategy, Component, Injectable, forwardRef, model, booleanAttribute, viewChild, contentChildren, effect, DOCUMENT as DOCUMENT$1, isDevMode, contentChild, ElementRef, TemplateRef, Directive, viewChildren, Renderer2, numberAttribute, Injector, Pipe } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { RouterLink, RouterLinkActive } from '@angular/router';
@@ -1098,6 +1098,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
   `, styles: [":host{display:contents}\n"] }]
         }], propDecorators: { sidebarState: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarState", required: false }] }, { type: i0.Output, args: ["sidebarStateChange"] }], panelState: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelState", required: false }] }, { type: i0.Output, args: ["panelStateChange"] }], noSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSidebar", required: false }] }], sidebarRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarRight", required: false }] }], sidebarFullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarFullHeight", required: false }] }], withHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "withHeader", required: false }] }], sidebarBranded: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarBranded", required: false }] }], glass: [{ type: i0.Input, args: [{ isSignal: true, alias: "glass", required: false }] }], sidebarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarLabel", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], mainId: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainId", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }] } });
 
+/**
+ * Number of distinct colors in the seeded avatar palette. Must match the
+ * `[data-seed-color="N"]` selectors shipped by `@neuravision/construct`
+ * (see `components/avatar.css`). Bump together when Construct adds slots.
+ */
+const AVATAR_SEED_PALETTE_SIZE = 8;
 /**
  * Avatar component displaying a user image with fallback to initials.
  *
@@ -1105,9 +1111,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * fails to load or no `src` is given, initials derived from `name` are
  * shown instead.
  *
+ * Set `colorSeed` to give each user a stable, deterministic background
+ * color picked from the Construct DS palette — useful in lists where the
+ * eye should recognize repeat individuals at a glance. The seed is hashed
+ * locally and bound to `data-seed-color`; an empty seed leaves the
+ * attribute off and the avatar keeps the default background.
+ *
  * @example
  * <af-avatar src="/photo.jpg" name="Jane Doe" alt="Jane Doe" size="lg" />
  * <af-avatar name="John Smith" status="online" />
+ * <af-avatar name="Jane Doe" colorSeed="user-uuid-7b3e2a4d" />
  */
 class AfAvatarComponent {
     /** Image URL. Falls back to initials when missing or on load error. */
@@ -1120,6 +1133,12 @@ class AfAvatarComponent {
     alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : []));
     /** Online status indicator. */
     status = input(undefined, ...(ngDevMode ? [{ debugName: "status" }] : []));
+    /**
+     * Stable identifier (e.g. userUUID, email, username) hashed into a
+     * deterministic palette index. The same seed always produces the same
+     * color. Leave empty to keep the default avatar background.
+     */
+    colorSeed = input('', ...(ngDevMode ? [{ debugName: "colorSeed" }] : []));
     /** Tracks whether the image failed to load. */
     imageError = signal(false, ...(ngDevMode ? [{ debugName: "imageError" }] : []));
     /** Whether to render the `<img>` element. */
@@ -1135,6 +1154,18 @@ class AfAvatarComponent {
     }, ...(ngDevMode ? [{ debugName: "initials" }] : []));
     /** Accessible label for the avatar. */
     ariaLabel = computed(() => this.alt() || this.name() || 'Avatar', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * Palette index in `[1, AVATAR_SEED_PALETTE_SIZE]` derived from `colorSeed`,
+     * or `null` when no seed is set. Returning `null` causes Angular to omit
+     * the `data-seed-color` attribute, preserving the unseeded default.
+     */
+    seedColorIndex = computed(() => {
+        const seed = this.colorSeed();
+        if (!seed)
+            return null;
+        // Construct's selectors are 1-indexed (data-seed-color="1".."8")
+        return (this.hashSeed(seed) % AVATAR_SEED_PALETTE_SIZE) + 1;
+    }, ...(ngDevMode ? [{ debugName: "seedColorIndex" }] : []));
     avatarClasses = computed(() => {
         const classes = ['ct-avatar'];
         if (this.size() !== 'md') {
@@ -1146,9 +1177,26 @@ class AfAvatarComponent {
     onImageError() {
         this.imageError.set(true);
     }
+    /**
+     * Dependency-free 32-bit string hash (djb2-style). Pure and stable across
+     * runs and environments — same input always yields the same non-negative
+     * integer.
+     */
+    hashSeed(seed) {
+        let hash = 0;
+        for (let i = 0; i < seed.length; i++) {
+            hash = (hash << 5) - hash + seed.charCodeAt(i);
+            hash |= 0; // force 32-bit int
+        }
+        return Math.abs(hash);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfAvatarComponent, isStandalone: true, selector: "af-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <span [class]="avatarClasses()" role="img" [attr.aria-label]="ariaLabel()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfAvatarComponent, isStandalone: true, selector: "af-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, colorSeed: { classPropertyName: "colorSeed", publicName: "colorSeed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span
+      [class]="avatarClasses()"
+      role="img"
+      [attr.aria-label]="ariaLabel()"
+      [attr.data-seed-color]="seedColorIndex()">
       @if (showImage()) {
         <img
           class="ct-avatar__image"
@@ -1172,7 +1220,11 @@ class AfAvatarComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'af-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <span [class]="avatarClasses()" role="img" [attr.aria-label]="ariaLabel()">
+    <span
+      [class]="avatarClasses()"
+      role="img"
+      [attr.aria-label]="ariaLabel()"
+      [attr.data-seed-color]="seedColorIndex()">
       @if (showImage()) {
         <img
           class="ct-avatar__image"
@@ -1192,7 +1244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
       }
     </span>
   `, styles: [":host{display:inline-block}\n"] }]
-        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], colorSeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorSeed", required: false }] }] } });
 
 /**
  * Button component from the Construct Design System.
@@ -1728,132 +1780,203 @@ class AfInputHarness {
 }
 
 /**
- * Select dropdown component with form control support
+ * Injection token to override select screen-reader announcements
+ * and the fallback `aria-label`.
  *
  * @example
+ * providers: [{
+ *   provide: AF_SELECT_I18N,
+ *   useValue: {
+ *     required: 'Pflichtfeld',
+ *     selectOption: 'Option auswählen',
+ *     selected: '{label} ausgewählt',
+ *   },
+ * }]
+ */
+const AF_SELECT_I18N = new InjectionToken('AfSelectI18n', {
+    factory: () => ({
+        required: 'required',
+        selectOption: 'Select option',
+        selected: '{label} selected',
+    }),
+});
+
+/**
+ * Native select dropdown component with form control support.
+ * Wraps a native `<select>` element with design system styling,
+ * accessible labelling, and Angular forms integration.
+ *
+ * For a custom dropdown with keyboard-navigated listbox, see `af-select-menu`.
+ *
+ * @example Basic usage with ngModel
  * <af-select
  *   label="Role"
  *   [options]="roleOptions"
  *   [(ngModel)]="selectedRole"
  *   hint="Choose your primary role"
- * ></af-select>
+ * />
+ *
+ * @example Reactive forms with error state
+ * <af-select
+ *   label="Country"
+ *   [options]="countries"
+ *   [formControl]="countryControl"
+ *   [error]="countryControl.hasError('required') ? 'Required field' : ''"
+ * />
+ *
+ * @accessibility
+ * - Uses a native `<select>` element for built-in browser accessibility.
+ * - `aria-invalid` is set when an error message is provided.
+ * - `aria-describedby` links to hint or error text.
+ * - Falls back to `aria-label` via {@link AF_SELECT_I18N} when no `label` input is given.
+ * - Screen-reader announcements via {@link AriaLiveAnnouncer} on selection change.
+ * - All user-facing strings are configurable via {@link AF_SELECT_I18N} for i18n.
  */
 class AfSelectComponent {
     static nextId = 0;
-    /** Select label */
+    i18n = inject(AF_SELECT_I18N);
+    announcer = inject(AriaLiveAnnouncer);
+    /** Label shown above the select. */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    /** Placeholder option */
+    /** Placeholder option shown when no value is selected. */
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    /** Options array */
+    /** Available options. */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-    /** Hint text shown below select */
+    /** Hint text shown below the select. */
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
-    /** Error message */
+    /** Error message — shows error state when non-empty. */
     error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
-    /** Whether select is required */
+    /** Whether the field is required. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
-    /** Whether select is disabled */
+    /** Whether the select is disabled. */
     disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    /** Value comparison function (for object values) */
+    /** Size variant. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Value comparison function for object values. */
     compareWith = input((a, b) => a === b, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
-    /** Unique select ID */
+    /** Unique select ID. */
     selectId = input(`af-select-${AfSelectComponent.nextId++}`, ...(ngDevMode ? [{ debugName: "selectId" }] : []));
-    value = null;
-    onChangeCallback = () => { };
+    /** Emits when the user changes the selected value. */
+    valueChange = output();
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    onChange = () => { };
     onTouched = () => { };
+    labelId = computed(() => `${this.selectId()}-label`, ...(ngDevMode ? [{ debugName: "labelId" }] : []));
     hintId = computed(() => `${this.selectId()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
     errorId = computed(() => `${this.selectId()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
-    getAriaDescribedBy() {
+    selectClasses = computed(() => {
+        const classes = ['ct-select'];
+        const s = this.size();
+        if (s === 'sm')
+            classes.push('ct-select--sm');
+        if (s === 'lg')
+            classes.push('ct-select--lg');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "selectClasses" }] : []));
+    ariaDescribedBy = computed(() => {
         if (this.error())
             return this.errorId();
         if (this.hint())
             return this.hintId();
         return null;
-    }
-    get isPlaceholderSelected() {
+    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
+    isPlaceholderSelected = computed(() => {
         if (!this.placeholder())
             return false;
-        if (this.value === null || this.value === undefined || this.value === '')
+        const v = this.value();
+        if (v === null || v === undefined || v === '')
             return true;
         return !this.hasMatchingOption();
-    }
-    hasMatchingOption() {
-        return this.options().some(option => this.compareWith()(option.value, this.value));
-    }
+    }, ...(ngDevMode ? [{ debugName: "isPlaceholderSelected" }] : []));
     isOptionSelected(option) {
-        if (this.isPlaceholderSelected)
+        if (this.isPlaceholderSelected())
             return false;
-        return this.compareWith()(option.value, this.value);
+        return this.compareWith()(option.value, this.value());
     }
-    onChange(event) {
+    handleChange(event) {
         const target = event.target;
         const index = target.selectedIndex;
         const offset = this.placeholder() ? 1 : 0;
         if (this.placeholder() && index === 0) {
-            this.value = null;
-            this.onChangeCallback(null);
+            this.value.set(null);
+            this.onChange(null);
+            this.valueChange.emit(null);
             return;
         }
         const option = this.options()[index - offset];
         const nextValue = option ? option.value : null;
-        this.value = nextValue;
-        this.onChangeCallback(nextValue);
+        this.value.set(nextValue);
+        this.onChange(nextValue);
+        this.valueChange.emit(nextValue);
+        if (option) {
+            this.announcer.announce(this.i18n.selected.replace('{label}', option.label));
+        }
     }
-    /** ControlValueAccessor implementation */
+    /** @docs-private */
     writeValue(value) {
-        this.value = value ?? null;
+        this.value.set(value ?? null);
     }
+    /** @docs-private */
     registerOnChange(fn) {
-        this.onChangeCallback = fn;
+        this.onChange = fn;
     }
+    /** @docs-private */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /** @docs-private */
     setDisabledState(isDisabled) {
         this.disabled.set(isDisabled);
     }
+    hasMatchingOption() {
+        return this.options().some((option) => this.compareWith()(option.value, this.value()));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfSelectComponent, isStandalone: true, selector: "af-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, selectId: { classPropertyName: "selectId", publicName: "selectId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfSelectComponent, isStandalone: true, selector: "af-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, selectId: { classPropertyName: "selectId", publicName: "selectId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", valueChange: "valueChange" }, host: { styleAttribute: "display: block" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AfSelectComponent),
-                multi: true
-            }
+                multi: true,
+            },
         ], ngImport: i0, template: `
     <div class="ct-field" [class.ct-field--error]="error()">
       @if (label()) {
-        <label class="ct-field__label" [attr.for]="selectId()">
+        <label class="ct-field__label" [id]="labelId()" [attr.for]="selectId()">
           {{ label() }}
           @if (required()) {
-            <span aria-label="required"> *</span>
+            <span [attr.aria-label]="i18n.required"> *</span>
           }
         </label>
       }
 
-      <select
-        [id]="selectId()"
-        class="ct-select"
-        [disabled]="disabled()"
-        [required]="required()"
-        [attr.aria-invalid]="error() ? true : null"
-        [attr.aria-describedby]="getAriaDescribedBy()"
-        (change)="onChange($event)"
-        (blur)="onTouched()"
-      >
-        @if (placeholder()) {
-          <option value="" [disabled]="true" [selected]="isPlaceholderSelected">
-            {{ placeholder() }}
-          </option>
-        }
-        @for (option of options(); track option.value) {
-          <option
-            [selected]="isOptionSelected(option)"
-            [disabled]="option.disabled || false"
-          >
-            {{ option.label }}
-          </option>
-        }
-      </select>
+      <div class="ct-select-wrap">
+        <select
+          [id]="selectId()"
+          [class]="selectClasses()"
+          [disabled]="disabled()"
+          [required]="required()"
+          [attr.aria-invalid]="error() ? true : null"
+          [attr.aria-describedby]="ariaDescribedBy()"
+          [attr.aria-label]="label() ? null : i18n.selectOption"
+          [attr.aria-labelledby]="label() ? labelId() : null"
+          (change)="handleChange($event)"
+          (blur)="onTouched()"
+        >
+          @if (placeholder()) {
+            <option value="" [disabled]="true" [selected]="isPlaceholderSelected()">
+              {{ placeholder() }}
+            </option>
+          }
+          @for (option of options(); track option.value) {
+            <option
+              [selected]="isOptionSelected(option)"
+              [disabled]="option.disabled || false"
+            >
+              {{ option.label }}
+            </option>
+          }
+        </select>
+      </div>
 
       @if (hint() && !error()) {
         <div class="ct-field__hint" [id]="hintId()">
@@ -1862,56 +1985,67 @@ class AfSelectComponent {
       }
 
       @if (error()) {
-        <div class="ct-field__error" [id]="errorId()">
+        <div class="ct-field__error" role="alert" [id]="errorId()">
           {{ error() }}
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'af-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{
+                    selector: 'af-select',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => AfSelectComponent),
-                            multi: true
-                        }
-                    ], template: `
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        style: 'display: block',
+                    },
+                    template: `
     <div class="ct-field" [class.ct-field--error]="error()">
       @if (label()) {
-        <label class="ct-field__label" [attr.for]="selectId()">
+        <label class="ct-field__label" [id]="labelId()" [attr.for]="selectId()">
           {{ label() }}
           @if (required()) {
-            <span aria-label="required"> *</span>
+            <span [attr.aria-label]="i18n.required"> *</span>
           }
         </label>
       }
 
-      <select
-        [id]="selectId()"
-        class="ct-select"
-        [disabled]="disabled()"
-        [required]="required()"
-        [attr.aria-invalid]="error() ? true : null"
-        [attr.aria-describedby]="getAriaDescribedBy()"
-        (change)="onChange($event)"
-        (blur)="onTouched()"
-      >
-        @if (placeholder()) {
-          <option value="" [disabled]="true" [selected]="isPlaceholderSelected">
-            {{ placeholder() }}
-          </option>
-        }
-        @for (option of options(); track option.value) {
-          <option
-            [selected]="isOptionSelected(option)"
-            [disabled]="option.disabled || false"
-          >
-            {{ option.label }}
-          </option>
-        }
-      </select>
+      <div class="ct-select-wrap">
+        <select
+          [id]="selectId()"
+          [class]="selectClasses()"
+          [disabled]="disabled()"
+          [required]="required()"
+          [attr.aria-invalid]="error() ? true : null"
+          [attr.aria-describedby]="ariaDescribedBy()"
+          [attr.aria-label]="label() ? null : i18n.selectOption"
+          [attr.aria-labelledby]="label() ? labelId() : null"
+          (change)="handleChange($event)"
+          (blur)="onTouched()"
+        >
+          @if (placeholder()) {
+            <option value="" [disabled]="true" [selected]="isPlaceholderSelected()">
+              {{ placeholder() }}
+            </option>
+          }
+          @for (option of options(); track option.value) {
+            <option
+              [selected]="isOptionSelected(option)"
+              [disabled]="option.disabled || false"
+            >
+              {{ option.label }}
+            </option>
+          }
+        </select>
+      </div>
 
       @if (hint() && !error()) {
         <div class="ct-field__hint" [id]="hintId()">
@@ -1920,13 +2054,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
       }
 
       @if (error()) {
-        <div class="ct-field__error" [id]="errorId()">
+        <div class="ct-field__error" role="alert" [id]="errorId()">
           {{ error() }}
         </div>
       }
     </div>
-  `, styles: [":host{display:block}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectId", required: false }] }] } });
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectId", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Test harness for AfSelectComponent.
+ *
+ * Provides a semantic API for interacting with the native select in tests,
+ * abstracting DOM details behind readable method names.
+ *
+ * @example
+ * const harness = new AfSelectHarness(fixture.nativeElement);
+ * expect(harness.isDisabled()).toBe(false);
+ * harness.selectByIndex(1);
+ * expect(harness.getValue()).toBe('Banana');
+ */
+class AfSelectHarness {
+    hostEl;
+    constructor(container) {
+        const el = container.querySelector('af-select');
+        if (!el) {
+            throw new Error('AfSelectHarness: af-select element not found in container.');
+        }
+        this.hostEl = el;
+    }
+    /** Returns the native `<select>` element. */
+    getSelectElement() {
+        const select = this.hostEl.querySelector('select');
+        if (!select) {
+            throw new Error('AfSelectHarness: <select> element not found.');
+        }
+        return select;
+    }
+    /** Returns the current display value of the select. */
+    getValue() {
+        const select = this.getSelectElement();
+        return select.options[select.selectedIndex]?.text?.trim() ?? '';
+    }
+    /** Returns the current selected index. */
+    getSelectedIndex() {
+        return this.getSelectElement().selectedIndex;
+    }
+    /** Selects an option by index and dispatches a change event. */
+    selectByIndex(index) {
+        const select = this.getSelectElement();
+        select.selectedIndex = index;
+        select.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    /** Returns the trimmed label text, or null if no label. */
+    getLabel() {
+        const label = this.hostEl.querySelector('.ct-field__label');
+        return label?.textContent?.trim() ?? null;
+    }
+    /** Returns the trimmed hint text, or null if no hint. */
+    getHint() {
+        const hint = this.hostEl.querySelector('.ct-field__hint');
+        return hint?.textContent?.trim() ?? null;
+    }
+    /** Returns the trimmed error text, or null if no error. */
+    getError() {
+        const error = this.hostEl.querySelector('.ct-field__error');
+        return error?.textContent?.trim() ?? null;
+    }
+    /** Returns whether the select is disabled. */
+    isDisabled() {
+        return this.getSelectElement().disabled;
+    }
+    /** Returns whether the select is required. */
+    isRequired() {
+        return this.getSelectElement().required;
+    }
+    /** Returns whether `aria-invalid="true"` is set. */
+    isInvalid() {
+        return this.getSelectElement().getAttribute('aria-invalid') === 'true';
+    }
+    /** Returns the `aria-describedby` attribute value. */
+    getAriaDescribedBy() {
+        return this.getSelectElement().getAttribute('aria-describedby');
+    }
+    /** Returns the `aria-label` attribute value. */
+    getAriaLabel() {
+        return this.getSelectElement().getAttribute('aria-label');
+    }
+    /** Returns all `<option>` elements. */
+    getOptions() {
+        return Array.from(this.getSelectElement().options);
+    }
+    /** Returns the number of options (including placeholder). */
+    getOptionCount() {
+        return this.getSelectElement().options.length;
+    }
+    /** Returns the trimmed text of the option at the given index. */
+    getOptionText(index) {
+        const options = this.getOptions();
+        if (index < 0 || index >= options.length) {
+            throw new Error(`AfSelectHarness: option index ${index} out of bounds (${options.length} options).`);
+        }
+        return options[index].text.trim();
+    }
+    /** Returns whether the option at the given index is disabled. */
+    isOptionDisabled(index) {
+        return this.getOptions()[index]?.disabled ?? false;
+    }
+    /** Returns whether the option at the given index is selected. */
+    isOptionSelected(index) {
+        return this.getOptions()[index]?.selected ?? false;
+    }
+    /** Returns the select element's ID. */
+    getId() {
+        return this.getSelectElement().id;
+    }
+    /** Returns whether the field wrapper has the error class. */
+    hasFieldError() {
+        return this.hostEl.querySelector('.ct-field--error') !== null;
+    }
+    /** Returns whether the select has the given CSS class. */
+    hasClass(className) {
+        return this.getSelectElement().classList.contains(className);
+    }
+    /** Returns whether the `.ct-select-wrap` wrapper exists. */
+    hasSelectWrap() {
+        return this.hostEl.querySelector('.ct-select-wrap') !== null;
+    }
+    /** Dispatches a blur event on the select. */
+    blur() {
+        this.getSelectElement().dispatchEvent(new Event('blur', { bubbles: true }));
+    }
+}
 
 /**
  * Textarea component with form control support
@@ -10094,6 +10354,955 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
   `, styles: [":host{display:contents}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
 
+/**
+ * Injection token to override tree screen-reader announcements
+ * and visible labels for i18n.
+ *
+ * @example
+ * providers: [{
+ *   provide: AF_TREE_I18N,
+ *   useValue: {
+ *     expanded: '{label} ausgeklappt',
+ *     collapsed: '{label} eingeklappt',
+ *     selected: '{label} ausgewählt',
+ *     toggleLabel: 'Aufklappen / Zuklappen',
+ *     loadingLabel: 'Lädt …',
+ *     emptyMessage: 'Keine Einträge',
+ *     orphanLabel: 'Übergeordneter Eintrag fehlt',
+ *   },
+ * }]
+ */
+const AF_TREE_I18N = new InjectionToken('AfTreeI18n', {
+    factory: () => ({
+        expanded: '{label} expanded',
+        collapsed: '{label} collapsed',
+        selected: '{label} selected',
+        toggleLabel: 'Toggle',
+        loadingLabel: 'Loading…',
+        emptyMessage: 'No entries',
+        orphanLabel: 'Parent missing',
+    }),
+});
+
+/** Reset window for incremental type-ahead matching. */
+const TYPEAHEAD_RESET_MS = 500;
+/** Auto-incremented suffix used for the live-region id when no `aria-label` is set. */
+let nextTreeUid = 0;
+/**
+ * Recursive internal component that renders a single `<li role="treeitem">`
+ * and any visible children. Not part of the public API — consumers always
+ * use {@link AfTreeComponent}.
+ *
+ * @docs-private
+ */
+class AfTreeNodeComponent {
+    /** Backreference to the host tree — provides shared state, templates, and event hooks. */
+    tree = inject(forwardRef(() => AfTreeComponent));
+    host = inject(ElementRef);
+    /** Node descriptor for this row. */
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+    /** 1-based depth — sets `aria-level` and the `--ct-level` CSS custom property. */
+    level = input.required(...(ngDevMode ? [{ debugName: "level" }] : []));
+    /** Total siblings on this level — sets `aria-setsize`. */
+    setSize = input.required(...(ngDevMode ? [{ debugName: "setSize" }] : []));
+    /** 1-based position among siblings — sets `aria-posinset`. */
+    posInSet = input.required(...(ngDevMode ? [{ debugName: "posInSet" }] : []));
+    expandable = computed(() => this.tree.isExpandable(this.node()), ...(ngDevMode ? [{ debugName: "expandable" }] : []));
+    expanded = computed(() => this.tree.isExpanded(this.node()), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    selected = computed(() => this.tree.isSelected(this.node()), ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    focused = computed(() => this.tree.focusedId() === this.node().id, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    orphan = computed(() => this.node().meta?.['orphan'] === true, ...(ngDevMode ? [{ debugName: "orphan" }] : []));
+    ariaSelected = computed(() => {
+        if (this.tree.selection() === 'none')
+            return null;
+        return this.selected() ? 'true' : 'false';
+    }, ...(ngDevMode ? [{ debugName: "ariaSelected" }] : []));
+    visibleChildren = computed(() => {
+        const children = this.node().children ?? [];
+        return this.tree.filterChildren(children);
+    }, ...(ngDevMode ? [{ debugName: "visibleChildren" }] : []));
+    defaultLabelHtml = computed(() => this.tree.highlight(this.node().label), ...(ngDevMode ? [{ debugName: "defaultLabelHtml" }] : []));
+    templateContext = computed(() => ({
+        $implicit: this.node(),
+        node: this.node(),
+        level: this.level(),
+        filter: this.tree.filter(),
+        expanded: this.expanded(),
+        selected: this.selected(),
+        focused: this.focused(),
+    }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
+    /** Returns the underlying `<li>` element so the host can move DOM focus here. */
+    getLiElement() {
+        return this.host.nativeElement.querySelector(':scope > li');
+    }
+    onFocus() {
+        this.tree.focusedId.set(this.node().id);
+        this.tree.nodeFocus.emit(this.node());
+    }
+    onToggleClick(event) {
+        event.stopPropagation();
+        if (this.node().disabled)
+            return;
+        this.tree.toggle(this.node());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfTreeNodeComponent, isStandalone: true, selector: "af-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: true, transformFunction: null }, setSize: { classPropertyName: "setSize", publicName: "setSize", isSignal: true, isRequired: true, transformFunction: null }, posInSet: { classPropertyName: "posInSet", publicName: "posInSet", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <li
+      #li
+      class="ct-tree__node"
+      [class.ct-tree__node--selected]="selected()"
+      [class.ct-tree__node--orphan]="orphan()"
+      role="treeitem"
+      [attr.aria-level]="level()"
+      [attr.aria-setsize]="setSize()"
+      [attr.aria-posinset]="posInSet()"
+      [attr.aria-expanded]="expandable() ? expanded() : null"
+      [attr.aria-selected]="ariaSelected()"
+      [attr.aria-disabled]="node().disabled ? 'true' : null"
+      [attr.aria-busy]="node().loading ? 'true' : null"
+      [attr.tabindex]="focused() ? 0 : -1"
+      [attr.data-tree-id]="node().id"
+      (focus)="onFocus()">
+      <div class="ct-tree__row" [style.--ct-level]="level()">
+        @if (expandable()) {
+          <button
+            type="button"
+            class="ct-tree__toggle"
+            tabindex="-1"
+            [attr.aria-hidden]="true"
+            [attr.aria-label]="tree.i18n.toggleLabel"
+            (click)="onToggleClick($event)">
+            <svg
+              class="ct-tree__chevron"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+              focusable="false">
+              <polyline points="9 6 15 12 9 18" />
+            </svg>
+          </button>
+        } @else {
+          <span class="ct-tree__spacer" aria-hidden="true"></span>
+        }
+
+        <div class="ct-tree__content">
+          @if (tree.nodeContent(); as tpl) {
+            <ng-container
+              [ngTemplateOutlet]="tpl"
+              [ngTemplateOutletContext]="templateContext()"></ng-container>
+          } @else {
+            <span class="ct-tree__label" [innerHTML]="defaultLabelHtml()"></span>
+          }
+          @if (tree.nodeWarning(); as warnTpl) {
+            <ng-container
+              [ngTemplateOutlet]="warnTpl"
+              [ngTemplateOutletContext]="templateContext()"></ng-container>
+          }
+          @if (node().loading) {
+            <span class="ct-tree__sr-only">{{ tree.i18n.loadingLabel }}</span>
+          }
+        </div>
+
+        @if (tree.nodeActions(); as actTpl) {
+          <div class="ct-tree__actions">
+            <ng-container
+              [ngTemplateOutlet]="actTpl"
+              [ngTemplateOutletContext]="templateContext()"></ng-container>
+          </div>
+        }
+      </div>
+
+      @if (expandable() && expanded() && !node().loading) {
+        <ul
+          class="ct-tree__group"
+          role="group"
+          [style.--ct-parent-level]="level() - 1">
+          @for (
+            child of visibleChildren();
+            track tree.trackBy()(child);
+            let i = $index, count = $count
+          ) {
+            <af-tree-node
+              [node]="child"
+              [level]="level() + 1"
+              [setSize]="count"
+              [posInSet]="i + 1"></af-tree-node>
+          }
+        </ul>
+      }
+    </li>
+  `, isInline: true, styles: [":host{display:contents}.ct-tree__sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => AfTreeNodeComponent), selector: "af-tree-node", inputs: ["node", "level", "setSize", "posInSet"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfTreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'af-tree-node', standalone: true, imports: [NgTemplateOutlet, forwardRef(() => AfTreeNodeComponent)], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <li
+      #li
+      class="ct-tree__node"
+      [class.ct-tree__node--selected]="selected()"
+      [class.ct-tree__node--orphan]="orphan()"
+      role="treeitem"
+      [attr.aria-level]="level()"
+      [attr.aria-setsize]="setSize()"
+      [attr.aria-posinset]="posInSet()"
+      [attr.aria-expanded]="expandable() ? expanded() : null"
+      [attr.aria-selected]="ariaSelected()"
+      [attr.aria-disabled]="node().disabled ? 'true' : null"
+      [attr.aria-busy]="node().loading ? 'true' : null"
+      [attr.tabindex]="focused() ? 0 : -1"
+      [attr.data-tree-id]="node().id"
+      (focus)="onFocus()">
+      <div class="ct-tree__row" [style.--ct-level]="level()">
+        @if (expandable()) {
+          <button
+            type="button"
+            class="ct-tree__toggle"
+            tabindex="-1"
+            [attr.aria-hidden]="true"
+            [attr.aria-label]="tree.i18n.toggleLabel"
+            (click)="onToggleClick($event)">
+            <svg
+              class="ct-tree__chevron"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+              focusable="false">
+              <polyline points="9 6 15 12 9 18" />
+            </svg>
+          </button>
+        } @else {
+          <span class="ct-tree__spacer" aria-hidden="true"></span>
+        }
+
+        <div class="ct-tree__content">
+          @if (tree.nodeContent(); as tpl) {
+            <ng-container
+              [ngTemplateOutlet]="tpl"
+              [ngTemplateOutletContext]="templateContext()"></ng-container>
+          } @else {
+            <span class="ct-tree__label" [innerHTML]="defaultLabelHtml()"></span>
+          }
+          @if (tree.nodeWarning(); as warnTpl) {
+            <ng-container
+              [ngTemplateOutlet]="warnTpl"
+              [ngTemplateOutletContext]="templateContext()"></ng-container>
+          }
+          @if (node().loading) {
+            <span class="ct-tree__sr-only">{{ tree.i18n.loadingLabel }}</span>
+          }
+        </div>
+
+        @if (tree.nodeActions(); as actTpl) {
+          <div class="ct-tree__actions">
+            <ng-container
+              [ngTemplateOutlet]="actTpl"
+              [ngTemplateOutletContext]="templateContext()"></ng-container>
+          </div>
+        }
+      </div>
+
+      @if (expandable() && expanded() && !node().loading) {
+        <ul
+          class="ct-tree__group"
+          role="group"
+          [style.--ct-parent-level]="level() - 1">
+          @for (
+            child of visibleChildren();
+            track tree.trackBy()(child);
+            let i = $index, count = $count
+          ) {
+            <af-tree-node
+              [node]="child"
+              [level]="level() + 1"
+              [setSize]="count"
+              [posInSet]="i + 1"></af-tree-node>
+          }
+        </ul>
+      }
+    </li>
+  `, styles: [":host{display:contents}.ct-tree__sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: true }] }], setSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "setSize", required: true }] }], posInSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "posInSet", required: true }] }] } });
+/**
+ * Accessible Tree component implementing the WAI-ARIA Tree View pattern.
+ *
+ * Wraps the Construct `ct-tree` CSS component into a signal-based, OnPush
+ * Angular component with full keyboard navigation, type-ahead, single /
+ * multi-selection, async-load support, and client-side filtering.
+ *
+ * @example Static org tree
+ * <af-tree
+ *   [nodes]="organizations()"
+ *   ariaLabel="Organizations"
+ *   [showIndentGuides]="true"
+ *   selection="single"
+ *   [(selectedIds)]="selected"
+ *   (nodeActivate)="open($event)">
+ *   <ng-template #nodeContent let-node>
+ *     <af-icon name="folder" />
+ *     <span>{{ node.label }}</span>
+ *     <af-badge>{{ node.data.customerType }}</af-badge>
+ *   </ng-template>
+ * </af-tree>
+ *
+ * @example Async lazy-load
+ * <af-tree
+ *   [nodes]="nodes()"
+ *   ariaLabel="File system"
+ *   (loadChildren)="onLoad($event)" />
+ *
+ * @accessibility
+ * - Container exposes `role="tree"` and the required `aria-label`.
+ * - Each node is a `<li role="treeitem">` carrying `aria-level`,
+ *   `aria-setsize`, `aria-posinset`, and (when expandable) `aria-expanded`.
+ * - Roving tabindex on the `<li>` so screen readers announce treeitem role,
+ *   level and selection state when focus lands.
+ * - Keyboard: `↑`/`↓` move focus, `→` expands or steps into children,
+ *   `←` collapses or steps to the parent, `Home`/`End` jump, `Enter`
+ *   activates, `Space` toggles selection (multi) or activates (single),
+ *   `*` expands all sibling branches, A–Z performs incremental type-ahead.
+ * - Selection state is mirrored via `aria-selected` only when
+ *   `selection !== 'none'` — leaves implicit selection off in static trees.
+ * - `aria-busy="true"` is rendered on rows whose `node.loading` is `true`.
+ * - Custom slot templates receive the active filter so they can highlight
+ *   matches consistently with the default renderer.
+ */
+class AfTreeComponent {
+    /** Internal id used to scope live-region announcements (debug aid). */
+    uid = ++nextTreeUid;
+    /** I18n bundle resolved via {@link AF_TREE_I18N}. Public so the recursive child component can render labels. */
+    i18n = inject(AF_TREE_I18N);
+    announcer = inject(AriaLiveAnnouncer);
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    // ─── Inputs ─────────────────────────────────────────────────────────────
+    /** Hierarchical node list. */
+    nodes = input.required(...(ngDevMode ? [{ debugName: "nodes" }] : []));
+    /** Container `aria-label` — required by the WAI-ARIA Tree pattern. */
+    ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Selection mode. Defaults to `'none'`. */
+    selection = input('none', ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    /** Two-way bound set of expanded node ids. */
+    expandedIds = model(new Set(), ...(ngDevMode ? [{ debugName: "expandedIds" }] : []));
+    /** Two-way bound set of selected node ids. */
+    selectedIds = model(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
+    /** Case-insensitive substring filter; auto-expands ancestors of matches. */
+    filter = input('', ...(ngDevMode ? [{ debugName: "filter" }] : []));
+    /** Render `.ct-tree--guides` (vertical indent lines). */
+    showIndentGuides = input(false, { ...(ngDevMode ? { debugName: "showIndentGuides" } : {}), transform: booleanAttribute });
+    /** Render `.ct-tree--dense` modifier. */
+    dense = input(false, { ...(ngDevMode ? { debugName: "dense" } : {}), transform: booleanAttribute });
+    /** Render `.ct-tree--bordered` (surface variant). */
+    bordered = input(false, { ...(ngDevMode ? { debugName: "bordered" } : {}), transform: booleanAttribute });
+    /** TrackBy override — defaults to `node.id`. */
+    trackBy = input((n) => n.id, ...(ngDevMode ? [{ debugName: "trackBy" }] : []));
+    // ─── Outputs ────────────────────────────────────────────────────────────
+    /** Emits when a node is activated (Enter or row click). */
+    nodeActivate = output();
+    /** Emits when a node is expanded or collapsed. */
+    nodeToggle = output();
+    /** Emits when focus moves to a node. */
+    nodeFocus = output();
+    /** Emits the first time a node with `children === undefined` is expanded (lazy-load hook). */
+    loadChildren = output();
+    // ─── Slots (ContentChild templates) ─────────────────────────────────────
+    /** Template for custom node content; falls back to `node.label` with highlight. */
+    nodeContent = contentChild('nodeContent', ...(ngDevMode ? [{ debugName: "nodeContent" }] : []));
+    /** Template for action buttons rendered visible-on-hover/focus. */
+    nodeActions = contentChild('nodeActions', ...(ngDevMode ? [{ debugName: "nodeActions" }] : []));
+    /** Template for warning slot (e.g. orphan indicators). */
+    nodeWarning = contentChild('nodeWarning', ...(ngDevMode ? [{ debugName: "nodeWarning" }] : []));
+    /** Template shown when the (filtered) tree is empty. */
+    emptySlot = contentChild('empty', ...(ngDevMode ? [{ debugName: "emptySlot" }] : []));
+    // ─── Internal state ─────────────────────────────────────────────────────
+    /** Currently focused node id (drives the roving tabindex). */
+    focusedId = signal(null, ...(ngDevMode ? [{ debugName: "focusedId" }] : []));
+    /** Tracks nodes whose `loadChildren` has already fired so we don't refire on re-expand. */
+    loadedIds = new Set();
+    /** Type-ahead buffer + reset timer. */
+    typeBuffer = '';
+    typeTimer = null;
+    // ─── Derived state ──────────────────────────────────────────────────────
+    /** Flat list of visible (expanded-path) nodes. Used for keyboard nav. */
+    visibleNodeOrder = computed(() => {
+        const out = [];
+        const walk = (list) => {
+            for (const n of this.filterChildren(list)) {
+                out.push(n);
+                if (this.isExpanded(n) && !n.loading) {
+                    walk(n.children ?? []);
+                }
+            }
+        };
+        walk(this.nodes());
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "visibleNodeOrder" }] : []));
+    /** Top-level filtered nodes — used by the template. */
+    visibleNodes = computed(() => this.filterChildren(this.nodes()), ...(ngDevMode ? [{ debugName: "visibleNodes" }] : []));
+    treeClasses = computed(() => {
+        const classes = ['ct-tree'];
+        if (this.showIndentGuides())
+            classes.push('ct-tree--guides');
+        if (this.dense())
+            classes.push('ct-tree--dense');
+        if (this.bordered())
+            classes.push('ct-tree--bordered');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "treeClasses" }] : []));
+    /**
+     * Set of node ids matching the current filter. Empty set means no filter active.
+     * Filtering is case-insensitive substring on `node.label`.
+     */
+    filterMatches = computed(() => {
+        const q = this.filter().trim().toLowerCase();
+        if (!q)
+            return null;
+        const matches = new Set();
+        const walk = (list) => {
+            let any = false;
+            for (const n of list) {
+                const self = n.label.toLowerCase().includes(q);
+                const childHit = walk(n.children ?? []);
+                if (self || childHit) {
+                    matches.add(n.id);
+                    any = true;
+                }
+            }
+            return any;
+        };
+        walk(this.nodes());
+        return matches;
+    }, ...(ngDevMode ? [{ debugName: "filterMatches" }] : []));
+    /** Auto-expanded ids derived from active filter (ancestors of matches). */
+    autoExpandedIds = computed(() => {
+        const matches = this.filterMatches();
+        if (!matches)
+            return null;
+        const expanded = new Set();
+        const walk = (list) => {
+            for (const n of list) {
+                if (matches.has(n.id) && (n.children?.length ?? 0) > 0) {
+                    expanded.add(n.id);
+                }
+                walk(n.children ?? []);
+            }
+        };
+        walk(this.nodes());
+        return expanded;
+    }, ...(ngDevMode ? [{ debugName: "autoExpandedIds" }] : []));
+    constructor() {
+        /** Seed the focused id when nodes first become available so Tab lands on a row. */
+        effect(() => {
+            const first = this.visibleNodeOrder()[0];
+            const current = this.focusedId();
+            if (!first) {
+                if (current)
+                    this.focusedId.set(null);
+                return;
+            }
+            if (!current || !this.findNode(current)) {
+                this.focusedId.set(first.id);
+            }
+        });
+    }
+    // ─── State queries (called from the recursive child) ────────────────────
+    /** A node is expandable when it has unloaded children, real children, or is loading. */
+    isExpandable(node) {
+        if (node.isLeaf)
+            return false;
+        if (node.loading)
+            return true;
+        if (node.children === undefined)
+            return true;
+        return node.children.length > 0;
+    }
+    isExpanded(node) {
+        if (this.autoExpandedIds()?.has(node.id))
+            return true;
+        return this.expandedIds().has(node.id);
+    }
+    isSelected(node) {
+        return this.selectedIds().has(node.id);
+    }
+    /** Returns the children list filtered by the active filter (or all if none). */
+    filterChildren(children) {
+        const matches = this.filterMatches();
+        if (!matches)
+            return children;
+        return children.filter((c) => matches.has(c.id));
+    }
+    /** Wraps the first case-insensitive match of the active filter in `<mark>` tags. */
+    highlight(label) {
+        const q = this.filter().trim();
+        const safe = escapeHtml(label);
+        if (!q)
+            return safe;
+        const idx = safe.toLowerCase().indexOf(q.toLowerCase());
+        if (idx < 0)
+            return safe;
+        const end = idx + q.length;
+        return `${safe.slice(0, idx)}<mark>${safe.slice(idx, end)}</mark>${safe.slice(end)}`;
+    }
+    // ─── Mutation API ───────────────────────────────────────────────────────
+    /** Toggle the expanded state of `node`; fires `loadChildren` on first lazy-expand. */
+    toggle(node) {
+        if (node.disabled || !this.isExpandable(node))
+            return;
+        const wasExpanded = this.expandedIds().has(node.id);
+        const next = new Set(this.expandedIds());
+        if (wasExpanded)
+            next.delete(node.id);
+        else
+            next.add(node.id);
+        this.expandedIds.set(next);
+        const expanded = !wasExpanded;
+        this.nodeToggle.emit({ node, expanded });
+        this.announcer.announce((expanded ? this.i18n.expanded : this.i18n.collapsed).replace('{label}', node.label));
+        if (expanded && node.children === undefined && !this.loadedIds.has(node.id)) {
+            this.loadedIds.add(node.id);
+            this.loadChildren.emit(node);
+        }
+    }
+    /**
+     * Activate `node` — always emits `nodeActivate` and updates selection per
+     * mode. In `multiple` mode `Enter` activates without toggling selection so
+     * keyboard users can drive a primary action without disturbing checkboxes.
+     */
+    activate(node, source) {
+        if (node.disabled)
+            return;
+        const mode = this.selection();
+        if (mode === 'single') {
+            this.applySingleSelection(node);
+        }
+        else if (mode === 'multiple' && source !== 'enter') {
+            this.toggleMultiSelection(node);
+        }
+        this.nodeActivate.emit(node);
+    }
+    applySingleSelection(node) {
+        const current = this.selectedIds();
+        if (current.size === 1 && current.has(node.id))
+            return;
+        this.selectedIds.set(new Set([node.id]));
+        this.announcer.announce(this.i18n.selected.replace('{label}', node.label));
+    }
+    toggleMultiSelection(node) {
+        const next = new Set(this.selectedIds());
+        if (next.has(node.id))
+            next.delete(node.id);
+        else {
+            next.add(node.id);
+            this.announcer.announce(this.i18n.selected.replace('{label}', node.label));
+        }
+        this.selectedIds.set(next);
+    }
+    // ─── Keyboard handling ──────────────────────────────────────────────────
+    handleKeydown(event) {
+        const target = event.target;
+        const li = target?.closest('li.ct-tree__node');
+        if (!li || !this.host.nativeElement.contains(li))
+            return;
+        const id = li.getAttribute('data-tree-id');
+        if (!id)
+            return;
+        const node = this.findNode(id);
+        if (!node)
+            return;
+        const order = this.visibleNodeOrder();
+        const idx = order.findIndex((n) => n.id === id);
+        if (idx < 0)
+            return;
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                const next = order[Math.min(order.length - 1, idx + 1)];
+                if (next)
+                    this.moveFocus(next);
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                const prev = order[Math.max(0, idx - 1)];
+                if (prev)
+                    this.moveFocus(prev);
+                break;
+            }
+            case 'ArrowRight': {
+                event.preventDefault();
+                if (!this.isExpandable(node))
+                    break;
+                if (!this.expandedIds().has(node.id)) {
+                    this.toggle(node);
+                }
+                else {
+                    const firstChild = (node.children ?? [])[0];
+                    if (firstChild)
+                        this.moveFocus(firstChild);
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                event.preventDefault();
+                if (this.isExpandable(node) && this.expandedIds().has(node.id)) {
+                    this.toggle(node);
+                }
+                else {
+                    const parent = this.findParent(node.id);
+                    if (parent)
+                        this.moveFocus(parent);
+                }
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                if (order[0])
+                    this.moveFocus(order[0]);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                const last = order[order.length - 1];
+                if (last)
+                    this.moveFocus(last);
+                break;
+            }
+            case 'Enter': {
+                event.preventDefault();
+                if (node.disabled)
+                    break;
+                this.activate(node, 'enter');
+                break;
+            }
+            case ' ': {
+                event.preventDefault();
+                if (node.disabled)
+                    break;
+                if (this.selection() === 'none')
+                    this.activate(node, 'enter');
+                else
+                    this.activate(node, 'space');
+                break;
+            }
+            case '*': {
+                event.preventDefault();
+                this.expandClosedSiblings(node);
+                break;
+            }
+            default: {
+                if (event.key.length === 1 &&
+                    /\S/.test(event.key) &&
+                    !event.ctrlKey &&
+                    !event.metaKey &&
+                    !event.altKey) {
+                    this.typeahead(event.key);
+                }
+            }
+        }
+    }
+    handleClick(event) {
+        const target = event.target;
+        /** Toggle button has its own handler — it stops propagation, but guard anyway. */
+        if (target.closest('.ct-tree__toggle'))
+            return;
+        /** Clicks inside the actions slot belong to the consumer's buttons. */
+        if (target.closest('.ct-tree__actions'))
+            return;
+        const li = target.closest('li.ct-tree__node');
+        if (!li || !this.host.nativeElement.contains(li))
+            return;
+        const id = li.getAttribute('data-tree-id');
+        if (!id)
+            return;
+        const node = this.findNode(id);
+        if (!node || node.disabled)
+            return;
+        this.moveFocus(node);
+        this.activate(node, 'click');
+    }
+    expandClosedSiblings(node) {
+        const parent = this.findParent(node.id);
+        const siblings = parent ? (parent.children ?? []) : this.nodes();
+        for (const sib of siblings) {
+            if (this.isExpandable(sib) && !sib.disabled && !this.expandedIds().has(sib.id)) {
+                this.toggle(sib);
+            }
+        }
+    }
+    typeahead(char) {
+        this.typeBuffer += char.toLowerCase();
+        if (this.typeTimer)
+            clearTimeout(this.typeTimer);
+        this.typeTimer = setTimeout(() => {
+            this.typeBuffer = '';
+            this.typeTimer = null;
+        }, TYPEAHEAD_RESET_MS);
+        const order = this.visibleNodeOrder();
+        if (order.length === 0)
+            return;
+        const currentId = this.focusedId();
+        const startIdx = Math.max(0, order.findIndex((n) => n.id === currentId));
+        const ordered = order.slice(startIdx + 1).concat(order.slice(0, startIdx + 1));
+        const buf = this.typeBuffer;
+        const match = ordered.find((n) => n.label.toLowerCase().startsWith(buf));
+        if (match)
+            this.moveFocus(match);
+    }
+    // ─── Focus / lookup helpers ─────────────────────────────────────────────
+    /** Move focus to `node` — updates the roving tabindex and pulls DOM focus into the tree. */
+    moveFocus(node) {
+        if (node.disabled)
+            return;
+        this.focusedId.set(node.id);
+        queueMicrotask(() => {
+            const el = this.host.nativeElement.querySelector(`li.ct-tree__node[data-tree-id="${cssEscape(node.id)}"]`);
+            el?.focus();
+        });
+    }
+    /** Programmatically focus the tree row matching `id`. */
+    focusNode(id) {
+        const node = this.findNode(id);
+        if (node)
+            this.moveFocus(node);
+    }
+    /** Walk the tree until a node with the given id is found. */
+    findNode(id, list = this.nodes()) {
+        for (const n of list) {
+            if (n.id === id)
+                return n;
+            const hit = n.children ? this.findNode(id, n.children) : null;
+            if (hit)
+                return hit;
+        }
+        return null;
+    }
+    /** Locate the parent of `id` — returns null when the node is at root level. */
+    findParent(id, list = this.nodes()) {
+        for (const n of list) {
+            if (n.children?.some((c) => c.id === id))
+                return n;
+            if (n.children) {
+                const hit = this.findParent(id, n.children);
+                if (hit)
+                    return hit;
+            }
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfTreeComponent, isStandalone: true, selector: "af-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, showIndentGuides: { classPropertyName: "showIndentGuides", publicName: "showIndentGuides", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedIds: "expandedIdsChange", selectedIds: "selectedIdsChange", nodeActivate: "nodeActivate", nodeToggle: "nodeToggle", nodeFocus: "nodeFocus", loadChildren: "loadChildren" }, host: { listeners: { "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, properties: { "class.af-tree": "true" } }, queries: [{ propertyName: "nodeContent", first: true, predicate: ["nodeContent"], descendants: true, isSignal: true }, { propertyName: "nodeActions", first: true, predicate: ["nodeActions"], descendants: true, isSignal: true }, { propertyName: "nodeWarning", first: true, predicate: ["nodeWarning"], descendants: true, isSignal: true }, { propertyName: "emptySlot", first: true, predicate: ["empty"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (visibleNodes().length > 0) {
+      <ul
+        [class]="treeClasses()"
+        role="tree"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-multiselectable]="selection() === 'multiple' ? 'true' : null">
+        @for (
+          node of visibleNodes();
+          track trackBy()(node);
+          let i = $index, count = $count
+        ) {
+          <af-tree-node
+            [node]="node"
+            [level]="1"
+            [setSize]="count"
+            [posInSet]="i + 1"></af-tree-node>
+        }
+      </ul>
+    } @else {
+      <div class="af-tree__empty" role="status">
+        @if (emptySlot(); as tpl) {
+          <ng-container [ngTemplateOutlet]="tpl"></ng-container>
+        } @else {
+          <span>{{ i18n.emptyMessage }}</span>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:block}.af-tree__empty{padding:var(--space-4, 1rem);color:var(--color-text-muted, currentColor);font-size:var(--font-size-sm, .875rem)}\n"], dependencies: [{ kind: "component", type: AfTreeNodeComponent, selector: "af-tree-node", inputs: ["node", "level", "setSize", "posInSet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'af-tree', standalone: true, imports: [AfTreeNodeComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.af-tree]': 'true',
+                        '(keydown)': 'handleKeydown($event)',
+                        '(click)': 'handleClick($event)',
+                    }, template: `
+    @if (visibleNodes().length > 0) {
+      <ul
+        [class]="treeClasses()"
+        role="tree"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-multiselectable]="selection() === 'multiple' ? 'true' : null">
+        @for (
+          node of visibleNodes();
+          track trackBy()(node);
+          let i = $index, count = $count
+        ) {
+          <af-tree-node
+            [node]="node"
+            [level]="1"
+            [setSize]="count"
+            [posInSet]="i + 1"></af-tree-node>
+        }
+      </ul>
+    } @else {
+      <div class="af-tree__empty" role="status">
+        @if (emptySlot(); as tpl) {
+          <ng-container [ngTemplateOutlet]="tpl"></ng-container>
+        } @else {
+          <span>{{ i18n.emptyMessage }}</span>
+        }
+      </div>
+    }
+  `, styles: [":host{display:block}.af-tree__empty{padding:var(--space-4, 1rem);color:var(--color-text-muted, currentColor);font-size:var(--font-size-sm, .875rem)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }, { type: i0.Output, args: ["selectedIdsChange"] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], showIndentGuides: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndentGuides", required: false }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], nodeActivate: [{ type: i0.Output, args: ["nodeActivate"] }], nodeToggle: [{ type: i0.Output, args: ["nodeToggle"] }], nodeFocus: [{ type: i0.Output, args: ["nodeFocus"] }], loadChildren: [{ type: i0.Output, args: ["loadChildren"] }], nodeContent: [{ type: i0.ContentChild, args: ['nodeContent', { isSignal: true }] }], nodeActions: [{ type: i0.ContentChild, args: ['nodeActions', { isSignal: true }] }], nodeWarning: [{ type: i0.ContentChild, args: ['nodeWarning', { isSignal: true }] }], emptySlot: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }] } });
+/** Minimal HTML escaper for the default label renderer. */
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/** Escape an arbitrary id for safe use inside a `[data-tree-id="…"]` attribute selector. */
+function cssEscape(value) {
+    if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+        return CSS.escape(value);
+    }
+    return value.replace(/(["\\])/g, '\\$1');
+}
+
+/**
+ * Test harness for {@link AfTreeComponent}.
+ *
+ * Wraps the rendered DOM behind a semantic API so specs and host apps can
+ * navigate the tree without coupling to internal CSS class names.
+ *
+ * @example
+ * const harness = new AfTreeHarness(fixture.nativeElement);
+ * harness.getNode('root').focus();
+ * harness.pressKey('ArrowDown');
+ * expect(harness.focusedId()).toBe('child-1');
+ */
+class AfTreeHarness {
+    hostEl;
+    constructor(container) {
+        const el = container.querySelector('af-tree');
+        if (!el) {
+            throw new Error('AfTreeHarness: af-tree element not found in container.');
+        }
+        this.hostEl = el;
+    }
+    /** Container `<ul role="tree">` element. */
+    getRootElement() {
+        return this.hostEl.querySelector(':scope > ul.ct-tree');
+    }
+    /** Returns harnesses for every visible (rendered) treeitem in document order. */
+    getVisibleNodes() {
+        const lis = Array.from(this.hostEl.querySelectorAll('li.ct-tree__node'));
+        return lis.map((li) => new AfTreeNodeHarness(li));
+    }
+    /** Returns the harness for the node with the given id, or null when not rendered. */
+    getNode(id) {
+        const li = this.hostEl.querySelector(`li.ct-tree__node[data-tree-id="${cssAttrEscape(id)}"]`);
+        return li ? new AfTreeNodeHarness(li) : null;
+    }
+    /** Id of the currently focused node (the one whose `<li>` carries `tabindex=0`). */
+    focusedId() {
+        const li = this.hostEl.querySelector('li.ct-tree__node[tabindex="0"]');
+        return li?.getAttribute('data-tree-id') ?? null;
+    }
+    /** Dispatches a keydown on the focused row (or first row if none focused). */
+    pressKey(key) {
+        const target = this.hostEl.querySelector('li.ct-tree__node[tabindex="0"]') ??
+            this.hostEl.querySelector('li.ct-tree__node');
+        target?.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
+    }
+    /** Returns whether `aria-multiselectable` is set on the root list. */
+    isMultiselectable() {
+        return this.getRootElement()?.getAttribute('aria-multiselectable') === 'true';
+    }
+    /** Returns the `aria-label` of the root list. */
+    getAriaLabel() {
+        return this.getRootElement()?.getAttribute('aria-label') ?? null;
+    }
+    /** True when the empty-state is rendered (no rows visible). */
+    isEmpty() {
+        return !this.getRootElement();
+    }
+}
+/** Test harness for a single `<li role="treeitem">` rendered by `af-tree`. */
+class AfTreeNodeHarness {
+    liEl;
+    constructor(liEl) {
+        this.liEl = liEl;
+    }
+    /** Stable id of the node (mirrors `TreeNode.id`). */
+    getId() {
+        return this.liEl.getAttribute('data-tree-id') ?? '';
+    }
+    /** Trimmed label text of the node. */
+    getLabel() {
+        const content = this.liEl.querySelector(':scope > .ct-tree__row .ct-tree__content');
+        return (content?.textContent ?? '').trim();
+    }
+    /** 1-based depth of the node. */
+    getLevel() {
+        return Number(this.liEl.getAttribute('aria-level') ?? '0');
+    }
+    isExpanded() {
+        return this.liEl.getAttribute('aria-expanded') === 'true';
+    }
+    isExpandable() {
+        return this.liEl.hasAttribute('aria-expanded');
+    }
+    isSelected() {
+        return this.liEl.getAttribute('aria-selected') === 'true';
+    }
+    isDisabled() {
+        return this.liEl.getAttribute('aria-disabled') === 'true';
+    }
+    isBusy() {
+        return this.liEl.getAttribute('aria-busy') === 'true';
+    }
+    isFocused() {
+        return this.liEl.getAttribute('tabindex') === '0';
+    }
+    /** Programmatically focus the row's `<li>` element. */
+    focus() {
+        this.liEl.focus();
+    }
+    /** Click the row (centre area, not the toggle / actions). */
+    clickRow() {
+        const row = this.liEl.querySelector(':scope > .ct-tree__row .ct-tree__content');
+        row?.click();
+    }
+    /** Click the chevron toggle button. */
+    clickToggle() {
+        const toggle = this.liEl.querySelector(':scope > .ct-tree__row .ct-tree__toggle');
+        toggle?.click();
+    }
+    /** Return the underlying `<li>` element for advanced assertions. */
+    getElement() {
+        return this.liEl;
+    }
+}
+/** Escape characters that would break a `[attr="…"]` selector. */
+function cssAttrEscape(value) {
+    if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+        return CSS.escape(value);
+    }
+    return value.replace(/(["\\])/g, '\\$1');
+}
+
 // Components
 
 /**
@@ -10132,5 +11341,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AF_ACCORDION_I18N, AF_ALERT_I18N, AF_INPUT_I18N, AF_SELECT_MENU_I18N, AfAccordionComponent, AfAccordionHarness, AfAccordionItemComponent, AfAccordionItemHarness, AfAlertComponent, AfAlertHarness, AfAppShellComponent, AfAppShellPageHeaderComponent, AfAppShellV2Component, AfAppShellV2ToolbarComponent, AfAvatarComponent, AfBadgeComponent, AfBadgeHarness, AfBannerComponent, AfBreadcrumbsComponent, AfButtonComponent, AfButtonHarness, AfCardComponent, AfCellDefDirective, AfCheckboxComponent, AfChipComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfIconComponent, AfInputComponent, AfInputHarness, AfModalComponent, AfNavItemComponent, AfNavTabsComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfRadioGroupComponent, AfSelectComponent, AfSelectMenuComponent, AfSelectMenuHarness, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective };
+export { AF_ACCORDION_I18N, AF_ALERT_I18N, AF_INPUT_I18N, AF_SELECT_I18N, AF_SELECT_MENU_I18N, AF_TREE_I18N, AVATAR_SEED_PALETTE_SIZE, AfAccordionComponent, AfAccordionHarness, AfAccordionItemComponent, AfAccordionItemHarness, AfAlertComponent, AfAlertHarness, AfAppShellComponent, AfAppShellPageHeaderComponent, AfAppShellV2Component, AfAppShellV2ToolbarComponent, AfAvatarComponent, AfBadgeComponent, AfBadgeHarness, AfBannerComponent, AfBreadcrumbsComponent, AfButtonComponent, AfButtonHarness, AfCardComponent, AfCellDefDirective, AfCheckboxComponent, AfChipComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfIconComponent, AfInputComponent, AfInputHarness, AfModalComponent, AfNavItemComponent, AfNavTabsComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfRadioGroupComponent, AfSelectComponent, AfSelectHarness, AfSelectMenuComponent, AfSelectMenuHarness, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective, AfTreeComponent, AfTreeHarness, AfTreeNodeHarness };
 //# sourceMappingURL=neuravision-ng-construct.mjs.map