npm - @truenas/ui-components - Versions diffs - 0.3.20 → 0.3.22 - Mend

@truenas/ui-components 0.3.20 → 0.3.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/truenas-ui-components.mjs +995 -57
package/fesm2022/truenas-ui-components.mjs.map +1 -1
package/package.json +1 -1
package/types/truenas-ui-components.d.ts +562 -25

package/fesm2022/truenas-ui-components.mjs CHANGED Viewed

@@ -1,19 +1,19 @@
 import { Overlay, OverlayPositionBuilder, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, Injector, InjectionToken, Renderer2, ElementRef, effect, Directive, ViewContainerRef, output, viewChild, signal, untracked, isDevMode, forwardRef, model, afterNextRender, Injectable, contentChildren, Pipe, HostListener, linkedSignal, contentChild, TemplateRef, ChangeDetectorRef, DestroyRef, isSignal, IterableDiffers, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
+import { InjectionToken, inject, computed, input, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, Renderer2, ElementRef, effect, Directive, ViewContainerRef, output, viewChild, signal, untracked, isDevMode, forwardRef, model, afterNextRender, Injectable, contentChildren, Pipe, HostListener, linkedSignal, contentChild, TemplateRef, ChangeDetectorRef, DestroyRef, isSignal, IterableDiffers, booleanAttribute, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
 import * as i1$3 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule, Validators } from '@angular/forms';
 import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
 import * as i1 from '@angular/cdk/a11y';
 import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
 import * as i1$2 from '@angular/common';
-import { DOCUMENT, NgTemplateOutlet, CommonModule, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet, CommonModule, AsyncPipe, isPlatformBrowser } from '@angular/common';
 import { mdiCheckCircle, mdiAlertCircle, mdiAlert, mdiInformation, mdiOpenInNew, mdiHelpCircle, mdiDotsVertical, mdiClose, mdiFolderOpen, mdiLock, mdiLoading, mdiFolderPlus, mdiFolderNetwork, mdiHarddisk, mdiDatabase, mdiFile, mdiFolder } from '@mdi/js';
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
-import { firstValueFrom, BehaviorSubject, merge, Subject, take } from 'rxjs';
+import { firstValueFrom, BehaviorSubject, merge, animationFrameScheduler, asapScheduler, Subject, take } from 'rxjs';
 import { RouterLink } from '@angular/router';
 import { filesize } from 'filesize';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
@@ -23,11 +23,34 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { SelectionModel, DataSource } from '@angular/cdk/collections';
 import * as i2 from '@angular/cdk/tree';
-import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet, CdkNestedTreeNode } from '@angular/cdk/tree';
+import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet, CdkNestedTreeNode, CdkTreeNodeOutletContext } from '@angular/cdk/tree';
 export { FlatTreeControl } from '@angular/cdk/tree';
-import { map } from 'rxjs/operators';
+import { map, auditTime } from 'rxjs/operators';
+import { CdkVirtualScrollViewport, CdkVirtualScrollableWindow, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
-import { ScrollingModule } from '@angular/cdk/scrolling';
+/** DI token under which `tn-form-field` exposes its {@link TnFormFieldContext}. */
+const TN_FORM_FIELD_CONTEXT = new InjectionToken('TN_FORM_FIELD_CONTEXT');
+/**
+ * Wires a form control to an enclosing `tn-form-field`'s accessibility context.
+ * Must be called in an injection context (field initializer or constructor).
+ *
+ * Standalone usage (no enclosing field) yields all-`null` signals, so the
+ * attribute bindings simply render nothing.
+ *
+ * @param ariaLabel The control's own explicit accessible-name input, when it has
+ *   one. While set, it wins: `labelledby` goes `null` so the explicit
+ *   `aria-label` is what assistive tech announces.
+ */
+function injectTnFormFieldAria(ariaLabel) {
+    const field = inject(TN_FORM_FIELD_CONTEXT, { optional: true });
+    return {
+        labelledby: computed(() => (ariaLabel?.() ? null : field?.labelId() ?? null)),
+        describedby: computed(() => field?.describedBy() ?? null),
+        invalid: computed(() => (field?.errorState() ? true : null)),
+        required: computed(() => (field?.requiredState() ? true : null)),
+    };
+}
 class TnSpinnerComponent {
     mode = input('indeterminate', ...(ngDevMode ? [{ debugName: "mode" }] : []));
@@ -318,13 +341,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnTestId", required: false }] }], tnTestIdType: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnTestIdType", required: false }] }] } });
-let nextId$2 = 0;
+let nextId$3 = 0;
 class TnAutocompleteComponent {
     elementRef = inject(ElementRef);
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
     /** Unique instance ID for ARIA linkage */
-    uid = `tn-autocomplete-${nextId$2++}`;
+    uid = `tn-autocomplete-${nextId$3++}`;
     /**
      * All available options. The `label` is displayed; the `value` is committed
      * to the form control. A written value is resolved back to its option's
@@ -379,8 +402,21 @@ class TnAutocompleteComponent {
      * custom property so it can also be themed in CSS.
      */
     panelMaxHeight = input('320px', ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : []));
+    /**
+     * Explicit accessible name for the text field. Inside a `tn-form-field` the
+     * field's label is associated automatically (via `aria-labelledby`), so leave
+     * this unset there unless the announced name must differ from the visible
+     * label — when set, it wins. Standalone without either, the input has no
+     * accessible name (the placeholder is not one).
+     */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     /** Test ID attribute */
     testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
