@truenas/ui-components 0.2.0 → 0.2.2

package/fesm2022/truenas-ui-components.mjs

@@ -1,9 +1,9 @@
 import { Overlay, OverlayPositionBuilder, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Renderer2, ElementRef, input, effect, Directive, ViewContainerRef, output, viewChild, computed, signal, forwardRef, Component, model, afterNextRender, ChangeDetectionStrategy, Injectable, isDevMode, ViewEncapsulation, contentChildren, HostListener, contentChild, ChangeDetectorRef, DestroyRef, TemplateRef, isSignal, untracked, IterableDiffers, Pipe, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
+import { InjectionToken, inject, Renderer2, ElementRef, input, effect, Directive, ViewContainerRef, output, viewChild, computed, signal, forwardRef, Component, model, afterNextRender, ChangeDetectionStrategy, Injectable, isDevMode, ViewEncapsulation, contentChildren, HostListener, linkedSignal, contentChild, ChangeDetectorRef, DestroyRef, TemplateRef, isSignal, untracked, IterableDiffers, Pipe, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
 import * as i1$3 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, NgControl } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, NgControl, Validators } from '@angular/forms';
 import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
 import * as i1 from '@angular/cdk/a11y';
 import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
@@ -2514,6 +2514,81 @@ var InputType;
     InputType["Size"] = "size";
 })(InputType || (InputType = {}));
 
+/**
+ * Marks an icon name for inclusion in the TrueNAS UI sprite generation.
+ *
+ * This function serves two purposes:
+ * 1. At runtime: Applies library-specific prefixes (e.g., mdi-, app-)
+ * 2. At build time: Marker for the scanner to detect icons for sprite inclusion
+ *
+ * Use this when icon names are computed dynamically or come from variables,
+ * to ensure they're included in the sprite at build time.
+ *
+ * @example
+ * // Static icon name - automatically detected from template
+ * <tn-icon name="folder"></tn-icon>
+ *
+ * @example
+ * // Dynamic MDI icon
+ * const iconName = condition ? tnIconMarker("pencil", "mdi") : tnIconMarker("delete", "mdi");
+ * <tn-icon [name]="iconName"></tn-icon>
+ *
+ * @example
+ * // Dynamic custom icon (consumer's own icon)
+ * const logo = tnIconMarker("your-logo-name", "custom");
+ * <tn-icon [name]="logo"></tn-icon>
+ *
+ * @example
+ * // Array of dynamic icons
+ * const actions = [
+ *   { name: "Save", icon: tnIconMarker("content-save", "mdi") },
+ *   { name: "Cancel", icon: tnIconMarker("close", "mdi") }
+ * ];
+ *
+ * @param iconName - The icon name to mark for sprite inclusion
+ * @param library - Optional library type: 'mdi', 'material', or 'custom'
+ * @returns The icon name with appropriate prefix applied
+ * @public
+ */
+function tnIconMarker(iconName, library) {
+    // Apply library-specific prefixes
+    if (library === 'mdi' && !iconName.startsWith('mdi-')) {
+        return `mdi-${iconName}`;
+    }
+    if (library === 'custom' && !iconName.startsWith('app-')) {
+        return `app-${iconName}`;
+    }
+    if (library === 'material' && !iconName.startsWith('mat-')) {
+        return `mat-${iconName}`;
+    }
+    return iconName;
+}
+/**
+ * INTERNAL LIBRARY USE ONLY
+ *
+ * Marks an icon name for inclusion in the sprite generation with library namespace.
+ * This function MUST be used by library component code for custom icons.
+ *
+ * The TypeScript type enforces that the icon name starts with 'tn-' prefix,
+ * which reserves this namespace exclusively for library-provided custom icons.
+ *
+ * @example
+ * ```typescript
+ * // ✅ Correct - Library component code
+ * const icon = libIconMarker('tn-dataset');
+ *
+ * // ❌ Wrong - Will cause TypeScript error
+ * const icon = libIconMarker('dataset');
+ * ```
+ *
+ * @param iconName - The icon name with 'tn-' prefix (enforced by TypeScript)
+ * @returns The same icon name (identity function)
+ * @internal
+ */
+function libIconMarker(iconName) {
+    return iconName;
+}
+
 // Ordered binary/decimal prefixes; the array index doubles as the power applied
 // to the base (B = base^0, K = base^1, M = base^2, ...).
 const UNIT_PREFIXES = ['B', 'K', 'M', 'G', 'T', 'P', 'E'];
