@truenas/ui-components 0.1.13 → 0.1.15

package/fesm2022/truenas-ui-components.mjs

@@ -1119,6 +1119,15 @@ class TnInputComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     multiline = input(false, ...(ngDevMode ? [{ debugName: "multiline" }] : []));
     rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    // 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" }] : []));
+    onSuffixAction = output();
+    hasPrefixIcon = computed(() => !!this.prefixIcon(), ...(ngDevMode ? [{ debugName: "hasPrefixIcon" }] : []));
+    hasSuffixIcon = computed(() => !!this.suffixIcon(), ...(ngDevMode ? [{ debugName: "hasSuffixIcon" }] : []));
     id = 'tn-input';
     value = '';
     // CVA disabled state management
@@ -1153,24 +1162,425 @@ class TnInputComponent {
         this.onTouched();
     }
     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 } }, 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 }, 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-input-container\">\n  <!-- Regular input field -->\n  @if (!multiline()) {\n    <input\n      #inputEl\n      class=\"tn-input\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [type]=\"inputType()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"testId()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n\n  <!-- Textarea field -->\n  @if (multiline()) {\n    <textarea\n      #inputEl\n      class=\"tn-input tn-textarea\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"testId()\"\n      [rows]=\"rows()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    ></textarea>\n  }\n</div>\n", styles: [".tn-input-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);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;outline:none;box-sizing:border-box}.tn-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-input:focus{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-input:disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-input.error{border-color:var(--tn-error, #dc3545)}.tn-input.error:focus{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-textarea{min-height:6rem;resize:vertical;line-height:1.4}@media(prefers-reduced-motion:reduce){.tn-input{transition:none}}@media(prefers-contrast:high){.tn-input{border-width:2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }] });
+        ], 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 (!multiline()) {\n    <input\n      #inputEl\n      class=\"tn-input\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [type]=\"inputType()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"testId()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n\n  <!-- Textarea field -->\n  @if (multiline()) {\n    <textarea\n      #inputEl\n      class=\"tn-input tn-textarea\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"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", "fullSize", "customSize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-input', standalone: true, imports: [FormsModule, A11yModule], providers: [
+            args: [{ selector: 'tn-input', standalone: true, imports: [FormsModule, A11yModule, TnIconComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TnInputComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"tn-input-container\">\n  <!-- Regular input field -->\n  @if (!multiline()) {\n    <input\n      #inputEl\n      class=\"tn-input\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [type]=\"inputType()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"testId()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n\n  <!-- Textarea field -->\n  @if (multiline()) {\n    <textarea\n      #inputEl\n      class=\"tn-input tn-textarea\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"testId()\"\n      [rows]=\"rows()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    ></textarea>\n  }\n</div>\n", styles: [".tn-input-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);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;outline:none;box-sizing:border-box}.tn-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-input:focus{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-input:disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-input.error{border-color:var(--tn-error, #dc3545)}.tn-input.error:focus{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-textarea{min-height:6rem;resize:vertical;line-height:1.4}@media(prefers-reduced-motion:reduce){.tn-input{transition:none}}@media(prefers-contrast:high){.tn-input{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 }] }] } });
+                    ], 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 (!multiline()) {\n    <input\n      #inputEl\n      class=\"tn-input\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [type]=\"inputType()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"testId()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n\n  <!-- Textarea field -->\n  @if (multiline()) {\n    <textarea\n      #inputEl\n      class=\"tn-input tn-textarea\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"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 }] }], 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"] }] } });
+
+/**
+ * Harness for interacting with tn-icon in tests.
+ * Provides filtering by icon name and library for existence checks, as well as click interaction.
+ *
+ * @example
+ * ```typescript
+ * // Check for existence
+ * const icon = await loader.getHarness(TnIconHarness);
+ *
+ * // Find icon by name
+ * const folderIcon = await loader.getHarness(
+ *   TnIconHarness.with({ name: 'folder' })
+ * );
+ *
+ * // Find icon by name and library
+ * const mdiIcon = await loader.getHarness(
+ *   TnIconHarness.with({ name: 'account-circle', library: 'mdi' })
+ * );
+ *
+ * // Check if icon exists
+ * const hasIcon = await loader.hasHarness(
+ *   TnIconHarness.with({ name: 'check' })
+ * );
+ *
+ * // Click an icon
+ * const closeIcon = await loader.getHarness(
+ *   TnIconHarness.with({ name: 'close' })
+ * );
+ * await closeIcon.click();
+ * ```
+ */
+class TnIconHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnIconComponent` instance.
+     */
+    static hostSelector = 'tn-icon';
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for an icon
+     * with specific attributes.
+     *
+     * @param options Options for filtering which icon instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find icon by name
+     * const icon = await loader.getHarness(
+     *   TnIconHarness.with({ name: 'home' })
+     * );
+     *
+     * // Find icon by library
+     * const customIcon = await loader.getHarness(
+     *   TnIconHarness.with({ library: 'custom' })
+     * );
+     *
+     * // Find icon with specific size
+     * const largeIcon = await loader.getHarness(
+     *   TnIconHarness.with({ size: 'lg' })
+     * );
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnIconHarness, options)
+            .addOption('name', options.name, async (harness, name) => {
+            return (await harness.getName()) === name;
+        })
+            .addOption('library', options.library, async (harness, library) => {
+            return (await harness.getLibrary()) === library;
+        })
+            .addOption('size', options.size, async (harness, size) => {
+            return (await harness.getSize()) === size;
+        })
+            .addOption('fullSize', options.fullSize, async (harness, fullSize) => {
+            return (await harness.isFullSize()) === fullSize;
+        })
+            .addOption('customSize', options.customSize, async (harness, customSize) => {
+            return (await harness.getCustomSize()) === customSize;
+        });
+    }
+    /**
+     * Gets the icon name.
+     *
+     * @returns Promise resolving to the icon name.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness);
+     * const name = await icon.getName();
+     * expect(name).toBe('folder');
+     * ```
+     */
+    async getName() {
+        const host = await this.host();
+        return host.getAttribute('name');
+    }
+    /**
+     * Gets the icon library.
+     *
+     * @returns Promise resolving to the icon library.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness);
+     * const library = await icon.getLibrary();
+     * expect(library).toBe('mdi');
+     * ```
+     */
+    async getLibrary() {
+        const host = await this.host();
+        return host.getAttribute('library');
+    }
+    /**
+     * Gets the icon size.
+     *
+     * @returns Promise resolving to the icon size.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness);
+     * const size = await icon.getSize();
+     * expect(size).toBe('lg');
+     * ```
+     */
+    async getSize() {
+        const host = await this.host();
+        return host.getAttribute('size');
+    }
+    /**
+     * Gets the icon color.
+     *
+     * @returns Promise resolving to the icon color.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness);
+     * const color = await icon.getColor();
+     * expect(color).toBe('primary');
+     * ```
+     */
+    async getColor() {
+        const host = await this.host();
+        return host.getAttribute('color');
+    }
+    /**
+     * Checks if the icon is in full-size mode.
+     *
+     * @returns Promise resolving to true if the icon is full-size, false otherwise.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness);
+     * const isFullSize = await icon.isFullSize();
+     * expect(isFullSize).toBe(true);
+     * ```
+     */
+    async isFullSize() {
+        const host = await this.host();
+        const fullSizeAttr = await host.getAttribute('full-size');
+        return fullSizeAttr === 'true';
+    }
+    /**
+     * Gets the icon custom size.
+     *
+     * @returns Promise resolving to the custom size value, or null if not set.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness);
+     * const customSize = await icon.getCustomSize();
+     * expect(customSize).toBe('64px');
+     * ```
+     */
+    async getCustomSize() {
+        const host = await this.host();
+        return host.getAttribute('custom-size');
+    }
+    /**
+     * Checks if the icon is using a custom size.
+     *
+     * @returns Promise resolving to true if a custom size is set, false otherwise.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness);
+     * const hasCustomSize = await icon.hasCustomSize();
+     * expect(hasCustomSize).toBe(true);
+     * ```
+     */
+    async hasCustomSize() {
+        const customSize = await this.getCustomSize();
+        return customSize !== null;
+    }
+    /**
+     * Clicks the icon.
+     *
+     * @returns Promise that resolves when the click action is complete.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness.with({ name: 'close' }));
+     * await icon.click();
+     * ```
+     */
+    async click() {
+        const host = await this.host();
+        return host.click();
+    }
+}
+
+/**
+ * Harness for interacting with tn-input in tests.
+ * Provides methods for querying state, setting values, and interacting with prefix/suffix icons.
+ *
+ * @example
+ * ```typescript
+ * // Get the input harness
+ * const input = await loader.getHarness(TnInputHarness);
+ *
+ * // Set and read a value
+ * await input.setValue('hello');
+ * expect(await input.getValue()).toBe('hello');
+ *
+ * // Check for prefix icon
+ * expect(await input.hasPrefixIcon()).toBe(true);
+ *
+ * // Click suffix action
+ * await input.clickSuffixAction();
+ * ```
+ */
+class TnInputHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnInputComponent` instance.
+     */
+    static hostSelector = 'tn-input';
+    inputEl = this.locatorFor('input.tn-input');
+    textareaEl = this.locatorFor('textarea.tn-input');
+    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' }));
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for an input
+     * with specific attributes.
+     *
+     * @param options Options for filtering which input instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnInputHarness, options)
+            .addOption('placeholder', options.placeholder, async (harness, placeholder) => {
+            return (await harness.getPlaceholder()) === placeholder;
+        });
+    }
+    /**
+     * Gets the current value of the input.
+     *
+     * @returns Promise resolving to the input value.
+     */
+    async getValue() {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            return (await textarea.getProperty('value')) ?? '';
+        }
+        const input = await this.inputEl();
+        return (await input.getProperty('value')) ?? '';
+    }
+    /**
+     * Sets the value of the input by clearing and typing.
+     *
+     * @param value The value to set.
+     */
+    async setValue(value) {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            await textarea.clear();
+            await textarea.sendKeys(value);
+            return;
+        }
+        const input = await this.inputEl();
+        await input.clear();
+        await input.sendKeys(value);
+    }
+    /**
+     * Gets the placeholder text.
+     *
+     * @returns Promise resolving to the placeholder string.
+     */
+    async getPlaceholder() {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            return textarea.getAttribute('placeholder');
+        }
+        const input = await this.inputEl();
+        return input.getAttribute('placeholder');
+    }
+    /**
+     * Checks whether the input is disabled.
+     *
+     * @returns Promise resolving to true if the input is disabled.
+     */
+    async isDisabled() {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            return (await textarea.getProperty('disabled')) ?? false;
+        }
+        const input = await this.inputEl();
+        return (await input.getProperty('disabled')) ?? false;
+    }
+    /**
+     * Checks whether the input renders as a textarea.
+     *
+     * @returns Promise resolving to true if multiline.
+     */
+    async isMultiline() {
+        const textareas = await this.locatorForAll('textarea.tn-input')();
+        return textareas.length > 0;
+    }
+    /**
+     * Checks whether a prefix icon is present.
+     *
+     * @returns Promise resolving to true if a prefix icon exists.
+     */
+    async hasPrefixIcon() {
+        const icon = await this.prefixIconEl();
+        return icon !== null;
+    }
+    /**
+     * Gets the prefix icon harness for further inspection.
+     *
+     * @returns Promise resolving to the prefix TnIconHarness, or null if not present.
+     */
+    async getPrefixIcon() {
+        const el = await this.prefixIconEl();
+        if (!el) {
+            return null;
+        }
+        const allIcons = await this.locatorForAll(TnIconHarness)();
+        for (const icon of allIcons) {
+            const host = await icon.host();
+            if (await host.hasClass('tn-input__prefix-icon')) {
+                return icon;
+            }
+        }
+        return null;
+    }
+    /**
+     * Checks whether a suffix action button is present.
+     *
+     * @returns Promise resolving to true if a suffix action exists.
+     */
+    async hasSuffixAction() {
+        const button = await this.suffixButton();
+        return button !== null;
+    }
+    /**
+     * Gets the suffix icon harness for further inspection.
+     *
+     * @returns Promise resolving to the suffix TnIconHarness, or null if not present.
+     */
+    async getSuffixIcon() {
+        return this.suffixIconEl();
+    }
+    /**
+     * Clicks the suffix action button.
+     *
+     * @returns Promise that resolves when the click action is complete.
+     */
+    async clickSuffixAction() {
+        const button = await this.suffixButton();
+        if (!button) {
+            throw new Error('No suffix action button found on this input.');
+        }
+        return button.click();
+    }
+    /**
+     * Focuses the input element.
+     *
+     * @returns Promise that resolves when the input is focused.
+     */
+    async focus() {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            return textarea.focus();
+        }
+        const input = await this.inputEl();
+        return input.focus();
+    }
+    /**
+     * Blurs the input element.
+     *
+     * @returns Promise that resolves when the input is blurred.
+     */
+    async blur() {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            return textarea.blur();
+        }
+        const input = await this.inputEl();
+        return input.blur();
+    }
+}
 
 class TnInputDirective {
     constructor() { }
@@ -1896,15 +2306,15 @@ class TnTabComponent {
     // Internal properties set by parent TnTabsComponent (public signals for parent control)
     index = signal(0, ...(ngDevMode ? [{ debugName: "index" }] : []));
     isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
-    tabsComponent; // Will be set by parent
+    tabsComponent;
     elementRef = inject((ElementRef));
     hasIconContent = signal(false, ...(ngDevMode ? [{ debugName: "hasIconContent" }] : []));
     ngAfterContentInit() {
         this.hasIconContent.set(!!this.iconContent());
     }
     onClick() {
-        if (!this.disabled()) {
-            this.selected.emit();
+        if (!this.disabled() && this.tabsComponent) {
+            this.tabsComponent.selectTab(this.index());
         }
     }
     onKeydown(event) {
@@ -2017,10 +2427,6 @@ class TnTabsComponent {
             }
             this.cdr.detectChanges();
         });
-    }
-    ngAfterContentInit() {
-        this.initializeTabs();
-        this.selectTab(this.internalSelectedIndex());
         // Listen for tab changes
         effect(() => {
             // Track tabs signal to react to changes
@@ -2031,6 +2437,10 @@ class TnTabsComponent {
             }
         });
     }
+    ngAfterContentInit() {
+        this.initializeTabs();
+        this.selectTab(this.internalSelectedIndex());
+    }
     ngAfterViewInit() {
         // Wait for next tick to ensure DOM is fully rendered
         setTimeout(() => {
@@ -2056,12 +2466,6 @@ class TnTabsComponent {
             if (tab.elementRef) {
                 this.focusMonitor.monitor(tab.elementRef);
             }
-            // Set up click handlers
-            tab.selected.subscribe(() => {
-                if (!tab.disabled()) {
-                    this.selectTab(index);
-                }
-            });
         });
         this.panels().forEach((panel, index) => {
             panel.index.set(index);
@@ -2221,40 +2625,443 @@ class TnTabsComponent {
         }
         return 0;
     }
-    getLastEnabledTabIndex() {
-        const tabs = this.tabs();
-        for (let i = tabs.length - 1; i >= 0; i--) {
-            if (!tabs[i]?.disabled()) {
-                return i;
-            }
-        }
-        return tabs.length - 1;
+    getLastEnabledTabIndex() {
+        const tabs = this.tabs();
+        for (let i = tabs.length - 1; i >= 0; i--) {
+            if (!tabs[i]?.disabled()) {
+                return i;
+            }
+        }
+        return tabs.length - 1;
+    }
+    focusTab(index) {
+        const tab = this.tabs()[index];
+        if (tab && tab.elementRef) {
+            tab.elementRef.nativeElement.focus();
+        }
+    }
+    classes = computed(() => {
+        const classes = ['tn-tabs'];
+        if (this.orientation() === 'vertical') {
+            classes.push('tn-tabs--vertical');
+        }
+        else {
+            classes.push('tn-tabs--horizontal');
+        }
+        // Add highlight position class
+        classes.push(`tn-tabs--highlight-${this.highlightPosition()}`);
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTabsComponent, isStandalone: true, selector: "tn-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, highlightPosition: { classPropertyName: "highlightPosition", publicName: "highlightPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, queries: [{ propertyName: "tabs", predicate: TnTabComponent, isSignal: true }, { propertyName: "panels", predicate: TnTabPanelComponent, isSignal: true }], viewQueries: [{ propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"tablist\" [ngClass]=\"classes()\" [attr.aria-orientation]=\"orientation()\">\n  <div #tabHeader class=\"tn-tabs__header\">\n    <ng-content select=\"tn-tab\" />\n    @if (highlightBarVisible()) {\n      <div class=\"tn-tabs__highlight-bar\"\n           [style.left.px]=\"highlightBarLeft()\"\n           [style.width.px]=\"highlightBarWidth()\"\n           [style.top.px]=\"highlightBarTop()\"\n           [style.height.px]=\"highlightBarHeight()\">\n      </div>\n    }\n  </div>\n\n  <div class=\"tn-tabs__content\">\n    <ng-content select=\"tn-tab-panel\" />\n  </div>\n</div>", styles: [".tn-tabs{display:flex;flex-direction:column;width:100%;height:100%;min-width:0;font-family:var(--tn-font-family-body, \"Inter\", sans-serif)}.tn-tabs--disabled{opacity:.6;pointer-events:none}.tn-tabs--vertical{flex-direction:row}.tn-tabs--vertical .tn-tabs__header{flex-direction:column;border-bottom:none;border-right:1px solid var(--tn-lines, #e0e0e0);min-width:240px;width:auto}.tn-tabs--vertical .tn-tabs__content{flex:1;min-width:0}.tn-tabs--vertical .tn-tabs__highlight-bar{bottom:auto;height:auto}.tn-tabs--vertical .tn-tab{justify-content:flex-start;text-align:left;width:100%}.tn-tabs--vertical .tn-tab:hover:not(.tn-tab--disabled){background-color:var(--tn-alt-bg1, #f5f5f5);color:var(--tn-fg1, #333)}.tn-tabs__header{display:flex;background-color:var(--tn-bg1, #fff);position:relative;border-bottom:1px solid var(--tn-lines, #e0e0e0)}.tn-tabs__highlight-bar{position:absolute;bottom:-1px;height:2px;background-color:var(--tn-primary, #0095d5);transition:left .3s ease,width .3s ease,top .3s ease,height .3s ease;z-index:1}.tn-tabs__content{flex:1;position:relative;background-color:var(--tn-bg1, #fff);min-height:0;width:100%;overflow:hidden}@media(max-width:768px){.tn-tabs__header{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-tabs__header::-webkit-scrollbar{display:none}.tn-tabs--vertical .tn-tabs__header{overflow-y:auto;overflow-x:visible;max-height:300px}}@media(prefers-reduced-motion:reduce){.tn-tabs__highlight-bar{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-tabs', standalone: true, imports: [CommonModule, A11yModule, TnTabComponent, TnTabPanelComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"tablist\" [ngClass]=\"classes()\" [attr.aria-orientation]=\"orientation()\">\n  <div #tabHeader class=\"tn-tabs__header\">\n    <ng-content select=\"tn-tab\" />\n    @if (highlightBarVisible()) {\n      <div class=\"tn-tabs__highlight-bar\"\n           [style.left.px]=\"highlightBarLeft()\"\n           [style.width.px]=\"highlightBarWidth()\"\n           [style.top.px]=\"highlightBarTop()\"\n           [style.height.px]=\"highlightBarHeight()\">\n      </div>\n    }\n  </div>\n\n  <div class=\"tn-tabs__content\">\n    <ng-content select=\"tn-tab-panel\" />\n  </div>\n</div>", styles: [".tn-tabs{display:flex;flex-direction:column;width:100%;height:100%;min-width:0;font-family:var(--tn-font-family-body, \"Inter\", sans-serif)}.tn-tabs--disabled{opacity:.6;pointer-events:none}.tn-tabs--vertical{flex-direction:row}.tn-tabs--vertical .tn-tabs__header{flex-direction:column;border-bottom:none;border-right:1px solid var(--tn-lines, #e0e0e0);min-width:240px;width:auto}.tn-tabs--vertical .tn-tabs__content{flex:1;min-width:0}.tn-tabs--vertical .tn-tabs__highlight-bar{bottom:auto;height:auto}.tn-tabs--vertical .tn-tab{justify-content:flex-start;text-align:left;width:100%}.tn-tabs--vertical .tn-tab:hover:not(.tn-tab--disabled){background-color:var(--tn-alt-bg1, #f5f5f5);color:var(--tn-fg1, #333)}.tn-tabs__header{display:flex;background-color:var(--tn-bg1, #fff);position:relative;border-bottom:1px solid var(--tn-lines, #e0e0e0)}.tn-tabs__highlight-bar{position:absolute;bottom:-1px;height:2px;background-color:var(--tn-primary, #0095d5);transition:left .3s ease,width .3s ease,top .3s ease,height .3s ease;z-index:1}.tn-tabs__content{flex:1;position:relative;background-color:var(--tn-bg1, #fff);min-height:0;width:100%;overflow:hidden}@media(max-width:768px){.tn-tabs__header{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-tabs__header::-webkit-scrollbar{display:none}.tn-tabs--vertical .tn-tabs__header{overflow-y:auto;overflow-x:visible;max-height:300px}}@media(prefers-reduced-motion:reduce){.tn-tabs__highlight-bar{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnTabComponent), { isSignal: true }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnTabPanelComponent), { isSignal: true }] }], tabHeader: [{ type: i0.ViewChild, args: ['tabHeader', { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], highlightPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightPosition", required: false }] }], selectedIndexChange: [{ type: i0.Output, args: ["selectedIndexChange"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
+
+/**
+ * Harness for interacting with tn-tab in tests.
+ * Provides methods for querying individual tab state and simulating selection.
+ *
+ * @example
+ * ```typescript
+ * // Find a tab by label
+ * const tab = await loader.getHarness(TnTabHarness.with({ label: 'Settings' }));
+ *
+ * // Check if active
+ * expect(await tab.isSelected()).toBe(false);
+ *
+ * // Select it
+ * await tab.select();
+ * expect(await tab.isSelected()).toBe(true);
+ * ```
+ */
+class TnTabHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnTabComponent` instance.
+     */
+    static hostSelector = 'tn-tab';
+    _button = this.locatorFor('button[role="tab"]');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a tab
+     * with specific attributes.
+     *
+     * @param options Options for filtering which tab instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find tab by exact label
+     * const tab = await loader.getHarness(TnTabHarness.with({ label: 'Overview' }));
+     *
+     * // Find tab by regex
+     * const tab = await loader.getHarness(TnTabHarness.with({ label: /settings/i }));
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnTabHarness, options)
+            .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label));
+    }
+    /**
+     * Gets the tab's label text.
+     *
+     * @returns Promise resolving to the tab's label string.
+     *
+     * @example
+     * ```typescript
+     * const tab = await loader.getHarness(TnTabHarness);
+     * expect(await tab.getLabel()).toBe('Overview');
+     * ```
+     */
+    async getLabel() {
+        const labelEl = await this.locatorFor('.tn-tab__label')();
+        return (await labelEl.text()).trim();
+    }
+    /**
+     * Checks whether the tab is currently selected (active).
+     *
+     * @returns Promise resolving to true if the tab is selected.
+     *
+     * @example
+     * ```typescript
+     * const tab = await loader.getHarness(TnTabHarness.with({ label: 'Overview' }));
+     * expect(await tab.isSelected()).toBe(true);
+     * ```
+     */
+    async isSelected() {
+        const button = await this._button();
+        return (await button.getAttribute('aria-selected')) === 'true';
+    }
+    /**
+     * Checks whether the tab is disabled.
+     *
+     * @returns Promise resolving to true if the tab is disabled.
+     *
+     * @example
+     * ```typescript
+     * const tab = await loader.getHarness(TnTabHarness.with({ label: 'Disabled Tab' }));
+     * expect(await tab.isDisabled()).toBe(true);
+     * ```
+     */
+    async isDisabled() {
+        const button = await this._button();
+        return (await button.getProperty('disabled')) ?? false;
+    }
+    /**
+     * Selects the tab by clicking it.
+     *
+     * @returns Promise that resolves when the tab has been clicked.
+     *
+     * @example
+     * ```typescript
+     * const tab = await loader.getHarness(TnTabHarness.with({ label: 'Settings' }));
+     * await tab.select();
+     * ```
+     */
+    async select() {
+        const button = await this._button();
+        await button.click();
+    }
+    /**
+     * Gets the tab's testId attribute value.
+     *
+     * @returns Promise resolving to the data-testid value, or null if not set.
+     *
+     * @example
+     * ```typescript
+     * const tab = await loader.getHarness(TnTabHarness);
+     * expect(await tab.getTestId()).toBe('my-tab');
+     * ```
+     */
+    async getTestId() {
+        const button = await this._button();
+        return button.getAttribute('data-testid');
+    }
+}
+
+/**
+ * Harness for interacting with tn-tab-panel in tests.
+ * Provides methods for querying panel visibility and content.
+ *
+ * @example
+ * ```typescript
+ * // Get all panels
+ * const panels = await loader.getAllHarnesses(TnTabPanelHarness);
+ *
+ * // Check which panel is active
+ * for (const panel of panels) {
+ *   if (await panel.isActive()) {
+ *     const text = await panel.getTextContent();
+ *     expect(text).toContain('Overview');
+ *   }
+ * }
+ * ```
+ */
+class TnTabPanelHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnTabPanelComponent` instance.
+     */
+    static hostSelector = 'tn-tab-panel';
+    _panel = this.locatorFor('[role="tabpanel"]');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a tab panel
+     * with specific attributes.
+     *
+     * @param options Options for filtering which panel instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * const panel = await loader.getHarness(
+     *   TnTabPanelHarness.with({ textContains: 'Overview' })
+     * );
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnTabPanelHarness, options)
+            .addOption('textContains', options.textContains, (harness, text) => HarnessPredicate.stringMatches(harness.getTextContent(), text));
+    }
+    /**
+     * Checks whether the panel is currently active (visible).
+     *
+     * @returns Promise resolving to true if the panel is active.
+     *
+     * @example
+     * ```typescript
+     * const panel = await loader.getHarness(TnTabPanelHarness);
+     * expect(await panel.isActive()).toBe(true);
+     * ```
+     */
+    async isActive() {
+        const panel = await this._panel();
+        return (await panel.getAttribute('aria-hidden')) === 'false';
+    }
+    /**
+     * Gets the text content of the panel.
+     *
+     * @returns Promise resolving to the panel's text content.
+     *
+     * @example
+     * ```typescript
+     * const panel = await loader.getHarness(TnTabPanelHarness);
+     * expect(await panel.getTextContent()).toContain('Overview');
+     * ```
+     */
+    async getTextContent() {
+        const panel = await this._panel();
+        return (await panel.text()).trim();
+    }
+    /**
+     * Gets the panel's testId attribute value.
+     *
+     * @returns Promise resolving to the data-testid value, or null if not set.
+     *
+     * @example
+     * ```typescript
+     * const panel = await loader.getHarness(TnTabPanelHarness);
+     * expect(await panel.getTestId()).toBe('my-panel');
+     * ```
+     */
+    async getTestId() {
+        const panel = await this._panel();
+        return panel.getAttribute('data-testid');
+    }
+}
+
+/**
+ * Harness for interacting with tn-tabs in tests.
+ * Provides methods for querying tab state, selecting tabs, and inspecting panels.
+ *
+ * @example
+ * ```typescript
+ * // Get the tabs harness
+ * const tabs = await loader.getHarness(TnTabsHarness);
+ *
+ * // Select a tab by label
+ * await tabs.selectTab({ label: 'Settings' });
+ *
+ * // Get the selected tab label
+ * const selected = await tabs.getSelectedTab();
+ * expect(await selected.getLabel()).toBe('Settings');
+ *
+ * // Get all tab labels
+ * const labels = await tabs.getTabLabels();
+ * expect(labels).toEqual(['Overview', 'Details', 'Settings']);
+ * ```
+ */
+class TnTabsHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnTabsComponent` instance.
+     */
+    static hostSelector = 'tn-tabs';
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for tabs
+     * with specific attributes.
+     *
+     * @param options Options for filtering which tabs instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find by orientation
+     * const tabs = await loader.getHarness(TnTabsHarness.with({ orientation: 'vertical' }));
+     *
+     * // Find the tab group containing a "Settings" tab
+     * const tabs = await loader.getHarness(TnTabsHarness.with({ hasTab: 'Settings' }));
+     *
+     * // Find by regex
+     * const tabs = await loader.getHarness(TnTabsHarness.with({ hasTab: /settings/i }));
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnTabsHarness, options)
+            .addOption('orientation', options.orientation, async (harness, orientation) => {
+            return (await harness.getOrientation()) === orientation;
+        })
+            .addOption('hasTab', options.hasTab, async (harness, label) => {
+            const labels = await harness.getTabLabels();
+            if (label instanceof RegExp) {
+                return labels.some(l => label.test(l));
+            }
+            return labels.includes(label);
+        });
+    }
+    /**
+     * Gets all tab harnesses within this tab group.
+     *
+     * @returns Promise resolving to an array of `TnTabHarness` instances.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     * const allTabs = await tabs.getTabs();
+     * expect(allTabs.length).toBe(3);
+     * ```
+     */
+    async getTabs() {
+        return this.locatorForAll(TnTabHarness)();
+    }
+    /**
+     * Gets a specific tab by filter criteria.
+     *
+     * @param filter Optional filter to match a specific tab.
+     * @returns Promise resolving to the matching `TnTabHarness`.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     * const settingsTab = await tabs.getTab({ label: 'Settings' });
+     * ```
+     */
+    async getTab(filter = {}) {
+        return this.locatorFor(TnTabHarness.with(filter))();
+    }
+    /**
+     * Gets all panel harnesses within this tab group.
+     *
+     * @returns Promise resolving to an array of `TnTabPanelHarness` instances.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     * const panels = await tabs.getPanels();
+     * expect(panels.length).toBe(3);
+     * ```
+     */
+    async getPanels() {
+        return this.locatorForAll(TnTabPanelHarness)();
+    }
+    /**
+     * Gets all tab labels as strings.
+     *
+     * @returns Promise resolving to an array of tab label strings.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     * const labels = await tabs.getTabLabels();
+     * expect(labels).toEqual(['Overview', 'Details', 'Settings']);
+     * ```
+     */
+    async getTabLabels() {
+        const tabs = await this.getTabs();
+        return Promise.all(tabs.map(tab => tab.getLabel()));
+    }
+    /**
+     * Gets the currently selected (active) tab.
+     *
+     * @returns Promise resolving to the active `TnTabHarness`.
+     * @throws If no active tab is found.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     * const selected = await tabs.getSelectedTab();
+     * expect(await selected.getLabel()).toBe('Overview');
+     * ```
+     */
+    async getSelectedTab() {
+        const tabs = await this.getTabs();
+        for (const tab of tabs) {
+            if (await tab.isSelected()) {
+                return tab;
+            }
+        }
+        throw new Error('No selected tab found');
+    }
+    /**
+     * Selects a tab by filter criteria. Clicks the matching tab button.
+     *
+     * @param filter Filter to identify which tab to select.
+     * @returns Promise that resolves when the tab has been selected.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     *
+     * // Select by label
+     * await tabs.selectTab({ label: 'Settings' });
+     *
+     * // Select by regex
+     * await tabs.selectTab({ label: /detail/i });
+     * ```
+     */
+    async selectTab(filter) {
+        const tab = await this.getTab(filter);
+        await tab.select();
+    }
+    /**
+     * Gets the orientation of the tab group.
+     *
+     * @returns Promise resolving to 'horizontal' or 'vertical'.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     * expect(await tabs.getOrientation()).toBe('horizontal');
+     * ```
+     */
+    async getOrientation() {
+        const tablist = await this.locatorFor('[role="tablist"]')();
+        return (await tablist.getAttribute('aria-orientation')) ?? 'horizontal';
     }
