@truenas/ui-components 0.3.21 → 0.3.23

package/fesm2022/truenas-ui-components.mjs

@@ -1,7 +1,7 @@
 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, booleanAttribute, 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';
@@ -29,6 +29,29 @@ 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';
 
+/** 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" }] : []));
     value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -222,6 +245,34 @@ function controlTestId(testId) {
     });
 }
 
+/**
+ * Derive the test-id segments for a dropdown option row, consumed by
+ * `[tnTestId]` with `tnTestIdType="option"`. The component's resolved base
+ * (explicit `testId`, else the bound control name) scopes a per-option
+ * discriminator so ids stay unique across instances: base `user` + option
+ * value `jane-doe` → `option-user-jane-doe`; with no base → `option-jane-doe`.
+ *
+ * The discriminator comes from `extractor` when provided (a component's
+ * `optionTestIdKey` input), else the option's primitive `value`, else its
+ * `label`. Shared by `tn-select` and `tn-autocomplete` so the derivation
+ * rules can't drift between dropdown components; synthetic rows with fixed
+ * discriminators (e.g. select's `allowEmpty` option) are handled by the
+ * caller before delegating here.
+ */
+function optionTestId(base, option, extractor) {
+    let key;
+    if (extractor) {
+        key = extractor(option);
+    }
+    else if (typeof option.value === 'string' || typeof option.value === 'number') {
+        key = option.value;
+    }
+    else {
+        key = option.label;
+    }
+    return scopeTestId(base, key);
+}
+
 /**
  * Controls which attribute name the library renders `testId` values to.
  *
@@ -318,13 +369,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 +430,35 @@ 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" }] : []));
+    /** Test-id base, falling back to the bound control name when `testId` is unset. */
+    resolvedTestId = controlTestId(this.testId);
+    /**
+     * Optional extractor for the per-option test-id discriminator. Defaults to
+     * the option's `value` (when a string/number) or its `label`. Provide this
+     * when option values are objects, or to pick a more stable/unique key —
+     * mirrors `tn-select`'s input of the same name.
+     *
+     * @example
+     * ```html
+     * <tn-autocomplete testId="user" [optionTestIdKey]="(o) => o.value.id" ... />
+     * ```
+     */
+    optionTestIdKey = input(...(ngDevMode ? [undefined, { debugName: "optionTestIdKey" }] : []));
+    /**
+     * 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();
     /**
@@ -709,6 +787,25 @@ class TnAutocompleteComponent {
         }
         return this.valueMatches(option.value, value);
     }
+    /**
+     * Test-id segments for an option row, consumed by `[tnTestId]` with
+     * `tnTestIdType="option"` — see {@link optionTestId} for the derivation
+     * rules (shared with `tn-select`).
+     */
+    optionTestIdParts(option) {
+        return optionTestId(this.resolvedTestId(), option, this.optionTestIdKey());
+    }
+    /**
+     * Test-id segments for the loading / no-results status rows, consumed by
+     * `[tnTestId]` with `tnTestIdType="autocomplete"` so they nest under the
+     * input's own id: base `user` → `autocomplete-user-loading` /
+     * `autocomplete-user-no-results` (unscoped `autocomplete-loading` /
+     * `autocomplete-no-results` with no base). Mirrors webui's ix-combobox,
+     * which stamps its status option so automation can assert on those states.
+     */
+    statusTestIdParts(status) {
+        return scopeTestId(this.resolvedTestId(), status);
+    }
     // ── Internal ──
     /**
      * Index of the committed value's option in the visible list, or -1 when
@@ -885,13 +982,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 }, optionTestIdKey: { classPropertyName: "optionTestIdKey", publicName: "optionTestIdKey", 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]=\"resolvedTestId()\"\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            tnTestIdType=\"option\"\n            [tnTestId]=\"optionTestIdParts(option)\"\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\n          class=\"tn-autocomplete__loading\"\n          tnTestIdType=\"autocomplete\"\n          [tnTestId]=\"statusTestIdParts('loading')\">\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"loadingText()\" />\n          <span>{{ loadingText() }}</span>\n        </div>\n      } @else if (!hasResults()) {\n        <div\n          class=\"tn-autocomplete__no-results\"\n          tnTestIdType=\"autocomplete\"\n          [tnTestId]=\"statusTestIdParts('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 +998,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]=\"resolvedTestId()\"\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            tnTestIdType=\"option\"\n            [tnTestId]=\"optionTestIdParts(option)\"\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\n          class=\"tn-autocomplete__loading\"\n          tnTestIdType=\"autocomplete\"\n          [tnTestId]=\"statusTestIdParts('loading')\">\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"loadingText()\" />\n          <span>{{ loadingText() }}</span>\n        </div>\n      } @else if (!hasResults()) {\n        <div\n          class=\"tn-autocomplete__no-results\"\n          tnTestIdType=\"autocomplete\"\n          [tnTestId]=\"statusTestIdParts('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 }] }], optionTestIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTestIdKey", 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 +3453,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 +3465,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 +3624,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 +3768,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 +3778,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 +4876,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 +4921,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 +4971,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 +5321,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 +5331,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 +8294,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 +8311,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 +8392,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 +8487,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 +8864,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
@@ -8869,11 +9042,8 @@ class TnSelectComponent {
     }
     /**
      * Test-id segments for an option row, consumed by `[tnTestId]` with
-     * `tnTestIdType="option"`. The select's resolved base (explicit `testId`, else
-     * the bound control name) scopes each option so ids stay unique across selects:
-     * base `quick-filters` + option value `ssd` → `option-quick-filters-ssd`; with
-     * no base → `option-ssd`. The discriminator comes from `optionTestIdKey` when
-     * provided, else the option's primitive `value`, else its `label`.
+     * `tnTestIdType="option"` — see {@link optionTestId} for the derivation
+     * rules (shared with `tn-autocomplete`).
      */
     optionTestIdParts(option) {
         // The synthetic empty option gets a fixed `empty` discriminator — its
@@ -8882,18 +9052,7 @@ class TnSelectComponent {
         if (this.isEmptyOption(option)) {
             return scopeTestId(this.resolvedTestId(), 'empty');
         }
-        const extractor = this.optionTestIdKey();
-        let key;
-        if (extractor) {
-            key = extractor(option);
-        }
-        else if (typeof option.value === 'string' || typeof option.value === 'number') {
-            key = option.value;
-        }
-        else {
-            key = option.label;
-        }
-        return scopeTestId(this.resolvedTestId(), key);
+        return optionTestId(this.resolvedTestId(), option, this.optionTestIdKey());
     }
     onChange = (_value) => { };
     onTouched = () => { };
@@ -9411,7 +9570,7 @@ class TnSelectComponent {
                 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      <!-- 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 });
+        ], 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,
@@ -9421,7 +9580,7 @@ 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      <!-- 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"] }]
+                    ], 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 }] }] } });
 
 /**
@@ -18698,5 +18857,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, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, controlTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, 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, optionTestId, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
 //# sourceMappingURL=truenas-ui-components.mjs.map