@truenas/ui-components 0.3.1 → 0.3.3

package/fesm2022/truenas-ui-components.mjs

@@ -3375,7 +3375,10 @@ class TnInputComponent {
     id = `tn-input-${nextId++}`;
     // Protected: the display string is owned by the component and driven through the
     // CVA flow (writeValue / onValueChange). External writes would bypass that flow.
-    value = '';
+    // A signal so the `[value]` binding reflects writeValue reactively — a plain field
+    // doesn't repaint when the model is written after (re)creation (e.g. a control that
+    // mounts with a pre-set value), since writeValue runs outside the binding's CD pass.
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     // CVA disabled state management
     formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
     isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
@@ -3404,7 +3407,7 @@ class TnInputComponent {
         if (this.isSize()) {
             // The model is a byte count; show it as a human-readable string. Empty/null
             // stays blank, and a non-numeric model maps to blank (formatSize returns '').
-            this.value = formatSize(value, this.sizeStandard(), this.sizeRound());
+            this.value.set(formatSize(value, this.sizeStandard(), this.sizeRound()));
             return;
         }
         // Display the model verbatim via String(); do NOT sanitize here. Sanitizing a
@@ -3413,7 +3416,7 @@ class TnInputComponent {
         //
         // Scientific notation is out of scope: users can't type 'e' (it's stripped), and
         // exponential-range values aren't meaningful for the fields this control targets.
-        this.value = value === null || value === undefined ? '' : String(value);
+        this.value.set(value === null || value === undefined ? '' : String(value));
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -3430,8 +3433,8 @@ class TnInputComponent {
         if (this.isSize()) {
             // Keep the raw text in the field as the user types (unit letters and all);
             // emit the parsed byte count, mapping invalid/partial input to null (never 0).
-            this.value = target.value;
-            this.onChange(parseSize(this.value, this.sizeDefaultUnit(), this.sizeStandard()));
+            this.value.set(target.value);
+            this.onChange(parseSize(this.value(), this.sizeDefaultUnit(), this.sizeStandard()));
             return;
         }
         if (this.isNumeric()) {
@@ -3446,18 +3449,18 @@ class TnInputComponent {
                 el.value = sanitized;
                 el.setSelectionRange(caret, caret);
             }
-            this.value = sanitized;
+            this.value.set(sanitized);
             this.onChange(this.parseNumeric(sanitized));
             return;
         }
-        this.value = target.value;
-        this.onChange(this.value);
+        this.value.set(target.value);
+        this.onChange(this.value());
     }
     onBlur() {
-        if (this.isSize() && this.value !== '') {
+        if (this.isSize() && this.value() !== '') {
             // Canonicalize the display on blur: "2048 KiB" -> "2 MiB", "200tib" -> "200 TiB".
             // Leave unparseable text in place so the consumer's validators can flag it.
-            const bytes = parseSize(this.value, this.sizeDefaultUnit(), this.sizeStandard());
+            const bytes = parseSize(this.value(), this.sizeDefaultUnit(), this.sizeStandard());
             if (bytes !== null) {
                 const canonical = formatSize(bytes, this.sizeStandard(), this.sizeRound());
                 // Only rewrite + re-emit when the canonical form actually differs from what
@@ -3468,8 +3471,8 @@ class TnInputComponent {
                 //      "1.755 GiB" canonicalizes to a different string, so it emits the
                 //      byte count parsed back from the rounded display, keeping
                 //      parseSize(display) === model.
-                if (canonical !== this.value) {
-                    this.value = canonical;
+                if (canonical !== this.value()) {
+                    this.value.set(canonical);
                     this.onChange(parseSize(canonical, this.sizeDefaultUnit(), this.sizeStandard()));
                 }
             }
@@ -3513,7 +3516,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]=\"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"] }] });
+        ], 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,
@@ -3523,7 +3526,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]=\"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"] }]
+                    ], 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"] }] } });
 
 /**
@@ -7565,6 +7568,90 @@ class TnFormFieldHarness extends ComponentHarness {
     }
 }
 
+/** Per-instance counter for generating unique heading ids. */
+let nextUniqueId$1 = 0;
+/**
+ * Semantic grouping for a related set of form fields. Renders a native
+ * `<fieldset>` with an optional `<legend>` heading and help tooltip, and
+ * projects its content unchanged — it adds structure and a11y semantics, not
+ * layout for the fields themselves (compose `tn-form-field` inside it for that).
+ */
+class TnFormSectionComponent {
+    /**
+     * Heading rendered in the `<legend>`. Supports lightweight label markup
+     * (**bold**, *italic*, `code`); leave empty to omit the legend entirely.
+     */
+    heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : []));
+    /** Optional help tooltip shown via an icon next to the heading. */
+    tooltip = input('', ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
+    /** Placement of the tooltip relative to its help icon. */
+    tooltipPosition = input('above', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
+    /** Test id applied to the host for harness/e2e selection. */
+    testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
+    /**
+     * Stable id linking the fieldset to its heading via `aria-labelledby`. This
+     * names the group from the heading text alone — without it the legend's
+     * accessible name would also absorb the tooltip button's `aria-label`,
+     * announcing the whole tooltip sentence on every control in the group.
+     */
+    headingId = `tn-form-section-${nextUniqueId$1++}`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFormSectionComponent, isStandalone: true, selector: "tn-form-section", inputs: { heading: { classPropertyName: "heading", publicName: "heading", 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 }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<fieldset\n  class=\"tn-form-section\"\n  tnTestIdType=\"form-section\"\n  [tnTestId]=\"testId()\"\n  [attr.aria-labelledby]=\"heading() ? headingId : null\">\n  @if (heading()) {\n    <!--\n      The <legend> must be a *direct* child of the <fieldset> to act as the\n      group's caption, so the heading text and tooltip live inside it (laid out\n      as a flex row) rather than in a wrapper div. The fieldset's accessible\n      name is pinned to the heading span via aria-labelledby so the tooltip\n      button's aria-label does not leak into the group name.\n    -->\n    <legend class=\"tn-form-section__header\">\n      <span\n        class=\"tn-form-section__legend\"\n        [id]=\"headingId\"\n        [innerHTML]=\"heading() | tnLabelMarkup\"\n      ></span>\n\n      @if (tooltip()) {\n        <button\n          type=\"button\"\n          class=\"tn-form-section__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    </legend>\n  }\n\n  <div class=\"tn-form-section__body\">\n    <ng-content />\n  </div>\n</fieldset>\n", styles: [".tn-form-section{border:none;margin:0;padding:0;min-width:0}.tn-form-section__header{display:flex;align-items:center;gap:.5rem;width:100%;padding:0;margin:0 0 1.25rem}.tn-form-section__body{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tn-form-section__legend{color:var(--tn-fg1, #333);font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:.9375rem;font-weight:600;line-height:1.4}.tn-form-section__legend ::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-section__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-section__tooltip:hover,.tn-form-section__tooltip:focus-visible{color:var(--tn-primary, #007bff)}.tn-form-section__tooltip:focus-visible{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;border-radius:50%}\n"], dependencies: [{ 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: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "pipe", type: LabelMarkupPipe, name: "tnLabelMarkup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFormSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-form-section', standalone: true, imports: [TnIconComponent, TnTooltipDirective, TnTestIdDirective, LabelMarkupPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset\n  class=\"tn-form-section\"\n  tnTestIdType=\"form-section\"\n  [tnTestId]=\"testId()\"\n  [attr.aria-labelledby]=\"heading() ? headingId : null\">\n  @if (heading()) {\n    <!--\n      The <legend> must be a *direct* child of the <fieldset> to act as the\n      group's caption, so the heading text and tooltip live inside it (laid out\n      as a flex row) rather than in a wrapper div. The fieldset's accessible\n      name is pinned to the heading span via aria-labelledby so the tooltip\n      button's aria-label does not leak into the group name.\n    -->\n    <legend class=\"tn-form-section__header\">\n      <span\n        class=\"tn-form-section__legend\"\n        [id]=\"headingId\"\n        [innerHTML]=\"heading() | tnLabelMarkup\"\n      ></span>\n\n      @if (tooltip()) {\n        <button\n          type=\"button\"\n          class=\"tn-form-section__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    </legend>\n  }\n\n  <div class=\"tn-form-section__body\">\n    <ng-content />\n  </div>\n</fieldset>\n", styles: [".tn-form-section{border:none;margin:0;padding:0;min-width:0}.tn-form-section__header{display:flex;align-items:center;gap:.5rem;width:100%;padding:0;margin:0 0 1.25rem}.tn-form-section__body{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tn-form-section__legend{color:var(--tn-fg1, #333);font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:.9375rem;font-weight:600;line-height:1.4}.tn-form-section__legend ::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-section__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-section__tooltip:hover,.tn-form-section__tooltip:focus-visible{color:var(--tn-primary, #007bff)}.tn-form-section__tooltip:focus-visible{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;border-radius:50%}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }] } });
+
+/**
+ * Harness for interacting with `tn-form-section` in tests.
+ *
+ * Scope note: this covers the section's own surface (heading text, tooltip
+ * presence, projected text) only. Filling and reading the projected form
+ * controls is the consuming app's concern — drive those through their own
+ * control harnesses rather than this one.
+ *
+ * @example
+ * ```typescript
+ * const section = await loader.getHarness(
+ *   TnFormSectionHarness.with({ heading: 'Network Settings' })
+ * );
+ * expect(await section.hasTooltip()).toBe(true);
+ * ```
+ */
+class TnFormSectionHarness extends ComponentHarness {
+    /** The selector for the host element of a `TnFormSectionComponent` instance. */
+    static hostSelector = 'tn-form-section';
+    /**
+     * Gets a `HarnessPredicate` to search for a form section by heading text.
+     *
+     * @param options Criteria for filtering which section instances match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnFormSectionHarness, options)
+            .addOption('heading', options.heading, (harness, heading) => HarnessPredicate.stringMatches(harness.getHeadingText(), heading));
+    }
+    legend = this.locatorForOptional('.tn-form-section__legend');
+    tooltipButton = this.locatorForOptional('.tn-form-section__tooltip');
+    /**
+     * Heading text rendered in the legend (label markup rendered to plain text),
+     * or '' when no heading is set.
+     */
+    async getHeadingText() {
+        const legend = await this.legend();
+        return legend ? (await legend.text()).trim() : '';
+    }
+    /** Whether the help tooltip icon is rendered. */
+    async hasTooltip() {
+        return (await this.tooltipButton()) !== null;
+    }
+    /** Full text content of the section (heading + projected content), trimmed. */
+    async getText() {
+        return (await (await this.host()).text()).trim();
+    }
+}
+
 class TnSelectComponent {
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionGroups = input([], ...(ngDevMode ? [{ debugName: "optionGroups" }] : []));
@@ -16355,5 +16442,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, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, 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, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, formatSize, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_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, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, 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, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, formatSize, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
 //# sourceMappingURL=truenas-ui-components.mjs.map