@@ -2628,6 +2703,36 @@ class TnInputComponent {
      * the a11y tree.
      */
     ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * Native `autocomplete` hint rendered on the input/textarea. Pass the standard
+     * autofill tokens (`'username'`, `'current-password'`, `'new-password'`,
+     * `'one-time-code'`, ...) so browsers and password managers can identify and
+     * fill the field.
+     */
+    autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
+    /**
+     * Native `name` attribute rendered on the input/textarea. Browsers and password
+     * managers use it to identify the field; typically mirrors the form control name.
+     */
+    name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    /**
+     * Renders the native `readonly` attribute: the value is visible, focusable and
+     * selectable but not editable. Unlike `disabled`, a readonly field stays in the
+     * tab order and its form control stays enabled.
+     */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    /**
+     * Renders the native `required` attribute so browsers and assistive technology
+     * expose the field as required. Validation itself stays with the consumer's form
+     * validators (e.g. `Validators.required`); forms that fully own validation UX
+     * should also set `novalidate` to suppress native submit blocking.
+     *
+     * Note: this drives only the native/a11y semantics. When wrapped in a
+     * `tn-form-field`, the visual `*` indicator is inferred automatically from the
+     * control's `Validators.required`; only validator-less setups need the form
+     * field's own `required` input alongside this one.
+     */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
     /**
      * Integer/decimal switch — only meaningful when `inputType` is `InputType.Number`.
      *
@@ -2657,12 +2762,27 @@ class TnInputComponent {
      * (e.g. `1.5 GiB`). Ignored unless `inputType` is `Size`.
      */
     sizeRound = input(2, ...(ngDevMode ? [{ debugName: "sizeRound" }] : []));
+    /**
+     * Whether a `Password` field renders the built-in visibility toggle — the eye
+     * button that switches the field between masked and plain-text display.
+     * Defaults to true; set false for secrets that must never be revealed.
+     * Setting `suffixIcon` suppresses the toggle automatically (a custom suffix
+     * control replaces it). Ignored unless `inputType` is `Password`.
+     */
+    showPasswordToggle = input(true, ...(ngDevMode ? [{ debugName: "showPasswordToggle" }] : []));
     // Icon inputs
     prefixIcon = input(undefined, ...(ngDevMode ? [{ debugName: "prefixIcon" }] : []));
     prefixIconLibrary = input(undefined, ...(ngDevMode ? [{ debugName: "prefixIconLibrary" }] : []));
     suffixIcon = input(undefined, ...(ngDevMode ? [{ debugName: "suffixIcon" }] : []));
     suffixIconLibrary = input(undefined, ...(ngDevMode ? [{ debugName: "suffixIconLibrary" }] : []));
     suffixIconAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "suffixIconAriaLabel" }] : []));
+    /**
+     * Semantic test-id base for the suffix-action button. The library prepends the
+     * element type (`button`) and renders the result under whichever attribute name
+     * is configured via `TN_TEST_ATTR` (default `data-testid`) — e.g.
+     * `suffixActionTestId="toggle-password"` → `button-toggle-password`.
+     */
+    suffixActionTestId = input(undefined, ...(ngDevMode ? [{ debugName: "suffixActionTestId" }] : []));
     onSuffixAction = output();
     hasPrefixIcon = computed(() => !!this.prefixIcon(), ...(ngDevMode ? [{ debugName: "hasPrefixIcon" }] : []));
     hasSuffixIcon = computed(() => !!this.suffixIcon(), ...(ngDevMode ? [{ debugName: "hasSuffixIcon" }] : []));