-    focusTab(index) {
-        const tab = this.tabs()[index];
-        if (tab && tab.elementRef) {
-            tab.elementRef.nativeElement.focus();
-        }
+    /**
+     * Gets the number of tabs.
+     *
+     * @returns Promise resolving to the tab count.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     * expect(await tabs.getTabCount()).toBe(3);
+     * ```
+     */
+    async getTabCount() {
+        const tabs = await this.getTabs();
+        return tabs.length;
     }
-    classes = computed(() => {
-        const classes = ['tn-tabs'];
-        if (this.orientation() === 'vertical') {
-            classes.push('tn-tabs--vertical');
-        }
-        else {
-            classes.push('tn-tabs--horizontal');
-        }
-        // Add highlight position class
-        classes.push(`tn-tabs--highlight-${this.highlightPosition()}`);
-        return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTabsComponent, isStandalone: true, selector: "tn-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, highlightPosition: { classPropertyName: "highlightPosition", publicName: "highlightPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, queries: [{ propertyName: "tabs", predicate: TnTabComponent, isSignal: true }, { propertyName: "panels", predicate: TnTabPanelComponent, isSignal: true }], viewQueries: [{ propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"tablist\" [ngClass]=\"classes()\" [attr.aria-orientation]=\"orientation()\">\n  <div #tabHeader class=\"tn-tabs__header\">\n    <ng-content select=\"tn-tab\" />\n    @if (highlightBarVisible()) {\n      <div class=\"tn-tabs__highlight-bar\"\n           [style.left.px]=\"highlightBarLeft()\"\n           [style.width.px]=\"highlightBarWidth()\"\n           [style.top.px]=\"highlightBarTop()\"\n           [style.height.px]=\"highlightBarHeight()\">\n      </div>\n    }\n  </div>\n\n  <div class=\"tn-tabs__content\">\n    <ng-content select=\"tn-tab-panel\" />\n  </div>\n</div>", styles: [".tn-tabs{display:flex;flex-direction:column;width:100%;height:100%;min-width:0;font-family:var(--tn-font-family-body, \"Inter\", sans-serif)}.tn-tabs--disabled{opacity:.6;pointer-events:none}.tn-tabs--vertical{flex-direction:row}.tn-tabs--vertical .tn-tabs__header{flex-direction:column;border-bottom:none;border-right:1px solid var(--tn-lines, #e0e0e0);min-width:240px;width:auto}.tn-tabs--vertical .tn-tabs__content{flex:1;min-width:0}.tn-tabs--vertical .tn-tabs__highlight-bar{bottom:auto;height:auto}.tn-tabs--vertical .tn-tab{justify-content:flex-start;text-align:left;width:100%}.tn-tabs--vertical .tn-tab:hover:not(.tn-tab--disabled){background-color:var(--tn-alt-bg1, #f5f5f5);color:var(--tn-fg1, #333)}.tn-tabs__header{display:flex;background-color:var(--tn-bg1, #fff);position:relative;border-bottom:1px solid var(--tn-lines, #e0e0e0)}.tn-tabs__highlight-bar{position:absolute;bottom:-1px;height:2px;background-color:var(--tn-primary, #0095d5);transition:left .3s ease,width .3s ease,top .3s ease,height .3s ease;z-index:1}.tn-tabs__content{flex:1;position:relative;background-color:var(--tn-bg1, #fff);min-height:0;width:100%;overflow:hidden}@media(max-width:768px){.tn-tabs__header{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-tabs__header::-webkit-scrollbar{display:none}.tn-tabs--vertical .tn-tabs__header{overflow-y:auto;overflow-x:visible;max-height:300px}}@media(prefers-reduced-motion:reduce){.tn-tabs__highlight-bar{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTabsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tn-tabs', standalone: true, imports: [CommonModule, A11yModule, TnTabComponent, TnTabPanelComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"tablist\" [ngClass]=\"classes()\" [attr.aria-orientation]=\"orientation()\">\n  <div #tabHeader class=\"tn-tabs__header\">\n    <ng-content select=\"tn-tab\" />\n    @if (highlightBarVisible()) {\n      <div class=\"tn-tabs__highlight-bar\"\n           [style.left.px]=\"highlightBarLeft()\"\n           [style.width.px]=\"highlightBarWidth()\"\n           [style.top.px]=\"highlightBarTop()\"\n           [style.height.px]=\"highlightBarHeight()\">\n      </div>\n    }\n  </div>\n\n  <div class=\"tn-tabs__content\">\n    <ng-content select=\"tn-tab-panel\" />\n  </div>\n</div>", styles: [".tn-tabs{display:flex;flex-direction:column;width:100%;height:100%;min-width:0;font-family:var(--tn-font-family-body, \"Inter\", sans-serif)}.tn-tabs--disabled{opacity:.6;pointer-events:none}.tn-tabs--vertical{flex-direction:row}.tn-tabs--vertical .tn-tabs__header{flex-direction:column;border-bottom:none;border-right:1px solid var(--tn-lines, #e0e0e0);min-width:240px;width:auto}.tn-tabs--vertical .tn-tabs__content{flex:1;min-width:0}.tn-tabs--vertical .tn-tabs__highlight-bar{bottom:auto;height:auto}.tn-tabs--vertical .tn-tab{justify-content:flex-start;text-align:left;width:100%}.tn-tabs--vertical .tn-tab:hover:not(.tn-tab--disabled){background-color:var(--tn-alt-bg1, #f5f5f5);color:var(--tn-fg1, #333)}.tn-tabs__header{display:flex;background-color:var(--tn-bg1, #fff);position:relative;border-bottom:1px solid var(--tn-lines, #e0e0e0)}.tn-tabs__highlight-bar{position:absolute;bottom:-1px;height:2px;background-color:var(--tn-primary, #0095d5);transition:left .3s ease,width .3s ease,top .3s ease,height .3s ease;z-index:1}.tn-tabs__content{flex:1;position:relative;background-color:var(--tn-bg1, #fff);min-height:0;width:100%;overflow:hidden}@media(max-width:768px){.tn-tabs__header{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-tabs__header::-webkit-scrollbar{display:none}.tn-tabs--vertical .tn-tabs__header{overflow-y:auto;overflow-x:visible;max-height:300px}}@media(prefers-reduced-motion:reduce){.tn-tabs__highlight-bar{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnTabComponent), { isSignal: true }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnTabPanelComponent), { isSignal: true }] }], tabHeader: [{ type: i0.ViewChild, args: ['tabHeader', { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], highlightPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightPosition", required: false }] }], selectedIndexChange: [{ type: i0.Output, args: ["selectedIndexChange"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
 
 class TnKeyboardShortcutComponent {
     shortcut = input('', ...(ngDevMode ? [{ debugName: "shortcut" }] : []));
@@ -2762,215 +3569,6 @@ class TnSelectHarness extends ComponentHarness {
     }
 }
 
-/**
- * Harness for interacting with tn-icon in tests.
- * Provides filtering by icon name and library for existence checks, as well as click interaction.
- *
- * @example
- * ```typescript
- * // Check for existence
- * const icon = await loader.getHarness(TnIconHarness);
- *
- * // Find icon by name
- * const folderIcon = await loader.getHarness(
- *   TnIconHarness.with({ name: 'folder' })
- * );
- *
- * // Find icon by name and library
- * const mdiIcon = await loader.getHarness(
- *   TnIconHarness.with({ name: 'account-circle', library: 'mdi' })
- * );
- *
- * // Check if icon exists
- * const hasIcon = await loader.hasHarness(
- *   TnIconHarness.with({ name: 'check' })
- * );
- *
- * // Click an icon
- * const closeIcon = await loader.getHarness(
- *   TnIconHarness.with({ name: 'close' })
- * );
- * await closeIcon.click();
- * ```
- */
-class TnIconHarness extends ComponentHarness {
-    /**
-     * The selector for the host element of a `TnIconComponent` instance.
-     */
-    static hostSelector = 'tn-icon';
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for an icon
-     * with specific attributes.
-     *
-     * @param options Options for filtering which icon instances are considered a match.
-     * @returns A `HarnessPredicate` configured with the given options.
-     *
-     * @example
-     * ```typescript
-     * // Find icon by name
-     * const icon = await loader.getHarness(
-     *   TnIconHarness.with({ name: 'home' })
-     * );
-     *
-     * // Find icon by library
-     * const customIcon = await loader.getHarness(
-     *   TnIconHarness.with({ library: 'custom' })
-     * );
-     *
-     * // Find icon with specific size
-     * const largeIcon = await loader.getHarness(
-     *   TnIconHarness.with({ size: 'lg' })
-     * );
-     * ```
-     */
-    static with(options = {}) {
-        return new HarnessPredicate(TnIconHarness, options)
-            .addOption('name', options.name, async (harness, name) => {
-            return (await harness.getName()) === name;
-        })
-            .addOption('library', options.library, async (harness, library) => {
-            return (await harness.getLibrary()) === library;
-        })
-            .addOption('size', options.size, async (harness, size) => {
-            return (await harness.getSize()) === size;
-        })
-            .addOption('fullSize', options.fullSize, async (harness, fullSize) => {
-            return (await harness.isFullSize()) === fullSize;
-        })
-            .addOption('customSize', options.customSize, async (harness, customSize) => {
-            return (await harness.getCustomSize()) === customSize;
-        });
-    }
-    /**
-     * Gets the icon name.
-     *
-     * @returns Promise resolving to the icon name.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness);
-     * const name = await icon.getName();
-     * expect(name).toBe('folder');
-     * ```
-     */
-    async getName() {
-        const host = await this.host();
-        return host.getAttribute('name');
-    }
-    /**
-     * Gets the icon library.
-     *
-     * @returns Promise resolving to the icon library.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness);
-     * const library = await icon.getLibrary();
-     * expect(library).toBe('mdi');
-     * ```
-     */
-    async getLibrary() {
-        const host = await this.host();
-        return host.getAttribute('library');
-    }
-    /**
-     * Gets the icon size.
-     *
-     * @returns Promise resolving to the icon size.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness);
-     * const size = await icon.getSize();
-     * expect(size).toBe('lg');
-     * ```
-     */
-    async getSize() {
-        const host = await this.host();
-        return host.getAttribute('size');
-    }
-    /**
-     * Gets the icon color.
-     *
-     * @returns Promise resolving to the icon color.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness);
-     * const color = await icon.getColor();
-     * expect(color).toBe('primary');
-     * ```
-     */
-    async getColor() {
-        const host = await this.host();
-        return host.getAttribute('color');
-    }
-    /**
-     * Checks if the icon is in full-size mode.
-     *
-     * @returns Promise resolving to true if the icon is full-size, false otherwise.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness);
-     * const isFullSize = await icon.isFullSize();
-     * expect(isFullSize).toBe(true);
-     * ```
-     */
-    async isFullSize() {
-        const host = await this.host();
-        const fullSizeAttr = await host.getAttribute('full-size');
-        return fullSizeAttr === 'true';
-    }
-    /**
-     * Gets the icon custom size.
-     *
-     * @returns Promise resolving to the custom size value, or null if not set.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness);
-     * const customSize = await icon.getCustomSize();
-     * expect(customSize).toBe('64px');
-     * ```
-     */
-    async getCustomSize() {
-        const host = await this.host();
-        return host.getAttribute('custom-size');
-    }
-    /**
-     * Checks if the icon is using a custom size.
-     *
-     * @returns Promise resolving to true if a custom size is set, false otherwise.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness);
-     * const hasCustomSize = await icon.hasCustomSize();
-     * expect(hasCustomSize).toBe(true);
-     * ```
-     */
-    async hasCustomSize() {
-        const customSize = await this.getCustomSize();
-        return customSize !== null;
-    }
-    /**
-     * Clicks the icon.
-     *
-     * @returns Promise that resolves when the click action is complete.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness.with({ name: 'close' }));
-     * await icon.click();
-     * ```
-     */
-    async click() {
-        const host = await this.host();
-        return host.click();
-    }
-}
-
 /**
  * Marks an icon name for inclusion in the TrueNAS UI sprite generation.
  *
@@ -8711,5 +9309,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, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogShellComponent, TnDividerComponent, TnDividerDirective, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabPanelComponent, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogShellComponent, TnDividerComponent, TnDividerDirective, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
 //# sourceMappingURL=truenas-ui-components.mjs.map