+    /**
+     * ARIA wiring from an enclosing `tn-form-field` (label, error/hint,
+     * invalid, required). All-null when standalone or when `ariaLabel` overrides.
+     */
+    fieldAria = injectTnFormFieldAria(this.ariaLabel);
     /** Emits the full option (label + value) when one is selected */
     optionSelected = output();
     /**
@@ -885,13 +921,13 @@ class TnAutocompleteComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnAutocompleteComponent, isStandalone: true, selector: "tn-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requireSelection: { classPropertyName: "requireSelection", publicName: "requireSelection", isSignal: true, isRequired: false, transformFunction: null }, allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", searchChange: "searchChange", loadMore: "loadMore", opened: "opened" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnAutocompleteComponent, isStandalone: true, selector: "tn-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requireSelection: { classPropertyName: "requireSelection", publicName: "requireSelection", isSignal: true, isRequired: false, transformFunction: null }, allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", searchChange: "searchChange", loadMore: "loadMore", opened: "opened" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnAutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-autocomplete\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    tnTestIdType=\"autocomplete\"\n    autocomplete=\"off\"\n    [tnTestId]=\"testId()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-owns]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. Attach/detach (driven by open()/close()) controls\n     visibility; the input keeps DOM focus throughout. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-autocomplete__dropdown\"\n    [style.--tn-autocomplete-panel-max-height]=\"panelMaxHeightValue()\"\n    (scroll)=\"onPanelScroll($event)\">\n\n    <!-- Per ARIA, a listbox may only contain option/group children, so the\n         loading and no-results rows live OUTSIDE it as live-region siblings.\n         The listbox itself stays rendered (possibly empty) the whole time the\n         panel is open, so the input's aria-controls always points at a real\n         element \u2014 including the loading-with-no-results-yet state. -->\n    <div role=\"listbox\" [attr.id]=\"uid + '-dropdown'\" [attr.aria-busy]=\"loading() ? true : null\">\n      @if (hasResults()) {\n        @for (option of filteredOptions(); track $index) {\n          <div\n            class=\"tn-autocomplete__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            [class.highlighted]=\"highlightedIndex() === $index\"\n            [class.disabled]=\"option.disabled\"\n            [attr.id]=\"uid + '-option-' + $index\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\">\n            {{ option.label }}\n          </div>\n        }\n      }\n    </div>\n\n    <div role=\"status\">\n      @if (loading()) {\n        <div class=\"tn-autocomplete__loading\">\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"loadingText()\" />\n          <span>{{ loadingText() }}</span>\n        </div>\n      } @else if (!hasResults()) {\n        <div class=\"tn-autocomplete__no-results\">\n          {{ noResultsText() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:var(--tn-autocomplete-panel-max-height, 320px);overflow-y:auto;padding:.25rem 0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}.tn-autocomplete__loading{align-items:center;color:var(--tn-fg2, #6c757d);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem}\n"], dependencies: [{ kind: "component", type: TnSpinnerComponent, selector: "tn-spinner", inputs: ["mode", "value", "diameter", "strokeWidth", "ariaLabel", "ariaLabelledby"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-autocomplete\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    tnTestIdType=\"autocomplete\"\n    autocomplete=\"off\"\n    [tnTestId]=\"testId()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n    [attr.aria-describedby]=\"fieldAria.describedby()\"\n    [attr.aria-invalid]=\"fieldAria.invalid()\"\n    [attr.aria-required]=\"fieldAria.required()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-owns]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. Attach/detach (driven by open()/close()) controls\n     visibility; the input keeps DOM focus throughout. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-autocomplete__dropdown\"\n    [style.--tn-autocomplete-panel-max-height]=\"panelMaxHeightValue()\"\n    (scroll)=\"onPanelScroll($event)\">\n\n    <!-- Per ARIA, a listbox may only contain option/group children, so the\n         loading and no-results rows live OUTSIDE it as live-region siblings.\n         The listbox itself stays rendered (possibly empty) the whole time the\n         panel is open, so the input's aria-controls always points at a real\n         element \u2014 including the loading-with-no-results-yet state. -->\n    <div role=\"listbox\" [attr.id]=\"uid + '-dropdown'\" [attr.aria-busy]=\"loading() ? true : null\">\n      @if (hasResults()) {\n        @for (option of filteredOptions(); track $index) {\n          <div\n            class=\"tn-autocomplete__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            [class.highlighted]=\"highlightedIndex() === $index\"\n            [class.disabled]=\"option.disabled\"\n            [attr.id]=\"uid + '-option-' + $index\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\">\n            {{ option.label }}\n          </div>\n        }\n      }\n    </div>\n\n    <div role=\"status\">\n      @if (loading()) {\n        <div class=\"tn-autocomplete__loading\">\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"loadingText()\" />\n          <span>{{ loadingText() }}</span>\n        </div>\n      } @else if (!hasResults()) {\n        <div class=\"tn-autocomplete__no-results\">\n          {{ noResultsText() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:var(--tn-autocomplete-panel-max-height, 320px);overflow-y:auto;padding:.25rem 0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}.tn-autocomplete__loading{align-items:center;color:var(--tn-fg2, #6c757d);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem}\n"], dependencies: [{ kind: "component", type: TnSpinnerComponent, selector: "tn-spinner", inputs: ["mode", "value", "diameter", "strokeWidth", "ariaLabel", "ariaLabelledby"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnAutocompleteComponent, decorators: [{
             type: Component,
@@ -901,8 +937,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             useExisting: forwardRef(() => TnAutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"tn-autocomplete\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    tnTestIdType=\"autocomplete\"\n    autocomplete=\"off\"\n    [tnTestId]=\"testId()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-owns]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. Attach/detach (driven by open()/close()) controls\n     visibility; the input keeps DOM focus throughout. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-autocomplete__dropdown\"\n    [style.--tn-autocomplete-panel-max-height]=\"panelMaxHeightValue()\"\n    (scroll)=\"onPanelScroll($event)\">\n\n    <!-- Per ARIA, a listbox may only contain option/group children, so the\n         loading and no-results rows live OUTSIDE it as live-region siblings.\n         The listbox itself stays rendered (possibly empty) the whole time the\n         panel is open, so the input's aria-controls always points at a real\n         element \u2014 including the loading-with-no-results-yet state. -->\n    <div role=\"listbox\" [attr.id]=\"uid + '-dropdown'\" [attr.aria-busy]=\"loading() ? true : null\">\n      @if (hasResults()) {\n        @for (option of filteredOptions(); track $index) {\n          <div\n            class=\"tn-autocomplete__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            [class.highlighted]=\"highlightedIndex() === $index\"\n            [class.disabled]=\"option.disabled\"\n            [attr.id]=\"uid + '-option-' + $index\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\">\n            {{ option.label }}\n          </div>\n        }\n      }\n    </div>\n\n    <div role=\"status\">\n      @if (loading()) {\n        <div class=\"tn-autocomplete__loading\">\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"loadingText()\" />\n          <span>{{ loadingText() }}</span>\n        </div>\n      } @else if (!hasResults()) {\n        <div class=\"tn-autocomplete__no-results\">\n          {{ noResultsText() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:var(--tn-autocomplete-panel-max-height, 320px);overflow-y:auto;padding:.25rem 0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}.tn-autocomplete__loading{align-items:center;color:var(--tn-fg2, #6c757d);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requireSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSelection", required: false }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], opened: [{ type: i0.Output, args: ["opened"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
+                    ], template: "<div class=\"tn-autocomplete\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    tnTestIdType=\"autocomplete\"\n    autocomplete=\"off\"\n    [tnTestId]=\"testId()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n    [attr.aria-describedby]=\"fieldAria.describedby()\"\n    [attr.aria-invalid]=\"fieldAria.invalid()\"\n    [attr.aria-required]=\"fieldAria.required()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-owns]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. Attach/detach (driven by open()/close()) controls\n     visibility; the input keeps DOM focus throughout. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-autocomplete__dropdown\"\n    [style.--tn-autocomplete-panel-max-height]=\"panelMaxHeightValue()\"\n    (scroll)=\"onPanelScroll($event)\">\n\n    <!-- Per ARIA, a listbox may only contain option/group children, so the\n         loading and no-results rows live OUTSIDE it as live-region siblings.\n         The listbox itself stays rendered (possibly empty) the whole time the\n         panel is open, so the input's aria-controls always points at a real\n         element \u2014 including the loading-with-no-results-yet state. -->\n    <div role=\"listbox\" [attr.id]=\"uid + '-dropdown'\" [attr.aria-busy]=\"loading() ? true : null\">\n      @if (hasResults()) {\n        @for (option of filteredOptions(); track $index) {\n          <div\n            class=\"tn-autocomplete__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            [class.highlighted]=\"highlightedIndex() === $index\"\n            [class.disabled]=\"option.disabled\"\n            [attr.id]=\"uid + '-option-' + $index\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\">\n            {{ option.label }}\n          </div>\n        }\n      }\n    </div>\n\n    <div role=\"status\">\n      @if (loading()) {\n        <div class=\"tn-autocomplete__loading\">\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"loadingText()\" />\n          <span>{{ loadingText() }}</span>\n        </div>\n      } @else if (!hasResults()) {\n        <div class=\"tn-autocomplete__no-results\">\n          {{ noResultsText() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:var(--tn-autocomplete-panel-max-height, 320px);overflow-y:auto;padding:.25rem 0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}.tn-autocomplete__loading{align-items:center;color:var(--tn-fg2, #6c757d);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requireSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSelection", required: false }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], opened: [{ type: i0.Output, args: ["opened"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
 /**
  * Harness for interacting with tn-autocomplete in tests.
@@ -3356,7 +3392,7 @@ function unitExponent(unit) {
 // Module-level counter for deterministic, unique instance ids (matches the
 // tn-autocomplete convention). Deterministic ids are SSR/hydration-safe and
 // stable across snapshots, unlike a Math.random() seed.
-let nextId$1 = 0;
+let nextId$2 = 0;
 class TnInputComponent {
     inputEl = viewChild.required('inputEl');
     inputType = input(InputType.PlainText, ...(ngDevMode ? [{ debugName: "inputType" }] : []));
@@ -3368,13 +3404,18 @@ class TnInputComponent {
     multiline = input(false, ...(ngDevMode ? [{ debugName: "multiline" }] : []));
     rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : []));
     /**
-     * Accessible name for the control. Rendered as `aria-label` on the input/textarea.
-     *
-     * Leave unset when the input is wrapped in a `tn-form-field` (or otherwise has a
-     * visible `<label>`); set it for standalone usage so the control isn't unnamed in
-     * the a11y tree.
+     * Explicit accessible name for the control. Rendered as `aria-label` on the
+     * input/textarea. Inside a `tn-form-field` the field's label is associated
+     * automatically (via `aria-labelledby`), so leave this unset there unless the
+     * announced name must differ from the visible label — when set, it wins. Set
+     * it for standalone usage so the control isn't unnamed in the a11y tree.
      */
     ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * ARIA wiring from an enclosing `tn-form-field` (label, error/hint,
+     * invalid, required). All-null when standalone or when `ariaLabel` overrides.
+     */
+    fieldAria = injectTnFormFieldAria(this.ariaLabel);
     /**
      * Native `autocomplete` hint rendered on the input/textarea. Pass the standard
      * autofill tokens (`'username'`, `'current-password'`, `'new-password'`,
@@ -3522,7 +3563,7 @@ class TnInputComponent {
     // Unique per instance: a hard-coded id produced duplicate ids when multiple
     // tn-inputs share a page (invalid HTML, and it breaks any future label `for=`,
     // aria-describedby, or getElementById targeting this input).
-    id = `tn-input-${nextId$1++}`;
+    id = `tn-input-${nextId$2++}`;
     // Protected: the display string is owned by the component and driven through the
     // CVA flow (writeValue / onValueChange). External writes would bypass that flow.
     // A signal so the `[value]` binding reflects writeValue reactively — a plain field
@@ -3666,7 +3707,7 @@ class TnInputComponent {
                 useExisting: forwardRef(() => TnInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"tn-input-container\"\n  [class.tn-input-container--has-prefix]=\"hasPrefixIcon()\"\n  [class.tn-input-container--has-suffix]=\"hasSuffixIcon() || hasPasswordToggle()\"\n>\n  <!-- Prefix icon -->\n  @if (hasPrefixIcon()) {\n    <tn-icon\n      class=\"tn-input__prefix-icon\"\n      size=\"sm\"\n      aria-hidden=\"true\"\n      [name]=\"prefixIcon()!\"\n      [library]=\"prefixIconLibrary()\"\n    />\n  }\n\n  <!-- Regular input field -->\n  @if (!showTextarea()) {\n    <input\n      #inputEl\n      class=\"tn-input\"\n      tnTestIdType=\"input\"\n      [id]=\"id\"\n      [value]=\"value()\"\n      [type]=\"resolvedType()\"\n      [attr.inputmode]=\"numericInputMode()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.name]=\"name()\"\n      [tnTestId]=\"resolvedTestId()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n\n  <!-- Textarea field -->\n  @if (showTextarea()) {\n    <textarea\n      #inputEl\n      class=\"tn-input tn-textarea\"\n      tnTestIdType=\"textarea\"\n      [id]=\"id\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.name]=\"name()\"\n      [tnTestId]=\"resolvedTestId()\"\n      [rows]=\"rows()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    ></textarea>\n  }\n\n  <!-- Suffix icon action button -->\n  @if (hasSuffixIcon()) {\n    <button\n      type=\"button\"\n      class=\"tn-input__suffix-action\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"suffixActionTestId()\"\n      [attr.aria-label]=\"suffixIconAriaLabel()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onSuffixAction.emit($event)\"\n    >\n      <tn-icon\n        size=\"sm\"\n        [name]=\"suffixIcon()!\"\n        [library]=\"suffixIconLibrary()\"\n      />\n    </button>\n  }\n\n  <!-- Password visibility toggle. State is conveyed via the swapping\n       aria-label alone \u2014 no aria-pressed, which would contradict a label that\n       already names the action (\"Hide password, pressed\" is ambiguous). -->\n  @if (hasPasswordToggle()) {\n    <button\n      type=\"button\"\n      class=\"tn-input__visibility-toggle\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"passwordToggleTestId()\"\n      [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"togglePasswordVisibility()\"\n    >\n      <tn-icon size=\"sm\" aria-hidden=\"true\" [name]=\"passwordToggleIcon()\" />\n    </button>\n  }\n</div>\n", styles: [".tn-input-container{position:relative;display:flex;align-items:center;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-input-container:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-input-container:has(.tn-input:disabled){background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-input-container:has(.tn-input.error){border-color:var(--tn-error, #dc3545)}.tn-input-container:has(.tn-input.error):focus-within{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-input{display:block;flex:1;min-width:0;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;border-radius:.375rem;outline:none;box-sizing:border-box}.tn-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-input:disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed}.tn-input-container--has-prefix .tn-input{padding-left:.75rem;border-left:1px solid var(--tn-lines, #d1d5db);border-top-left-radius:0;border-bottom-left-radius:0}.tn-input-container--has-suffix .tn-input{padding-right:.25rem}.tn-input__prefix-icon{flex-shrink:0;margin-left:.75rem;margin-right:.75rem;color:var(--tn-fg2, #6c757d);pointer-events:none}.tn-input__suffix-action,.tn-input__visibility-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:.375rem;padding:.25rem;border:none;border-radius:.25rem;background:transparent;color:var(--tn-fg2, #6c757d);cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out}.tn-input__suffix-action:hover:not(:disabled),.tn-input__visibility-toggle:hover:not(:disabled){background-color:var(--tn-bg3, #f3f4f6);color:var(--tn-fg1, #1f2937)}.tn-input__suffix-action:focus-visible,.tn-input__visibility-toggle:focus-visible{outline:2px solid var(--tn-primary, #2563eb);outline-offset:1px}.tn-input__suffix-action:disabled,.tn-input__visibility-toggle:disabled{cursor:not-allowed;pointer-events:none}.tn-textarea{min-height:6rem;resize:vertical;line-height:1.4}@media(prefers-reduced-motion:reduce){.tn-input-container,.tn-input__suffix-action,.tn-input__visibility-toggle{transition:none}}@media(prefers-contrast:high){.tn-input-container{border-width:2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"tn-input-container\"\n  [class.tn-input-container--has-prefix]=\"hasPrefixIcon()\"\n  [class.tn-input-container--has-suffix]=\"hasSuffixIcon() || hasPasswordToggle()\"\n>\n  <!-- Prefix icon -->\n  @if (hasPrefixIcon()) {\n    <tn-icon\n      class=\"tn-input__prefix-icon\"\n      size=\"sm\"\n      aria-hidden=\"true\"\n      [name]=\"prefixIcon()!\"\n      [library]=\"prefixIconLibrary()\"\n    />\n  }\n\n  <!-- Regular input field -->\n  @if (!showTextarea()) {\n    <input\n      #inputEl\n      class=\"tn-input\"\n      tnTestIdType=\"input\"\n      [id]=\"id\"\n      [value]=\"value()\"\n      [type]=\"resolvedType()\"\n      [attr.inputmode]=\"numericInputMode()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n      [attr.aria-describedby]=\"fieldAria.describedby()\"\n      [attr.aria-invalid]=\"fieldAria.invalid()\"\n      [attr.aria-required]=\"fieldAria.required()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.name]=\"name()\"\n      [tnTestId]=\"resolvedTestId()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n\n  <!-- Textarea field -->\n  @if (showTextarea()) {\n    <textarea\n      #inputEl\n      class=\"tn-input tn-textarea\"\n      tnTestIdType=\"textarea\"\n      [id]=\"id\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n      [attr.aria-describedby]=\"fieldAria.describedby()\"\n      [attr.aria-invalid]=\"fieldAria.invalid()\"\n      [attr.aria-required]=\"fieldAria.required()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.name]=\"name()\"\n      [tnTestId]=\"resolvedTestId()\"\n      [rows]=\"rows()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    ></textarea>\n  }\n\n  <!-- Suffix icon action button -->\n  @if (hasSuffixIcon()) {\n    <button\n      type=\"button\"\n      class=\"tn-input__suffix-action\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"suffixActionTestId()\"\n      [attr.aria-label]=\"suffixIconAriaLabel()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onSuffixAction.emit($event)\"\n    >\n      <tn-icon\n        size=\"sm\"\n        [name]=\"suffixIcon()!\"\n        [library]=\"suffixIconLibrary()\"\n      />\n    </button>\n  }\n\n  <!-- Password visibility toggle. State is conveyed via the swapping\n       aria-label alone \u2014 no aria-pressed, which would contradict a label that\n       already names the action (\"Hide password, pressed\" is ambiguous). -->\n  @if (hasPasswordToggle()) {\n    <button\n      type=\"button\"\n      class=\"tn-input__visibility-toggle\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"passwordToggleTestId()\"\n      [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"togglePasswordVisibility()\"\n    >\n      <tn-icon size=\"sm\" aria-hidden=\"true\" [name]=\"passwordToggleIcon()\" />\n    </button>\n  }\n</div>\n", styles: [".tn-input-container{position:relative;display:flex;align-items:center;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-input-container:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-input-container:has(.tn-input:disabled){background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-input-container:has(.tn-input.error){border-color:var(--tn-error, #dc3545)}.tn-input-container:has(.tn-input.error):focus-within{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-input{display:block;flex:1;min-width:0;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;border-radius:.375rem;outline:none;box-sizing:border-box}.tn-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-input:disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed}.tn-input-container--has-prefix .tn-input{padding-left:.75rem;border-left:1px solid var(--tn-lines, #d1d5db);border-top-left-radius:0;border-bottom-left-radius:0}.tn-input-container--has-suffix .tn-input{padding-right:.25rem}.tn-input__prefix-icon{flex-shrink:0;margin-left:.75rem;margin-right:.75rem;color:var(--tn-fg2, #6c757d);pointer-events:none}.tn-input__suffix-action,.tn-input__visibility-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:.375rem;padding:.25rem;border:none;border-radius:.25rem;background:transparent;color:var(--tn-fg2, #6c757d);cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out}.tn-input__suffix-action:hover:not(:disabled),.tn-input__visibility-toggle:hover:not(:disabled){background-color:var(--tn-bg3, #f3f4f6);color:var(--tn-fg1, #1f2937)}.tn-input__suffix-action:focus-visible,.tn-input__visibility-toggle:focus-visible{outline:2px solid var(--tn-primary, #2563eb);outline-offset:1px}.tn-input__suffix-action:disabled,.tn-input__visibility-toggle:disabled{cursor:not-allowed;pointer-events:none}.tn-textarea{min-height:6rem;resize:vertical;line-height:1.4}@media(prefers-reduced-motion:reduce){.tn-input-container,.tn-input__suffix-action,.tn-input__visibility-toggle{transition:none}}@media(prefers-contrast:high){.tn-input-container{border-width:2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnInputComponent, decorators: [{
             type: Component,
@@ -3676,7 +3717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             useExisting: forwardRef(() => TnInputComponent),
                             multi: true
                         }
-                    ], template: "<div\n  class=\"tn-input-container\"\n  [class.tn-input-container--has-prefix]=\"hasPrefixIcon()\"\n  [class.tn-input-container--has-suffix]=\"hasSuffixIcon() || hasPasswordToggle()\"\n>\n  <!-- Prefix icon -->\n  @if (hasPrefixIcon()) {\n    <tn-icon\n      class=\"tn-input__prefix-icon\"\n      size=\"sm\"\n      aria-hidden=\"true\"\n      [name]=\"prefixIcon()!\"\n      [library]=\"prefixIconLibrary()\"\n    />\n  }\n\n  <!-- Regular input field -->\n  @if (!showTextarea()) {\n    <input\n      #inputEl\n      class=\"tn-input\"\n      tnTestIdType=\"input\"\n      [id]=\"id\"\n      [value]=\"value()\"\n      [type]=\"resolvedType()\"\n      [attr.inputmode]=\"numericInputMode()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.name]=\"name()\"\n      [tnTestId]=\"resolvedTestId()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n\n  <!-- Textarea field -->\n  @if (showTextarea()) {\n    <textarea\n      #inputEl\n      class=\"tn-input tn-textarea\"\n      tnTestIdType=\"textarea\"\n      [id]=\"id\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.name]=\"name()\"\n      [tnTestId]=\"resolvedTestId()\"\n      [rows]=\"rows()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    ></textarea>\n  }\n\n  <!-- Suffix icon action button -->\n  @if (hasSuffixIcon()) {\n    <button\n      type=\"button\"\n      class=\"tn-input__suffix-action\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"suffixActionTestId()\"\n      [attr.aria-label]=\"suffixIconAriaLabel()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onSuffixAction.emit($event)\"\n    >\n      <tn-icon\n        size=\"sm\"\n        [name]=\"suffixIcon()!\"\n        [library]=\"suffixIconLibrary()\"\n      />\n    </button>\n  }\n\n  <!-- Password visibility toggle. State is conveyed via the swapping\n       aria-label alone \u2014 no aria-pressed, which would contradict a label that\n       already names the action (\"Hide password, pressed\" is ambiguous). -->\n  @if (hasPasswordToggle()) {\n    <button\n      type=\"button\"\n      class=\"tn-input__visibility-toggle\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"passwordToggleTestId()\"\n      [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"togglePasswordVisibility()\"\n    >\n      <tn-icon size=\"sm\" aria-hidden=\"true\" [name]=\"passwordToggleIcon()\" />\n    </button>\n  }\n</div>\n", styles: [".tn-input-container{position:relative;display:flex;align-items:center;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-input-container:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-input-container:has(.tn-input:disabled){background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-input-container:has(.tn-input.error){border-color:var(--tn-error, #dc3545)}.tn-input-container:has(.tn-input.error):focus-within{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-input{display:block;flex:1;min-width:0;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;border-radius:.375rem;outline:none;box-sizing:border-box}.tn-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-input:disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed}.tn-input-container--has-prefix .tn-input{padding-left:.75rem;border-left:1px solid var(--tn-lines, #d1d5db);border-top-left-radius:0;border-bottom-left-radius:0}.tn-input-container--has-suffix .tn-input{padding-right:.25rem}.tn-input__prefix-icon{flex-shrink:0;margin-left:.75rem;margin-right:.75rem;color:var(--tn-fg2, #6c757d);pointer-events:none}.tn-input__suffix-action,.tn-input__visibility-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:.375rem;padding:.25rem;border:none;border-radius:.25rem;background:transparent;color:var(--tn-fg2, #6c757d);cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out}.tn-input__suffix-action:hover:not(:disabled),.tn-input__visibility-toggle:hover:not(:disabled){background-color:var(--tn-bg3, #f3f4f6);color:var(--tn-fg1, #1f2937)}.tn-input__suffix-action:focus-visible,.tn-input__visibility-toggle:focus-visible{outline:2px solid var(--tn-primary, #2563eb);outline-offset:1px}.tn-input__suffix-action:disabled,.tn-input__visibility-toggle:disabled{cursor:not-allowed;pointer-events:none}.tn-textarea{min-height:6rem;resize:vertical;line-height:1.4}@media(prefers-reduced-motion:reduce){.tn-input-container,.tn-input__suffix-action,.tn-input__visibility-toggle{transition:none}}@media(prefers-contrast:high){.tn-input-container{border-width:2px}}\n"] }]
+                    ], template: "<div\n  class=\"tn-input-container\"\n  [class.tn-input-container--has-prefix]=\"hasPrefixIcon()\"\n  [class.tn-input-container--has-suffix]=\"hasSuffixIcon() || hasPasswordToggle()\"\n>\n  <!-- Prefix icon -->\n  @if (hasPrefixIcon()) {\n    <tn-icon\n      class=\"tn-input__prefix-icon\"\n      size=\"sm\"\n      aria-hidden=\"true\"\n      [name]=\"prefixIcon()!\"\n      [library]=\"prefixIconLibrary()\"\n    />\n  }\n\n  <!-- Regular input field -->\n  @if (!showTextarea()) {\n    <input\n      #inputEl\n      class=\"tn-input\"\n      tnTestIdType=\"input\"\n      [id]=\"id\"\n      [value]=\"value()\"\n      [type]=\"resolvedType()\"\n      [attr.inputmode]=\"numericInputMode()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n      [attr.aria-describedby]=\"fieldAria.describedby()\"\n      [attr.aria-invalid]=\"fieldAria.invalid()\"\n      [attr.aria-required]=\"fieldAria.required()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.name]=\"name()\"\n      [tnTestId]=\"resolvedTestId()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n\n  <!-- Textarea field -->\n  @if (showTextarea()) {\n    <textarea\n      #inputEl\n      class=\"tn-input tn-textarea\"\n      tnTestIdType=\"textarea\"\n      [id]=\"id\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n      [attr.aria-describedby]=\"fieldAria.describedby()\"\n      [attr.aria-invalid]=\"fieldAria.invalid()\"\n      [attr.aria-required]=\"fieldAria.required()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.name]=\"name()\"\n      [tnTestId]=\"resolvedTestId()\"\n      [rows]=\"rows()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    ></textarea>\n  }\n\n  <!-- Suffix icon action button -->\n  @if (hasSuffixIcon()) {\n    <button\n      type=\"button\"\n      class=\"tn-input__suffix-action\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"suffixActionTestId()\"\n      [attr.aria-label]=\"suffixIconAriaLabel()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onSuffixAction.emit($event)\"\n    >\n      <tn-icon\n        size=\"sm\"\n        [name]=\"suffixIcon()!\"\n        [library]=\"suffixIconLibrary()\"\n      />\n    </button>\n  }\n\n  <!-- Password visibility toggle. State is conveyed via the swapping\n       aria-label alone \u2014 no aria-pressed, which would contradict a label that\n       already names the action (\"Hide password, pressed\" is ambiguous). -->\n  @if (hasPasswordToggle()) {\n    <button\n      type=\"button\"\n      class=\"tn-input__visibility-toggle\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"passwordToggleTestId()\"\n      [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"togglePasswordVisibility()\"\n    >\n      <tn-icon size=\"sm\" aria-hidden=\"true\" [name]=\"passwordToggleIcon()\" />\n    </button>\n  }\n</div>\n", styles: [".tn-input-container{position:relative;display:flex;align-items:center;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-input-container:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-input-container:has(.tn-input:disabled){background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-input-container:has(.tn-input.error){border-color:var(--tn-error, #dc3545)}.tn-input-container:has(.tn-input.error):focus-within{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-input{display:block;flex:1;min-width:0;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;border-radius:.375rem;outline:none;box-sizing:border-box}.tn-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-input:disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed}.tn-input-container--has-prefix .tn-input{padding-left:.75rem;border-left:1px solid var(--tn-lines, #d1d5db);border-top-left-radius:0;border-bottom-left-radius:0}.tn-input-container--has-suffix .tn-input{padding-right:.25rem}.tn-input__prefix-icon{flex-shrink:0;margin-left:.75rem;margin-right:.75rem;color:var(--tn-fg2, #6c757d);pointer-events:none}.tn-input__suffix-action,.tn-input__visibility-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:.375rem;padding:.25rem;border:none;border-radius:.25rem;background:transparent;color:var(--tn-fg2, #6c757d);cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out}.tn-input__suffix-action:hover:not(:disabled),.tn-input__visibility-toggle:hover:not(:disabled){background-color:var(--tn-bg3, #f3f4f6);color:var(--tn-fg1, #1f2937)}.tn-input__suffix-action:focus-visible,.tn-input__visibility-toggle:focus-visible{outline:2px solid var(--tn-primary, #2563eb);outline-offset:1px}.tn-input__suffix-action:disabled,.tn-input__visibility-toggle:disabled{cursor:not-allowed;pointer-events:none}.tn-textarea{min-height:6rem;resize:vertical;line-height:1.4}@media(prefers-reduced-motion:reduce){.tn-input-container,.tn-input__suffix-action,.tn-input__visibility-toggle{transition:none}}@media(prefers-contrast:high){.tn-input-container{border-width:2px}}\n"] }]
         }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], inputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputType", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], allowDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDecimals", required: false }] }], sizeStandard: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeStandard", required: false }] }], sizeDefaultUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeDefaultUnit", required: false }] }], sizeRound: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeRound", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], prefixIconLibrary: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIconLibrary", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], suffixIconLibrary: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIconLibrary", required: false }] }], suffixIconAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIconAriaLabel", required: false }] }], suffixActionTestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixActionTestId", required: false }] }], onSuffixAction: [{ type: i0.Output, args: ["onSuffixAction"] }] } });
 /**
@@ -4774,7 +4815,7 @@ class TnChipHarness extends ComponentHarness {
     }
 }
-let nextId = 0;
+let nextId$1 = 0;
 /**
  * An editable, multi-value chip input — tokenized entry where typed text
  * becomes removable `tn-chip`s alongside an inline text field. Text is
@@ -4819,7 +4860,7 @@ class TnChipInputComponent {
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
     /** Unique instance id for ARIA linkage between the input and its dropdown. */