@@ -2672,8 +2792,28 @@ class TnInputComponent {
     isSize = computed(() => this.inputType() === InputType.Size, ...(ngDevMode ? [{ debugName: "isSize" }] : []));
     /** True when the field only accepts whole numbers (i.e. `allowDecimals` is false). */
     integerOnly = computed(() => !this.allowDecimals(), ...(ngDevMode ? [{ debugName: "integerOnly" }] : []));
-    /** The `type` attribute actually rendered. Number and size modes use a text input: number avoids the native type="number" footguns, size must accept unit letters. */
-    resolvedType = computed(() => (this.isNumeric() || this.isSize() ? InputType.PlainText : this.inputType()), ...(ngDevMode ? [{ debugName: "resolvedType" }] : []));
+    /** True when the field is a password field. */
+    isPassword = computed(() => this.inputType() === InputType.Password, ...(ngDevMode ? [{ debugName: "isPassword" }] : []));
+    /**
+     * Whether the password is currently revealed. Not exposed as an input so a
+     * reveal is always an explicit user gesture, and linked to the toggle's own
+     * availability so a revealed value never outlives the control that revealed
+     * it: whenever the toggle goes away (the field leaves password mode,
+     * `showPasswordToggle` flips off, a `suffixIcon` replaces it) or the field
+     * is disabled, the field snaps back to masked.
+     */
+    passwordVisible = linkedSignal({ ...(ngDevMode ? { debugName: "passwordVisible" } : {}), source: () => this.hasPasswordToggle() && !this.isDisabled(),
+        computation: () => false });
+    /** The `type` attribute actually rendered. Number and size modes use a text input: number avoids the native type="number" footguns, size must accept unit letters. A revealed password renders as text — flipping the type attribute is the standard reveal mechanism and preserves value and caret. */
+    resolvedType = computed(() => {
+        if (this.isNumeric() || this.isSize()) {
+            return InputType.PlainText;
+        }
+        if (this.isPassword() && this.passwordVisible()) {
+            return InputType.PlainText;
+        }
+        return this.inputType();
+    }, ...(ngDevMode ? [{ debugName: "resolvedType" }] : []));
     /** `inputmode` hint: numeric keypad for integers, decimal keypad otherwise. Null (omitted) outside number mode — size fields accept unit letters, so they keep the full keyboard. */
     numericInputMode = computed(() => {
         if (!this.isNumeric()) {
@@ -2683,6 +2823,30 @@ class TnInputComponent {
     }, ...(ngDevMode ? [{ debugName: "numericInputMode" }] : []));
     /** Number and size modes are always single-line; they win over `multiline` if both are set. */
     showTextarea = computed(() => this.multiline() && !this.isNumeric() && !this.isSize(), ...(ngDevMode ? [{ debugName: "showTextarea" }] : []));
+    /**
+     * The visibility toggle renders only on single-line password fields (a
+     * password+multiline combo renders a textarea, which has no `type` to flip),
+     * and yields to a consumer-provided `suffixIcon` — a custom suffix control
+     * replaces the built-in toggle rather than stacking a second button.
+     */
+    hasPasswordToggle = computed(() => this.isPassword() && this.showPasswordToggle() && !this.showTextarea() && !this.hasSuffixIcon(), ...(ngDevMode ? [{ debugName: "hasPasswordToggle" }] : []));
+    /**
+     * Icon for the visibility toggle, mirroring the field's current state: a
+     * slashed eye while masked, an open eye while revealed. The literal
+     * `tnIconMarker` calls double as build-time markers that pull both icons
+     * into the sprite.
+     */
+    passwordToggleIcon = computed(() => this.passwordVisible() ? tnIconMarker('eye', 'mdi') : tnIconMarker('eye-off', 'mdi'), ...(ngDevMode ? [{ debugName: "passwordToggleIcon" }] : []));
+    /**
+     * Role-first test-id segments for the visibility toggle:
+     * `button-toggle-password[-<testId>]`. The toggle is fixed field chrome, so
+     * the role leads (matching the dialog-shell close/fullscreen convention) and
+     * automation can target every password toggle with one prefix selector.
+     */
+    passwordToggleTestId = computed(() => {
+        const base = this.testId();
+        return ['toggle-password', ...(Array.isArray(base) ? base : [base])];
+    }, ...(ngDevMode ? [{ debugName: "passwordToggleTestId" }] : []));
     // 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).
@@ -2790,6 +2954,9 @@ class TnInputComponent {
         }
         this.onTouched();
     }
+    togglePasswordVisibility() {
+        this.passwordVisible.update((visible) => !visible);
+    }
     /** Strips any character that can't appear in the current numeric mode (single leading '-', single '.' for decimals). */
     sanitizeNumeric(raw) {
         const allowDecimal = !this.integerOnly();
@@ -2818,13 +2985,13 @@ class TnInputComponent {
         return Number.isNaN(parsed) ? null : parsed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnInputComponent, isStandalone: true, selector: "tn-input", inputs: { inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, allowDecimals: { classPropertyName: "allowDecimals", publicName: "allowDecimals", isSignal: true, isRequired: false, transformFunction: null }, sizeStandard: { classPropertyName: "sizeStandard", publicName: "sizeStandard", isSignal: true, isRequired: false, transformFunction: null }, sizeDefaultUnit: { classPropertyName: "sizeDefaultUnit", publicName: "sizeDefaultUnit", isSignal: true, isRequired: false, transformFunction: null }, sizeRound: { classPropertyName: "sizeRound", publicName: "sizeRound", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, prefixIconLibrary: { classPropertyName: "prefixIconLibrary", publicName: "prefixIconLibrary", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIconLibrary: { classPropertyName: "suffixIconLibrary", publicName: "suffixIconLibrary", isSignal: true, isRequired: false, transformFunction: null }, suffixIconAriaLabel: { classPropertyName: "suffixIconAriaLabel", publicName: "suffixIconAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSuffixAction: "onSuffixAction" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnInputComponent, isStandalone: true, selector: "tn-input", inputs: { inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, allowDecimals: { classPropertyName: "allowDecimals", publicName: "allowDecimals", isSignal: true, isRequired: false, transformFunction: null }, sizeStandard: { classPropertyName: "sizeStandard", publicName: "sizeStandard", isSignal: true, isRequired: false, transformFunction: null }, sizeDefaultUnit: { classPropertyName: "sizeDefaultUnit", publicName: "sizeDefaultUnit", isSignal: true, isRequired: false, transformFunction: null }, sizeRound: { classPropertyName: "sizeRound", publicName: "sizeRound", isSignal: true, isRequired: false, transformFunction: null }, showPasswordToggle: { classPropertyName: "showPasswordToggle", publicName: "showPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, prefixIconLibrary: { classPropertyName: "prefixIconLibrary", publicName: "prefixIconLibrary", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIconLibrary: { classPropertyName: "suffixIconLibrary", publicName: "suffixIconLibrary", isSignal: true, isRequired: false, transformFunction: null }, suffixIconAriaLabel: { classPropertyName: "suffixIconAriaLabel", publicName: "suffixIconAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, suffixActionTestId: { classPropertyName: "suffixActionTestId", publicName: "suffixActionTestId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSuffixAction: "onSuffixAction" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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()\"\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      [tnTestId]=\"testId()\"\n      [disabled]=\"isDisabled()\"\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      [tnTestId]=\"testId()\"\n      [rows]=\"rows()\"\n      [disabled]=\"isDisabled()\"\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      [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</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{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){background-color:var(--tn-bg3, #f3f4f6);color:var(--tn-fg1, #1f2937)}.tn-input__suffix-action:focus-visible{outline:2px solid var(--tn-primary, #2563eb);outline-offset:1px}.tn-input__suffix-action: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{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.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.name]=\"name()\"\n      [tnTestId]=\"testId()\"\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]=\"testId()\"\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,
@@ -2834,8 +3001,8 @@ 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()\"\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      [tnTestId]=\"testId()\"\n      [disabled]=\"isDisabled()\"\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      [tnTestId]=\"testId()\"\n      [rows]=\"rows()\"\n      [disabled]=\"isDisabled()\"\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      [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</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{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){background-color:var(--tn-bg3, #f3f4f6);color:var(--tn-fg1, #1f2937)}.tn-input__suffix-action:focus-visible{outline:2px solid var(--tn-primary, #2563eb);outline-offset:1px}.tn-input__suffix-action: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{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 }] }], 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 }] }], 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 }] }], onSuffixAction: [{ type: i0.Output, args: ["onSuffixAction"] }] } });
+                    ], 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]=\"testId()\"\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]=\"testId()\"\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"] }] } });
 
 /**
  * Harness for interacting with tn-icon in tests.
@@ -3095,6 +3262,7 @@ class TnInputHarness extends ComponentHarness {
     prefixIconEl = this.locatorForOptional('tn-icon.tn-input__prefix-icon');
     suffixButton = this.locatorForOptional('.tn-input__suffix-action');
     suffixIconEl = this.locatorForOptional(TnIconHarness.with({ ancestor: '.tn-input__suffix-action' }));
+    visibilityToggle = this.locatorForOptional('.tn-input__visibility-toggle');
     /**
      * Gets a `HarnessPredicate` that can be used to search for an input
      * with specific attributes.
@@ -3106,6 +3274,9 @@ class TnInputHarness extends ComponentHarness {
         return new HarnessPredicate(TnInputHarness, options)
             .addOption('placeholder', options.placeholder, async (harness, placeholder) => {
             return (await harness.getPlaceholder()) === placeholder;
+        })
+            .addOption('name', options.name, async (harness, name) => {
+            return (await harness.getName()) === name;
         });
     }
     /**
@@ -3206,6 +3377,58 @@ class TnInputHarness extends ComponentHarness {
         const input = await this.inputEl();
         return input.getAttribute('aria-label');
     }
+    /**
+     * Gets the native `name` attribute (set via the `name` input).
+     *
+     * @returns Promise resolving to the name string, or null if unset.
+     */
+    async getName() {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            return textarea.getAttribute('name');
+        }
+        const input = await this.inputEl();
+        return input.getAttribute('name');
+    }
+    /**
+     * Gets the native `autocomplete` attribute (set via the `autocomplete` input).
+     *
+     * @returns Promise resolving to the autocomplete token, or null if unset.
+     */
+    async getAutocomplete() {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            return textarea.getAttribute('autocomplete');
+        }
+        const input = await this.inputEl();
+        return input.getAttribute('autocomplete');
+    }
+    /**
+     * Checks whether the input is readonly (set via the `readonly` input).
+     *
+     * @returns Promise resolving to true if the input is readonly.
+     */
+    async isReadonly() {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            return (await textarea.getProperty('readOnly')) ?? false;
+        }
+        const input = await this.inputEl();
+        return (await input.getProperty('readOnly')) ?? false;
+    }
+    /**
+     * Checks whether the input is marked required (set via the `required` input).
+     *
+     * @returns Promise resolving to true if the input is required.
+     */
+    async isRequired() {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            return (await textarea.getProperty('required')) ?? false;
+        }
+        const input = await this.inputEl();
+        return (await input.getProperty('required')) ?? false;
+    }
     /**
      * Gets the placeholder text.
      *
@@ -3298,6 +3521,43 @@ class TnInputHarness extends ComponentHarness {
         }
         return button.click();
     }
+    /**
+     * Checks whether the password visibility toggle is present.
+     *
+     * @returns Promise resolving to true if the toggle button exists.
+     */
+    async hasPasswordToggle() {
+        const toggle = await this.visibilityToggle();
+        return toggle !== null;
+    }
+    /**
+     * Whether the password is currently revealed (the field renders as plain text).
+     *
+     * Only meaningful on password-type inputs; resolves false while masked.
+     *
+     * @returns Promise resolving to true when the value is shown in plain text.
+     */
+    async isPasswordRevealed() {
+        const toggle = await this.visibilityToggle();
+        if (!toggle) {
+            return false;
+        }
+        const input = await this.inputEl();
+        return (await input.getProperty('type')) === 'text';
+    }
+    /**
+     * Clicks the password visibility toggle, switching between masked and
+     * plain-text display.
+     *
+     * @returns Promise that resolves when the click action is complete.
+     */
+    async togglePasswordVisibility() {
+        const toggle = await this.visibilityToggle();
+        if (!toggle) {
+            throw new Error('No password visibility toggle found on this input.');
+        }
+        return toggle.click();
+    }
     /**
      * Focuses the input element.
      *
@@ -6196,6 +6456,17 @@ function activeErrorKey(errors) {
 class TnFormFieldComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    /**
+     * Forces the visual `*` required indicator next to the label. Usually
+     * unnecessary: the indicator is inferred automatically when the projected
+     * control carries `Validators.required`. Set this only when inference can't
+     * 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).
+     */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
     testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
     subscriptSizing = input('dynamic', ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : []));
@@ -6227,7 +6498,15 @@ class TnFormFieldComponent {
         invalid: false,
         interacted: false,
         errors: null,
+        required: false,
     }, ...(ngDevMode ? [{ debugName: "controlState" }] : []));
+    /**
+     * Whether the required indicator renders: forced via the `required` input, or
+     * inferred from the projected control's validators (mirrors Angular Material's
+     * `hasValidator(Validators.required)` approach — reference equality, so composed
+     * or custom required-like validators need the explicit input).
+     */
+    showRequired = computed(() => this.required() || this.controlState().required, ...(ngDevMode ? [{ debugName: "showRequired" }] : []));
     hasError = computed(() => {
         const state = this.controlState();
         return state.invalid && state.interacted;
@@ -6260,6 +6539,7 @@ class TnFormFieldComponent {
                 invalid: !!control.invalid,
                 interacted: !!(control.dirty || control.touched),
                 errors: control.errors ?? null,
+                required: !!control.control?.hasValidator(Validators.required),
             });
         }
     }
@@ -6331,11 +6611,11 @@ class TnFormFieldComponent {
         return this.subscriptSizing() === 'fixed' || this.showError() || this.showHint();
     }, ...(ngDevMode ? [{ debugName: "showSubscript" }] : []));
     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() || tooltip()) {\n    <div class=\"tn-form-field-label-row\">\n      @if (label()) {\n        <label class=\"tn-form-field-label\" [class.required]=\"required()\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n          }\n        </label>\n      }\n      @if (tooltip()) {\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      }\n    </div>\n  }\n\n  <!-- Form Control Content -->\n  <div class=\"tn-form-field-wrapper\">\n    <ng-content />\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", 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:500;color:var(--tn-fg1, #333);line-height:1.4}.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-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: 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"] }] });
+    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() || tooltip()) {\n    <div class=\"tn-form-field-label-row\">\n      @if (label()) {\n        <label class=\"tn-form-field-label\" [class.required]=\"showRequired()\">\n          {{ label() }}\n          @if (showRequired()) {\n            <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n          }\n        </label>\n      }\n      @if (tooltip()) {\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      }\n    </div>\n  }\n\n  <!-- Form Control Content -->\n  <div class=\"tn-form-field-wrapper\">\n    <ng-content />\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", 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:500;color:var(--tn-fg1, #333);line-height:1.4}.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-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: 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"] }] });
 }
 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: [TnTestIdDirective, TnIconComponent, TnTooltipDirective], template: "<div class=\"tn-form-field\" tnTestIdType=\"form-field\" [tnTestId]=\"testId()\">\n  <!-- Label -->\n  @if (label() || tooltip()) {\n    <div class=\"tn-form-field-label-row\">\n      @if (label()) {\n        <label class=\"tn-form-field-label\" [class.required]=\"required()\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n          }\n        </label>\n      }\n      @if (tooltip()) {\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      }\n    </div>\n  }\n\n  <!-- Form Control Content -->\n  <div class=\"tn-form-field-wrapper\">\n    <ng-content />\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", 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:500;color:var(--tn-fg1, #333);line-height:1.4}.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-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: [TnTestIdDirective, TnIconComponent, TnTooltipDirective], template: "<div class=\"tn-form-field\" tnTestIdType=\"form-field\" [tnTestId]=\"testId()\">\n  <!-- Label -->\n  @if (label() || tooltip()) {\n    <div class=\"tn-form-field-label-row\">\n      @if (label()) {\n        <label class=\"tn-form-field-label\" [class.required]=\"showRequired()\">\n          {{ label() }}\n          @if (showRequired()) {\n            <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n          }\n        </label>\n      }\n      @if (tooltip()) {\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      }\n    </div>\n  }\n\n  <!-- Form Control Content -->\n  <div class=\"tn-form-field-wrapper\">\n    <ng-content />\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", 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:500;color:var(--tn-fg1, #333);line-height:1.4}.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-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 }] }] } });
 
 /**
@@ -7378,81 +7658,6 @@ class TnSelectHarness extends ComponentHarness {
     }
 }
 
-/**
- * Marks an icon name for inclusion in the TrueNAS UI sprite generation.
- *
- * This function serves two purposes:
- * 1. At runtime: Applies library-specific prefixes (e.g., mdi-, app-)
- * 2. At build time: Marker for the scanner to detect icons for sprite inclusion
- *
- * Use this when icon names are computed dynamically or come from variables,
- * to ensure they're included in the sprite at build time.
- *
- * @example
- * // Static icon name - automatically detected from template
- * <tn-icon name="folder"></tn-icon>
- *
- * @example
- * // Dynamic MDI icon
- * const iconName = condition ? tnIconMarker("pencil", "mdi") : tnIconMarker("delete", "mdi");
- * <tn-icon [name]="iconName"></tn-icon>
- *
- * @example
- * // Dynamic custom icon (consumer's own icon)
- * const logo = tnIconMarker("your-logo-name", "custom");
- * <tn-icon [name]="logo"></tn-icon>
- *
- * @example
- * // Array of dynamic icons
- * const actions = [
- *   { name: "Save", icon: tnIconMarker("content-save", "mdi") },
- *   { name: "Cancel", icon: tnIconMarker("close", "mdi") }
- * ];
- *
- * @param iconName - The icon name to mark for sprite inclusion
- * @param library - Optional library type: 'mdi', 'material', or 'custom'
- * @returns The icon name with appropriate prefix applied
- * @public
- */
-function tnIconMarker(iconName, library) {
-    // Apply library-specific prefixes
-    if (library === 'mdi' && !iconName.startsWith('mdi-')) {
-        return `mdi-${iconName}`;
-    }
-    if (library === 'custom' && !iconName.startsWith('app-')) {
-        return `app-${iconName}`;
-    }
-    if (library === 'material' && !iconName.startsWith('mat-')) {
-        return `mat-${iconName}`;
-    }
-    return iconName;
-}
-/**
- * INTERNAL LIBRARY USE ONLY
- *
- * Marks an icon name for inclusion in the sprite generation with library namespace.
- * This function MUST be used by library component code for custom icons.
- *
- * The TypeScript type enforces that the icon name starts with 'tn-' prefix,
- * which reserves this namespace exclusively for library-provided custom icons.
- *
- * @example
- * ```typescript
- * // ✅ Correct - Library component code
- * const icon = libIconMarker('tn-dataset');
- *
- * // ❌ Wrong - Will cause TypeScript error
- * const icon = libIconMarker('dataset');
- * ```
- *
- * @param iconName - The icon name with 'tn-' prefix (enforced by TypeScript)
- * @returns The same icon name (identity function)
- * @internal
- */
-function libIconMarker(iconName) {
-    return iconName;
-}
-
 /// <reference types="jest" />
 /**
  * Creates default mock implementation of TnSpriteLoaderService.