-    uid = `tn-chip-input-${nextId++}`;
+    uid = `tn-chip-input-${nextId$1++}`;
     /** Placeholder shown in the text field when it is empty. */
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     /** Disables the whole control — chips become non-removable and the field read-only. */
@@ -4869,8 +4910,18 @@ class TnChipInputComponent {
      * provide this when values are objects (e.g. `(a, b) => a?.id === b?.id`).
      */
     compareWith = input(undefined, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
-    /** Accessible name for the text field. Leave unset inside a `tn-form-field`. */
+    /**
+     * Explicit accessible name for the text field. Inside a `tn-form-field` the
+     * field's label is associated automatically (via `aria-labelledby`), so leave
+     * this unset there unless the announced name must differ from the visible
+     * label — when set, it wins.
+     */
     ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * ARIA wiring from an enclosing `tn-form-field` (label, error/hint,
+     * invalid, required). All-null when standalone or when `ariaLabel` overrides.
+     */
+    fieldAria = injectTnFormFieldAria(this.ariaLabel);
     /**
      * Semantic test-id base. The library prepends the `chip-input` element type
      * (e.g. `testId="tags"` → `chip-input-tags`); each chip and suggestion is
@@ -5209,7 +5260,7 @@ class TnChipInputComponent {
                 useExisting: forwardRef(() => TnChipInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Click-to-focus is a pointer affordance only; keyboard users Tab straight to\n     the real <input> inside, so the container itself is not a focus target. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #container\n  class=\"tn-chip-input\"\n  [class.tn-chip-input--disabled]=\"isDisabled()\"\n  (click)=\"focusInput()\"\n>\n  @for (value of values(); track $index) {\n    <tn-chip\n      class=\"tn-chip-input__chip\"\n      color=\"secondary\"\n      [label]=\"displayLabel(value)\"\n      [closable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [testId]=\"chipTestId(value)\"\n      (onClose)=\"removeChip($index)\"\n    />\n  }\n\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-chip-input__field\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    tnTestIdType=\"chip-input\"\n    [tnTestId]=\"testId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n</div>\n\n<!-- Suggestion dropdown \u2014 portaled via CDK overlay so it escapes ancestor\n     overflow/clipping. Attach/detach is driven by open()/close(). -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-chip-input__dropdown\"\n    role=\"listbox\"\n    [attr.id]=\"uid + '-listbox'\"\n  >\n    @for (suggestion of filteredSuggestions(); track $index) {\n      <!-- Options are tabindex=\"-1\" and never focused: keyboard selection goes\n           through the input's aria-activedescendant + the Enter branch in\n           onKeydown, so a key handler here would be dead code. Click is a\n           pointer-only affordance. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <div\n        class=\"tn-chip-input__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        tnTestIdType=\"option\"\n        [tnTestId]=\"chipTestId(suggestion.value)\"\n        [class.highlighted]=\"highlightedIndex() === $index\"\n        [attr.id]=\"uid + '-option-' + $index\"\n        [attr.aria-selected]=\"highlightedIndex() === $index\"\n        (mousedown)=\"onSuggestionMousedown($event)\"\n        (click)=\"onSuggestionClick(suggestion)\"\n      >\n        {{ suggestion.label }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".tn-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:2.5rem;padding:.375rem .5rem;box-sizing:border-box;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:text;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-chip-input:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-chip-input--disabled{background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-chip-input__chip{flex-shrink:0}.tn-chip-input__field{flex:1;min-width:120px;padding:.25rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;outline:none}.tn-chip-input__field::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-chip-input__field:disabled{cursor:not-allowed}.tn-chip-input__dropdown{max-height:var(--tn-chip-input-panel-max-height, 320px);overflow-y:auto;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.tn-chip-input__option{padding:.5rem .75rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:1rem;color:var(--tn-fg1, #212529);cursor:pointer}.tn-chip-input__option:hover,.tn-chip-input__option.highlighted{background-color:var(--tn-bg3, #f3f4f6)}@media(prefers-reduced-motion:reduce){.tn-chip-input{transition:none}}@media(prefers-contrast:high){.tn-chip-input{border-width:2px}}\n"], dependencies: [{ kind: "component", type: TnChipComponent, selector: "tn-chip", inputs: ["label", "icon", "closable", "disabled", "color", "testId"], outputs: ["onClose", "onClick"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Click-to-focus is a pointer affordance only; keyboard users Tab straight to\n     the real <input> inside, so the container itself is not a focus target. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #container\n  class=\"tn-chip-input\"\n  [class.tn-chip-input--disabled]=\"isDisabled()\"\n  (click)=\"focusInput()\"\n>\n  @for (value of values(); track $index) {\n    <tn-chip\n      class=\"tn-chip-input__chip\"\n      color=\"secondary\"\n      [label]=\"displayLabel(value)\"\n      [closable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [testId]=\"chipTestId(value)\"\n      (onClose)=\"removeChip($index)\"\n    />\n  }\n\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-chip-input__field\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    tnTestIdType=\"chip-input\"\n    [tnTestId]=\"testId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n    [attr.aria-describedby]=\"fieldAria.describedby()\"\n    [attr.aria-invalid]=\"fieldAria.invalid()\"\n    [attr.aria-required]=\"fieldAria.required()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n</div>\n\n<!-- Suggestion dropdown \u2014 portaled via CDK overlay so it escapes ancestor\n     overflow/clipping. Attach/detach is driven by open()/close(). -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-chip-input__dropdown\"\n    role=\"listbox\"\n    [attr.id]=\"uid + '-listbox'\"\n  >\n    @for (suggestion of filteredSuggestions(); track $index) {\n      <!-- Options are tabindex=\"-1\" and never focused: keyboard selection goes\n           through the input's aria-activedescendant + the Enter branch in\n           onKeydown, so a key handler here would be dead code. Click is a\n           pointer-only affordance. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <div\n        class=\"tn-chip-input__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        tnTestIdType=\"option\"\n        [tnTestId]=\"chipTestId(suggestion.value)\"\n        [class.highlighted]=\"highlightedIndex() === $index\"\n        [attr.id]=\"uid + '-option-' + $index\"\n        [attr.aria-selected]=\"highlightedIndex() === $index\"\n        (mousedown)=\"onSuggestionMousedown($event)\"\n        (click)=\"onSuggestionClick(suggestion)\"\n      >\n        {{ suggestion.label }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".tn-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:2.5rem;padding:.375rem .5rem;box-sizing:border-box;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:text;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-chip-input:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-chip-input--disabled{background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-chip-input__chip{flex-shrink:0}.tn-chip-input__field{flex:1;min-width:120px;padding:.25rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;outline:none}.tn-chip-input__field::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-chip-input__field:disabled{cursor:not-allowed}.tn-chip-input__dropdown{max-height:var(--tn-chip-input-panel-max-height, 320px);overflow-y:auto;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.tn-chip-input__option{padding:.5rem .75rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:1rem;color:var(--tn-fg1, #212529);cursor:pointer}.tn-chip-input__option:hover,.tn-chip-input__option.highlighted{background-color:var(--tn-bg3, #f3f4f6)}@media(prefers-reduced-motion:reduce){.tn-chip-input{transition:none}}@media(prefers-contrast:high){.tn-chip-input{border-width:2px}}\n"], dependencies: [{ kind: "component", type: TnChipComponent, selector: "tn-chip", inputs: ["label", "icon", "closable", "disabled", "color", "testId"], outputs: ["onClose", "onClick"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnChipInputComponent, decorators: [{
             type: Component,
@@ -5219,7 +5270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             useExisting: forwardRef(() => TnChipInputComponent),
                             multi: true,
                         },
-                    ], template: "<!-- Click-to-focus is a pointer affordance only; keyboard users Tab straight to\n     the real <input> inside, so the container itself is not a focus target. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #container\n  class=\"tn-chip-input\"\n  [class.tn-chip-input--disabled]=\"isDisabled()\"\n  (click)=\"focusInput()\"\n>\n  @for (value of values(); track $index) {\n    <tn-chip\n      class=\"tn-chip-input__chip\"\n      color=\"secondary\"\n      [label]=\"displayLabel(value)\"\n      [closable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [testId]=\"chipTestId(value)\"\n      (onClose)=\"removeChip($index)\"\n    />\n  }\n\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-chip-input__field\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    tnTestIdType=\"chip-input\"\n    [tnTestId]=\"testId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n</div>\n\n<!-- Suggestion dropdown \u2014 portaled via CDK overlay so it escapes ancestor\n     overflow/clipping. Attach/detach is driven by open()/close(). -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-chip-input__dropdown\"\n    role=\"listbox\"\n    [attr.id]=\"uid + '-listbox'\"\n  >\n    @for (suggestion of filteredSuggestions(); track $index) {\n      <!-- Options are tabindex=\"-1\" and never focused: keyboard selection goes\n           through the input's aria-activedescendant + the Enter branch in\n           onKeydown, so a key handler here would be dead code. Click is a\n           pointer-only affordance. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <div\n        class=\"tn-chip-input__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        tnTestIdType=\"option\"\n        [tnTestId]=\"chipTestId(suggestion.value)\"\n        [class.highlighted]=\"highlightedIndex() === $index\"\n        [attr.id]=\"uid + '-option-' + $index\"\n        [attr.aria-selected]=\"highlightedIndex() === $index\"\n        (mousedown)=\"onSuggestionMousedown($event)\"\n        (click)=\"onSuggestionClick(suggestion)\"\n      >\n        {{ suggestion.label }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".tn-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:2.5rem;padding:.375rem .5rem;box-sizing:border-box;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:text;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-chip-input:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-chip-input--disabled{background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-chip-input__chip{flex-shrink:0}.tn-chip-input__field{flex:1;min-width:120px;padding:.25rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;outline:none}.tn-chip-input__field::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-chip-input__field:disabled{cursor:not-allowed}.tn-chip-input__dropdown{max-height:var(--tn-chip-input-panel-max-height, 320px);overflow-y:auto;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.tn-chip-input__option{padding:.5rem .75rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:1rem;color:var(--tn-fg1, #212529);cursor:pointer}.tn-chip-input__option:hover,.tn-chip-input__option.highlighted{background-color:var(--tn-bg3, #f3f4f6)}@media(prefers-reduced-motion:reduce){.tn-chip-input{transition:none}}@media(prefers-contrast:high){.tn-chip-input{border-width:2px}}\n"] }]
+                    ], template: "<!-- Click-to-focus is a pointer affordance only; keyboard users Tab straight to\n     the real <input> inside, so the container itself is not a focus target. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #container\n  class=\"tn-chip-input\"\n  [class.tn-chip-input--disabled]=\"isDisabled()\"\n  (click)=\"focusInput()\"\n>\n  @for (value of values(); track $index) {\n    <tn-chip\n      class=\"tn-chip-input__chip\"\n      color=\"secondary\"\n      [label]=\"displayLabel(value)\"\n      [closable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [testId]=\"chipTestId(value)\"\n      (onClose)=\"removeChip($index)\"\n    />\n  }\n\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-chip-input__field\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    tnTestIdType=\"chip-input\"\n    [tnTestId]=\"testId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n    [attr.aria-describedby]=\"fieldAria.describedby()\"\n    [attr.aria-invalid]=\"fieldAria.invalid()\"\n    [attr.aria-required]=\"fieldAria.required()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n</div>\n\n<!-- Suggestion dropdown \u2014 portaled via CDK overlay so it escapes ancestor\n     overflow/clipping. Attach/detach is driven by open()/close(). -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-chip-input__dropdown\"\n    role=\"listbox\"\n    [attr.id]=\"uid + '-listbox'\"\n  >\n    @for (suggestion of filteredSuggestions(); track $index) {\n      <!-- Options are tabindex=\"-1\" and never focused: keyboard selection goes\n           through the input's aria-activedescendant + the Enter branch in\n           onKeydown, so a key handler here would be dead code. Click is a\n           pointer-only affordance. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <div\n        class=\"tn-chip-input__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        tnTestIdType=\"option\"\n        [tnTestId]=\"chipTestId(suggestion.value)\"\n        [class.highlighted]=\"highlightedIndex() === $index\"\n        [attr.id]=\"uid + '-option-' + $index\"\n        [attr.aria-selected]=\"highlightedIndex() === $index\"\n        (mousedown)=\"onSuggestionMousedown($event)\"\n        (click)=\"onSuggestionClick(suggestion)\"\n      >\n        {{ suggestion.label }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".tn-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:2.5rem;padding:.375rem .5rem;box-sizing:border-box;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:text;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-chip-input:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-chip-input--disabled{background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-chip-input__chip{flex-shrink:0}.tn-chip-input__field{flex:1;min-width:120px;padding:.25rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;outline:none}.tn-chip-input__field::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-chip-input__field:disabled{cursor:not-allowed}.tn-chip-input__dropdown{max-height:var(--tn-chip-input-panel-max-height, 320px);overflow-y:auto;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.tn-chip-input__option{padding:.5rem .75rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:1rem;color:var(--tn-fg1, #212529);cursor:pointer}.tn-chip-input__option:hover,.tn-chip-input__option.highlighted{background-color:var(--tn-bg3, #f3f4f6)}@media(prefers-reduced-motion:reduce){.tn-chip-input{transition:none}}@media(prefers-contrast:high){.tn-chip-input{border-width:2px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], separatorKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorKeys", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], maxChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChips", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], chipAdded: [{ type: i0.Output, args: ["chipAdded"] }], chipRemoved: [{ type: i0.Output, args: ["chipRemoved"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
 /**
@@ -8182,7 +8233,14 @@ function activeErrorKey(errors) {
     return Object.keys(errors)[0] ?? null;
 }
+let nextId = 0;
 class TnFormFieldComponent {
+    /** Unique instance id namespacing the label/error/hint ids for ARIA linkage. */
+    uid = `tn-form-field-${nextId++}`;
+    /** Id carried by the error message element (only meaningful while it renders). */
+    errorId = `${this.uid}-error`;
+    /** Id carried by the hint element (only meaningful while it renders). */
+    hintId = `${this.uid}-hint`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
     /**
@@ -8192,9 +8250,10 @@ class TnFormFieldComponent {
      * see the requirement — e.g. a validator wrapped in `Validators.compose(...)`
      * or a custom validator that emits a `required`-style error.
      *
-     * The indicator is purely visual — for native/a11y semantics pair it with the
-     * projected control's own `required` input (e.g. `tn-input`'s, which renders
-     * the native attribute).
+     * Library form controls surface this state as `aria-required` automatically
+     * (via {@link TnFormFieldContext}); pairing it with the projected control's
+     * own `required` input (e.g. `tn-input`'s, which renders the native
+     * attribute) additionally blocks native form submission.
      */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
     testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
@@ -8272,12 +8331,14 @@ class TnFormFieldComponent {
     ngAfterContentInit() {
         const control = this.control();
         if (control) {
-            // Listen for control status changes.
-            // NOTE: `statusChanges` does not emit on touched/pristine-only transitions
-            // (e.g. `markAsTouched()` / `markAllAsTouched()` on blur or submit), so an
-            // error may not surface until the next value/status change. Reacting to
-            // those via `control.control?.events` is tracked as a follow-up.
-            control.statusChanges
+            // Prefer the unified `events` stream: unlike `statusChanges`, it also
+            // emits on touched/pristine-only transitions (`markAsTouched()` on blur,
+            // `markAllAsTouched()` on submit), so the error — visual and ARIA —
+            // surfaces the moment the user leaves a required field empty. Fall back
+            // to `statusChanges` for NgControl implementations whose underlying
+            // AbstractControl isn't reachable yet.
+            const changes = control.control?.events ?? control.statusChanges;
+            changes
                 ?.pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => {
                 this.syncControlState();
@@ -8365,12 +8426,49 @@ class TnFormFieldComponent {
     showSubscript = computed(() => {
         return this.subscriptSizing() === 'fixed' || this.showError() || this.showHint();
     }, ...(ngDevMode ? [{ debugName: "showSubscript" }] : []));
+    // ── TnFormFieldContext (consumed by the projected control via DI) ──
+    /**
+     * Id of the label *text* span — deliberately not the whole `<label>`, so an
+     * `aria-labelledby` pointing here never picks up the required asterisk's
+     * "required" into the accessible name (that state travels as `aria-required`).
+     */
+    labelId = computed(() => (this.label() ? `${this.uid}-label` : null), ...(ngDevMode ? [{ debugName: "labelId" }] : []));
+    /** Id of the currently shown error or hint (they are mutually exclusive), or null. */
+    describedBy = computed(() => {
+        if (this.showError()) {
+            return this.errorId;
+        }
+        if (this.showHint()) {
+            return this.hintId;
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    /** Mirrors the visual error state (invalid AND interacted) for `aria-invalid`. */
+    errorState = computed(() => this.hasError(), ...(ngDevMode ? [{ debugName: "errorState" }] : []));
+    /** Forced or validator-inferred required state, for `aria-required`. */
+    requiredState = computed(() => this.showRequired(), ...(ngDevMode ? [{ debugName: "requiredState" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFormFieldComponent, isStandalone: true, selector: "tn-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-form-field\" tnTestIdType=\"form-field\" [tnTestId]=\"testId()\">\n  <!-- Label -->\n  @if (label()) {\n    <div class=\"tn-form-field-label-row\">\n      <label class=\"tn-form-field-label\" [class.required]=\"showRequired()\">\n        <span [innerHTML]=\"label() | tnLabelMarkup\"></span>\n        @if (showRequired()) {\n          <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n        }\n      </label>\n      @if (tooltip()) {\n        <ng-container [ngTemplateOutlet]=\"tooltipButton\" />\n      }\n    </div>\n  }\n\n  <!-- Form Control Content -->\n  <div\n    class=\"tn-form-field-wrapper\"\n    [class.tn-form-field-wrapper--inline]=\"showInlineExtras()\">\n    <ng-content />\n    @if (showInlineRequired()) {\n      <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n    }\n    @if (showInlineTooltip()) {\n      <ng-container [ngTemplateOutlet]=\"tooltipButton\" />\n    }\n  </div>\n\n  <!-- Hint or Error Message -->\n  @if (showSubscript()) {\n    <div class=\"tn-form-field-subscript\" [class.tn-form-field-subscript-dynamic]=\"subscriptSizing() === 'dynamic'\">\n      @if (showError()) {\n        <div\n          class=\"tn-form-field-error\"\n          role=\"alert\"\n          aria-live=\"polite\">\n          {{ errorMessage() }}\n        </div>\n      }\n      @if (showHint()) {\n        <div class=\"tn-form-field-hint\">\n          {{ hint() }}\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #tooltipButton>\n  <button\n    type=\"button\"\n    class=\"tn-form-field-tooltip\"\n    [attr.aria-label]=\"tooltip()\"\n    [tnTooltip]=\"tooltip()\"\n    [tnTooltipPosition]=\"tooltipPosition()\">\n    <tn-icon name=\"help-circle\" library=\"mdi\" size=\"sm\" />\n  </button>\n</ng-template>\n", styles: [".tn-form-field{display:block;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-form-field-label-row{display:flex;align-items:center;gap:.375rem;margin-bottom:.5rem}.tn-form-field-label{display:block;font-size:1rem;font-weight:400;color:var(--tn-fg1, #333);line-height:1.4}.tn-form-field-label ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-form-field-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-form-field-tooltip{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tn-fg2, #6c757d);cursor:help;line-height:0}.tn-form-field-tooltip:hover,.tn-form-field-tooltip:focus-visible{color:var(--tn-primary, #007bff)}.tn-form-field-tooltip:focus-visible{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;border-radius:50%}.tn-form-field-wrapper{position:relative;width:100%;overflow:visible}.tn-form-field-wrapper :ng-deep .tn-select-container,.tn-form-field-wrapper :ng-deep .tn-input-container{margin-bottom:0}.tn-form-field-wrapper :ng-deep .tn-select-label,.tn-form-field-wrapper :ng-deep .tn-input-label{display:none}.tn-form-field-wrapper :ng-deep .tn-select-error,.tn-form-field-wrapper :ng-deep .tn-input-error{display:none}.tn-form-field-wrapper :ng-deep .tn-select-dropdown{z-index:1000}.tn-form-field-wrapper--inline{align-items:center;display:flex;gap:.375rem}.tn-form-field-wrapper--inline .required-asterisk{color:var(--tn-error, #dc3545)}.tn-form-field-subscript{min-height:1.25rem;margin-top:.25rem;font-size:.75rem;line-height:1.4}.tn-form-field-subscript-dynamic{min-height:0}.tn-form-field-error{color:var(--tn-error, #dc3545);margin:0}.tn-form-field-hint{color:var(--tn-fg2, #6c757d);margin:0}.tn-form-field-wrapper:has(:focus-visible) .tn-form-field-label{color:var(--tn-primary, #007bff)}.tn-form-field-wrapper:has(.error) .tn-form-field-label{color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-form-field-label{transition:none}}@media(prefers-contrast:high){.tn-form-field-label,.tn-form-field-error{font-weight:600}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "directive", type: TnTooltipDirective, selector: "[tnTooltip]", inputs: ["tnTooltip", "tnTooltipPosition", "tnTooltipDisabled", "tnTooltipShowDelay", "tnTooltipHideDelay", "tnTooltipClass"] }, { kind: "pipe", type: LabelMarkupPipe, name: "tnLabelMarkup" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFormFieldComponent, isStandalone: true, selector: "tn-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            // Published to projected controls (their element injector chains through
+            // this host), which bind aria-labelledby/-describedby/-invalid/-required
+            // to the field's label and messages. See TnFormFieldContext.
+            {
+                provide: TN_FORM_FIELD_CONTEXT,
+                useExisting: forwardRef(() => TnFormFieldComponent),
+            },
+        ], queries: [{ propertyName: "control", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-form-field\" tnTestIdType=\"form-field\" [tnTestId]=\"testId()\">\n  <!-- Label -->\n  @if (label()) {\n    <div class=\"tn-form-field-label-row\">\n      <label class=\"tn-form-field-label\" [class.required]=\"showRequired()\">\n        <span [attr.id]=\"labelId()\" [innerHTML]=\"label() | tnLabelMarkup\"></span>\n        @if (showRequired()) {\n          <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n        }\n      </label>\n      @if (tooltip()) {\n        <ng-container [ngTemplateOutlet]=\"tooltipButton\" />\n      }\n    </div>\n  }\n\n  <!-- Form Control Content -->\n  <div\n    class=\"tn-form-field-wrapper\"\n    [class.tn-form-field-wrapper--inline]=\"showInlineExtras()\">\n    <ng-content />\n    @if (showInlineRequired()) {\n      <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n    }\n    @if (showInlineTooltip()) {\n      <ng-container [ngTemplateOutlet]=\"tooltipButton\" />\n    }\n  </div>\n\n  <!-- Hint or Error Message -->\n  @if (showSubscript()) {\n    <div class=\"tn-form-field-subscript\" [class.tn-form-field-subscript-dynamic]=\"subscriptSizing() === 'dynamic'\">\n      @if (showError()) {\n        <!-- role=\"alert\" is implicitly assertive+atomic, so no aria-live here.\n             The id feeds the projected control's aria-describedby (see\n             TnFormFieldContext). -->\n        <div\n          class=\"tn-form-field-error\"\n          role=\"alert\"\n          [attr.id]=\"errorId\">\n          {{ errorMessage() }}\n        </div>\n      }\n      @if (showHint()) {\n        <div class=\"tn-form-field-hint\" [attr.id]=\"hintId\">\n          {{ hint() }}\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #tooltipButton>\n  <button\n    type=\"button\"\n    class=\"tn-form-field-tooltip\"\n    [attr.aria-label]=\"tooltip()\"\n    [tnTooltip]=\"tooltip()\"\n    [tnTooltipPosition]=\"tooltipPosition()\">\n    <tn-icon name=\"help-circle\" library=\"mdi\" size=\"sm\" />\n  </button>\n</ng-template>\n", styles: [".tn-form-field{display:block;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-form-field-label-row{display:flex;align-items:center;gap:.375rem;margin-bottom:.5rem}.tn-form-field-label{display:block;font-size:1rem;font-weight:400;color:var(--tn-fg1, #333);line-height:1.4}.tn-form-field-label ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-form-field-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-form-field-tooltip{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tn-fg2, #6c757d);cursor:help;line-height:0}.tn-form-field-tooltip:hover,.tn-form-field-tooltip:focus-visible{color:var(--tn-primary, #007bff)}.tn-form-field-tooltip:focus-visible{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;border-radius:50%}.tn-form-field-wrapper{position:relative;width:100%;overflow:visible}.tn-form-field-wrapper :ng-deep .tn-select-container,.tn-form-field-wrapper :ng-deep .tn-input-container{margin-bottom:0}.tn-form-field-wrapper :ng-deep .tn-select-label,.tn-form-field-wrapper :ng-deep .tn-input-label{display:none}.tn-form-field-wrapper :ng-deep .tn-select-error,.tn-form-field-wrapper :ng-deep .tn-input-error{display:none}.tn-form-field-wrapper :ng-deep .tn-select-dropdown{z-index:1000}.tn-form-field-wrapper--inline{align-items:center;display:flex;gap:.375rem}.tn-form-field-wrapper--inline .required-asterisk{color:var(--tn-error, #dc3545)}.tn-form-field-subscript{min-height:1.25rem;margin-top:.25rem;font-size:.75rem;line-height:1.4}.tn-form-field-subscript-dynamic{min-height:0}.tn-form-field-error{color:var(--tn-error, #dc3545);margin:0}.tn-form-field-hint{color:var(--tn-fg2, #6c757d);margin:0}.tn-form-field-wrapper:has(:focus-visible) .tn-form-field-label{color:var(--tn-primary, #007bff)}.tn-form-field-wrapper:has(.error) .tn-form-field-label{color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-form-field-label{transition:none}}@media(prefers-contrast:high){.tn-form-field-label,.tn-form-field-error{font-weight:600}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "directive", type: TnTooltipDirective, selector: "[tnTooltip]", inputs: ["tnTooltip", "tnTooltipPosition", "tnTooltipDisabled", "tnTooltipShowDelay", "tnTooltipHideDelay", "tnTooltipClass"] }, { kind: "pipe", type: LabelMarkupPipe, name: "tnLabelMarkup" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-form-field', standalone: true, imports: [NgTemplateOutlet, TnTestIdDirective, TnIconComponent, TnTooltipDirective, LabelMarkupPipe], template: "<div class=\"tn-form-field\" tnTestIdType=\"form-field\" [tnTestId]=\"testId()\">\n  <!-- Label -->\n  @if (label()) {\n    <div class=\"tn-form-field-label-row\">\n      <label class=\"tn-form-field-label\" [class.required]=\"showRequired()\">\n        <span [innerHTML]=\"label() | tnLabelMarkup\"></span>\n        @if (showRequired()) {\n          <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n        }\n      </label>\n      @if (tooltip()) {\n        <ng-container [ngTemplateOutlet]=\"tooltipButton\" />\n      }\n    </div>\n  }\n\n  <!-- Form Control Content -->\n  <div\n    class=\"tn-form-field-wrapper\"\n    [class.tn-form-field-wrapper--inline]=\"showInlineExtras()\">\n    <ng-content />\n    @if (showInlineRequired()) {\n      <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n    }\n    @if (showInlineTooltip()) {\n      <ng-container [ngTemplateOutlet]=\"tooltipButton\" />\n    }\n  </div>\n\n  <!-- Hint or Error Message -->\n  @if (showSubscript()) {\n    <div class=\"tn-form-field-subscript\" [class.tn-form-field-subscript-dynamic]=\"subscriptSizing() === 'dynamic'\">\n      @if (showError()) {\n        <div\n          class=\"tn-form-field-error\"\n          role=\"alert\"\n          aria-live=\"polite\">\n          {{ errorMessage() }}\n        </div>\n      }\n      @if (showHint()) {\n        <div class=\"tn-form-field-hint\">\n          {{ hint() }}\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #tooltipButton>\n  <button\n    type=\"button\"\n    class=\"tn-form-field-tooltip\"\n    [attr.aria-label]=\"tooltip()\"\n    [tnTooltip]=\"tooltip()\"\n    [tnTooltipPosition]=\"tooltipPosition()\">\n    <tn-icon name=\"help-circle\" library=\"mdi\" size=\"sm\" />\n  </button>\n</ng-template>\n", styles: [".tn-form-field{display:block;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-form-field-label-row{display:flex;align-items:center;gap:.375rem;margin-bottom:.5rem}.tn-form-field-label{display:block;font-size:1rem;font-weight:400;color:var(--tn-fg1, #333);line-height:1.4}.tn-form-field-label ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-form-field-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-form-field-tooltip{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tn-fg2, #6c757d);cursor:help;line-height:0}.tn-form-field-tooltip:hover,.tn-form-field-tooltip:focus-visible{color:var(--tn-primary, #007bff)}.tn-form-field-tooltip:focus-visible{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;border-radius:50%}.tn-form-field-wrapper{position:relative;width:100%;overflow:visible}.tn-form-field-wrapper :ng-deep .tn-select-container,.tn-form-field-wrapper :ng-deep .tn-input-container{margin-bottom:0}.tn-form-field-wrapper :ng-deep .tn-select-label,.tn-form-field-wrapper :ng-deep .tn-input-label{display:none}.tn-form-field-wrapper :ng-deep .tn-select-error,.tn-form-field-wrapper :ng-deep .tn-input-error{display:none}.tn-form-field-wrapper :ng-deep .tn-select-dropdown{z-index:1000}.tn-form-field-wrapper--inline{align-items:center;display:flex;gap:.375rem}.tn-form-field-wrapper--inline .required-asterisk{color:var(--tn-error, #dc3545)}.tn-form-field-subscript{min-height:1.25rem;margin-top:.25rem;font-size:.75rem;line-height:1.4}.tn-form-field-subscript-dynamic{min-height:0}.tn-form-field-error{color:var(--tn-error, #dc3545);margin:0}.tn-form-field-hint{color:var(--tn-fg2, #6c757d);margin:0}.tn-form-field-wrapper:has(:focus-visible) .tn-form-field-label{color:var(--tn-primary, #007bff)}.tn-form-field-wrapper:has(.error) .tn-form-field-label{color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-form-field-label{transition:none}}@media(prefers-contrast:high){.tn-form-field-label,.tn-form-field-error{font-weight:600}}\n"] }]
+            args: [{ selector: 'tn-form-field', standalone: true, imports: [NgTemplateOutlet, TnTestIdDirective, TnIconComponent, TnTooltipDirective, LabelMarkupPipe], providers: [
+                        // Published to projected controls (their element injector chains through
+                        // this host), which bind aria-labelledby/-describedby/-invalid/-required
+                        // to the field's label and messages. See TnFormFieldContext.
+                        {
+                            provide: TN_FORM_FIELD_CONTEXT,
+                            useExisting: forwardRef(() => TnFormFieldComponent),
+                        },
+                    ], template: "<div class=\"tn-form-field\" tnTestIdType=\"form-field\" [tnTestId]=\"testId()\">\n  <!-- Label -->\n  @if (label()) {\n    <div class=\"tn-form-field-label-row\">\n      <label class=\"tn-form-field-label\" [class.required]=\"showRequired()\">\n        <span [attr.id]=\"labelId()\" [innerHTML]=\"label() | tnLabelMarkup\"></span>\n        @if (showRequired()) {\n          <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n        }\n      </label>\n      @if (tooltip()) {\n        <ng-container [ngTemplateOutlet]=\"tooltipButton\" />\n      }\n    </div>\n  }\n\n  <!-- Form Control Content -->\n  <div\n    class=\"tn-form-field-wrapper\"\n    [class.tn-form-field-wrapper--inline]=\"showInlineExtras()\">\n    <ng-content />\n    @if (showInlineRequired()) {\n      <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n    }\n    @if (showInlineTooltip()) {\n      <ng-container [ngTemplateOutlet]=\"tooltipButton\" />\n    }\n  </div>\n\n  <!-- Hint or Error Message -->\n  @if (showSubscript()) {\n    <div class=\"tn-form-field-subscript\" [class.tn-form-field-subscript-dynamic]=\"subscriptSizing() === 'dynamic'\">\n      @if (showError()) {\n        <!-- role=\"alert\" is implicitly assertive+atomic, so no aria-live here.\n             The id feeds the projected control's aria-describedby (see\n             TnFormFieldContext). -->\n        <div\n          class=\"tn-form-field-error\"\n          role=\"alert\"\n          [attr.id]=\"errorId\">\n          {{ errorMessage() }}\n        </div>\n      }\n      @if (showHint()) {\n        <div class=\"tn-form-field-hint\" [attr.id]=\"hintId\">\n          {{ hint() }}\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #tooltipButton>\n  <button\n    type=\"button\"\n    class=\"tn-form-field-tooltip\"\n    [attr.aria-label]=\"tooltip()\"\n    [tnTooltip]=\"tooltip()\"\n    [tnTooltipPosition]=\"tooltipPosition()\">\n    <tn-icon name=\"help-circle\" library=\"mdi\" size=\"sm\" />\n  </button>\n</ng-template>\n", styles: [".tn-form-field{display:block;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-form-field-label-row{display:flex;align-items:center;gap:.375rem;margin-bottom:.5rem}.tn-form-field-label{display:block;font-size:1rem;font-weight:400;color:var(--tn-fg1, #333);line-height:1.4}.tn-form-field-label ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-form-field-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-form-field-tooltip{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tn-fg2, #6c757d);cursor:help;line-height:0}.tn-form-field-tooltip:hover,.tn-form-field-tooltip:focus-visible{color:var(--tn-primary, #007bff)}.tn-form-field-tooltip:focus-visible{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;border-radius:50%}.tn-form-field-wrapper{position:relative;width:100%;overflow:visible}.tn-form-field-wrapper :ng-deep .tn-select-container,.tn-form-field-wrapper :ng-deep .tn-input-container{margin-bottom:0}.tn-form-field-wrapper :ng-deep .tn-select-label,.tn-form-field-wrapper :ng-deep .tn-input-label{display:none}.tn-form-field-wrapper :ng-deep .tn-select-error,.tn-form-field-wrapper :ng-deep .tn-input-error{display:none}.tn-form-field-wrapper :ng-deep .tn-select-dropdown{z-index:1000}.tn-form-field-wrapper--inline{align-items:center;display:flex;gap:.375rem}.tn-form-field-wrapper--inline .required-asterisk{color:var(--tn-error, #dc3545)}.tn-form-field-subscript{min-height:1.25rem;margin-top:.25rem;font-size:.75rem;line-height:1.4}.tn-form-field-subscript-dynamic{min-height:0}.tn-form-field-error{color:var(--tn-error, #dc3545);margin:0}.tn-form-field-hint{color:var(--tn-fg2, #6c757d);margin:0}.tn-form-field-wrapper:has(:focus-visible) .tn-form-field-label{color:var(--tn-primary, #007bff)}.tn-form-field-wrapper:has(.error) .tn-form-field-label{color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-form-field-label{transition:none}}@media(prefers-contrast:high){.tn-form-field-label,.tn-form-field-error{font-weight:600}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }] } });
 /**
@@ -8705,12 +8803,26 @@ class TnSelectComponent {
     optionGroups = input([], ...(ngDevMode ? [{ debugName: "optionGroups" }] : []));
     placeholder = input('Select an option', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     /**
-     * Accessible label for the select trigger. When set, this is used as the
-     * trigger's `aria-label` instead of the visible `placeholder` — useful in
+     * Explicit accessible label for the select trigger. When set, this is used as
+     * the trigger's `aria-label` instead of the visible `placeholder` — useful in
      * contexts (e.g. a pager's page-size dropdown) where the placeholder text
-     * doesn't accurately describe the field's purpose to screen readers.
+     * doesn't accurately describe the field's purpose to screen readers. Inside a
+     * `tn-form-field` the field's label is associated automatically (via
+     * `aria-labelledby`) and takes precedence over the placeholder fallback;
+     * setting this overrides both.
      */
     ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * ARIA wiring from an enclosing `tn-form-field` (label, error/hint,
+     * invalid, required). All-null when standalone or when `ariaLabel` overrides.
+     */
+    fieldAria = injectTnFormFieldAria(this.ariaLabel);
+    /**
+     * `aria-label` for the trigger. An explicit `ariaLabel` always wins; the
+     * `placeholder` fallback only applies while no form-field label is wired via
+     * `aria-labelledby`, so the trigger never advertises two names at once.
+     */
+    triggerAriaLabel = computed(() => this.ariaLabel() ?? (this.fieldAria.labelledby() ? null : this.placeholder()), ...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : []));
     /**
      * Message shown inside the dropdown when no options (and no option groups)
      * are available. Defaults to the English `'No options available'`; consumers
@@ -8729,6 +8841,16 @@ class TnSelectComponent {
     /** Label of the empty option rendered when `allowEmpty` is set. */
     emptyLabel = input('--', ...(ngDevMode ? [{ debugName: "emptyLabel" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * When `true` (multiple mode only), renders a "select all" row at the top of
+     * the dropdown that toggles every selectable (non-disabled) option on/off in
+     * one click. Mirrors webui ix-select's `[showSelectAll]`. Ignored in single
+     * mode. Its checkbox reflects the aggregate state: checked when all are
+     * selected, indeterminate when only some are.
+     */
+    showSelectAll = input(false, ...(ngDevMode ? [{ debugName: "showSelectAll" }] : []));
+    /** Label of the select-all row rendered when `showSelectAll` is set. */
+    selectAllLabel = input('Select All', ...(ngDevMode ? [{ debugName: "selectAllLabel" }] : []));
     testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
     /** Test-id base, falling back to the bound control name when `testId` is unset. */
     resolvedTestId = controlTestId(this.testId);
@@ -8816,18 +8938,23 @@ class TnSelectComponent {
      */
     navigableOptions = computed(() => {
         const result = [];
+        // The select-all row is the first navigable entry when shown, so
+        // ArrowDown from the closed trigger lands on it before the options.
+        if (this.showSelectAllRow()) {
+            result.push({ kind: 'select-all', id: this.selectAllId() });
+        }
         const baseId = `tn-select-opt-${this.idNamespace()}`;
         let i = 0;
         for (const opt of this.displayOptions()) {
             if (!opt.disabled) {
-                result.push({ option: opt, id: `${baseId}-${i}` });
+                result.push({ kind: 'option', option: opt, id: `${baseId}-${i}` });
             }
             i++;
         }
         for (const group of this.optionGroups()) {
             for (const opt of group.options) {
                 if (!opt.disabled && !group.disabled) {
-                    result.push({ option: opt, id: `${baseId}-${i}` });
+                    result.push({ kind: 'option', option: opt, id: `${baseId}-${i}` });
                 }
                 i++;
             }
@@ -8842,14 +8969,15 @@ class TnSelectComponent {
     }, ...(ngDevMode ? [{ debugName: "focusedOptionId" }] : []));
     /** Stable DOM id for an option; matches what navigableOptions() assigns. */
     optionId(option) {
-        const entry = this.navigableOptions().find((x) => x.option === option);
+        const entry = this.navigableOptions().find((x) => x.kind === 'option' && x.option === option);
         return entry?.id ?? null;
     }
     /** Whether `option` is the keyboard-highlighted item. */
     isOptionFocused(option) {
         const idx = this.focusedIndex();
         const nav = this.navigableOptions();
-        return idx >= 0 && idx < nav.length && nav[idx].option === option;
+        const entry = idx >= 0 && idx < nav.length ? nav[idx] : null;
+        return entry?.kind === 'option' && entry.option === option;
     }
     /**
      * Test-id segments for an option row, consumed by `[tnTestId]` with
@@ -8934,7 +9062,7 @@ class TnSelectComponent {
         // otherwise leave it unset so the next ArrowDown lands on the first item.
         const selected = this.selectedValue();
         if (selected !== null && selected !== undefined) {
-            const idx = this.navigableOptions().findIndex((x) => this.compareValues(x.option.value, selected));
+            const idx = this.navigableOptions().findIndex((x) => x.kind === 'option' && this.compareValues(x.option.value, selected));
             this.focusedIndex.set(idx);
         }
         else if (this.emptyOption()) {
@@ -9131,6 +9259,92 @@ class TnSelectComponent {
     hasAnyOptions = computed(() => {
         return this.options().length > 0 || this.optionGroups().length > 0;
     }, ...(ngDevMode ? [{ debugName: "hasAnyOptions" }] : []));
+    /**
+     * Values of every selectable (non-disabled) option, across ungrouped options
+     * and enabled groups. This is the set the select-all row operates on —
+     * disabled options and options in disabled groups are excluded because they
+     * can't be toggled individually either.
+     *
+     * Values are deduped with `compareValues` so a value that appears both
+     * ungrouped and inside a group isn't pushed twice — that would make
+     * select-all diverge from `toggleOption()`, which never produces duplicates.
+     */
+    selectableValues = computed(() => {
+        const values = [];
+        const push = (value) => {
+            if (!values.some((v) => this.compareValues(v, value))) {
+                values.push(value);
+            }
+        };
+        for (const opt of this.options()) {
+            if (!opt.disabled) {
+                push(opt.value);
+            }
+        }
+        for (const group of this.optionGroups()) {
+            if (group.disabled) {
+                continue;
+            }
+            for (const opt of group.options) {
+                if (!opt.disabled) {
+                    push(opt.value);
+                }
+            }
+        }
+        return values;
+    }, ...(ngDevMode ? [{ debugName: "selectableValues" }] : []));
+    /** Whether the select-all row is shown (multiple mode, opted in, with options). */
+    showSelectAllRow = computed(() => this.multiple() && this.showSelectAll() && this.selectableValues().length > 0, ...(ngDevMode ? [{ debugName: "showSelectAllRow" }] : []));
+    /** Stable DOM id of the select-all row, for aria-activedescendant. */
+    selectAllId = computed(() => `tn-select-selectall-${this.idNamespace()}`, ...(ngDevMode ? [{ debugName: "selectAllId" }] : []));
+    /** True when every selectable option is currently selected. */
+    allSelected = computed(() => {
+        const selectable = this.selectableValues();
+        if (selectable.length === 0) {
+            return false;
+        }
+        const selected = this.selectedValues();
+        return selectable.every((v) => selected.some((s) => this.compareValues(s, v)));
+    }, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
+    /** True when some — but not all — selectable options are selected. */
+    selectAllIndeterminate = computed(() => {
+        if (this.allSelected()) {
+            return false;
+        }
+        const selected = this.selectedValues();
+        return this.selectableValues().some((v) => selected.some((s) => this.compareValues(s, v)));
+    }, ...(ngDevMode ? [{ debugName: "selectAllIndeterminate" }] : []));
+    /** Test-id segments for the select-all row; mirrors ix-select's `[name, 'select-all']`. */
+    selectAllTestIdParts() {
+        return scopeTestId(this.resolvedTestId(), 'select-all');
+    }
+    /**
+     * Toggles every selectable option: clears them all when they're all already
+     * selected, otherwise selects them all. Preserves the multi-select "open"
+     * behaviour — the dropdown stays open so the user can keep adjusting.
+     *
+     * Disabled-but-selected values (e.g. a disabled option pre-selected via
+     * `writeValue`) are preserved on both paths: the user can't toggle those
+     * rows individually, so select-all must not silently discard them either.
+     */
+    toggleSelectAll() {
+        if (this.isDisabled()) {
+            return;
+        }
+        const selectable = this.selectableValues();
+        const preserved = this.selectedValues().filter((v) => !selectable.some((s) => this.compareValues(s, v)));
+        const updated = this.allSelected() ? preserved : [...preserved, ...selectable];
+        this.selectedValues.set(updated);
+        this.onChange(updated);
+        this.multiSelectionChange.emit(updated);
+        this.cdr.markForCheck();
+    }
+    /** Whether the select-all row is the keyboard-highlighted item. */
+    isSelectAllFocused() {
+        const idx = this.focusedIndex();
+        const nav = this.navigableOptions();
+        return idx >= 0 && idx < nav.length && nav[idx].kind === 'select-all';
+    }
     /** One-shot guard so the object-compare warning fires at most once per instance. */
     warnedAboutObjectCompare = false;
     /**
@@ -9274,7 +9488,13 @@ class TnSelectComponent {
         if (idx < 0 || idx >= nav.length) {
             return;
         }
-        this.onOptionClick(nav[idx].option);
+        const entry = nav[idx];
+        if (entry.kind === 'select-all') {
+            this.toggleSelectAll();
+        }
+        else {
+            this.onOptionClick(entry.option);
+        }
     }
     scrollFocusedIntoView() {
         const id = this.focusedOptionId();
@@ -9297,13 +9517,13 @@ class TnSelectComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSelectComponent, isStandalone: true, selector: "tn-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionGroups: { classPropertyName: "optionGroups", publicName: "optionGroups", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, noOptionsLabel: { classPropertyName: "noOptionsLabel", publicName: "noOptionsLabel", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, optionTestIdKey: { classPropertyName: "optionTestIdKey", publicName: "optionTestIdKey", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", multiSelectionChange: "multiSelectionChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSelectComponent, isStandalone: true, selector: "tn-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionGroups: { classPropertyName: "optionGroups", publicName: "optionGroups", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, noOptionsLabel: { classPropertyName: "noOptionsLabel", publicName: "noOptionsLabel", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, optionTestIdKey: { classPropertyName: "optionTestIdKey", publicName: "optionTestIdKey", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", multiSelectionChange: "multiSelectionChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnSelectComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-select-container\">\n  <!-- Select Trigger -->\n  <div\n    #triggerEl\n    class=\"tn-select-trigger\"\n    role=\"combobox\"\n    tnTestIdType=\"select\"\n    [tnTestId]=\"resolvedTestId()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [class.disabled]=\"isDisabled()\"\n    [class.open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + idNamespace() : null\"\n    [attr.aria-label]=\"ariaLabel() ?? placeholder()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-activedescendant]=\"isOpen() ? focusedOptionId() : null\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Display Text -->\n    <span\n      class=\"tn-select-text\"\n      [class.placeholder]=\"multiple() ? selectedValues().length === 0 : (selectedValue() === null || selectedValue() === undefined)\">\n      {{ displayText() }}\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <polyline points=\"6,9 12,15 18,9\" />\n      </svg>\n    </div>\n  </div>\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. The trigger keeps DOM focus throughout (combobox\n     pattern); options use aria-activedescendant for virtual focus. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-select-dropdown\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple()\"\n    [attr.id]=\"'tn-select-dropdown-' + idNamespace()\">\n\n    <!-- Options List -->\n    <div class=\"tn-select-options\">\n      <!-- Regular Options (preceded by the synthetic empty option when allowEmpty is set) -->\n      @for (option of displayOptions(); track $index) {\n        <!-- Option activation lives on the trigger via aria-activedescendant; options have tabindex=\"-1\" and never receive DOM focus. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n        <div\n          class=\"tn-select-option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          tnTestIdType=\"option\"\n          [class.tn-select-empty-option]=\"isEmptyOption(option)\"\n          [tnTestId]=\"optionTestIdParts(option)\"\n          [attr.id]=\"optionId(option)\"\n          [class.selected]=\"isOptionSelected(option)\"\n          [class.focused]=\"isOptionFocused(option)\"\n          [class.disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"isOptionSelected(option)\"\n          [attr.aria-disabled]=\"option.disabled\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onOptionClick(option)\">\n          @if (multiple()) {\n            <tn-checkbox\n              class=\"tn-select-check\"\n              label=\"\"\n              [checked]=\"isOptionSelected(option)\"\n              [disabled]=\"true\"\n              [hideLabel]=\"true\" />\n          }\n          {{ option.label }}\n        </div>\n      }\n\n      <!-- Option Groups -->\n      @for (group of optionGroups(); track $index; let isFirst = $first) {\n        <!-- Group Separator (not shown before first group if we have regular options) -->\n        @if (!isFirst || displayOptions().length > 0) {\n          <div\n            class=\"tn-select-separator\"\n            role=\"separator\">\n          </div>\n        }\n\n        <div role=\"group\" [attr.aria-labelledby]=\"'tn-select-group-' + idNamespace() + '-' + $index\">\n          <!-- Group Label -->\n          <div\n            class=\"tn-select-group-label\"\n            [attr.id]=\"'tn-select-group-' + idNamespace() + '-' + $index\"\n            [class.disabled]=\"group.disabled\">\n            {{ group.label }}\n          </div>\n\n          <!-- Group Options -->\n          @for (option of group.options; track $index) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n            <div\n              class=\"tn-select-option\"\n              role=\"option\"\n              tabindex=\"-1\"\n              tnTestIdType=\"option\"\n              [tnTestId]=\"optionTestIdParts(option)\"\n              [attr.id]=\"optionId(option)\"\n              [class.selected]=\"isOptionSelected(option)\"\n              [class.focused]=\"isOptionFocused(option)\"\n              [class.disabled]=\"option.disabled || group.disabled\"\n              [attr.aria-selected]=\"isOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled || group.disabled\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onOptionClick(option, !!group.disabled)\">\n              @if (multiple()) {\n                <tn-checkbox\n                  class=\"tn-select-check\"\n                  label=\"\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"true\"\n                  [hideLabel]=\"true\" />\n              }\n              {{ option.label }}\n            </div>\n          }\n        </div>\n      }\n\n      <!-- No Options Message -->\n      @if (!hasAnyOptions()) {\n        <div class=\"tn-select-no-options\">\n          {{ noOptionsLabel() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-select-label{display:block;margin-bottom:.5rem;font-size:1rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-error, #dc3545) 25%,transparent)}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{--tn-select-dropdown-max-height: 350px;background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:var(--tn-select-dropdown-max-height)}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:var(--tn-select-dropdown-max-height)}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;overflow-wrap:anywhere;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg1, #212529)}.tn-select-option:hover:not(.disabled):not(.focused){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-select-option.focused{background-color:var(--tn-alt-bg2, #e8f4fd);box-shadow:inset 2px 0 0 var(--tn-primary, #007bff)}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-option.tn-select-empty-option{color:var(--tn-fg2, #6c757d)}.tn-select-check{margin-right:.5rem;flex-shrink:0;pointer-events:none}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"], dependencies: [{ kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-select-container\">\n  <!-- Select Trigger -->\n  <div\n    #triggerEl\n    class=\"tn-select-trigger\"\n    role=\"combobox\"\n    tnTestIdType=\"select\"\n    [tnTestId]=\"resolvedTestId()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [class.disabled]=\"isDisabled()\"\n    [class.open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + idNamespace() : null\"\n    [attr.aria-label]=\"triggerAriaLabel()\"\n    [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n    [attr.aria-describedby]=\"fieldAria.describedby()\"\n    [attr.aria-invalid]=\"fieldAria.invalid()\"\n    [attr.aria-required]=\"fieldAria.required()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-activedescendant]=\"isOpen() ? focusedOptionId() : null\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Display Text -->\n    <span\n      class=\"tn-select-text\"\n      [class.placeholder]=\"multiple() ? selectedValues().length === 0 : (selectedValue() === null || selectedValue() === undefined)\">\n      {{ displayText() }}\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <polyline points=\"6,9 12,15 18,9\" />\n      </svg>\n    </div>\n  </div>\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. The trigger keeps DOM focus throughout (combobox\n     pattern); options use aria-activedescendant for virtual focus. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-select-dropdown\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple()\"\n    [attr.id]=\"'tn-select-dropdown-' + idNamespace()\">\n\n    <!-- Options List -->\n    <div class=\"tn-select-options\">\n      <!-- Select-all row (multiple mode with showSelectAll). Toggles every\n           selectable option; its checkbox reflects all/some/none. -->\n      @if (showSelectAllRow()) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n        <div\n          class=\"tn-select-option tn-select-select-all\"\n          role=\"option\"\n          tabindex=\"-1\"\n          tnTestIdType=\"option\"\n          [tnTestId]=\"selectAllTestIdParts()\"\n          [attr.id]=\"selectAllId()\"\n          [class.selected]=\"allSelected()\"\n          [class.focused]=\"isSelectAllFocused()\"\n          [attr.aria-selected]=\"allSelected()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"toggleSelectAll()\">\n          <tn-checkbox\n            class=\"tn-select-check\"\n            label=\"\"\n            [checked]=\"allSelected()\"\n            [indeterminate]=\"selectAllIndeterminate()\"\n            [disabled]=\"true\"\n            [hideLabel]=\"true\" />\n          {{ selectAllLabel() }}\n        </div>\n        <div class=\"tn-select-separator\" role=\"separator\"></div>\n      }\n\n      <!-- Regular Options (preceded by the synthetic empty option when allowEmpty is set) -->\n      @for (option of displayOptions(); track $index) {\n        <!-- Option activation lives on the trigger via aria-activedescendant; options have tabindex=\"-1\" and never receive DOM focus. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n        <div\n          class=\"tn-select-option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          tnTestIdType=\"option\"\n          [class.tn-select-empty-option]=\"isEmptyOption(option)\"\n          [tnTestId]=\"optionTestIdParts(option)\"\n          [attr.id]=\"optionId(option)\"\n          [class.selected]=\"isOptionSelected(option)\"\n          [class.focused]=\"isOptionFocused(option)\"\n          [class.disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"isOptionSelected(option)\"\n          [attr.aria-disabled]=\"option.disabled\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onOptionClick(option)\">\n          @if (multiple()) {\n            <tn-checkbox\n              class=\"tn-select-check\"\n              label=\"\"\n              [checked]=\"isOptionSelected(option)\"\n              [disabled]=\"true\"\n              [hideLabel]=\"true\" />\n          }\n          {{ option.label }}\n        </div>\n      }\n\n      <!-- Option Groups -->\n      @for (group of optionGroups(); track $index; let isFirst = $first) {\n        <!-- Group Separator (not shown before first group if we have regular options) -->\n        @if (!isFirst || displayOptions().length > 0) {\n          <div\n            class=\"tn-select-separator\"\n            role=\"separator\">\n          </div>\n        }\n\n        <div role=\"group\" [attr.aria-labelledby]=\"'tn-select-group-' + idNamespace() + '-' + $index\">\n          <!-- Group Label -->\n          <div\n            class=\"tn-select-group-label\"\n            [attr.id]=\"'tn-select-group-' + idNamespace() + '-' + $index\"\n            [class.disabled]=\"group.disabled\">\n            {{ group.label }}\n          </div>\n\n          <!-- Group Options -->\n          @for (option of group.options; track $index) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n            <div\n              class=\"tn-select-option\"\n              role=\"option\"\n              tabindex=\"-1\"\n              tnTestIdType=\"option\"\n              [tnTestId]=\"optionTestIdParts(option)\"\n              [attr.id]=\"optionId(option)\"\n              [class.selected]=\"isOptionSelected(option)\"\n              [class.focused]=\"isOptionFocused(option)\"\n              [class.disabled]=\"option.disabled || group.disabled\"\n              [attr.aria-selected]=\"isOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled || group.disabled\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onOptionClick(option, !!group.disabled)\">\n              @if (multiple()) {\n                <tn-checkbox\n                  class=\"tn-select-check\"\n                  label=\"\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"true\"\n                  [hideLabel]=\"true\" />\n              }\n              {{ option.label }}\n            </div>\n          }\n        </div>\n      }\n\n      <!-- No Options Message -->\n      @if (!hasAnyOptions()) {\n        <div class=\"tn-select-no-options\">\n          {{ noOptionsLabel() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-select-label{display:block;margin-bottom:.5rem;font-size:1rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-error, #dc3545) 25%,transparent)}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{--tn-select-dropdown-max-height: 350px;background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:var(--tn-select-dropdown-max-height)}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:var(--tn-select-dropdown-max-height)}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;overflow-wrap:anywhere;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg1, #212529)}.tn-select-option:hover:not(.disabled):not(.focused){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-select-option.focused{background-color:var(--tn-alt-bg2, #e8f4fd);box-shadow:inset 2px 0 0 var(--tn-primary, #007bff)}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-option.tn-select-empty-option{color:var(--tn-fg2, #6c757d)}.tn-select-select-all{font-weight:600}.tn-select-check{margin-right:.5rem;flex-shrink:0;pointer-events:none}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"], dependencies: [{ kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSelectComponent, decorators: [{
             type: Component,
@@ -9313,8 +9533,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             useExisting: forwardRef(() => TnSelectComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tn-select-container\">\n  <!-- Select Trigger -->\n  <div\n    #triggerEl\n    class=\"tn-select-trigger\"\n    role=\"combobox\"\n    tnTestIdType=\"select\"\n    [tnTestId]=\"resolvedTestId()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [class.disabled]=\"isDisabled()\"\n    [class.open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + idNamespace() : null\"\n    [attr.aria-label]=\"ariaLabel() ?? placeholder()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-activedescendant]=\"isOpen() ? focusedOptionId() : null\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Display Text -->\n    <span\n      class=\"tn-select-text\"\n      [class.placeholder]=\"multiple() ? selectedValues().length === 0 : (selectedValue() === null || selectedValue() === undefined)\">\n      {{ displayText() }}\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <polyline points=\"6,9 12,15 18,9\" />\n      </svg>\n    </div>\n  </div>\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. The trigger keeps DOM focus throughout (combobox\n     pattern); options use aria-activedescendant for virtual focus. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-select-dropdown\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple()\"\n    [attr.id]=\"'tn-select-dropdown-' + idNamespace()\">\n\n    <!-- Options List -->\n    <div class=\"tn-select-options\">\n      <!-- Regular Options (preceded by the synthetic empty option when allowEmpty is set) -->\n      @for (option of displayOptions(); track $index) {\n        <!-- Option activation lives on the trigger via aria-activedescendant; options have tabindex=\"-1\" and never receive DOM focus. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n        <div\n          class=\"tn-select-option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          tnTestIdType=\"option\"\n          [class.tn-select-empty-option]=\"isEmptyOption(option)\"\n          [tnTestId]=\"optionTestIdParts(option)\"\n          [attr.id]=\"optionId(option)\"\n          [class.selected]=\"isOptionSelected(option)\"\n          [class.focused]=\"isOptionFocused(option)\"\n          [class.disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"isOptionSelected(option)\"\n          [attr.aria-disabled]=\"option.disabled\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onOptionClick(option)\">\n          @if (multiple()) {\n            <tn-checkbox\n              class=\"tn-select-check\"\n              label=\"\"\n              [checked]=\"isOptionSelected(option)\"\n              [disabled]=\"true\"\n              [hideLabel]=\"true\" />\n          }\n          {{ option.label }}\n        </div>\n      }\n\n      <!-- Option Groups -->\n      @for (group of optionGroups(); track $index; let isFirst = $first) {\n        <!-- Group Separator (not shown before first group if we have regular options) -->\n        @if (!isFirst || displayOptions().length > 0) {\n          <div\n            class=\"tn-select-separator\"\n            role=\"separator\">\n          </div>\n        }\n\n        <div role=\"group\" [attr.aria-labelledby]=\"'tn-select-group-' + idNamespace() + '-' + $index\">\n          <!-- Group Label -->\n          <div\n            class=\"tn-select-group-label\"\n            [attr.id]=\"'tn-select-group-' + idNamespace() + '-' + $index\"\n            [class.disabled]=\"group.disabled\">\n            {{ group.label }}\n          </div>\n\n          <!-- Group Options -->\n          @for (option of group.options; track $index) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n            <div\n              class=\"tn-select-option\"\n              role=\"option\"\n              tabindex=\"-1\"\n              tnTestIdType=\"option\"\n              [tnTestId]=\"optionTestIdParts(option)\"\n              [attr.id]=\"optionId(option)\"\n              [class.selected]=\"isOptionSelected(option)\"\n              [class.focused]=\"isOptionFocused(option)\"\n              [class.disabled]=\"option.disabled || group.disabled\"\n              [attr.aria-selected]=\"isOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled || group.disabled\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onOptionClick(option, !!group.disabled)\">\n              @if (multiple()) {\n                <tn-checkbox\n                  class=\"tn-select-check\"\n                  label=\"\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"true\"\n                  [hideLabel]=\"true\" />\n              }\n              {{ option.label }}\n            </div>\n          }\n        </div>\n      }\n\n      <!-- No Options Message -->\n      @if (!hasAnyOptions()) {\n        <div class=\"tn-select-no-options\">\n          {{ noOptionsLabel() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-select-label{display:block;margin-bottom:.5rem;font-size:1rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-error, #dc3545) 25%,transparent)}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{--tn-select-dropdown-max-height: 350px;background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:var(--tn-select-dropdown-max-height)}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:var(--tn-select-dropdown-max-height)}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;overflow-wrap:anywhere;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg1, #212529)}.tn-select-option:hover:not(.disabled):not(.focused){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-select-option.focused{background-color:var(--tn-alt-bg2, #e8f4fd);box-shadow:inset 2px 0 0 var(--tn-primary, #007bff)}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-option.tn-select-empty-option{color:var(--tn-fg2, #6c757d)}.tn-select-check{margin-right:.5rem;flex-shrink:0;pointer-events:none}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroups", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], noOptionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsLabel", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], optionTestIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTestIdKey", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], multiSelectionChange: [{ type: i0.Output, args: ["multiSelectionChange"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tn-select-container\">\n  <!-- Select Trigger -->\n  <div\n    #triggerEl\n    class=\"tn-select-trigger\"\n    role=\"combobox\"\n    tnTestIdType=\"select\"\n    [tnTestId]=\"resolvedTestId()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [class.disabled]=\"isDisabled()\"\n    [class.open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + idNamespace() : null\"\n    [attr.aria-label]=\"triggerAriaLabel()\"\n    [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n    [attr.aria-describedby]=\"fieldAria.describedby()\"\n    [attr.aria-invalid]=\"fieldAria.invalid()\"\n    [attr.aria-required]=\"fieldAria.required()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-activedescendant]=\"isOpen() ? focusedOptionId() : null\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Display Text -->\n    <span\n      class=\"tn-select-text\"\n      [class.placeholder]=\"multiple() ? selectedValues().length === 0 : (selectedValue() === null || selectedValue() === undefined)\">\n      {{ displayText() }}\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <polyline points=\"6,9 12,15 18,9\" />\n      </svg>\n    </div>\n  </div>\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. The trigger keeps DOM focus throughout (combobox\n     pattern); options use aria-activedescendant for virtual focus. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-select-dropdown\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple()\"\n    [attr.id]=\"'tn-select-dropdown-' + idNamespace()\">\n\n    <!-- Options List -->\n    <div class=\"tn-select-options\">\n      <!-- Select-all row (multiple mode with showSelectAll). Toggles every\n           selectable option; its checkbox reflects all/some/none. -->\n      @if (showSelectAllRow()) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n        <div\n          class=\"tn-select-option tn-select-select-all\"\n          role=\"option\"\n          tabindex=\"-1\"\n          tnTestIdType=\"option\"\n          [tnTestId]=\"selectAllTestIdParts()\"\n          [attr.id]=\"selectAllId()\"\n          [class.selected]=\"allSelected()\"\n          [class.focused]=\"isSelectAllFocused()\"\n          [attr.aria-selected]=\"allSelected()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"toggleSelectAll()\">\n          <tn-checkbox\n            class=\"tn-select-check\"\n            label=\"\"\n            [checked]=\"allSelected()\"\n            [indeterminate]=\"selectAllIndeterminate()\"\n            [disabled]=\"true\"\n            [hideLabel]=\"true\" />\n          {{ selectAllLabel() }}\n        </div>\n        <div class=\"tn-select-separator\" role=\"separator\"></div>\n      }\n\n      <!-- Regular Options (preceded by the synthetic empty option when allowEmpty is set) -->\n      @for (option of displayOptions(); track $index) {\n        <!-- Option activation lives on the trigger via aria-activedescendant; options have tabindex=\"-1\" and never receive DOM focus. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n        <div\n          class=\"tn-select-option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          tnTestIdType=\"option\"\n          [class.tn-select-empty-option]=\"isEmptyOption(option)\"\n          [tnTestId]=\"optionTestIdParts(option)\"\n          [attr.id]=\"optionId(option)\"\n          [class.selected]=\"isOptionSelected(option)\"\n          [class.focused]=\"isOptionFocused(option)\"\n          [class.disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"isOptionSelected(option)\"\n          [attr.aria-disabled]=\"option.disabled\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onOptionClick(option)\">\n          @if (multiple()) {\n            <tn-checkbox\n              class=\"tn-select-check\"\n              label=\"\"\n              [checked]=\"isOptionSelected(option)\"\n              [disabled]=\"true\"\n              [hideLabel]=\"true\" />\n          }\n          {{ option.label }}\n        </div>\n      }\n\n      <!-- Option Groups -->\n      @for (group of optionGroups(); track $index; let isFirst = $first) {\n        <!-- Group Separator (not shown before first group if we have regular options) -->\n        @if (!isFirst || displayOptions().length > 0) {\n          <div\n            class=\"tn-select-separator\"\n            role=\"separator\">\n          </div>\n        }\n\n        <div role=\"group\" [attr.aria-labelledby]=\"'tn-select-group-' + idNamespace() + '-' + $index\">\n          <!-- Group Label -->\n          <div\n            class=\"tn-select-group-label\"\n            [attr.id]=\"'tn-select-group-' + idNamespace() + '-' + $index\"\n            [class.disabled]=\"group.disabled\">\n            {{ group.label }}\n          </div>\n\n          <!-- Group Options -->\n          @for (option of group.options; track $index) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n            <div\n              class=\"tn-select-option\"\n              role=\"option\"\n              tabindex=\"-1\"\n              tnTestIdType=\"option\"\n              [tnTestId]=\"optionTestIdParts(option)\"\n              [attr.id]=\"optionId(option)\"\n              [class.selected]=\"isOptionSelected(option)\"\n              [class.focused]=\"isOptionFocused(option)\"\n              [class.disabled]=\"option.disabled || group.disabled\"\n              [attr.aria-selected]=\"isOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled || group.disabled\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onOptionClick(option, !!group.disabled)\">\n              @if (multiple()) {\n                <tn-checkbox\n                  class=\"tn-select-check\"\n                  label=\"\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"true\"\n                  [hideLabel]=\"true\" />\n              }\n              {{ option.label }}\n            </div>\n          }\n        </div>\n      }\n\n      <!-- No Options Message -->\n      @if (!hasAnyOptions()) {\n        <div class=\"tn-select-no-options\">\n          {{ noOptionsLabel() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-select-label{display:block;margin-bottom:.5rem;font-size:1rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-error, #dc3545) 25%,transparent)}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{--tn-select-dropdown-max-height: 350px;background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:var(--tn-select-dropdown-max-height)}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:var(--tn-select-dropdown-max-height)}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;overflow-wrap:anywhere;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg1, #212529)}.tn-select-option:hover:not(.disabled):not(.focused){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-select-option.focused{background-color:var(--tn-alt-bg2, #e8f4fd);box-shadow:inset 2px 0 0 var(--tn-primary, #007bff)}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-option.tn-select-empty-option{color:var(--tn-fg2, #6c757d)}.tn-select-select-all{font-weight:600}.tn-select-check{margin-right:.5rem;flex-shrink:0;pointer-events:none}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroups", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], noOptionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsLabel", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], optionTestIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTestIdKey", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], multiSelectionChange: [{ type: i0.Output, args: ["multiSelectionChange"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
 /**
  * Harness for interacting with tn-select in tests.
@@ -9472,7 +9692,10 @@ class TnSelectHarness extends ComponentHarness {
         await this.open();
         // Dropdown panel is rendered in a CDK overlay (outside the host element),
         // so we search the document root rather than the harness-local subtree.
-        const options = await this.documentRootLocatorFactory().locatorForAll('.tn-select-option')();
+        // Exclude the select-all row (`.tn-select-select-all`) — it's a bulk
+        // action, not a choice; use `toggleSelectAll()` for it.
+        const options = await this.documentRootLocatorFactory()
+            .locatorForAll('.tn-select-option:not(.tn-select-select-all)')();
         for (const option of options) {
             const text = (await option.text()).trim();
             const matches = filter instanceof RegExp
@@ -9532,13 +9755,55 @@ class TnSelectHarness extends ComponentHarness {
         await this.open();
         // Dropdown panel is rendered in a CDK overlay (outside the host element),
         // so we search the document root rather than the harness-local subtree.
-        const options = await this.documentRootLocatorFactory().locatorForAll('.tn-select-option')();
+        // The select-all row is excluded — it's a bulk action, not an option.
+        const options = await this.documentRootLocatorFactory()
+            .locatorForAll('.tn-select-option:not(.tn-select-select-all)')();
         const labels = [];
         for (const option of options) {
             labels.push((await option.text()).trim());
         }
         return labels;
     }
+    /**
+     * Toggles the select-all row (multiple mode with `showSelectAll`). Opens the
+     * dropdown if needed. Throws when the select-all row isn't present.
+     *
+     * @returns Promise that resolves once the row has been clicked.
+     *
+     * @example
+     * ```typescript
+     * const select = await loader.getHarness(TnSelectHarness);
+     * await select.toggleSelectAll(); // selects every option
+     * await select.toggleSelectAll(); // clears them again
+     * ```
+     */
+    async toggleSelectAll() {
+        await this.open();
+        // Rendered in the CDK overlay, outside the host subtree.
+        const row = await this.documentRootLocatorFactory()
+            .locatorForOptional('.tn-select-select-all')();
+        if (!row) {
+            await this.close();
+            throw new Error('Select has no select-all row — set `multiple` and `showSelectAll`.');
+        }
+        await row.click();
+    }
+    /**
+     * Whether the select-all checkbox reads as fully checked (all options
+     * selected). Opens the dropdown if needed. Throws when the row isn't present.
+     *
+     * @returns Promise resolving to true when every option is selected.
+     */
+    async isSelectAllChecked() {
+        await this.open();
+        const row = await this.documentRootLocatorFactory()
+            .locatorForOptional('.tn-select-select-all')();
+        if (!row) {
+            await this.close();
+            throw new Error('Select has no select-all row — set `multiple` and `showSelectAll`.');
+        }
+        return row.hasClass('selected');
+    }
 }
 /// <reference types="jest" />
@@ -11251,7 +11516,7 @@ class TnTablePagerComponent {
         provider.setPagination(pagination);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTablePagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTablePagerComponent, isStandalone: true, selector: "tn-table-pager", inputs: { testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, ofLabel: { classPropertyName: "ofLabel", publicName: "ofLabel", isSignal: true, isRequired: false, transformFunction: null }, firstPageLabel: { classPropertyName: "firstPageLabel", publicName: "firstPageLabel", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: false, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: false, transformFunction: null }, lastPageLabel: { classPropertyName: "lastPageLabel", publicName: "lastPageLabel", isSignal: true, isRequired: false, transformFunction: null }, tablePaginationLabel: { classPropertyName: "tablePaginationLabel", publicName: "tablePaginationLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedTablePaginationLabel()" }, classAttribute: "tn-table-pager" }, ngImport: i0, template: "<div class=\"tn-table-pager__page-size\">\n  <span class=\"tn-table-pager__label\">{{ resolvedItemsPerPageLabel() }}:</span>\n  <tn-select\n    class=\"tn-table-pager__size-select\"\n    [testId]=\"childTestId('page-size')\"\n    [options]=\"pageSizeSelectOptions()\"\n    [ariaLabel]=\"resolvedItemsPerPageLabel()\"\n    [ngModel]=\"pageSize()\"\n    (ngModelChange)=\"onPageSizeChange($event)\" />\n</div>\n\n<span class=\"tn-table-pager__range\">\n  @if (effectiveTotalItems() === 0) {\n    0 {{ resolvedOfLabel() }} 0\n  } @else if (lastItemOnPage() > firstItemOnPage()) {\n    {{ firstItemOnPage() }} \u2013 {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  } @else {\n    {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  }\n</span>\n\n<div class=\"tn-table-pager__buttons\">\n  <tn-icon-button\n    name=\"page-first\"\n    library=\"mdi\"\n    [testId]=\"childTestId('first-page')\"\n    [ariaLabel]=\"resolvedFirstPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"goToPage(1)\" />\n  <tn-icon-button\n    name=\"chevron-left\"\n    library=\"mdi\"\n    [testId]=\"childTestId('previous-page')\"\n    [ariaLabel]=\"resolvedPreviousPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"previousPage()\" />\n  <tn-icon-button\n    name=\"chevron-right\"\n    library=\"mdi\"\n    [testId]=\"childTestId('next-page')\"\n    [ariaLabel]=\"resolvedNextPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"nextPage()\" />\n  <tn-icon-button\n    name=\"page-last\"\n    library=\"mdi\"\n    [testId]=\"childTestId('last-page')\"\n    [ariaLabel]=\"resolvedLastPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"goToPage(totalPages())\" />\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:10px;background-color:var(--tn-bg2);border:1px solid var(--tn-lines);color:var(--tn-fg2)}.tn-table-pager__page-size{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.tn-table-pager__label{white-space:nowrap}.tn-table-pager__size-select{min-width:84px}.tn-table-pager__range{white-space:nowrap}.tn-table-pager__buttons{display:flex;align-items:center;gap:4px}@media(max-width:600px){:host{gap:8px}.tn-table-pager__page-size{gap:4px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "library", "iconClass"], outputs: ["onClick"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "allowEmpty", "emptyLabel", "disabled", "testId", "multiple", "optionTestIdKey", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTablePagerComponent, isStandalone: true, selector: "tn-table-pager", inputs: { testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, ofLabel: { classPropertyName: "ofLabel", publicName: "ofLabel", isSignal: true, isRequired: false, transformFunction: null }, firstPageLabel: { classPropertyName: "firstPageLabel", publicName: "firstPageLabel", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: false, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: false, transformFunction: null }, lastPageLabel: { classPropertyName: "lastPageLabel", publicName: "lastPageLabel", isSignal: true, isRequired: false, transformFunction: null }, tablePaginationLabel: { classPropertyName: "tablePaginationLabel", publicName: "tablePaginationLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedTablePaginationLabel()" }, classAttribute: "tn-table-pager" }, ngImport: i0, template: "<div class=\"tn-table-pager__page-size\">\n  <span class=\"tn-table-pager__label\">{{ resolvedItemsPerPageLabel() }}:</span>\n  <tn-select\n    class=\"tn-table-pager__size-select\"\n    [testId]=\"childTestId('page-size')\"\n    [options]=\"pageSizeSelectOptions()\"\n    [ariaLabel]=\"resolvedItemsPerPageLabel()\"\n    [ngModel]=\"pageSize()\"\n    (ngModelChange)=\"onPageSizeChange($event)\" />\n</div>\n\n<span class=\"tn-table-pager__range\">\n  @if (effectiveTotalItems() === 0) {\n    0 {{ resolvedOfLabel() }} 0\n  } @else if (lastItemOnPage() > firstItemOnPage()) {\n    {{ firstItemOnPage() }} \u2013 {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  } @else {\n    {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  }\n</span>\n\n<div class=\"tn-table-pager__buttons\">\n  <tn-icon-button\n    name=\"page-first\"\n    library=\"mdi\"\n    [testId]=\"childTestId('first-page')\"\n    [ariaLabel]=\"resolvedFirstPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"goToPage(1)\" />\n  <tn-icon-button\n    name=\"chevron-left\"\n    library=\"mdi\"\n    [testId]=\"childTestId('previous-page')\"\n    [ariaLabel]=\"resolvedPreviousPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"previousPage()\" />\n  <tn-icon-button\n    name=\"chevron-right\"\n    library=\"mdi\"\n    [testId]=\"childTestId('next-page')\"\n    [ariaLabel]=\"resolvedNextPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"nextPage()\" />\n  <tn-icon-button\n    name=\"page-last\"\n    library=\"mdi\"\n    [testId]=\"childTestId('last-page')\"\n    [ariaLabel]=\"resolvedLastPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"goToPage(totalPages())\" />\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:10px;background-color:var(--tn-bg2);border:1px solid var(--tn-lines);color:var(--tn-fg2)}.tn-table-pager__page-size{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.tn-table-pager__label{white-space:nowrap}.tn-table-pager__size-select{min-width:84px}.tn-table-pager__range{white-space:nowrap}.tn-table-pager__buttons{display:flex;align-items:center;gap:4px}@media(max-width:600px){:host{gap:8px}.tn-table-pager__page-size{gap:4px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "library", "iconClass"], outputs: ["onClick"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "allowEmpty", "emptyLabel", "disabled", "showSelectAll", "selectAllLabel", "testId", "multiple", "optionTestIdKey", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTablePagerComponent, decorators: [{
             type: Component,
@@ -11446,7 +11711,7 @@ class TnTreeNodeComponent extends CdkTreeNode {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTreeNodeComponent, isStandalone: true, selector: "tn-tree-node", host: { attributes: { "role": "treeitem" }, properties: { "attr.aria-level": "level + 1", "attr.aria-expanded": "isExpandable ? isExpanded : null" }, classAttribute: "tn-tree-node-wrapper" }, providers: [
             { provide: CdkTreeNode, useExisting: TnTreeNodeComponent }
-        ], exportAs: ["tnTreeNode"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<div class=\"tn-tree-node\"\n     cdkTreeNodeToggle\n     role=\"treeitem\"\n     [class.tn-tree-node--expandable]=\"isExpandable\"\n     [attr.aria-level]=\"level + 1\"\n     [attr.aria-expanded]=\"isExpandable ? isExpanded : null\"\n     [attr.aria-selected]=\"false\"\n     [style.cursor]=\"isExpandable ? 'pointer' : 'default'\">\n  \n  <div class=\"tn-tree-node__content\">\n    <!-- Arrow icon for expandable nodes -->\n    @if (isExpandable) {\n      <div\n        class=\"tn-tree-node__toggle\"\n        [class.tn-tree-node__toggle--expanded]=\"isExpanded\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <!-- Spacer for non-expandable nodes -->\n    @if (!isExpandable) {\n      <div class=\"tn-tree-node__spacer\"></div>\n    }\n    \n    <!-- Node content -->\n    <div class=\"tn-tree-node__text\">\n      <ng-content />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tn-tree-node{border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-tree-node:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node:last-child{border-bottom:none}.tn-tree-node--expandable{cursor:pointer}.tn-tree-node--expandable:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node--expandable:active{background-color:var(--tn-alt-bg1)}.tn-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px}.tn-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;color:var(--tn-fg2);cursor:pointer;border-radius:3px;transition:all .2s ease;flex-shrink:0}.tn-tree-node__toggle:hover{background-color:var(--tn-alt-bg2);color:var(--tn-fg1)}.tn-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:1px}.tn-tree-node__toggle svg{transition:transform .2s ease;transform:rotate(0)}.tn-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-tree-node__text{flex:1;min-width:0;color:var(--tn-fg1)}.tn-tree-node__children{padding-left:24px}.tn-tree-invisible{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], exportAs: ["tnTreeNode"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<!-- The `role=\"treeitem\"` (plus aria-level/aria-expanded) lives on the host\n     `.tn-tree-node-wrapper`, so this inner div is a presentational container \u2014\n     no role or aria-* here, to avoid exposing a second, nested treeitem to AT. -->\n<div class=\"tn-tree-node\"\n     cdkTreeNodeToggle\n     [class.tn-tree-node--expandable]=\"isExpandable\"\n     [style.cursor]=\"isExpandable ? 'pointer' : 'default'\">\n  \n  <div class=\"tn-tree-node__content\">\n    <!-- Arrow icon for expandable nodes -->\n    @if (isExpandable) {\n      <div\n        class=\"tn-tree-node__toggle\"\n        [class.tn-tree-node__toggle--expanded]=\"isExpanded\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <!-- Spacer for non-expandable nodes -->\n    @if (!isExpandable) {\n      <div class=\"tn-tree-node__spacer\"></div>\n    }\n    \n    <!-- Node content -->\n    <div class=\"tn-tree-node__text\">\n      <ng-content />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tn-tree-node{border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-tree-node:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node:last-child{border-bottom:none}.tn-tree-node--expandable{cursor:pointer}.tn-tree-node--expandable:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node--expandable:active{background-color:var(--tn-alt-bg1)}.tn-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px}.tn-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;color:var(--tn-fg2);cursor:pointer;border-radius:3px;transition:all .2s ease;flex-shrink:0}.tn-tree-node__toggle:hover{background-color:var(--tn-alt-bg2);color:var(--tn-fg1)}.tn-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:1px}.tn-tree-node__toggle svg{transition:transform .2s ease;transform:rotate(0)}.tn-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-tree-node__text{flex:1;min-width:0;color:var(--tn-fg1)}.tn-tree-node__children{padding-left:24px}.tn-tree-invisible{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeComponent, decorators: [{
             type: Component,
@@ -11457,7 +11722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[attr.aria-level]': 'level + 1',
                         '[attr.aria-expanded]': 'isExpandable ? isExpanded : null',
                         'role': 'treeitem'
-                    }, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tn-tree-node\"\n     cdkTreeNodeToggle\n     role=\"treeitem\"\n     [class.tn-tree-node--expandable]=\"isExpandable\"\n     [attr.aria-level]=\"level + 1\"\n     [attr.aria-expanded]=\"isExpandable ? isExpanded : null\"\n     [attr.aria-selected]=\"false\"\n     [style.cursor]=\"isExpandable ? 'pointer' : 'default'\">\n  \n  <div class=\"tn-tree-node__content\">\n    <!-- Arrow icon for expandable nodes -->\n    @if (isExpandable) {\n      <div\n        class=\"tn-tree-node__toggle\"\n        [class.tn-tree-node__toggle--expanded]=\"isExpanded\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <!-- Spacer for non-expandable nodes -->\n    @if (!isExpandable) {\n      <div class=\"tn-tree-node__spacer\"></div>\n    }\n    \n    <!-- Node content -->\n    <div class=\"tn-tree-node__text\">\n      <ng-content />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tn-tree-node{border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-tree-node:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node:last-child{border-bottom:none}.tn-tree-node--expandable{cursor:pointer}.tn-tree-node--expandable:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node--expandable:active{background-color:var(--tn-alt-bg1)}.tn-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px}.tn-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;color:var(--tn-fg2);cursor:pointer;border-radius:3px;transition:all .2s ease;flex-shrink:0}.tn-tree-node__toggle:hover{background-color:var(--tn-alt-bg2);color:var(--tn-fg1)}.tn-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:1px}.tn-tree-node__toggle svg{transition:transform .2s ease;transform:rotate(0)}.tn-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-tree-node__text{flex:1;min-width:0;color:var(--tn-fg1)}.tn-tree-node__children{padding-left:24px}.tn-tree-invisible{display:none}\n"] }]
+                    }, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The `role=\"treeitem\"` (plus aria-level/aria-expanded) lives on the host\n     `.tn-tree-node-wrapper`, so this inner div is a presentational container \u2014\n     no role or aria-* here, to avoid exposing a second, nested treeitem to AT. -->\n<div class=\"tn-tree-node\"\n     cdkTreeNodeToggle\n     [class.tn-tree-node--expandable]=\"isExpandable\"\n     [style.cursor]=\"isExpandable ? 'pointer' : 'default'\">\n  \n  <div class=\"tn-tree-node__content\">\n    <!-- Arrow icon for expandable nodes -->\n    @if (isExpandable) {\n      <div\n        class=\"tn-tree-node__toggle\"\n        [class.tn-tree-node__toggle--expanded]=\"isExpanded\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <!-- Spacer for non-expandable nodes -->\n    @if (!isExpandable) {\n      <div class=\"tn-tree-node__spacer\"></div>\n    }\n    \n    <!-- Node content -->\n    <div class=\"tn-tree-node__text\">\n      <ng-content />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tn-tree-node{border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-tree-node:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node:last-child{border-bottom:none}.tn-tree-node--expandable{cursor:pointer}.tn-tree-node--expandable:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node--expandable:active{background-color:var(--tn-alt-bg1)}.tn-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px}.tn-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;color:var(--tn-fg2);cursor:pointer;border-radius:3px;transition:all .2s ease;flex-shrink:0}.tn-tree-node__toggle:hover{background-color:var(--tn-alt-bg2);color:var(--tn-fg1)}.tn-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:1px}.tn-tree-node__toggle svg{transition:transform .2s ease;transform:rotate(0)}.tn-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-tree-node__text{flex:1;min-width:0;color:var(--tn-fg1)}.tn-tree-node__children{padding-left:24px}.tn-tree-invisible{display:none}\n"] }]
         }], ctorParameters: () => [] });
 class TnTreeNodeOutletDirective {
@@ -11542,6 +11807,679 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     }, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tn-nested-tree-node__content\">\n  <!-- Toggle button for expandable nodes (provided by component) -->\n  @if (isExpandable) {\n    <button\n      class=\"tn-nested-tree-node__toggle\"\n      cdkTreeNodeToggle\n      type=\"button\"\n      [class.tn-nested-tree-node__toggle--expanded]=\"isExpanded\"\n      [attr.aria-label]=\"'Toggle node'\">\n      <tn-icon\n        library=\"mdi\"\n        size=\"sm\"\n        style=\"transition: transform 0.2s ease;\"\n        [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n    </button>\n  }\n\n  <!-- Spacer for non-expandable nodes to maintain alignment -->\n  @if (!isExpandable) {\n    <div class=\"tn-nested-tree-node__spacer\"></div>\n  }\n\n  <!-- Consumer content -->\n  <ng-content />\n</div>\n\n<!-- Children container -->\n@if (isExpandable) {\n  <div class=\"tn-nested-tree-node-container\" role=\"group\" [class.tn-tree-invisible]=\"!isExpanded\">\n    <ng-content select=\"[slot=children]\" />\n  </div>\n}", styles: [".tn-nested-tree-node-wrapper{display:block;width:100%}.tn-nested-tree-node{display:block;width:100%;font-family:var(--tn-font-family-body);font-size:1rem;line-height:1.4;color:var(--tn-fg1)}.tn-nested-tree-node--expandable .tn-nested-tree-node__content{cursor:pointer}.tn-nested-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px;border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-nested-tree-node__content:hover{background-color:var(--tn-alt-bg2)}.tn-nested-tree-node__content:focus-within{background-color:var(--tn-alt-bg2);outline:2px solid var(--tn-primary);outline-offset:-2px}.tn-tree-invisible{display:none}.tn-nested-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;padding:0;border:none;background:transparent;border-radius:4px;cursor:pointer;color:var(--tn-fg2);transition:background-color .2s ease,color .2s ease}.tn-nested-tree-node__toggle:hover{background-color:var(--tn-bg3);color:var(--tn-fg1)}.tn-nested-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-nested-tree-node__toggle svg{transition:transform .2s ease}.tn-nested-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-nested-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-nested-tree-node__text{flex:1;display:flex;align-items:center;gap:8px;min-width:0;color:var(--tn-fg1)}div.tn-nested-tree-node-container{padding-left:40px}@media(prefers-reduced-motion:reduce){.tn-nested-tree-node__toggle svg,.tn-nested-tree-node__content,.tn-nested-tree-node__children{transition:none}}@media(prefers-contrast:high){.tn-nested-tree-node__content{border:1px solid transparent}.tn-nested-tree-node__content:hover,.tn-nested-tree-node__content:focus-within{border-color:var(--tn-fg1)}.tn-nested-tree-node__toggle{border:1px solid var(--tn-fg2)}.tn-nested-tree-node__toggle:hover,.tn-nested-tree-node__toggle:focus{border-color:var(--tn-fg1)}}\n"] }]
         }], ctorParameters: () => [] });
+/**
+ * Renders a single virtual tree row.
+ *
+ * `cdk-virtual-scroll-viewport` materialises this outlet for each row that scrolls
+ * into view; the outlet instantiates the node's template with its context and
+ * (re)binds `CdkTreeNode.mostRecentTreeNode.data`, so the row behaves exactly as a
+ * node rendered directly by the CDK tree. When the same DOM view is recycled for a
+ * different node (virtual scrolling reuses views), only the context is patched.
+ */
+class TnTreeVirtualScrollNodeOutletDirective {
+    _viewContainerRef = inject(ViewContainerRef);
+    _viewRef = null;
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    /**
+     * Re-assert the row's aria position every check. The viewport's recycling view
+     * repeater can swap the underlying DOM view for a different row without our
+     * `ngOnChanges` writing the new `aria-setsize`/`aria-posinset` in a way that
+     * survives the swap, so we reconcile the current element against the current data
+     * on each change-detection pass (two cheap attribute writes) — self-healing.
+     */
+    ngDoCheck() {
+        this.applyAriaPosition();
+        this.applyKeyboardAffordance();
+    }
+    ngOnChanges(changes) {
+        const dataChange = changes['data'];
+        const recreateView = dataChange ? this.shouldRecreateView(dataChange) : false;
+        if (recreateView) {
+            const viewContainerRef = this._viewContainerRef;
+            if (this._viewRef) {
+                viewContainerRef.remove(viewContainerRef.indexOf(this._viewRef));
+            }
+            this._viewRef = this.data()
+                ? viewContainerRef.createEmbeddedView(this.data().nodeDef.template, this.data().context)
+                : null;
+            // Bind the freshly-created CdkTreeNode to this row's data. `mostRecentTreeNode`
+            // is a global CDK static (verified against @angular/cdk 21.x) set synchronously
+            // while `createEmbeddedView` above instantiates the node template. This mirrors
+            // CDK's own internal wiring and assumes the node def's template contains exactly
+            // one CdkTreeNode; it is fragile under view recycling, hence the shape check that
+            // gates recreation. A CDK upgrade that changes this static would stop rows from
+            // binding their data — covered by the outlet's rendering tests.
+            if (CdkTreeNode.mostRecentTreeNode && this._viewRef) {
+                CdkTreeNode.mostRecentTreeNode.data = this.data().data;
+            }
+        }
+        else if (this._viewRef && this.data().context) {
+            this.updateExistingContext(this.data().context);
+        }
+    }
+    /**
+     * Whether the row must be re-instantiated (vs. patched in place). Every wrapper
+     * carries the same fixed key set (`data`/`context`/`nodeDef`/`posInSet`/`setSize`),
+     * so recreation comes down to whether the raw data node is a different reference —
+     * that is what marks a genuinely different row (a missing wrapper also recreates).
+     */
+    shouldRecreateView(dataChange) {
+        const prevValue = dataChange.previousValue;
+        const currValue = dataChange.currentValue;
+        return prevValue?.data !== currValue?.data;
+    }
+    /**
+     * Reflect posinset/setsize onto the row element so screen readers can announce
+     * "item N of M". Runs on every `ngDoCheck` (the hot CD path), so only write when the
+     * attribute actually differs — skipping the redundant `setAttribute` on the common
+     * pass where nothing changed.
+     */
+    applyAriaPosition() {
+        const root = this._viewRef?.rootNodes?.[0];
+        const data = this.data();
+        if (!root?.setAttribute || !data) {
+            return;
+        }
+        const setSize = String(data.setSize);
+        const posInSet = String(data.posInSet);
+        if (root.getAttribute('aria-setsize') !== setSize) {
+            root.setAttribute('aria-setsize', setSize);
+        }
+        if (root.getAttribute('aria-posinset') !== posInSet) {
+            root.setAttribute('aria-posinset', posInSet);
+        }
+    }
+    /**
+     * Make expandable rows keyboard-focusable so a user can Tab to a pool/branch and
+     * expand it with Enter/Space (the host `TnTreeVirtualScrollViewComponent` handles the
+     * key). The virtual viewport recycles a row's view between expandable and leaf nodes,
+     * so this reconciles every check; leaf rows are left to the consumer's own interactive
+     * content (e.g. a `routerLink` anchor). Expandability is read from `aria-expanded`,
+     * which `tn-tree-node` sets only on expandable nodes. Only touch the DOM on change —
+     * this runs on the hot CD path.
+     */
+    applyKeyboardAffordance() {
+        const root = this._viewRef?.rootNodes?.[0];
+        if (!root?.setAttribute) {
+            return;
+        }
+        const expandable = root.hasAttribute('aria-expanded');
+        if (expandable) {
+            if (root.getAttribute('tabindex') !== '0') {
+                root.setAttribute('tabindex', '0');
+            }
+        }
+        else if (root.getAttribute('tabindex') === '0') {
+            root.removeAttribute('tabindex');
+        }
+    }
+    updateExistingContext(ctx) {
+        if (!this._viewRef) {
+            return;
+        }
+        for (const propName of Object.keys(ctx)) {
+            this._viewRef.context[propName]
+                = this.data().context[propName];
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeVirtualScrollNodeOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: TnTreeVirtualScrollNodeOutletDirective, isStandalone: true, selector: "[tnTreeVirtualScrollNodeOutlet]", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeVirtualScrollNodeOutletDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tnTreeVirtualScrollNodeOutlet]',
+                    standalone: true,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+/** Default fixed row height (px) used by the virtual scroll viewport. */
+const defaultTreeItemSize = 48;
+/**
+ * Row counts for the default buffer sizes (how many extra rows of content the viewport
+ * renders past the visible area) and for the distance the user must scroll before the
+ * scroll-to-top button appears. Expressed in rows and multiplied by `itemSize()` at
+ * runtime (see resolvedMin/MaxBufferPx) so the defaults scale with a custom row height.
+ */
+const defaultMinBufferRows = 4;
+const defaultBufferRows = 8;
+const scrollToTopThresholdRows = 8;
+const scrollFrameScheduler = typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;
+/**
+ * A `tn-tree` that renders through a `cdk-virtual-scroll-viewport`, so only the
+ * rows currently in view are materialised in the DOM. Drop-in for large trees
+ * (thousands of nodes) where the plain `tn-tree` would render every node.
+ *
+ * Usage mirrors `tn-tree`: provide a `TnTreeFlatDataSource` + `FlatTreeControl`
+ * and one `*cdkTreeNodeDef` template. Rows are a fixed height (`itemSize`).
+ *
+ * ```html
+ * <tn-tree-virtual-scroll-view [dataSource]="dataSource" [treeControl]="treeControl" [itemSize]="52">
+ *   <tn-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding [routerLink]="...">
+ *     {{ node.name }}
+ *   </tn-tree-node>
+ * </tn-tree-virtual-scroll-view>
+ * ```
+ *
+ * Accessibility: rows are exposed with `role="treeitem"` plus `aria-level`,
+ * `aria-posinset` and `aria-setsize` (the latter two relative to the node's
+ * siblings — nodes sharing the same parent/level — per the WAI-ARIA tree
+ * pattern, not the flattened list of all visible rows), and the virtual-scroll
+ * wrappers are marked `role="presentation"` so assistive tech still sees the
+ * items as children of the `role="tree"` host.
+ *
+ * Keyboard: expandable rows are focusable and expand/collapse with Enter/Space (see
+ * {@link onTreeKeydown}), so a keyboard/AT user can operate the `aria-expanded` that
+ * each expandable `treeitem` advertises. Roving arrow-key / Home / End navigation
+ * BETWEEN nodes is NOT supported here, though — because rows are materialised (and
+ * recycled) by the virtual scroll viewport rather than registered with CdkTree's node
+ * outlet, the CDK `TreeKeyManager` has no stable node set to drive. Use Tab to move
+ * between rows, or the non-virtual `tn-tree` when full roving navigation is required.
+ */
+class TnTreeVirtualScrollViewComponent extends CdkTree {
+    destroyRef = inject(DestroyRef);
+    cdr = inject(ChangeDetectorRef);
+    virtualScrollViewport = viewChild.required(CdkVirtualScrollViewport);
+    /** Fixed row height in px. Must match the actual rendered node height. */
+    itemSize = input(defaultTreeItemSize, ...(ngDevMode ? [{ debugName: "itemSize" }] : []));
+    /**
+     * Viewport buffer sizes (px). Leave at 0 (the default) to derive them from `itemSize()`
+     * — {@link defaultMinBufferRows} / {@link defaultBufferRows} rows — so the buffers scale
+     * with a custom row height; pass an explicit px value to override. (A fixed px default
+     * would under-buffer a tall `itemSize`, even failing to buffer a single row when
+     * `itemSize > maxBufferPx`.)
+     */
+    minBufferPx = input(0, ...(ngDevMode ? [{ debugName: "minBufferPx" }] : []));
+    maxBufferPx = input(0, ...(ngDevMode ? [{ debugName: "maxBufferPx" }] : []));
+    /** `minBufferPx` resolved to px, falling back to a row-count default that tracks `itemSize()`. */
+    resolvedMinBufferPx = computed(() => this.minBufferPx() || this.itemSize() * defaultMinBufferRows, ...(ngDevMode ? [{ debugName: "resolvedMinBufferPx" }] : []));
+    /** `maxBufferPx` resolved to px, falling back to a row-count default that tracks `itemSize()`. */
+    resolvedMaxBufferPx = computed(() => this.maxBufferPx() || this.itemSize() * defaultBufferRows, ...(ngDevMode ? [{ debugName: "resolvedMaxBufferPx" }] : []));
+    /**
+     * When true the viewport scrolls with the window instead of an internal scroll area.
+     * `booleanAttribute` so the bare presence form (`<... scrollWindow>`) coerces to `true`
+     * rather than the empty-string (falsy) an un-transformed input would receive.
+     *
+     * Set once at initialisation — NOT reactive. The scroll listener, presentational roles
+     * and ResizeObserver are wired in `ngAfterViewInit` against the viewport that this input
+     * selected; toggling it later re-renders the viewport but does not re-run that wiring.
+     */
+    scrollWindow = input(false, { ...(ngDevMode ? { debugName: "scrollWindow" } : {}), transform: booleanAttribute });
+    /** Whether to show the floating "scroll to top" button once scrolled down. */
+    showScrollToTop = input(true, { ...(ngDevMode ? { debugName: "showScrollToTop" } : {}), transform: booleanAttribute });
+    /** Accessible label / tooltip for the scroll-to-top button (i18n is the consumer's job). */
+    scrollToTopLabel = input('Scroll to top', ...(ngDevMode ? [{ debugName: "scrollToTopLabel" }] : []));
+    /**
+     * Per-row trackBy over the ORIGINAL data node (not the internal wrapper). Strongly
+     * recommended: without it rows track by index, so the recycling viewport reuses a
+     * detached view for whatever node lands at that index on data changes. Pass a stable
+     * key (e.g. `(_, node) => node.id`) as the stories do.
+     */
+    nodeTrackBy = input(...(ngDevMode ? [undefined, { debugName: "nodeTrackBy" }] : []));
+    /** Emits the viewport's horizontal `scrollLeft` (used to sync a sticky column header). */
+    viewportScrolled = output();
+    /**
+     * Emits the observed content size whenever it changes (used to size a sticky header).
+     * `width` is the full rendered content width — including horizontal overflow past the
+     * viewport — which is what a horizontally-synced header needs. `height` is the observed
+     * content wrapper's height: the visible viewport height in internal-scroll mode, but the
+     * FULL content height (row count × `itemSize`) in `scrollWindow` mode, where the wrapper
+     * grows with the document. Consumers wanting the visible viewport height should not rely
+     * on this field in window mode.
+     */
+    viewportResized = output();
+    /** Last `scrollLeft` emitted via {@link viewportScrolled}; used to skip redundant emits. */
+    lastEmittedScrollLeft = 0;
+    nodes$ = new BehaviorSubject([]);
+    innerTrackBy = computed(() => {
+        const fn = this.nodeTrackBy();
+        return fn
+            ? (index, node) => fn(index, node.data)
+            : (index) => index;
+    }, ...(ngDevMode ? [{ debugName: "innerTrackBy" }] : []));
+    renderNodeChanges$ = new BehaviorSubject([]);
+    resizeObserver = null;
+    scrollViewportElement = null;
+    scrollFrameSubscription = null;
+    constructor() {
+        super(inject(IterableDiffers), inject(ChangeDetectorRef), inject(ViewContainerRef));
+        this.listenForNodeChanges();
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit?.();
+        const element = this.virtualScrollViewport().elementRef.nativeElement;
+        const scrollable = this.virtualScrollViewport().scrollable;
+        // `getElementRef()` resolves to the viewport in the self-scrolling case and to the
+        // external scroll element otherwise — in scrollWindow mode that is
+        // `document.documentElement`, which is what we read `scrollLeft` from below.
+        this.scrollViewportElement = scrollable.getElementRef().nativeElement;
+        // React to scrolls via the scrollable's own stream rather than addEventListener on
+        // that element ref. In scrollWindow mode the scroll EVENTS fire on `document` while
+        // the element ref is `document.documentElement`, so a raw listener on the element
+        // would never fire and the scroll-to-top button / `viewportScrolled` could not react.
+        // `elementScrolled()` is wired to the correct target for both internal and window modes.
+        scrollable.elementScrolled()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(this.onViewportScroll);
+        // Observe the rendered CONTENT wrapper rather than the viewport itself, so
+        // `viewportResized` reports the full (possibly horizontally-overflowing) content
+        // width — that is what a sticky column header needs to stay aligned with the rows.
+        // Falls back to the viewport element if the wrapper is not present.
+        const contentWrapper = element.querySelector('.cdk-virtual-scroll-content-wrapper');
+        const observed = contentWrapper ?? element;
+        // The CDK viewport + content wrapper sit between the host `role="tree"` and the
+        // `role="treeitem"` rows. Mark them presentational so assistive tech collapses
+        // them and still sees the rows as direct tree items (ARIA requires treeitems to
+        // be children of the tree, optionally through a presentational container).
+        element.setAttribute('role', 'presentation');
+        contentWrapper?.setAttribute('role', 'presentation');
+        // Guarded for non-browser environments (SSR, jsdom-based unit tests) where
+        // ResizeObserver is absent; the resize output simply does not emit there.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                const rect = entries[0]?.contentRect;
+                if (rect) {
+                    this.viewportResized.emit({ width: rect.width, height: rect.height });
+                }
+            });
+            this.resizeObserver.observe(observed);
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        // The scroll subscription is torn down by takeUntilDestroyed; just drop refs here.
+        this.scrollViewportElement = null;
+        this.scrollFrameSubscription?.unsubscribe();
+        this.scrollFrameSubscription = null;
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    /**
+     * Cached visibility of the scroll-to-top button. Recomputed only on scroll (see
+     * {@link onViewportScroll}) rather than read as a getter every change-detection
+     * pass, so `measureScrollOffset` — a layout-forcing read — is not called each cycle.
+     */
+    isScrollTopButtonVisible = false;
+    scrollToTop() {
+        // Use scrollToOffset (which delegates to the viewport's scrollable) rather than
+        // scrollTo (which scrolls the viewport element directly) so this also scrolls an
+        // external scroll container back to the top.
+        this.virtualScrollViewport().scrollToOffset(0, 'smooth');
+        this.cdr.markForCheck();
+    }
+    /**
+     * Enter/Space on a focused expandable row toggles its expansion. The virtual viewport
+     * recycles rows so CDK's `TreeKeyManager` can't drive them (see class docs); this keeps
+     * the expand/collapse that each `aria-expanded` row advertises keyboard-operable, via
+     * event delegation on the `role="tree"` host that reuses the row's `cdkTreeNodeToggle`
+     * click handler. Ignored when focus is on an inner control (e.g. a `routerLink` anchor)
+     * so that element keeps its own Enter/Space behaviour.
+     */
+    onTreeKeydown(event) {
+        if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'Spacebar') {
+            return;
+        }
+        const target = event.target;
+        const row = target?.closest?.('.tn-tree-node-wrapper[role="treeitem"]');
+        if (!row || row !== target || !row.hasAttribute('aria-expanded')) {
+            return;
+        }
+        const toggle = row.querySelector('[cdkTreeNodeToggle]');
+        if (toggle) {
+            // Prevent Space from scrolling the page; reuse the toggle's existing click handler.
+            event.preventDefault();
+            toggle.click();
+        }
+    }
+    updateScrollTopButtonVisibility() {
+        const visible = this.showScrollToTop()
+            && this.virtualScrollViewport().measureScrollOffset('top') > this.itemSize() * scrollToTopThresholdRows;
+        if (visible !== this.isScrollTopButtonVisible) {
+            this.isScrollTopButtonVisible = visible;
+            this.cdr.markForCheck();
+        }
+    }
+    // CdkTree calls this with the full set of currently-visible nodes. Instead of
+    // rendering them into the outlet, feed them to the virtual scroll pipeline.
+    renderNodeChanges(data) {
+        this.renderNodeChanges$.next(data);
+    }
+    getNodeLevel(nodeData) {
+        return this.treeControl?.getLevel ? this.treeControl.getLevel(nodeData) : 0;
+    }
+    /**
+     * Compute per-row `aria-posinset` / `aria-setsize` scoped to each node's SIBLINGS
+     * (same parent / same level), as the WAI-ARIA tree pattern requires — not the flat
+     * list of all visible rows. The flat node set is depth-first ordered and each node
+     * carries a level, so siblings at level L are the consecutive level-L nodes bounded
+     * by any shallower node (level < L = a parent boundary); deeper nodes in between are
+     * descendants of an earlier sibling and don't split the group. One pass, tracking the
+     * open sibling group at each level.
+     */
+    computeAriaPositions(levels) {
+        const posInSet = new Array(levels.length);
+        const setSize = new Array(levels.length);
+        // groups[level] = indices of the currently-open sibling group at that depth.
+        const groups = [];
+        // Close (and stamp setSize on) every group deeper than `level`, because reaching a
+        // node at `level` ends any sibling groups nested under the previous sibling.
+        const finalizeDeeperThan = (level) => {
+            for (let l = groups.length - 1; l > level; l--) {
+                const group = groups[l];
+                if (group?.length) {
+                    for (const idx of group) {
+                        setSize[idx] = group.length;
+                    }
+                }
+            }
+            groups.length = level + 1;
+        };
+        for (let i = 0; i < levels.length; i++) {
+            const level = levels[i];
+            finalizeDeeperThan(level);
+            (groups[level] ??= []).push(i);
+            posInSet[i] = groups[level].length;
+        }
+        // Close the groups still open at the end of the list.
+        finalizeDeeperThan(-1);
+        return levels.map((_, i) => ({ posInSet: posInSet[i], setSize: setSize[i] }));
+    }
+    createNode(nodeData, index, level, posInSet, setSize) {
+        // `_getNodeDef` is a private CdkTree API (verified against @angular/cdk 21.x). Assert
+        // it resolves so a CDK upgrade that renames/removes it fails loudly here rather than
+        // silently rendering a blank tree at runtime.
+        const nodeDef = this._getNodeDef(nodeData, index);
+        if (!nodeDef) {
+            throw new Error('TnTreeVirtualScrollView: CdkTree._getNodeDef returned no node definition. '
+                + 'This private @angular/cdk API (expected ^21.1.0) may have changed — verify tree compatibility.');
+        }
+        const context = new CdkTreeNodeOutletContext(nodeData);
+        context.level = level;
+        // posInSet/setSize let a screen reader announce "item N of M" even though only a
+        // slice of rows exists in the DOM at any time. They are scoped to this node's
+        // siblings (see computeAriaPositions), per the WAI-ARIA tree pattern.
+        return {
+            data: nodeData, context, nodeDef, posInSet, setSize,
+        };
+    }
+    buildVirtualNodes(data) {
+        const levels = data.map((node) => this.getNodeLevel(node));
+        const positions = this.computeAriaPositions(levels);
+        return data.map((node, index) => this.createNode(node, index, levels[index], positions[index].posInSet, positions[index].setSize));
+    }
+    listenForNodeChanges() {
+        this.renderNodeChanges$.pipe(auditTime(0, scrollFrameScheduler), map((data) => this.buildVirtualNodes(data)), takeUntilDestroyed(this.destroyRef)).subscribe((nodes) => {
+            this.nodes$.next(nodes);
+            this.cdr.markForCheck();
+            // The viewport's recycling repeater may swap a row's DOM view during the render
+            // triggered above, leaving the outlet's aria-posinset/aria-setsize written to a
+            // now-detached element. Schedule one more check so the outlet's ngDoCheck
+            // reconciles the aria attributes onto the settled elements.
+            queueMicrotask(() => this.cdr.markForCheck());
+            // The visible node set just changed (e.g. a large branch was collapsed), which can
+            // shrink the scrollable content and clamp the scroll offset without firing a scroll
+            // event. Re-evaluate the scroll-to-top button after layout settles so it can't linger
+            // over content that is no longer scrollable. Guarded by the live element ref so a
+            // frame scheduled just before destroy doesn't measure a torn-down viewport.
+            scrollFrameScheduler.schedule(() => {
+                if (this.scrollViewportElement) {
+                    this.updateScrollTopButtonVisibility();
+                }
+            });
+        });
+    }
+    onViewportScroll = () => {
+        // Scroll events can fire several times per frame. Coalesce the work — a
+        // horizontal-offset emit and `measureScrollOffset` (a layout-forcing read) — into a
+        // single animation frame so fast scrolls don't trigger repeated forced reflows.
+        if (this.scrollFrameSubscription) {
+            return;
+        }
+        this.scrollFrameSubscription = scrollFrameScheduler.schedule(() => {
+            this.scrollFrameSubscription = null;
+            // Read scrollLeft from the actual scroll source, not the viewport element: in
+            // scrollWindow mode the viewport itself does not scroll (the window/external
+            // element does), so the viewport's own scrollLeft would always be 0. Only emit when
+            // it actually changed — this fires on vertical scrolls too, where scrollLeft is
+            // unchanged, and a consumer syncing a sticky header would otherwise re-apply the
+            // same translateX on every vertical scroll frame of a large tree.
+            const left = this.scrollViewportElement?.scrollLeft ?? 0;
+            if (left !== this.lastEmittedScrollLeft) {
+                this.lastEmittedScrollLeft = left;
+                this.viewportScrolled.emit(left);
+            }
+            // Re-evaluate the scroll-to-top button on every scroll (the scroll source may be an
+            // external, OnPush-detached container, so nothing else marks this view dirty).
+            this.updateScrollTopButtonVisibility();
+        });
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeVirtualScrollViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTreeVirtualScrollViewComponent, isStandalone: true, selector: "tn-tree-virtual-scroll-view", inputs: { itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, scrollWindow: { classPropertyName: "scrollWindow", publicName: "scrollWindow", isSignal: true, isRequired: false, transformFunction: null }, showScrollToTop: { classPropertyName: "showScrollToTop", publicName: "showScrollToTop", isSignal: true, isRequired: false, transformFunction: null }, scrollToTopLabel: { classPropertyName: "scrollToTopLabel", publicName: "scrollToTopLabel", isSignal: true, isRequired: false, transformFunction: null }, nodeTrackBy: { classPropertyName: "nodeTrackBy", publicName: "nodeTrackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewportScrolled: "viewportScrolled", viewportResized: "viewportResized" }, host: { attributes: { "role": "tree" }, listeners: { "keydown": "onTreeKeydown($event)" }, properties: { "style.--tn-tree-item-size.px": "itemSize()" }, classAttribute: "tn-tree tn-tree-virtual-scroll-view" }, providers: [
+            { provide: CdkTree, useExisting: TnTreeVirtualScrollViewComponent },
+        ], viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], exportAs: ["tnTreeVirtualScrollView"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<!-- The two branches are intentionally near-identical: `scrollWindow` is a structural\n     directive (CdkVirtualScrollableWindow) selected by the bare attribute's presence, so\n     it can't be toggled via a property binding on a single viewport. Don't DRY this into\n     one element \u2014 dropping the attribute selection breaks window-scroll mode. -->\n@if (scrollWindow()) {\n  <cdk-virtual-scroll-viewport\n    scrollWindow\n    [itemSize]=\"itemSize()\"\n    [minBufferPx]=\"resolvedMinBufferPx()\"\n    [maxBufferPx]=\"resolvedMaxBufferPx()\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of nodes$ | async; trackBy: innerTrackBy()\">\n      <ng-template tnTreeVirtualScrollNodeOutlet [data]=\"item\" />\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n} @else {\n  <cdk-virtual-scroll-viewport\n    class=\"tn-tree-virtual-scroll-view__viewport\"\n    [itemSize]=\"itemSize()\"\n    [minBufferPx]=\"resolvedMinBufferPx()\"\n    [maxBufferPx]=\"resolvedMaxBufferPx()\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of nodes$ | async; trackBy: innerTrackBy()\">\n      <ng-template tnTreeVirtualScrollNodeOutlet [data]=\"item\" />\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n}\n\n<!-- Required so CdkTree finds a node outlet during init, but intentionally left\n     empty: rows are rendered through the virtual scroll viewport above, not here. -->\n<ng-container cdkTreeNodeOutlet />\n\n@if (isScrollTopButtonVisible) {\n  <tn-icon-button\n    name=\"arrow-up\"\n    library=\"mdi\"\n    class=\"tn-tree-virtual-scroll-view__scroll-top\"\n    testId=\"scroll-to-top\"\n    [class.tn-tree-virtual-scroll-view__scroll-top--fixed]=\"scrollWindow()\"\n    [ariaLabel]=\"scrollToTopLabel()\"\n    [tooltip]=\"scrollToTopLabel()\"\n    (onClick)=\"scrollToTop()\"\n  />\n}\n", styles: [".tn-tree-virtual-scroll-view__viewport{height:100%;width:100%}.tn-tree-virtual-scroll-view{display:block;position:relative;width:100%;height:100%;--tn-tree-item-size: 48px}.tn-tree-virtual-scroll-view .tn-tree-node__content{height:var(--tn-tree-item-size);min-height:var(--tn-tree-item-size);padding-top:0;padding-bottom:0;box-sizing:border-box}.tn-tree-virtual-scroll-view__scroll-top{position:absolute;right:16px;bottom:16px;z-index:2}.tn-tree-virtual-scroll-view__scroll-top--fixed{position:fixed}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualScrollableWindow, selector: "cdk-virtual-scroll-viewport[scrollWindow]" }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: TnTreeVirtualScrollNodeOutletDirective, selector: "[tnTreeVirtualScrollNodeOutlet]", inputs: ["data"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "library", "iconClass"], outputs: ["onClick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeVirtualScrollViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-tree-virtual-scroll-view', standalone: true, exportAs: 'tnTreeVirtualScrollView', providers: [
+                        { provide: CdkTree, useExisting: TnTreeVirtualScrollViewComponent },
+                    ], imports: [
+                        CdkTreeModule,
+                        CdkVirtualScrollViewport,
+                        CdkVirtualScrollableWindow,
+                        CdkFixedSizeVirtualScroll,
+                        CdkVirtualForOf,
+                        TnTreeVirtualScrollNodeOutletDirective,
+                        TnIconButtonComponent,
+                        AsyncPipe,
+                    ], hostDirectives: [{ directive: TnTestIdDirective, inputs: ['tnTestId: testId'] }], host: {
+                        'class': 'tn-tree tn-tree-virtual-scroll-view',
+                        'role': 'tree',
+                        // Expose itemSize to CSS so each row can be pinned to exactly this height
+                        // (see the .scss) — virtual scrolling needs the painted row height to match
+                        // the height the viewport assumes per item, otherwise hover/selection
+                        // backgrounds bleed across neighbouring rows.
+                        '[style.--tn-tree-item-size.px]': 'itemSize()',
+                        '(keydown)': 'onTreeKeydown($event)',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The two branches are intentionally near-identical: `scrollWindow` is a structural\n     directive (CdkVirtualScrollableWindow) selected by the bare attribute's presence, so\n     it can't be toggled via a property binding on a single viewport. Don't DRY this into\n     one element \u2014 dropping the attribute selection breaks window-scroll mode. -->\n@if (scrollWindow()) {\n  <cdk-virtual-scroll-viewport\n    scrollWindow\n    [itemSize]=\"itemSize()\"\n    [minBufferPx]=\"resolvedMinBufferPx()\"\n    [maxBufferPx]=\"resolvedMaxBufferPx()\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of nodes$ | async; trackBy: innerTrackBy()\">\n      <ng-template tnTreeVirtualScrollNodeOutlet [data]=\"item\" />\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n} @else {\n  <cdk-virtual-scroll-viewport\n    class=\"tn-tree-virtual-scroll-view__viewport\"\n    [itemSize]=\"itemSize()\"\n    [minBufferPx]=\"resolvedMinBufferPx()\"\n    [maxBufferPx]=\"resolvedMaxBufferPx()\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of nodes$ | async; trackBy: innerTrackBy()\">\n      <ng-template tnTreeVirtualScrollNodeOutlet [data]=\"item\" />\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n}\n\n<!-- Required so CdkTree finds a node outlet during init, but intentionally left\n     empty: rows are rendered through the virtual scroll viewport above, not here. -->\n<ng-container cdkTreeNodeOutlet />\n\n@if (isScrollTopButtonVisible) {\n  <tn-icon-button\n    name=\"arrow-up\"\n    library=\"mdi\"\n    class=\"tn-tree-virtual-scroll-view__scroll-top\"\n    testId=\"scroll-to-top\"\n    [class.tn-tree-virtual-scroll-view__scroll-top--fixed]=\"scrollWindow()\"\n    [ariaLabel]=\"scrollToTopLabel()\"\n    [tooltip]=\"scrollToTopLabel()\"\n    (onClick)=\"scrollToTop()\"\n  />\n}\n", styles: [".tn-tree-virtual-scroll-view__viewport{height:100%;width:100%}.tn-tree-virtual-scroll-view{display:block;position:relative;width:100%;height:100%;--tn-tree-item-size: 48px}.tn-tree-virtual-scroll-view .tn-tree-node__content{height:var(--tn-tree-item-size);min-height:var(--tn-tree-item-size);padding-top:0;padding-bottom:0;box-sizing:border-box}.tn-tree-virtual-scroll-view__scroll-top{position:absolute;right:16px;bottom:16px;z-index:2}.tn-tree-virtual-scroll-view__scroll-top--fixed{position:fixed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { virtualScrollViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], minBufferPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minBufferPx", required: false }] }], maxBufferPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxBufferPx", required: false }] }], scrollWindow: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollWindow", required: false }] }], showScrollToTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScrollToTop", required: false }] }], scrollToTopLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToTopLabel", required: false }] }], nodeTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTrackBy", required: false }] }], viewportScrolled: [{ type: i0.Output, args: ["viewportScrolled"] }], viewportResized: [{ type: i0.Output, args: ["viewportResized"] }] } });
+/**
+ * Harness for interacting with `tn-tree-virtual-scroll-view` in tests.
+ *
+ * Because the component virtualises its rows, every query below operates over the
+ * currently-MATERIALISED (visible + buffered) rows only — nodes scrolled far out of view
+ * are not in the DOM. Indexes are positions within that visible set, not the full data.
+ *
+ * @example
+ * ```typescript
+ * const tree = await loader.getHarness(TnTreeVirtualScrollViewHarness);
+ * expect(await tree.getRowTexts()).toEqual(['pool', 'other']);
+ *
+ * await tree.expand(0);
+ * expect(await tree.isExpanded(0)).toBe(true);
+ * expect(await tree.getAriaLevel(1)).toBe(2);
+ * ```
+ */
+class TnTreeVirtualScrollViewHarness extends ComponentHarness {
+    static hostSelector = 'tn-tree-virtual-scroll-view';
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a virtual-scroll tree
+     * with specific attributes.
+     *
+     * @param options Options for filtering which instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnTreeVirtualScrollViewHarness, options);
+    }
+    rows = this.locatorForAll('.tn-tree-node-wrapper[role="treeitem"]');
+    scrollTopButton = this.locatorForOptional('.tn-tree-virtual-scroll-view__scroll-top');
+    // --- Row queries ---
+    /**
+     * Gets the number of currently-materialised tree rows.
+     *
+     * @returns Promise resolving to the visible row count.
+     */
+    async getRowCount() {
+        return (await this.rows()).length;
+    }
+    /**
+     * Gets the text label of every materialised row (the node's text cell only, excluding
+     * the expand chevron glyph).
+     *
+     * @returns Promise resolving to an array of row label strings.
+     */
+    async getRowTexts() {
+        const cells = await this.locatorForAll('.tn-tree-node-wrapper[role="treeitem"] .tn-tree-node__text')();
+        const texts = [];
+        for (const cell of cells) {
+            texts.push((await cell.text()).trim());
+        }
+        return texts;
+    }
+    /**
+     * Gets the text label of a single materialised row.
+     *
+     * @param index Zero-based index within the visible rows.
+     * @returns Promise resolving to the row's label.
+     */
+    async getRowText(index) {
+        const cell = await this.locatorFor(`.tn-tree-node-wrapper[role="treeitem"]:nth-of-type(${index + 1}) .tn-tree-node__text`)();
+        return (await cell.text()).trim();
+    }
+    /**
+     * Gets the 1-based `aria-level` of a row (root nodes are 1).
+     *
+     * @param index Zero-based index within the visible rows.
+     * @returns Promise resolving to the aria-level, or null if unset.
+     */
+    async getAriaLevel(index) {
+        return this.getRowNumberAttribute(index, 'aria-level');
+    }
+    /**
+     * Gets a row's `aria-posinset` — its 1-based position within its SIBLING set.
+     *
+     * @param index Zero-based index within the visible rows.
+     * @returns Promise resolving to the aria-posinset, or null if unset.
+     */
+    async getAriaPosInSet(index) {
+        return this.getRowNumberAttribute(index, 'aria-posinset');
+    }
+    /**
+     * Gets a row's `aria-setsize` — the size of its SIBLING set.
+     *
+     * @param index Zero-based index within the visible rows.
+     * @returns Promise resolving to the aria-setsize, or null if unset.
+     */
+    async getAriaSetSize(index) {
+        return this.getRowNumberAttribute(index, 'aria-setsize');
+    }
+    /**
+     * Whether a row is expandable (advertises `aria-expanded`).
+     *
+     * @param index Zero-based index within the visible rows.
+     * @returns Promise resolving to true if the row is expandable.
+     */
+    async isExpandable(index) {
+        const row = await this.getRow(index);
+        return (await row.getAttribute('aria-expanded')) !== null;
+    }
+    /**
+     * Whether an expandable row is currently expanded.
+     *
+     * @param index Zero-based index within the visible rows.
+     * @returns Promise resolving to true if `aria-expanded="true"`.
+     */
+    async isExpanded(index) {
+        const row = await this.getRow(index);
+        return (await row.getAttribute('aria-expanded')) === 'true';
+    }
+    /**
+     * Whether a row is keyboard tab-focusable (`tabindex="0"`). Only expandable rows are.
+     *
+     * @param index Zero-based index within the visible rows.
+     * @returns Promise resolving to true if the row is tab-focusable.
+     */
+    async isFocusable(index) {
+        const row = await this.getRow(index);
+        return (await row.getAttribute('tabindex')) === '0';
+    }
+    // --- Expansion ---
+    /**
+     * Toggles a row's expansion by clicking its toggle. No-op semantics are the tree's
+     * (clicking a leaf does nothing).
+     *
+     * @param index Zero-based index within the visible rows.
+     */
+    async toggle(index) {
+        const toggle = await this.locatorFor(`.tn-tree-node-wrapper[role="treeitem"]:nth-of-type(${index + 1}) .tn-tree-node`)();
+        await toggle.click();
+    }
+    /**
+     * Expands a row if it is expandable and currently collapsed.
+     *
+     * @param index Zero-based index within the visible rows.
+     */
+    async expand(index) {
+        if ((await this.isExpandable(index)) && !(await this.isExpanded(index))) {
+            await this.toggle(index);
+        }
+    }
+    /**
+     * Collapses a row if it is currently expanded.
+     *
+     * @param index Zero-based index within the visible rows.
+     */
+    async collapse(index) {
+        if (await this.isExpanded(index)) {
+            await this.toggle(index);
+        }
+    }
+    /**
+     * Focuses a row and presses a key on it (Enter/Space toggle an expandable row).
+     *
+     * @param index Zero-based index within the visible rows.
+     * @param key Which key to press — Enter or Space.
+     */
+    async pressKeyOnRow(index, key) {
+        const row = await this.getRow(index);
+        await row.focus();
+        await row.sendKeys(key === 'enter' ? TestKey.ENTER : ' ');
+    }
+    // --- Scroll-to-top button ---
+    /**
+     * Whether the floating scroll-to-top button is currently visible.
+     *
+     * @returns Promise resolving to true if the button is rendered.
+     */
+    async isScrollToTopVisible() {
+        return (await this.scrollTopButton()) !== null;
+    }
+    /**
+     * Clicks the scroll-to-top button. Throws if it is not currently visible.
+     */
+    async clickScrollToTop() {
+        const button = await this.scrollTopButton();
+        if (!button) {
+            throw new Error('Scroll-to-top button is not currently visible');
+        }
+        await button.click();
+    }
+    // --- Internal helpers ---
+    async getRow(index) {
+        const rows = await this.rows();
+        if (index >= rows.length) {
+            throw new Error(`Row index ${index} out of bounds (${rows.length} materialised rows)`);
+        }
+        return rows[index];
+    }
+    async getRowNumberAttribute(index, attr) {
+        const row = await this.getRow(index);
+        const value = await row.getAttribute(attr);
+        return value === null ? null : Number(value);
+    }
+}
 var ModifierKeys;
 (function (ModifierKeys) {
     ModifierKeys["COMMAND"] = "\u2318";
@@ -14028,7 +14966,7 @@ class TnTimeInputComponent {
                 useExisting: forwardRef(() => TnTimeInputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<tn-select\n  [options]=\"timeSelectOptions()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [testId]=\"testId()\"\n  [ngModel]=\"_value\"\n  (selectionChange)=\"onSelectionChange($event)\" />\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "allowEmpty", "emptyLabel", "disabled", "testId", "multiple", "optionTestIdKey", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }] });
+        ], ngImport: i0, template: "<tn-select\n  [options]=\"timeSelectOptions()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [testId]=\"testId()\"\n  [ngModel]=\"_value\"\n  (selectionChange)=\"onSelectionChange($event)\" />\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "allowEmpty", "emptyLabel", "disabled", "showSelectAll", "selectAllLabel", "testId", "multiple", "optionTestIdKey", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTimeInputComponent, decorators: [{
             type: Component,
@@ -17872,5 +18810,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, controlTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, formatSize, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, controlTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, injectTnFormFieldAria, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
 //# sourceMappingURL=truenas-ui-components.mjs.map