@truenas/ui-components 0.1.57 → 0.1.58

package/fesm2022/truenas-ui-components.mjs

@@ -12,6 +12,7 @@ import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
 import { firstValueFrom, BehaviorSubject, merge, Subject } from 'rxjs';
+import { RouterLink } from '@angular/router';
 import { Overlay, OverlayModule, OverlayPositionBuilder } from '@angular/cdk/overlay';
 import { TemplatePortal, PortalModule, ComponentPortal } from '@angular/cdk/portal';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
@@ -1568,11 +1569,32 @@ class TnButtonComponent {
     label = input('Button', ...(ngDevMode ? [{ debugName: "label" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     /**
-     * Test-id applied to the rendered `<button>` element. Rendered under whichever attribute
+     * Test-id applied to the rendered element. Rendered under whichever attribute
      * name is configured via `TN_TEST_ATTR` (default `data-testid`).
      */
     testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
+    /**
+     * Renders the button as an `<a>` with a plain `href` attribute.
+     * Mutually exclusive with `routerLink` — if both are provided, `routerLink` wins.
+     */
+    href = input(undefined, ...(ngDevMode ? [{ debugName: "href" }] : []));
+    /**
+     * Renders the button as an `<a>` driven by Angular Router. Accepts the same
+     * shapes as `[routerLink]` (`string | any[]`).
+     */
+    routerLink = input(undefined, ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
+    queryParams = input(undefined, ...(ngDevMode ? [{ debugName: "queryParams" }] : []));
+    fragment = input(undefined, ...(ngDevMode ? [{ debugName: "fragment" }] : []));
+    target = input(undefined, ...(ngDevMode ? [{ debugName: "target" }] : []));
+    rel = input(undefined, ...(ngDevMode ? [{ debugName: "rel" }] : []));
+    /**
+     * Accessible label for the rendered element. Mirrors `aria-label`; useful when
+     * the visible label alone is insufficient (e.g. icon-only links).
+     */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     onClick = output();
+    isAnchor = computed(() => this.routerLink() !== undefined || this.href() !== undefined, ...(ngDevMode ? [{ debugName: "isAnchor" }] : []));
+    isRouterLink = computed(() => this.routerLink() !== undefined, ...(ngDevMode ? [{ debugName: "isRouterLink" }] : []));
     classes = computed(() => {
         // Support both primary boolean and color string approaches
         const isPrimary = this.primary() || this.color() === 'primary';
@@ -1602,13 +1624,21 @@ class TnButtonComponent {
         }
         return ['storybook-button', `storybook-button--${this.size}`, mode];
     }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    handleAnchorClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            return;
+        }
+        this.onClick.emit(event);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: TnButtonComponent, isStandalone: true, selector: "tn-button", inputs: { primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button\n  type=\"button\"\n  [ngClass]=\"classes()\"\n  [ngStyle]=\"{ 'background-color': backgroundColor() }\"\n  [disabled]=\"disabled()\"\n  [tnTestId]=\"testId()\"\n  (click)=\"onClick.emit($event)\"\n>\n  {{ label() }}\n</button>\n", styles: [":host{display:inline-block;width:fit-content;justify-self:center}.storybook-button{display:inline-block;cursor:pointer;border:0;font-weight:500;line-height:1;font-family:IBM Plex Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.button-primary{background-color:var(--tn-primary);color:var(--tn-primary-txt)}.button-default{box-shadow:#00000026 0 0 0 1px inset;background-color:var(--tn-btn-default-bg);color:var(--tn-btn-default-txt)}.button-outline-primary{background-color:transparent;border:1px solid var(--tn-primary);color:var(--tn-primary);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-primary:hover{background-color:var(--tn-primary);border:1px solid var(--tn-primary);color:var(--tn-primary-txt)}.button-outline-default{background-color:transparent;border:1px solid var(--tn-lines, #e5e7eb);color:var(--tn-fg1, #000000);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-default:hover{background-color:var(--tn-btn-default-bg);border:1px solid var(--tn-btn-default-bg);color:var(--tn-btn-default-txt);box-shadow:#00000026 0 0 0 1px inset}.button-warn{background-color:var(--tn-red);color:#fff}.button-outline-warn{background-color:transparent;border:1px solid var(--tn-red);color:var(--tn-red);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-warn:hover{background-color:var(--tn-red);border:1px solid var(--tn-red);color:#fff}.storybook-button--small{padding:10px 16px;font-size:12px}.storybook-button--medium{padding:11px 20px;font-size:14px}.storybook-button--large{padding:12px 24px;font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnButtonComponent, isStandalone: true, selector: "tn-button", inputs: { primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, fragment: { classPropertyName: "fragment", publicName: "fragment", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "@if (isRouterLink()) {\n  <a\n    [ngClass]=\"classes()\"\n    [ngStyle]=\"{ 'background-color': backgroundColor() }\"\n    [routerLink]=\"disabled() ? null : routerLink()\"\n    [queryParams]=\"queryParams()\"\n    [fragment]=\"fragment()\"\n    [target]=\"target()\"\n    [rel]=\"rel()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.tabindex]=\"disabled() ? -1 : null\"\n    [class.is-disabled]=\"disabled()\"\n    [tnTestId]=\"testId()\"\n    (click)=\"handleAnchorClick($event)\"\n  >\n    {{ label() }}\n  </a>\n} @else if (isAnchor()) {\n  <a\n    [ngClass]=\"classes()\"\n    [ngStyle]=\"{ 'background-color': backgroundColor() }\"\n    [attr.href]=\"disabled() ? null : href()\"\n    [target]=\"target()\"\n    [rel]=\"rel()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.tabindex]=\"disabled() ? -1 : null\"\n    [class.is-disabled]=\"disabled()\"\n    [tnTestId]=\"testId()\"\n    (click)=\"handleAnchorClick($event)\"\n  >\n    {{ label() }}\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    [ngClass]=\"classes()\"\n    [ngStyle]=\"{ 'background-color': backgroundColor() }\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [tnTestId]=\"testId()\"\n    (click)=\"onClick.emit($event)\"\n  >\n    {{ label() }}\n  </button>\n}\n", styles: [":host{display:inline-block;width:fit-content;justify-self:center}.storybook-button{display:inline-block;cursor:pointer;border:0;font-weight:500;line-height:1;font-family:IBM Plex Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-button:disabled,.storybook-button.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}a.storybook-button{text-decoration:none;text-align:center}.button-primary{background-color:var(--tn-primary);color:var(--tn-primary-txt)}.button-default{box-shadow:#00000026 0 0 0 1px inset;background-color:var(--tn-btn-default-bg);color:var(--tn-btn-default-txt)}.button-outline-primary{background-color:transparent;border:1px solid var(--tn-primary);color:var(--tn-primary);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-primary:hover{background-color:var(--tn-primary);border:1px solid var(--tn-primary);color:var(--tn-primary-txt)}.button-outline-default{background-color:transparent;border:1px solid var(--tn-lines, #e5e7eb);color:var(--tn-fg1, #000000);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-default:hover{background-color:var(--tn-btn-default-bg);border:1px solid var(--tn-btn-default-bg);color:var(--tn-btn-default-txt);box-shadow:#00000026 0 0 0 1px inset}.button-warn{background-color:var(--tn-red);color:#fff}.button-outline-warn{background-color:transparent;border:1px solid var(--tn-red);color:var(--tn-red);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-warn:hover{background-color:var(--tn-red);border:1px solid var(--tn-red);color:#fff}.storybook-button--small{padding:10px 16px;font-size:12px}.storybook-button--medium{padding:11px 20px;font-size:14px}.storybook-button--large{padding:12px 24px;font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-button', standalone: true, imports: [CommonModule, TnTestIdDirective], template: "<button\n  type=\"button\"\n  [ngClass]=\"classes()\"\n  [ngStyle]=\"{ 'background-color': backgroundColor() }\"\n  [disabled]=\"disabled()\"\n  [tnTestId]=\"testId()\"\n  (click)=\"onClick.emit($event)\"\n>\n  {{ label() }}\n</button>\n", styles: [":host{display:inline-block;width:fit-content;justify-self:center}.storybook-button{display:inline-block;cursor:pointer;border:0;font-weight:500;line-height:1;font-family:IBM Plex Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.button-primary{background-color:var(--tn-primary);color:var(--tn-primary-txt)}.button-default{box-shadow:#00000026 0 0 0 1px inset;background-color:var(--tn-btn-default-bg);color:var(--tn-btn-default-txt)}.button-outline-primary{background-color:transparent;border:1px solid var(--tn-primary);color:var(--tn-primary);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-primary:hover{background-color:var(--tn-primary);border:1px solid var(--tn-primary);color:var(--tn-primary-txt)}.button-outline-default{background-color:transparent;border:1px solid var(--tn-lines, #e5e7eb);color:var(--tn-fg1, #000000);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-default:hover{background-color:var(--tn-btn-default-bg);border:1px solid var(--tn-btn-default-bg);color:var(--tn-btn-default-txt);box-shadow:#00000026 0 0 0 1px inset}.button-warn{background-color:var(--tn-red);color:#fff}.button-outline-warn{background-color:transparent;border:1px solid var(--tn-red);color:var(--tn-red);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-warn:hover{background-color:var(--tn-red);border:1px solid var(--tn-red);color:#fff}.storybook-button--small{padding:10px 16px;font-size:12px}.storybook-button--medium{padding:11px 20px;font-size:14px}.storybook-button--large{padding:12px 24px;font-size:16px}\n"] }]
-        }], propDecorators: { primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
+            args: [{ selector: 'tn-button', standalone: true, imports: [CommonModule, RouterLink, TnTestIdDirective], template: "@if (isRouterLink()) {\n  <a\n    [ngClass]=\"classes()\"\n    [ngStyle]=\"{ 'background-color': backgroundColor() }\"\n    [routerLink]=\"disabled() ? null : routerLink()\"\n    [queryParams]=\"queryParams()\"\n    [fragment]=\"fragment()\"\n    [target]=\"target()\"\n    [rel]=\"rel()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.tabindex]=\"disabled() ? -1 : null\"\n    [class.is-disabled]=\"disabled()\"\n    [tnTestId]=\"testId()\"\n    (click)=\"handleAnchorClick($event)\"\n  >\n    {{ label() }}\n  </a>\n} @else if (isAnchor()) {\n  <a\n    [ngClass]=\"classes()\"\n    [ngStyle]=\"{ 'background-color': backgroundColor() }\"\n    [attr.href]=\"disabled() ? null : href()\"\n    [target]=\"target()\"\n    [rel]=\"rel()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.tabindex]=\"disabled() ? -1 : null\"\n    [class.is-disabled]=\"disabled()\"\n    [tnTestId]=\"testId()\"\n    (click)=\"handleAnchorClick($event)\"\n  >\n    {{ label() }}\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    [ngClass]=\"classes()\"\n    [ngStyle]=\"{ 'background-color': backgroundColor() }\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [tnTestId]=\"testId()\"\n    (click)=\"onClick.emit($event)\"\n  >\n    {{ label() }}\n  </button>\n}\n", styles: [":host{display:inline-block;width:fit-content;justify-self:center}.storybook-button{display:inline-block;cursor:pointer;border:0;font-weight:500;line-height:1;font-family:IBM Plex Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-button:disabled,.storybook-button.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}a.storybook-button{text-decoration:none;text-align:center}.button-primary{background-color:var(--tn-primary);color:var(--tn-primary-txt)}.button-default{box-shadow:#00000026 0 0 0 1px inset;background-color:var(--tn-btn-default-bg);color:var(--tn-btn-default-txt)}.button-outline-primary{background-color:transparent;border:1px solid var(--tn-primary);color:var(--tn-primary);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-primary:hover{background-color:var(--tn-primary);border:1px solid var(--tn-primary);color:var(--tn-primary-txt)}.button-outline-default{background-color:transparent;border:1px solid var(--tn-lines, #e5e7eb);color:var(--tn-fg1, #000000);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-default:hover{background-color:var(--tn-btn-default-bg);border:1px solid var(--tn-btn-default-bg);color:var(--tn-btn-default-txt);box-shadow:#00000026 0 0 0 1px inset}.button-warn{background-color:var(--tn-red);color:#fff}.button-outline-warn{background-color:transparent;border:1px solid var(--tn-red);color:var(--tn-red);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-warn:hover{background-color:var(--tn-red);border:1px solid var(--tn-red);color:#fff}.storybook-button--small{padding:10px 16px;font-size:12px}.storybook-button--medium{padding:11px 20px;font-size:14px}.storybook-button--large{padding:12px 24px;font-size:16px}\n"] }]
+        }], propDecorators: { primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], fragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "fragment", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
 /**
  * Harness for interacting with tn-button in tests.
@@ -1633,7 +1663,7 @@ class TnButtonHarness extends ComponentHarness {
      * The selector for the host element of a `TnButtonComponent` instance.
      */
     static hostSelector = 'tn-button';
-    _button = this.locatorFor('button');
+    _button = this.locatorFor('button, a');
     /**
      * Gets a `HarnessPredicate` that can be used to search for a button
      * with specific attributes.
@@ -1683,8 +1713,31 @@ class TnButtonHarness extends ComponentHarness {
      */
     async isDisabled() {
         const button = await this._button();
+        const tagName = (await button.getProperty('tagName')).toLowerCase();
+        if (tagName === 'a') {
+            return (await button.getAttribute('aria-disabled')) === 'true';
+        }
         return (await button.getProperty('disabled')) ?? false;
     }
+    /**
+     * Gets the resolved URL of the rendered element. Returns the `href` for
+     * anchor-mode renders (both plain `href` and `routerLink`) and `null` for
+     * button-mode renders.
+     *
+     * @example
+     * ```typescript
+     * const link = await loader.getHarness(TnButtonHarness.with({ label: 'Audit Settings' }));
+     * expect(await link.getHref()).toContain('/audit/settings');
+     * ```
+     */
+    async getHref() {
+        const button = await this._button();
+        const tagName = (await button.getProperty('tagName')).toLowerCase();
+        if (tagName !== 'a') {
+            return null;
+        }
+        return button.getAttribute('href');
+    }
     /**
      * Clicks the button.
      *
@@ -2579,6 +2632,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnMenuTriggerFor", required: true }] }], tnMenuPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnMenuPosition", required: false }] }] } });
 
+/**
+ * Projection-based menu item for use inside `<tn-menu>`.
+ *
+ * Two authoring modes:
+ * 1. **Convenience** — set `label` (and optionally `icon`/`shortcut`); the
+ *    default icon + label + shortcut layout renders.
+ * 2. **Custom content** — omit `label`; project arbitrary content via
+ *    `<ng-content>` (badges, two-line layouts, etc.).
+ *
+ * Existing `<tn-menu [items]="...">` consumers don't need this component;
+ * the items-array API continues to work unchanged. Items-array entries and
+ * projected `<tn-menu-item>` children render together inside one `<tn-menu>`.
+ *
+ * Subscribe to either the projected item's own `itemClick` output (preferred,
+ * per-item handlers) or the parent menu's `menuItemClick` (uniform handler).
+ * Trigger-driven menus close automatically on projected-item click.
+ *
+ * **Note on keyboard navigation:** projected items render as `role="menuitem"`
+ * buttons but do not participate in `CdkMenu` arrow-key navigation (CdkMenuItem
+ * requires its parent `CdkMenu` in the same injector tree, which projection
+ * breaks). For menus that depend on arrow-key navigation between options, use
+ * the `items` input form. Tab/Shift+Tab and Enter/Space activation still work.
+ *
+ * @example
+ * ```html
+ * <tn-menu>
+ *   <tn-menu-item label="JSON" [selected]="format === 'json'"
+ *                 (itemClick)="setFormat('json')" />
+ *   <tn-menu-item label="CSV"  [selected]="format === 'csv'"
+ *                 (itemClick)="setFormat('csv')" />
+ * </tn-menu>
+ * ```
+ */
+class TnMenuItemComponent {
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    iconLibrary = input(undefined, ...(ngDevMode ? [{ debugName: "iconLibrary" }] : []));
+    shortcut = input(undefined, ...(ngDevMode ? [{ debugName: "shortcut" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
+    itemClick = output();
+    resolvedTestId = computed(() => this.testId() ?? (this.id() ? `menu-item-${this.id()}` : undefined), ...(ngDevMode ? [{ debugName: "resolvedTestId" }] : []));
+    handleClick(event) {
+        if (this.disabled()) {
+            return;
+        }
+        this.itemClick.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnMenuItemComponent, isStandalone: true, selector: "tn-menu-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconLibrary: { classPropertyName: "iconLibrary", publicName: "iconLibrary", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button\n  class=\"tn-menu-item\"\n  type=\"button\"\n  role=\"menuitem\"\n  [tnTestId]=\"resolvedTestId()\"\n  [disabled]=\"disabled()\"\n  [class.disabled]=\"disabled()\"\n  [class.tn-menu-item--selected]=\"selected()\"\n  [attr.aria-current]=\"selected() ? 'true' : null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (click)=\"handleClick($event)\"\n>\n  @if (label() !== undefined) {\n    @if (icon()) {\n      <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"icon()!\" [library]=\"iconLibrary()\" />\n    }\n    <span class=\"tn-menu-item-label\">{{ label() }}</span>\n    @if (shortcut()) {\n      <span class=\"tn-menu-item-shortcut\">{{ shortcut() }}</span>\n    }\n  } @else {\n    <ng-content />\n  }\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-menu-item', standalone: true, imports: [CommonModule, TnIconComponent, TnTestIdDirective], template: "<button\n  class=\"tn-menu-item\"\n  type=\"button\"\n  role=\"menuitem\"\n  [tnTestId]=\"resolvedTestId()\"\n  [disabled]=\"disabled()\"\n  [class.disabled]=\"disabled()\"\n  [class.tn-menu-item--selected]=\"selected()\"\n  [attr.aria-current]=\"selected() ? 'true' : null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (click)=\"handleClick($event)\"\n>\n  @if (label() !== undefined) {\n    @if (icon()) {\n      <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"icon()!\" [library]=\"iconLibrary()\" />\n    }\n    <span class=\"tn-menu-item-label\">{{ label() }}</span>\n    @if (shortcut()) {\n      <span class=\"tn-menu-item-shortcut\">{{ shortcut() }}</span>\n    }\n  } @else {\n    <ng-content />\n  }\n</button>\n" }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconLibrary: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLibrary", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
 /**
  * Activates CDK menu hover-to-open behavior for menus opened via custom overlays.
  *
@@ -2634,6 +2745,23 @@ class TnMenuComponent {
             }
         }
     }
+    contentItems = contentChildren(TnMenuItemComponent, ...(ngDevMode ? [{ debugName: "contentItems" }] : []));
+    constructor() {
+        // Forward projected `<tn-menu-item>` clicks to `menuItemClick` so trigger-
+        // driven menus close uniformly. The synthetic emission mirrors the input
+        // shape; consumers wanting per-item behavior should bind to the projected
+        // item's own `itemClick` output.
+        effect((onCleanup) => {
+            const items = this.contentItems();
+            const subs = items.map((item) => item.itemClick.subscribe(() => {
+                this.menuItemClick.emit({ id: item.id() ?? '', label: item.label() ?? '' });
+                if (this.contextOverlayRef) {
+                    this.closeContextMenu();
+                }
+            }));
+            onCleanup(() => subs.forEach((s) => s.unsubscribe()));
+        });
+    }
     hasChildren = computed(() => (item) => {
         return !!(item.children && item.children.length > 0);
     }, ...(ngDevMode ? [{ debugName: "hasChildren" }] : []));
@@ -2701,12 +2829,12 @@ class TnMenuComponent {
         return item.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnMenuComponent, isStandalone: true, selector: "tn-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick", menuOpen: "menuOpen", menuClose: "menuClose" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, isSignal: true }, { propertyName: "contextMenuTemplate", first: true, predicate: ["contextMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Context menu content slot -->\n@if (contextMenu()) {\n  <div class=\"tn-menu-context-content\" (contextmenu)=\"onContextMenu($event)\">\n    <ng-content />\n  </div>\n}\n\n  <!-- Context menu template for overlay -->\n  <ng-template #contextMenuTemplate>\n    <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n      @for (item of items(); track trackByItemId($index, item)) {\n        @if (item.separator) {\n          <div\n            class=\"tn-menu-separator\"\n            role=\"separator\"\n          ></div>\n        } @else {\n          @if (!item.children || item.children.length === 0) {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n              (click)=\"onMenuItemClick(item)\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n            </button>\n          } @else {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item tn-menu-item--nested\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [cdkMenuTriggerFor]=\"nestedMenu\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n              <span class=\"tn-menu-item-arrow\">\u25B6</span>\n            </button>\n\n            <ng-template #nestedMenu>\n              <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n                  @if (nestedItem.separator) {\n                    <div\n                      class=\"tn-menu-separator\"\n                      role=\"separator\"\n                    ></div>\n                  } @else {\n                    @if (!nestedItem.children || nestedItem.children.length === 0) {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                        (click)=\"onMenuItemClick(nestedItem)\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                      </button>\n                    } @else {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item tn-menu-item--nested\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [cdkMenuTriggerFor]=\"deepNestedMenu\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                        <span class=\"tn-menu-item-arrow\">\u25B6</span>\n                      </button>\n\n                      <ng-template #deepNestedMenu>\n                        <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                          @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n                            @if (deepNestedItem.separator) {\n                              <div\n                                class=\"tn-menu-separator\"\n                                role=\"separator\"\n                              ></div>\n                            } @else {\n                              <button\n                                cdkMenuItem\n                                class=\"tn-menu-item\"\n                                type=\"button\"\n                                [tnTestId]=\"deepNestedItem.testId ?? 'menu-item-' + deepNestedItem.id\"\n                                [disabled]=\"deepNestedItem.disabled\"\n                                [class.disabled]=\"deepNestedItem.disabled\"\n                                (click)=\"onMenuItemClick(deepNestedItem)\"\n                              >\n                                @if (deepNestedItem.icon) {\n                                  <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n                                }\n                                <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n                                @if (deepNestedItem.shortcut) {\n                                  <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n                                }\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n                    }\n                  }\n                }\n              </div>\n            </ng-template>\n          }\n        }\n      }\n    </div>\n  </ng-template>\n\n  <!-- Regular menu template -->\n  <ng-template #menuTemplate>\n    <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n      @for (item of items(); track trackByItemId($index, item)) {\n        @if (item.separator) {\n          <div\n            class=\"tn-menu-separator\"\n            role=\"separator\"\n          ></div>\n        } @else {\n          @if (!item.children || item.children.length === 0) {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n              (click)=\"onMenuItemClick(item)\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n            </button>\n          } @else {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item tn-menu-item--nested\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [cdkMenuTriggerFor]=\"nestedMenu\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n              <span class=\"tn-menu-item-arrow\">\u25B6</span>\n            </button>\n\n            <ng-template #nestedMenu>\n              <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n                  @if (nestedItem.separator) {\n                    <div\n                      class=\"tn-menu-separator\"\n                      role=\"separator\"\n                    ></div>\n                  } @else {\n                    @if (!nestedItem.children || nestedItem.children.length === 0) {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                        (click)=\"onMenuItemClick(nestedItem)\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                      </button>\n                    } @else {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item tn-menu-item--nested\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [cdkMenuTriggerFor]=\"deepNestedMenu\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                        <span class=\"tn-menu-item-arrow\">\u25B6</span>\n                      </button>\n\n                      <ng-template #deepNestedMenu>\n                        <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                          @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n                            @if (deepNestedItem.separator) {\n                              <div\n                                class=\"tn-menu-separator\"\n                                role=\"separator\"\n                              ></div>\n                            } @else {\n                              <button\n                                cdkMenuItem\n                                class=\"tn-menu-item\"\n                                type=\"button\"\n                                [tnTestId]=\"deepNestedItem.testId ?? 'menu-item-' + deepNestedItem.id\"\n                                [disabled]=\"deepNestedItem.disabled\"\n                                [class.disabled]=\"deepNestedItem.disabled\"\n                                (click)=\"onMenuItemClick(deepNestedItem)\"\n                              >\n                                @if (deepNestedItem.icon) {\n                                  <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n                                }\n                                <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n                                @if (deepNestedItem.shortcut) {\n                                  <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n                                }\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n                    }\n                  }\n                }\n              </div>\n            </ng-template>\n          }\n        }\n      }\n    </div>\n  </ng-template>", styles: [".tn-menu-container{display:inline-block;position:relative}.tn-menu-container.tn-menu-container--context{display:block;width:100%;height:100%;cursor:context-menu}.tn-menu-trigger{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;transition:all .2s ease}.tn-menu-trigger:hover:not(.disabled){background:var(--tn-bg2, #f5f5f5);border-color:var(--tn-lines, #cccccc)}.tn-menu-trigger:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-menu-trigger.disabled{opacity:.5;cursor:not-allowed}.tn-menu-arrow{font-size:12px;transition:transform .2s ease}.tn-menu-arrow.tn-menu-arrow--up{transform:rotate(180deg)}.tn-menu{display:flex;flex-direction:column;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;min-width:160px;max-width:300px;padding:4px 0;z-index:1000}.tn-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;border:none;background:transparent;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;text-align:left;transition:background-color .2s ease}.tn-menu-item:hover:not(.disabled){background:var(--tn-alt-bg2, #e8f4fd)!important}.tn-menu-item:focus{outline:none;background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item[aria-selected=true]{background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item.disabled{opacity:.5;cursor:not-allowed}.tn-menu-item.disabled:hover{background:transparent!important}.tn-menu-item-icon{font-size:16px;width:16px;text-align:center}.tn-menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn-menu-item-shortcut{font-size:12px;color:var(--tn-fg2, #666666);margin-left:auto;padding-left:16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:400;opacity:.7}.tn-menu-item-arrow{font-size:10px;margin-left:8px;color:var(--tn-fg2, #666666);transition:transform .2s ease;flex-shrink:0}.tn-menu-item--nested{position:relative}.tn-menu-item--nested:hover .tn-menu-item-arrow{color:var(--tn-fg1, #333333)}.tn-menu-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:4px 0}.tn-menu--nested{margin-left:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;border-radius:4px}.tn-menu-context-content{width:100%;height:100%}.tn-menu-context-content:hover:before{content:\"\";position:absolute;inset:0;background:rgba(var(--tn-primary-rgb, 0, 123, 255),.05);pointer-events:none;border:1px dashed rgba(var(--tn-primary-rgb, 0, 123, 255),.3);border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "directive", type: TnMenuActivateHoverDirective, selector: "[tnMenuActivateHover]" }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnMenuComponent, isStandalone: true, selector: "tn-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick", menuOpen: "menuOpen", menuClose: "menuClose" }, queries: [{ propertyName: "contentItems", predicate: TnMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, isSignal: true }, { propertyName: "contextMenuTemplate", first: true, predicate: ["contextMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Context menu content slot: anything that isn't a projected <tn-menu-item> -->\n@if (contextMenu()) {\n  <div class=\"tn-menu-context-content\" (contextmenu)=\"onContextMenu($event)\">\n    <ng-content />\n  </div>\n}\n\n  <!-- Context menu template for overlay -->\n  <ng-template #contextMenuTemplate>\n    <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n      @for (item of items(); track trackByItemId($index, item)) {\n        @if (item.separator) {\n          <div\n            class=\"tn-menu-separator\"\n            role=\"separator\"\n          ></div>\n        } @else {\n          @if (!item.children || item.children.length === 0) {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n              [class.tn-menu-item--selected]=\"item.selected\"\n              [attr.aria-current]=\"item.selected ? 'true' : null\"\n              (click)=\"onMenuItemClick(item)\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n            </button>\n          } @else {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item tn-menu-item--nested\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [cdkMenuTriggerFor]=\"nestedMenu\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n              [class.tn-menu-item--selected]=\"item.selected\"\n              [attr.aria-current]=\"item.selected ? 'true' : null\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n              <span class=\"tn-menu-item-arrow\">\u25B6</span>\n            </button>\n\n            <ng-template #nestedMenu>\n              <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n                  @if (nestedItem.separator) {\n                    <div\n                      class=\"tn-menu-separator\"\n                      role=\"separator\"\n                    ></div>\n                  } @else {\n                    @if (!nestedItem.children || nestedItem.children.length === 0) {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                        [class.tn-menu-item--selected]=\"nestedItem.selected\"\n                        [attr.aria-current]=\"nestedItem.selected ? 'true' : null\"\n                        (click)=\"onMenuItemClick(nestedItem)\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                      </button>\n                    } @else {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item tn-menu-item--nested\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [cdkMenuTriggerFor]=\"deepNestedMenu\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                        [class.tn-menu-item--selected]=\"nestedItem.selected\"\n                        [attr.aria-current]=\"nestedItem.selected ? 'true' : null\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                        <span class=\"tn-menu-item-arrow\">\u25B6</span>\n                      </button>\n\n                      <ng-template #deepNestedMenu>\n                        <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                          @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n                            @if (deepNestedItem.separator) {\n                              <div\n                                class=\"tn-menu-separator\"\n                                role=\"separator\"\n                              ></div>\n                            } @else {\n                              <button\n                                cdkMenuItem\n                                class=\"tn-menu-item\"\n                                type=\"button\"\n                                [tnTestId]=\"deepNestedItem.testId ?? 'menu-item-' + deepNestedItem.id\"\n                                [disabled]=\"deepNestedItem.disabled\"\n                                [class.disabled]=\"deepNestedItem.disabled\"\n                                [class.tn-menu-item--selected]=\"deepNestedItem.selected\"\n                                [attr.aria-current]=\"deepNestedItem.selected ? 'true' : null\"\n                                (click)=\"onMenuItemClick(deepNestedItem)\"\n                              >\n                                @if (deepNestedItem.icon) {\n                                  <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n                                }\n                                <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n                                @if (deepNestedItem.shortcut) {\n                                  <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n                                }\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n                    }\n                  }\n                }\n              </div>\n            </ng-template>\n          }\n        }\n      }\n    </div>\n  </ng-template>\n\n  <!-- Regular menu template -->\n  <ng-template #menuTemplate>\n    <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n      <!-- Projected <tn-menu-item> children render here, mixed with the items() array below. -->\n      <ng-content select=\"tn-menu-item, .tn-menu-separator\" />\n      @for (item of items(); track trackByItemId($index, item)) {\n        @if (item.separator) {\n          <div\n            class=\"tn-menu-separator\"\n            role=\"separator\"\n          ></div>\n        } @else {\n          @if (!item.children || item.children.length === 0) {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n              [class.tn-menu-item--selected]=\"item.selected\"\n              [attr.aria-current]=\"item.selected ? 'true' : null\"\n              (click)=\"onMenuItemClick(item)\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n            </button>\n          } @else {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item tn-menu-item--nested\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [cdkMenuTriggerFor]=\"nestedMenu\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n              [class.tn-menu-item--selected]=\"item.selected\"\n              [attr.aria-current]=\"item.selected ? 'true' : null\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n              <span class=\"tn-menu-item-arrow\">\u25B6</span>\n            </button>\n\n            <ng-template #nestedMenu>\n              <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n                  @if (nestedItem.separator) {\n                    <div\n                      class=\"tn-menu-separator\"\n                      role=\"separator\"\n                    ></div>\n                  } @else {\n                    @if (!nestedItem.children || nestedItem.children.length === 0) {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                        [class.tn-menu-item--selected]=\"nestedItem.selected\"\n                        [attr.aria-current]=\"nestedItem.selected ? 'true' : null\"\n                        (click)=\"onMenuItemClick(nestedItem)\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                      </button>\n                    } @else {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item tn-menu-item--nested\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [cdkMenuTriggerFor]=\"deepNestedMenu\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                        [class.tn-menu-item--selected]=\"nestedItem.selected\"\n                        [attr.aria-current]=\"nestedItem.selected ? 'true' : null\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                        <span class=\"tn-menu-item-arrow\">\u25B6</span>\n                      </button>\n\n                      <ng-template #deepNestedMenu>\n                        <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                          @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n                            @if (deepNestedItem.separator) {\n                              <div\n                                class=\"tn-menu-separator\"\n                                role=\"separator\"\n                              ></div>\n                            } @else {\n                              <button\n                                cdkMenuItem\n                                class=\"tn-menu-item\"\n                                type=\"button\"\n                                [tnTestId]=\"deepNestedItem.testId ?? 'menu-item-' + deepNestedItem.id\"\n                                [disabled]=\"deepNestedItem.disabled\"\n                                [class.disabled]=\"deepNestedItem.disabled\"\n                                [class.tn-menu-item--selected]=\"deepNestedItem.selected\"\n                                [attr.aria-current]=\"deepNestedItem.selected ? 'true' : null\"\n                                (click)=\"onMenuItemClick(deepNestedItem)\"\n                              >\n                                @if (deepNestedItem.icon) {\n                                  <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n                                }\n                                <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n                                @if (deepNestedItem.shortcut) {\n                                  <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n                                }\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n                    }\n                  }\n                }\n              </div>\n            </ng-template>\n          }\n        }\n      }\n    </div>\n  </ng-template>", styles: [".tn-menu-container{display:inline-block;position:relative}.tn-menu-container.tn-menu-container--context{display:block;width:100%;height:100%;cursor:context-menu}.tn-menu-trigger{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;transition:all .2s ease}.tn-menu-trigger:hover:not(.disabled){background:var(--tn-bg2, #f5f5f5);border-color:var(--tn-lines, #cccccc)}.tn-menu-trigger:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-menu-trigger.disabled{opacity:.5;cursor:not-allowed}.tn-menu-arrow{font-size:12px;transition:transform .2s ease}.tn-menu-arrow.tn-menu-arrow--up{transform:rotate(180deg)}.tn-menu{display:flex;flex-direction:column;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;min-width:160px;max-width:300px;padding:4px 0;z-index:1000}.tn-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;border:none;background:transparent;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;text-align:left;transition:background-color .2s ease}.tn-menu-item:hover:not(.disabled){background:var(--tn-alt-bg2, #e8f4fd)!important}.tn-menu-item:focus{outline:none;background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item[aria-selected=true]{background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item.tn-menu-item--selected{background:var(--tn-alt-bg2, #e8f4fd);font-weight:600;color:var(--tn-primary, #007bff)}.tn-menu-item.disabled{opacity:.5;cursor:not-allowed}.tn-menu-item.disabled:hover{background:transparent!important}.tn-menu-item-icon{font-size:16px;width:16px;text-align:center}.tn-menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn-menu-item-shortcut{font-size:12px;color:var(--tn-fg2, #666666);margin-left:auto;padding-left:16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:400;opacity:.7}.tn-menu-item-arrow{font-size:10px;margin-left:8px;color:var(--tn-fg2, #666666);transition:transform .2s ease;flex-shrink:0}.tn-menu-item--nested{position:relative}.tn-menu-item--nested:hover .tn-menu-item-arrow{color:var(--tn-fg1, #333333)}.tn-menu-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:4px 0}.tn-menu--nested{margin-left:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;border-radius:4px}.tn-menu-context-content{width:100%;height:100%}.tn-menu-context-content:hover:before{content:\"\";position:absolute;inset:0;background:rgba(var(--tn-primary-rgb, 0, 123, 255),.05);pointer-events:none;border:1px dashed rgba(var(--tn-primary-rgb, 0, 123, 255),.3);border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "directive", type: TnMenuActivateHoverDirective, selector: "[tnMenuActivateHover]" }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-menu', standalone: true, imports: [CommonModule, CdkMenu, CdkMenuItem, CdkMenuTrigger, TnIconComponent, TnMenuActivateHoverDirective, TnTestIdDirective], template: "<!-- Context menu content slot -->\n@if (contextMenu()) {\n  <div class=\"tn-menu-context-content\" (contextmenu)=\"onContextMenu($event)\">\n    <ng-content />\n  </div>\n}\n\n  <!-- Context menu template for overlay -->\n  <ng-template #contextMenuTemplate>\n    <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n      @for (item of items(); track trackByItemId($index, item)) {\n        @if (item.separator) {\n          <div\n            class=\"tn-menu-separator\"\n            role=\"separator\"\n          ></div>\n        } @else {\n          @if (!item.children || item.children.length === 0) {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n              (click)=\"onMenuItemClick(item)\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n            </button>\n          } @else {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item tn-menu-item--nested\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [cdkMenuTriggerFor]=\"nestedMenu\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n              <span class=\"tn-menu-item-arrow\">\u25B6</span>\n            </button>\n\n            <ng-template #nestedMenu>\n              <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n                  @if (nestedItem.separator) {\n                    <div\n                      class=\"tn-menu-separator\"\n                      role=\"separator\"\n                    ></div>\n                  } @else {\n                    @if (!nestedItem.children || nestedItem.children.length === 0) {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                        (click)=\"onMenuItemClick(nestedItem)\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                      </button>\n                    } @else {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item tn-menu-item--nested\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [cdkMenuTriggerFor]=\"deepNestedMenu\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                        <span class=\"tn-menu-item-arrow\">\u25B6</span>\n                      </button>\n\n                      <ng-template #deepNestedMenu>\n                        <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                          @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n                            @if (deepNestedItem.separator) {\n                              <div\n                                class=\"tn-menu-separator\"\n                                role=\"separator\"\n                              ></div>\n                            } @else {\n                              <button\n                                cdkMenuItem\n                                class=\"tn-menu-item\"\n                                type=\"button\"\n                                [tnTestId]=\"deepNestedItem.testId ?? 'menu-item-' + deepNestedItem.id\"\n                                [disabled]=\"deepNestedItem.disabled\"\n                                [class.disabled]=\"deepNestedItem.disabled\"\n                                (click)=\"onMenuItemClick(deepNestedItem)\"\n                              >\n                                @if (deepNestedItem.icon) {\n                                  <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n                                }\n                                <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n                                @if (deepNestedItem.shortcut) {\n                                  <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n                                }\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n                    }\n                  }\n                }\n              </div>\n            </ng-template>\n          }\n        }\n      }\n    </div>\n  </ng-template>\n\n  <!-- Regular menu template -->\n  <ng-template #menuTemplate>\n    <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n      @for (item of items(); track trackByItemId($index, item)) {\n        @if (item.separator) {\n          <div\n            class=\"tn-menu-separator\"\n            role=\"separator\"\n          ></div>\n        } @else {\n          @if (!item.children || item.children.length === 0) {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n              (click)=\"onMenuItemClick(item)\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n            </button>\n          } @else {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item tn-menu-item--nested\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [cdkMenuTriggerFor]=\"nestedMenu\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n              <span class=\"tn-menu-item-arrow\">\u25B6</span>\n            </button>\n\n            <ng-template #nestedMenu>\n              <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n                  @if (nestedItem.separator) {\n                    <div\n                      class=\"tn-menu-separator\"\n                      role=\"separator\"\n                    ></div>\n                  } @else {\n                    @if (!nestedItem.children || nestedItem.children.length === 0) {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                        (click)=\"onMenuItemClick(nestedItem)\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                      </button>\n                    } @else {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item tn-menu-item--nested\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [cdkMenuTriggerFor]=\"deepNestedMenu\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                        <span class=\"tn-menu-item-arrow\">\u25B6</span>\n                      </button>\n\n                      <ng-template #deepNestedMenu>\n                        <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                          @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n                            @if (deepNestedItem.separator) {\n                              <div\n                                class=\"tn-menu-separator\"\n                                role=\"separator\"\n                              ></div>\n                            } @else {\n                              <button\n                                cdkMenuItem\n                                class=\"tn-menu-item\"\n                                type=\"button\"\n                                [tnTestId]=\"deepNestedItem.testId ?? 'menu-item-' + deepNestedItem.id\"\n                                [disabled]=\"deepNestedItem.disabled\"\n                                [class.disabled]=\"deepNestedItem.disabled\"\n                                (click)=\"onMenuItemClick(deepNestedItem)\"\n                              >\n                                @if (deepNestedItem.icon) {\n                                  <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n                                }\n                                <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n                                @if (deepNestedItem.shortcut) {\n                                  <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n                                }\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n                    }\n                  }\n                }\n              </div>\n            </ng-template>\n          }\n        }\n      }\n    </div>\n  </ng-template>", styles: [".tn-menu-container{display:inline-block;position:relative}.tn-menu-container.tn-menu-container--context{display:block;width:100%;height:100%;cursor:context-menu}.tn-menu-trigger{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;transition:all .2s ease}.tn-menu-trigger:hover:not(.disabled){background:var(--tn-bg2, #f5f5f5);border-color:var(--tn-lines, #cccccc)}.tn-menu-trigger:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-menu-trigger.disabled{opacity:.5;cursor:not-allowed}.tn-menu-arrow{font-size:12px;transition:transform .2s ease}.tn-menu-arrow.tn-menu-arrow--up{transform:rotate(180deg)}.tn-menu{display:flex;flex-direction:column;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;min-width:160px;max-width:300px;padding:4px 0;z-index:1000}.tn-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;border:none;background:transparent;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;text-align:left;transition:background-color .2s ease}.tn-menu-item:hover:not(.disabled){background:var(--tn-alt-bg2, #e8f4fd)!important}.tn-menu-item:focus{outline:none;background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item[aria-selected=true]{background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item.disabled{opacity:.5;cursor:not-allowed}.tn-menu-item.disabled:hover{background:transparent!important}.tn-menu-item-icon{font-size:16px;width:16px;text-align:center}.tn-menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn-menu-item-shortcut{font-size:12px;color:var(--tn-fg2, #666666);margin-left:auto;padding-left:16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:400;opacity:.7}.tn-menu-item-arrow{font-size:10px;margin-left:8px;color:var(--tn-fg2, #666666);transition:transform .2s ease;flex-shrink:0}.tn-menu-item--nested{position:relative}.tn-menu-item--nested:hover .tn-menu-item-arrow{color:var(--tn-fg1, #333333)}.tn-menu-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:4px 0}.tn-menu--nested{margin-left:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;border-radius:4px}.tn-menu-context-content{width:100%;height:100%}.tn-menu-context-content:hover:before{content:\"\";position:absolute;inset:0;background:rgba(var(--tn-primary-rgb, 0, 123, 255),.05);pointer-events:none;border:1px dashed rgba(var(--tn-primary-rgb, 0, 123, 255),.3);border-radius:4px}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], menuOpen: [{ type: i0.Output, args: ["menuOpen"] }], menuClose: [{ type: i0.Output, args: ["menuClose"] }], menuTemplate: [{ type: i0.ViewChild, args: ['menuTemplate', { isSignal: true }] }], contextMenuTemplate: [{ type: i0.ViewChild, args: ['contextMenuTemplate', { isSignal: true }] }] } });
+            args: [{ selector: 'tn-menu', standalone: true, imports: [CommonModule, CdkMenu, CdkMenuItem, CdkMenuTrigger, TnIconComponent, TnMenuActivateHoverDirective, TnTestIdDirective], template: "<!-- Context menu content slot: anything that isn't a projected <tn-menu-item> -->\n@if (contextMenu()) {\n  <div class=\"tn-menu-context-content\" (contextmenu)=\"onContextMenu($event)\">\n    <ng-content />\n  </div>\n}\n\n  <!-- Context menu template for overlay -->\n  <ng-template #contextMenuTemplate>\n    <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n      @for (item of items(); track trackByItemId($index, item)) {\n        @if (item.separator) {\n          <div\n            class=\"tn-menu-separator\"\n            role=\"separator\"\n          ></div>\n        } @else {\n          @if (!item.children || item.children.length === 0) {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n              [class.tn-menu-item--selected]=\"item.selected\"\n              [attr.aria-current]=\"item.selected ? 'true' : null\"\n              (click)=\"onMenuItemClick(item)\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n            </button>\n          } @else {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item tn-menu-item--nested\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [cdkMenuTriggerFor]=\"nestedMenu\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n              [class.tn-menu-item--selected]=\"item.selected\"\n              [attr.aria-current]=\"item.selected ? 'true' : null\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n              <span class=\"tn-menu-item-arrow\">\u25B6</span>\n            </button>\n\n            <ng-template #nestedMenu>\n              <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n                  @if (nestedItem.separator) {\n                    <div\n                      class=\"tn-menu-separator\"\n                      role=\"separator\"\n                    ></div>\n                  } @else {\n                    @if (!nestedItem.children || nestedItem.children.length === 0) {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                        [class.tn-menu-item--selected]=\"nestedItem.selected\"\n                        [attr.aria-current]=\"nestedItem.selected ? 'true' : null\"\n                        (click)=\"onMenuItemClick(nestedItem)\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                      </button>\n                    } @else {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item tn-menu-item--nested\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [cdkMenuTriggerFor]=\"deepNestedMenu\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                        [class.tn-menu-item--selected]=\"nestedItem.selected\"\n                        [attr.aria-current]=\"nestedItem.selected ? 'true' : null\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                        <span class=\"tn-menu-item-arrow\">\u25B6</span>\n                      </button>\n\n                      <ng-template #deepNestedMenu>\n                        <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                          @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n                            @if (deepNestedItem.separator) {\n                              <div\n                                class=\"tn-menu-separator\"\n                                role=\"separator\"\n                              ></div>\n                            } @else {\n                              <button\n                                cdkMenuItem\n                                class=\"tn-menu-item\"\n                                type=\"button\"\n                                [tnTestId]=\"deepNestedItem.testId ?? 'menu-item-' + deepNestedItem.id\"\n                                [disabled]=\"deepNestedItem.disabled\"\n                                [class.disabled]=\"deepNestedItem.disabled\"\n                                [class.tn-menu-item--selected]=\"deepNestedItem.selected\"\n                                [attr.aria-current]=\"deepNestedItem.selected ? 'true' : null\"\n                                (click)=\"onMenuItemClick(deepNestedItem)\"\n                              >\n                                @if (deepNestedItem.icon) {\n                                  <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n                                }\n                                <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n                                @if (deepNestedItem.shortcut) {\n                                  <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n                                }\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n                    }\n                  }\n                }\n              </div>\n            </ng-template>\n          }\n        }\n      }\n    </div>\n  </ng-template>\n\n  <!-- Regular menu template -->\n  <ng-template #menuTemplate>\n    <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n      <!-- Projected <tn-menu-item> children render here, mixed with the items() array below. -->\n      <ng-content select=\"tn-menu-item, .tn-menu-separator\" />\n      @for (item of items(); track trackByItemId($index, item)) {\n        @if (item.separator) {\n          <div\n            class=\"tn-menu-separator\"\n            role=\"separator\"\n          ></div>\n        } @else {\n          @if (!item.children || item.children.length === 0) {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n              [class.tn-menu-item--selected]=\"item.selected\"\n              [attr.aria-current]=\"item.selected ? 'true' : null\"\n              (click)=\"onMenuItemClick(item)\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n            </button>\n          } @else {\n            <button\n              cdkMenuItem\n              class=\"tn-menu-item tn-menu-item--nested\"\n              type=\"button\"\n              [tnTestId]=\"item.testId ?? 'menu-item-' + item.id\"\n              [cdkMenuTriggerFor]=\"nestedMenu\"\n              [disabled]=\"item.disabled\"\n              [class.disabled]=\"item.disabled\"\n              [class.tn-menu-item--selected]=\"item.selected\"\n              [attr.aria-current]=\"item.selected ? 'true' : null\"\n            >\n              @if (item.icon) {\n                <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n              }\n              <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n              @if (item.shortcut) {\n                <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n              }\n              <span class=\"tn-menu-item-arrow\">\u25B6</span>\n            </button>\n\n            <ng-template #nestedMenu>\n              <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n                  @if (nestedItem.separator) {\n                    <div\n                      class=\"tn-menu-separator\"\n                      role=\"separator\"\n                    ></div>\n                  } @else {\n                    @if (!nestedItem.children || nestedItem.children.length === 0) {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                        [class.tn-menu-item--selected]=\"nestedItem.selected\"\n                        [attr.aria-current]=\"nestedItem.selected ? 'true' : null\"\n                        (click)=\"onMenuItemClick(nestedItem)\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                      </button>\n                    } @else {\n                      <button\n                        cdkMenuItem\n                        class=\"tn-menu-item tn-menu-item--nested\"\n                        type=\"button\"\n                        [tnTestId]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n                        [cdkMenuTriggerFor]=\"deepNestedMenu\"\n                        [disabled]=\"nestedItem.disabled\"\n                        [class.disabled]=\"nestedItem.disabled\"\n                        [class.tn-menu-item--selected]=\"nestedItem.selected\"\n                        [attr.aria-current]=\"nestedItem.selected ? 'true' : null\"\n                      >\n                        @if (nestedItem.icon) {\n                          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n                        }\n                        <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n                        @if (nestedItem.shortcut) {\n                          <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n                        }\n                        <span class=\"tn-menu-item-arrow\">\u25B6</span>\n                      </button>\n\n                      <ng-template #deepNestedMenu>\n                        <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n                          @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n                            @if (deepNestedItem.separator) {\n                              <div\n                                class=\"tn-menu-separator\"\n                                role=\"separator\"\n                              ></div>\n                            } @else {\n                              <button\n                                cdkMenuItem\n                                class=\"tn-menu-item\"\n                                type=\"button\"\n                                [tnTestId]=\"deepNestedItem.testId ?? 'menu-item-' + deepNestedItem.id\"\n                                [disabled]=\"deepNestedItem.disabled\"\n                                [class.disabled]=\"deepNestedItem.disabled\"\n                                [class.tn-menu-item--selected]=\"deepNestedItem.selected\"\n                                [attr.aria-current]=\"deepNestedItem.selected ? 'true' : null\"\n                                (click)=\"onMenuItemClick(deepNestedItem)\"\n                              >\n                                @if (deepNestedItem.icon) {\n                                  <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n                                }\n                                <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n                                @if (deepNestedItem.shortcut) {\n                                  <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n                                }\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n                    }\n                  }\n                }\n              </div>\n            </ng-template>\n          }\n        }\n      }\n    </div>\n  </ng-template>", styles: [".tn-menu-container{display:inline-block;position:relative}.tn-menu-container.tn-menu-container--context{display:block;width:100%;height:100%;cursor:context-menu}.tn-menu-trigger{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;transition:all .2s ease}.tn-menu-trigger:hover:not(.disabled){background:var(--tn-bg2, #f5f5f5);border-color:var(--tn-lines, #cccccc)}.tn-menu-trigger:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-menu-trigger.disabled{opacity:.5;cursor:not-allowed}.tn-menu-arrow{font-size:12px;transition:transform .2s ease}.tn-menu-arrow.tn-menu-arrow--up{transform:rotate(180deg)}.tn-menu{display:flex;flex-direction:column;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;min-width:160px;max-width:300px;padding:4px 0;z-index:1000}.tn-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;border:none;background:transparent;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;text-align:left;transition:background-color .2s ease}.tn-menu-item:hover:not(.disabled){background:var(--tn-alt-bg2, #e8f4fd)!important}.tn-menu-item:focus{outline:none;background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item[aria-selected=true]{background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item.tn-menu-item--selected{background:var(--tn-alt-bg2, #e8f4fd);font-weight:600;color:var(--tn-primary, #007bff)}.tn-menu-item.disabled{opacity:.5;cursor:not-allowed}.tn-menu-item.disabled:hover{background:transparent!important}.tn-menu-item-icon{font-size:16px;width:16px;text-align:center}.tn-menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn-menu-item-shortcut{font-size:12px;color:var(--tn-fg2, #666666);margin-left:auto;padding-left:16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:400;opacity:.7}.tn-menu-item-arrow{font-size:10px;margin-left:8px;color:var(--tn-fg2, #666666);transition:transform .2s ease;flex-shrink:0}.tn-menu-item--nested{position:relative}.tn-menu-item--nested:hover .tn-menu-item-arrow{color:var(--tn-fg1, #333333)}.tn-menu-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:4px 0}.tn-menu--nested{margin-left:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;border-radius:4px}.tn-menu-context-content{width:100%;height:100%}.tn-menu-context-content:hover:before{content:\"\";position:absolute;inset:0;background:rgba(var(--tn-primary-rgb, 0, 123, 255),.05);pointer-events:none;border:1px dashed rgba(var(--tn-primary-rgb, 0, 123, 255),.3);border-radius:4px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], menuOpen: [{ type: i0.Output, args: ["menuOpen"] }], menuClose: [{ type: i0.Output, args: ["menuClose"] }], menuTemplate: [{ type: i0.ViewChild, args: ['menuTemplate', { isSignal: true }] }], contextMenuTemplate: [{ type: i0.ViewChild, args: ['contextMenuTemplate', { isSignal: true }] }], contentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnMenuItemComponent), { isSignal: true }] }] } });
 
 class TnSlideToggleComponent {
     toggleEl = viewChild.required('toggleEl');
@@ -2892,7 +3020,7 @@ class TnCardComponent {
         return type ? `tn-card__status--${type}` : 'tn-card__status--neutral';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnCardComponent, isStandalone: true, selector: "tn-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleLink: { classPropertyName: "titleLink", publicName: "titleLink", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, padContent: { classPropertyName: "padContent", publicName: "padContent", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, headerStatus: { classPropertyName: "headerStatus", publicName: "headerStatus", isSignal: true, isRequired: false, transformFunction: null }, headerControl: { classPropertyName: "headerControl", publicName: "headerControl", isSignal: true, isRequired: false, transformFunction: null }, headerMenu: { classPropertyName: "headerMenu", publicName: "headerMenu", isSignal: true, isRequired: false, transformFunction: null }, headerMenuTriggerTestId: { classPropertyName: "headerMenuTriggerTestId", publicName: "headerMenuTriggerTestId", isSignal: true, isRequired: false, transformFunction: null }, primaryAction: { classPropertyName: "primaryAction", publicName: "primaryAction", isSignal: true, isRequired: false, transformFunction: null }, secondaryAction: { classPropertyName: "secondaryAction", publicName: "secondaryAction", isSignal: true, isRequired: false, transformFunction: null }, footerLink: { classPropertyName: "footerLink", publicName: "footerLink", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedHeader", first: true, predicate: TnCardHeaderDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"classes()\">\n  <!-- Header section -->\n  @if (hasHeader()) {\n    <div class=\"tn-card__header\">\n      <div class=\"tn-card__header-left\">\n        <ng-content select=\"[tnCardHeader]\" />\n        @if (!projectedHeader() && title()) {\n          <h3\n            class=\"tn-card__title\"\n            [class.tn-card__title--link]=\"titleLink()\"\n            [attr.tabindex]=\"titleLink() ? 0 : null\"\n            [attr.role]=\"titleLink() ? 'button' : null\"\n            (click)=\"onTitleClick()\"\n            (keydown.enter)=\"onTitleClick()\"\n            (keydown.space)=\"onTitleClick()\">\n            {{ title() }}\n          </h3>\n        }\n      </div>\n\n      <div class=\"tn-card__header-right\">\n        <!-- Header Status -->\n        @if (headerStatus(); as status) {\n          <div\n            class=\"tn-card__status\"\n            [ngClass]=\"getStatusClass(status?.type)\"\n            [tnTestId]=\"status.testId\">\n            {{ status.label }}\n          </div>\n        }\n\n        <!-- Header Control (Slide Toggle) -->\n        @if (headerControl(); as control) {\n          <div class=\"tn-card__control\">\n            <tn-slide-toggle\n              [label]=\"control.label\"\n              [checked]=\"control.checked\"\n              [disabled]=\"control.disabled || false\"\n              [testId]=\"control.testId\"\n              (change)=\"onControlChange($event)\" />\n          </div>\n        }\n\n        <!-- Header Menu -->\n        @if (headerMenu(); as menu) {\n          @if (menu.length) {\n            <div class=\"tn-card__menu\">\n              <tn-icon-button\n                name=\"dots-vertical\"\n                library=\"mdi\"\n                size=\"md\"\n                ariaLabel=\"Card menu\"\n                [testId]=\"headerMenuTriggerTestId()\"\n                [tnMenuTriggerFor]=\"cardMenu\" />\n              <tn-menu\n                #cardMenu\n                [items]=\"menu\"\n                (menuItemClick)=\"onHeaderMenuItemClick($event)\" />\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Content section -->\n  <div class=\"tn-card__content\">\n    <ng-content />\n  </div>\n\n  <!-- Footer section -->\n  @if (hasFooter()) {\n    <div class=\"tn-card__footer\">\n      <div class=\"tn-card__footer-left\">\n        @if (footerLink(); as link) {\n          <button\n            type=\"button\"\n            class=\"tn-card__footer-link\"\n            [tnTestId]=\"link.testId\"\n            (click)=\"link.handler()\">\n            {{ link.label }}\n          </button>\n        }\n      </div>\n\n      <div class=\"tn-card__footer-right\">\n        @if (secondaryAction(); as action) {\n          <tn-button\n            variant=\"outline\"\n            color=\"default\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            (click)=\"action.handler()\" />\n        }\n\n        @if (primaryAction(); as action) {\n          <tn-button\n            variant=\"filled\"\n            color=\"primary\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            (click)=\"action.handler()\" />\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [".tn-card{height:100%;display:flex;flex-direction:column;border-radius:8px;transition:box-shadow .3s ease;overflow:hidden}.tn-card--elevation-none{box-shadow:none}.tn-card--elevation-low{box-shadow:0 1px 3px #0000001a}.tn-card--elevation-medium{box-shadow:0 4px 6px #0000001a}.tn-card--elevation-high{box-shadow:0 10px 15px #0000001a}.tn-card--bordered{border:1px solid var(--tn-lines, #e5e7eb)}.tn-card--background{background-color:var(--tn-bg2, #ffffff)}.tn-card--padding-small .tn-card__header{padding:12px 16px}.tn-card--padding-medium .tn-card__header{padding:16px 24px}.tn-card--padding-large .tn-card__header{padding:24px 32px}.tn-card--content-padding-none .tn-card__content{padding:0}.tn-card--content-padding-small .tn-card__content{padding:16px}.tn-card--content-padding-medium .tn-card__content{padding:24px}.tn-card--content-padding-large .tn-card__content{padding:32px}.tn-card__content{flex:1;min-height:0}.tn-card__header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--tn-lines, #e5e7eb)}.tn-card:not(.tn-card--bordered) .tn-card__header{border-bottom-color:#0000001a}.tn-card__header-left{flex:1;min-width:0}.tn-card__header-right{display:flex;align-items:center;gap:12px;flex-shrink:0}.tn-card__title{margin:0;font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #1f2937);line-height:1.5}.tn-card__title--link{cursor:pointer;transition:color .2s ease}.tn-card__title--link:hover{color:var(--tn-primary, #2563eb)}.tn-card__status{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.tn-card__status--success{background-color:#10b9811a;color:var(--tn-success, #10b981)}.tn-card__status--warning{background-color:#f59e0b1a;color:var(--tn-warning, #f59e0b)}.tn-card__status--error{background-color:#ef44441a;color:var(--tn-error, #ef4444)}.tn-card__status--info{background-color:#3b82f61a;color:var(--tn-info, #3b82f6)}.tn-card__status--neutral{background-color:#6b72801a;color:var(--tn-fg2, #6b7280)}.tn-card__control,.tn-card__menu{display:flex;align-items:center}.tn-card__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--tn-lines, #e5e7eb);padding:16px 24px}.tn-card--padding-small .tn-card__footer{padding:12px 16px}.tn-card--padding-large .tn-card__footer{padding:24px 32px}.tn-card:not(.tn-card--bordered) .tn-card__footer{border-top-color:#0000001a}.tn-card__footer-left{flex:1;min-width:0}.tn-card__footer-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.tn-card__footer-link{border:none;background:transparent;color:var(--tn-primary, #2563eb);font-size:.875rem;font-weight:600;cursor:pointer;padding:0;text-decoration:none;transition:color .2s ease}.tn-card__footer-link:hover{color:var(--tn-primary-dark, #1d4ed8);text-decoration:underline}.tn-card__footer-link:focus{outline:2px solid var(--tn-primary, #2563eb);outline-offset:2px;border-radius:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "disabled", "testId"], outputs: ["onClick"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "ariaLabel", "testId", "name", "size", "color", "tooltip", "library"], outputs: ["onClick"] }, { kind: "component", type: TnSlideToggleComponent, selector: "tn-slide-toggle", inputs: ["labelPosition", "label", "disabled", "required", "color", "testId", "ariaLabel", "ariaLabelledby", "checked"], outputs: ["change", "toggleChange"] }, { kind: "component", type: TnMenuComponent, selector: "tn-menu", inputs: ["items", "contextMenu"], outputs: ["menuItemClick", "menuOpen", "menuClose"] }, { kind: "directive", type: TnMenuTriggerDirective, selector: "[tnMenuTriggerFor]", inputs: ["tnMenuTriggerFor", "tnMenuPosition"], exportAs: ["tnMenuTrigger"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnCardComponent, isStandalone: true, selector: "tn-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleLink: { classPropertyName: "titleLink", publicName: "titleLink", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, padContent: { classPropertyName: "padContent", publicName: "padContent", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, headerStatus: { classPropertyName: "headerStatus", publicName: "headerStatus", isSignal: true, isRequired: false, transformFunction: null }, headerControl: { classPropertyName: "headerControl", publicName: "headerControl", isSignal: true, isRequired: false, transformFunction: null }, headerMenu: { classPropertyName: "headerMenu", publicName: "headerMenu", isSignal: true, isRequired: false, transformFunction: null }, headerMenuTriggerTestId: { classPropertyName: "headerMenuTriggerTestId", publicName: "headerMenuTriggerTestId", isSignal: true, isRequired: false, transformFunction: null }, primaryAction: { classPropertyName: "primaryAction", publicName: "primaryAction", isSignal: true, isRequired: false, transformFunction: null }, secondaryAction: { classPropertyName: "secondaryAction", publicName: "secondaryAction", isSignal: true, isRequired: false, transformFunction: null }, footerLink: { classPropertyName: "footerLink", publicName: "footerLink", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedHeader", first: true, predicate: TnCardHeaderDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"classes()\">\n  <!-- Header section -->\n  @if (hasHeader()) {\n    <div class=\"tn-card__header\">\n      <div class=\"tn-card__header-left\">\n        <ng-content select=\"[tnCardHeader]\" />\n        @if (!projectedHeader() && title()) {\n          <h3\n            class=\"tn-card__title\"\n            [class.tn-card__title--link]=\"titleLink()\"\n            [attr.tabindex]=\"titleLink() ? 0 : null\"\n            [attr.role]=\"titleLink() ? 'button' : null\"\n            (click)=\"onTitleClick()\"\n            (keydown.enter)=\"onTitleClick()\"\n            (keydown.space)=\"onTitleClick()\">\n            {{ title() }}\n          </h3>\n        }\n      </div>\n\n      <div class=\"tn-card__header-right\">\n        <!-- Header Status -->\n        @if (headerStatus(); as status) {\n          <div\n            class=\"tn-card__status\"\n            [ngClass]=\"getStatusClass(status?.type)\"\n            [tnTestId]=\"status.testId\">\n            {{ status.label }}\n          </div>\n        }\n\n        <!-- Header Control (Slide Toggle) -->\n        @if (headerControl(); as control) {\n          <div class=\"tn-card__control\">\n            <tn-slide-toggle\n              [label]=\"control.label\"\n              [checked]=\"control.checked\"\n              [disabled]=\"control.disabled || false\"\n              [testId]=\"control.testId\"\n              (change)=\"onControlChange($event)\" />\n          </div>\n        }\n\n        <!-- Header Menu -->\n        @if (headerMenu(); as menu) {\n          @if (menu.length) {\n            <div class=\"tn-card__menu\">\n              <tn-icon-button\n                name=\"dots-vertical\"\n                library=\"mdi\"\n                size=\"md\"\n                ariaLabel=\"Card menu\"\n                [testId]=\"headerMenuTriggerTestId()\"\n                [tnMenuTriggerFor]=\"cardMenu\" />\n              <tn-menu\n                #cardMenu\n                [items]=\"menu\"\n                (menuItemClick)=\"onHeaderMenuItemClick($event)\" />\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Content section -->\n  <div class=\"tn-card__content\">\n    <ng-content />\n  </div>\n\n  <!-- Footer section -->\n  @if (hasFooter()) {\n    <div class=\"tn-card__footer\">\n      <div class=\"tn-card__footer-left\">\n        @if (footerLink(); as link) {\n          <button\n            type=\"button\"\n            class=\"tn-card__footer-link\"\n            [tnTestId]=\"link.testId\"\n            (click)=\"link.handler()\">\n            {{ link.label }}\n          </button>\n        }\n      </div>\n\n      <div class=\"tn-card__footer-right\">\n        @if (secondaryAction(); as action) {\n          <tn-button\n            variant=\"outline\"\n            color=\"default\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            (click)=\"action.handler()\" />\n        }\n\n        @if (primaryAction(); as action) {\n          <tn-button\n            variant=\"filled\"\n            color=\"primary\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            (click)=\"action.handler()\" />\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [".tn-card{height:100%;display:flex;flex-direction:column;border-radius:8px;transition:box-shadow .3s ease;overflow:hidden}.tn-card--elevation-none{box-shadow:none}.tn-card--elevation-low{box-shadow:0 1px 3px #0000001a}.tn-card--elevation-medium{box-shadow:0 4px 6px #0000001a}.tn-card--elevation-high{box-shadow:0 10px 15px #0000001a}.tn-card--bordered{border:1px solid var(--tn-lines, #e5e7eb)}.tn-card--background{background-color:var(--tn-bg2, #ffffff)}.tn-card--padding-small .tn-card__header{padding:12px 16px}.tn-card--padding-medium .tn-card__header{padding:16px 24px}.tn-card--padding-large .tn-card__header{padding:24px 32px}.tn-card--content-padding-none .tn-card__content{padding:0}.tn-card--content-padding-small .tn-card__content{padding:16px}.tn-card--content-padding-medium .tn-card__content{padding:24px}.tn-card--content-padding-large .tn-card__content{padding:32px}.tn-card__content{flex:1;min-height:0;font-size:.875rem}.tn-card__header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--tn-lines, #e5e7eb)}.tn-card:not(.tn-card--bordered) .tn-card__header{border-bottom-color:#0000001a}.tn-card__header-left{flex:1;min-width:0}.tn-card__header-right{display:flex;align-items:center;gap:12px;flex-shrink:0}.tn-card__title{margin:0;font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #1f2937);line-height:1.5}.tn-card__title--link{cursor:pointer;transition:color .2s ease}.tn-card__title--link:hover{color:var(--tn-primary, #2563eb)}.tn-card__status{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.tn-card__status--success{background-color:#10b9811a;color:var(--tn-success, #10b981)}.tn-card__status--warning{background-color:#f59e0b1a;color:var(--tn-warning, #f59e0b)}.tn-card__status--error{background-color:#ef44441a;color:var(--tn-error, #ef4444)}.tn-card__status--info{background-color:#3b82f61a;color:var(--tn-info, #3b82f6)}.tn-card__status--neutral{background-color:#6b72801a;color:var(--tn-fg2, #6b7280)}.tn-card__control,.tn-card__menu{display:flex;align-items:center}.tn-card__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--tn-lines, #e5e7eb);padding:16px 24px}.tn-card--padding-small .tn-card__footer{padding:12px 16px}.tn-card--padding-large .tn-card__footer{padding:24px 32px}.tn-card:not(.tn-card--bordered) .tn-card__footer{border-top-color:#0000001a}.tn-card__footer-left{flex:1;min-width:0}.tn-card__footer-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.tn-card__footer-link{border:none;background:transparent;color:var(--tn-primary, #2563eb);font-size:.875rem;font-weight:600;cursor:pointer;padding:0;text-decoration:none;transition:color .2s ease}.tn-card__footer-link:hover{color:var(--tn-primary-dark, #1d4ed8);text-decoration:underline}.tn-card__footer-link:focus{outline:2px solid var(--tn-primary, #2563eb);outline-offset:2px;border-radius:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "disabled", "testId", "href", "routerLink", "queryParams", "fragment", "target", "rel", "ariaLabel"], outputs: ["onClick"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "ariaLabel", "testId", "name", "size", "color", "tooltip", "library"], outputs: ["onClick"] }, { kind: "component", type: TnSlideToggleComponent, selector: "tn-slide-toggle", inputs: ["labelPosition", "label", "disabled", "required", "color", "testId", "ariaLabel", "ariaLabelledby", "checked"], outputs: ["change", "toggleChange"] }, { kind: "component", type: TnMenuComponent, selector: "tn-menu", inputs: ["items", "contextMenu"], outputs: ["menuItemClick", "menuOpen", "menuClose"] }, { kind: "directive", type: TnMenuTriggerDirective, selector: "[tnMenuTriggerFor]", inputs: ["tnMenuTriggerFor", "tnMenuPosition"], exportAs: ["tnMenuTrigger"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCardComponent, decorators: [{
             type: Component,
@@ -2905,7 +3033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         TnMenuComponent,
                         TnMenuTriggerDirective,
                         TnTestIdDirective,
-                    ], template: "<div [ngClass]=\"classes()\">\n  <!-- Header section -->\n  @if (hasHeader()) {\n    <div class=\"tn-card__header\">\n      <div class=\"tn-card__header-left\">\n        <ng-content select=\"[tnCardHeader]\" />\n        @if (!projectedHeader() && title()) {\n          <h3\n            class=\"tn-card__title\"\n            [class.tn-card__title--link]=\"titleLink()\"\n            [attr.tabindex]=\"titleLink() ? 0 : null\"\n            [attr.role]=\"titleLink() ? 'button' : null\"\n            (click)=\"onTitleClick()\"\n            (keydown.enter)=\"onTitleClick()\"\n            (keydown.space)=\"onTitleClick()\">\n            {{ title() }}\n          </h3>\n        }\n      </div>\n\n      <div class=\"tn-card__header-right\">\n        <!-- Header Status -->\n        @if (headerStatus(); as status) {\n          <div\n            class=\"tn-card__status\"\n            [ngClass]=\"getStatusClass(status?.type)\"\n            [tnTestId]=\"status.testId\">\n            {{ status.label }}\n          </div>\n        }\n\n        <!-- Header Control (Slide Toggle) -->\n        @if (headerControl(); as control) {\n          <div class=\"tn-card__control\">\n            <tn-slide-toggle\n              [label]=\"control.label\"\n              [checked]=\"control.checked\"\n              [disabled]=\"control.disabled || false\"\n              [testId]=\"control.testId\"\n              (change)=\"onControlChange($event)\" />\n          </div>\n        }\n\n        <!-- Header Menu -->\n        @if (headerMenu(); as menu) {\n          @if (menu.length) {\n            <div class=\"tn-card__menu\">\n              <tn-icon-button\n                name=\"dots-vertical\"\n                library=\"mdi\"\n                size=\"md\"\n                ariaLabel=\"Card menu\"\n                [testId]=\"headerMenuTriggerTestId()\"\n                [tnMenuTriggerFor]=\"cardMenu\" />\n              <tn-menu\n                #cardMenu\n                [items]=\"menu\"\n                (menuItemClick)=\"onHeaderMenuItemClick($event)\" />\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Content section -->\n  <div class=\"tn-card__content\">\n    <ng-content />\n  </div>\n\n  <!-- Footer section -->\n  @if (hasFooter()) {\n    <div class=\"tn-card__footer\">\n      <div class=\"tn-card__footer-left\">\n        @if (footerLink(); as link) {\n          <button\n            type=\"button\"\n            class=\"tn-card__footer-link\"\n            [tnTestId]=\"link.testId\"\n            (click)=\"link.handler()\">\n            {{ link.label }}\n          </button>\n        }\n      </div>\n\n      <div class=\"tn-card__footer-right\">\n        @if (secondaryAction(); as action) {\n          <tn-button\n            variant=\"outline\"\n            color=\"default\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            (click)=\"action.handler()\" />\n        }\n\n        @if (primaryAction(); as action) {\n          <tn-button\n            variant=\"filled\"\n            color=\"primary\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            (click)=\"action.handler()\" />\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [".tn-card{height:100%;display:flex;flex-direction:column;border-radius:8px;transition:box-shadow .3s ease;overflow:hidden}.tn-card--elevation-none{box-shadow:none}.tn-card--elevation-low{box-shadow:0 1px 3px #0000001a}.tn-card--elevation-medium{box-shadow:0 4px 6px #0000001a}.tn-card--elevation-high{box-shadow:0 10px 15px #0000001a}.tn-card--bordered{border:1px solid var(--tn-lines, #e5e7eb)}.tn-card--background{background-color:var(--tn-bg2, #ffffff)}.tn-card--padding-small .tn-card__header{padding:12px 16px}.tn-card--padding-medium .tn-card__header{padding:16px 24px}.tn-card--padding-large .tn-card__header{padding:24px 32px}.tn-card--content-padding-none .tn-card__content{padding:0}.tn-card--content-padding-small .tn-card__content{padding:16px}.tn-card--content-padding-medium .tn-card__content{padding:24px}.tn-card--content-padding-large .tn-card__content{padding:32px}.tn-card__content{flex:1;min-height:0}.tn-card__header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--tn-lines, #e5e7eb)}.tn-card:not(.tn-card--bordered) .tn-card__header{border-bottom-color:#0000001a}.tn-card__header-left{flex:1;min-width:0}.tn-card__header-right{display:flex;align-items:center;gap:12px;flex-shrink:0}.tn-card__title{margin:0;font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #1f2937);line-height:1.5}.tn-card__title--link{cursor:pointer;transition:color .2s ease}.tn-card__title--link:hover{color:var(--tn-primary, #2563eb)}.tn-card__status{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.tn-card__status--success{background-color:#10b9811a;color:var(--tn-success, #10b981)}.tn-card__status--warning{background-color:#f59e0b1a;color:var(--tn-warning, #f59e0b)}.tn-card__status--error{background-color:#ef44441a;color:var(--tn-error, #ef4444)}.tn-card__status--info{background-color:#3b82f61a;color:var(--tn-info, #3b82f6)}.tn-card__status--neutral{background-color:#6b72801a;color:var(--tn-fg2, #6b7280)}.tn-card__control,.tn-card__menu{display:flex;align-items:center}.tn-card__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--tn-lines, #e5e7eb);padding:16px 24px}.tn-card--padding-small .tn-card__footer{padding:12px 16px}.tn-card--padding-large .tn-card__footer{padding:24px 32px}.tn-card:not(.tn-card--bordered) .tn-card__footer{border-top-color:#0000001a}.tn-card__footer-left{flex:1;min-width:0}.tn-card__footer-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.tn-card__footer-link{border:none;background:transparent;color:var(--tn-primary, #2563eb);font-size:.875rem;font-weight:600;cursor:pointer;padding:0;text-decoration:none;transition:color .2s ease}.tn-card__footer-link:hover{color:var(--tn-primary-dark, #1d4ed8);text-decoration:underline}.tn-card__footer-link:focus{outline:2px solid var(--tn-primary, #2563eb);outline-offset:2px;border-radius:2px}\n"] }]
+                    ], template: "<div [ngClass]=\"classes()\">\n  <!-- Header section -->\n  @if (hasHeader()) {\n    <div class=\"tn-card__header\">\n      <div class=\"tn-card__header-left\">\n        <ng-content select=\"[tnCardHeader]\" />\n        @if (!projectedHeader() && title()) {\n          <h3\n            class=\"tn-card__title\"\n            [class.tn-card__title--link]=\"titleLink()\"\n            [attr.tabindex]=\"titleLink() ? 0 : null\"\n            [attr.role]=\"titleLink() ? 'button' : null\"\n            (click)=\"onTitleClick()\"\n            (keydown.enter)=\"onTitleClick()\"\n            (keydown.space)=\"onTitleClick()\">\n            {{ title() }}\n          </h3>\n        }\n      </div>\n\n      <div class=\"tn-card__header-right\">\n        <!-- Header Status -->\n        @if (headerStatus(); as status) {\n          <div\n            class=\"tn-card__status\"\n            [ngClass]=\"getStatusClass(status?.type)\"\n            [tnTestId]=\"status.testId\">\n            {{ status.label }}\n          </div>\n        }\n\n        <!-- Header Control (Slide Toggle) -->\n        @if (headerControl(); as control) {\n          <div class=\"tn-card__control\">\n            <tn-slide-toggle\n              [label]=\"control.label\"\n              [checked]=\"control.checked\"\n              [disabled]=\"control.disabled || false\"\n              [testId]=\"control.testId\"\n              (change)=\"onControlChange($event)\" />\n          </div>\n        }\n\n        <!-- Header Menu -->\n        @if (headerMenu(); as menu) {\n          @if (menu.length) {\n            <div class=\"tn-card__menu\">\n              <tn-icon-button\n                name=\"dots-vertical\"\n                library=\"mdi\"\n                size=\"md\"\n                ariaLabel=\"Card menu\"\n                [testId]=\"headerMenuTriggerTestId()\"\n                [tnMenuTriggerFor]=\"cardMenu\" />\n              <tn-menu\n                #cardMenu\n                [items]=\"menu\"\n                (menuItemClick)=\"onHeaderMenuItemClick($event)\" />\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Content section -->\n  <div class=\"tn-card__content\">\n    <ng-content />\n  </div>\n\n  <!-- Footer section -->\n  @if (hasFooter()) {\n    <div class=\"tn-card__footer\">\n      <div class=\"tn-card__footer-left\">\n        @if (footerLink(); as link) {\n          <button\n            type=\"button\"\n            class=\"tn-card__footer-link\"\n            [tnTestId]=\"link.testId\"\n            (click)=\"link.handler()\">\n            {{ link.label }}\n          </button>\n        }\n      </div>\n\n      <div class=\"tn-card__footer-right\">\n        @if (secondaryAction(); as action) {\n          <tn-button\n            variant=\"outline\"\n            color=\"default\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            (click)=\"action.handler()\" />\n        }\n\n        @if (primaryAction(); as action) {\n          <tn-button\n            variant=\"filled\"\n            color=\"primary\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            (click)=\"action.handler()\" />\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [".tn-card{height:100%;display:flex;flex-direction:column;border-radius:8px;transition:box-shadow .3s ease;overflow:hidden}.tn-card--elevation-none{box-shadow:none}.tn-card--elevation-low{box-shadow:0 1px 3px #0000001a}.tn-card--elevation-medium{box-shadow:0 4px 6px #0000001a}.tn-card--elevation-high{box-shadow:0 10px 15px #0000001a}.tn-card--bordered{border:1px solid var(--tn-lines, #e5e7eb)}.tn-card--background{background-color:var(--tn-bg2, #ffffff)}.tn-card--padding-small .tn-card__header{padding:12px 16px}.tn-card--padding-medium .tn-card__header{padding:16px 24px}.tn-card--padding-large .tn-card__header{padding:24px 32px}.tn-card--content-padding-none .tn-card__content{padding:0}.tn-card--content-padding-small .tn-card__content{padding:16px}.tn-card--content-padding-medium .tn-card__content{padding:24px}.tn-card--content-padding-large .tn-card__content{padding:32px}.tn-card__content{flex:1;min-height:0;font-size:.875rem}.tn-card__header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--tn-lines, #e5e7eb)}.tn-card:not(.tn-card--bordered) .tn-card__header{border-bottom-color:#0000001a}.tn-card__header-left{flex:1;min-width:0}.tn-card__header-right{display:flex;align-items:center;gap:12px;flex-shrink:0}.tn-card__title{margin:0;font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #1f2937);line-height:1.5}.tn-card__title--link{cursor:pointer;transition:color .2s ease}.tn-card__title--link:hover{color:var(--tn-primary, #2563eb)}.tn-card__status{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.tn-card__status--success{background-color:#10b9811a;color:var(--tn-success, #10b981)}.tn-card__status--warning{background-color:#f59e0b1a;color:var(--tn-warning, #f59e0b)}.tn-card__status--error{background-color:#ef44441a;color:var(--tn-error, #ef4444)}.tn-card__status--info{background-color:#3b82f61a;color:var(--tn-info, #3b82f6)}.tn-card__status--neutral{background-color:#6b72801a;color:var(--tn-fg2, #6b7280)}.tn-card__control,.tn-card__menu{display:flex;align-items:center}.tn-card__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--tn-lines, #e5e7eb);padding:16px 24px}.tn-card--padding-small .tn-card__footer{padding:12px 16px}.tn-card--padding-large .tn-card__footer{padding:24px 32px}.tn-card:not(.tn-card--bordered) .tn-card__footer{border-top-color:#0000001a}.tn-card__footer-left{flex:1;min-width:0}.tn-card__footer-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.tn-card__footer-link{border:none;background:transparent;color:var(--tn-primary, #2563eb);font-size:.875rem;font-weight:600;cursor:pointer;padding:0;text-decoration:none;transition:color .2s ease}.tn-card__footer-link:hover{color:var(--tn-primary-dark, #1d4ed8);text-decoration:underline}.tn-card__footer-link:focus{outline:2px solid var(--tn-primary, #2563eb);outline-offset:2px;border-radius:2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { projectedHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnCardHeaderDirective), { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLink", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], padContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "padContent", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], headerStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerStatus", required: false }] }], headerControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerControl", required: false }] }], headerMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerMenu", required: false }] }], headerMenuTriggerTestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerMenuTriggerTestId", required: false }] }], primaryAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryAction", required: false }] }], secondaryAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryAction", required: false }] }], footerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerLink", required: false }] }] } });
 
 const expandCollapseAnimation = trigger('expandCollapse', [
@@ -4541,11 +4669,19 @@ class TnTabsHarness extends ComponentHarness {
  */
 class TnMenuItemHarness extends ComponentHarness {
     static hostSelector = '.tn-menu-item';
-    _label = this.locatorFor('.tn-menu-item-label');
-    /** Gets the label text of this menu item. */
+    _label = this.locatorForOptional('.tn-menu-item-label');
+    /**
+     * Gets the label text of this menu item. Reads `.tn-menu-item-label` when
+     * present (the default layout), otherwise falls back to the host text so
+     * fully-projected `<tn-menu-item>` content still resolves a label.
+     */
     async getLabel() {
         const label = await this._label();
-        return (await label.text()).trim();
+        if (label) {
+            return (await label.text()).trim();
+        }
+        const host = await this.host();
+        return (await host.text()).trim();
     }
     /** Checks whether this menu item is disabled via the native `disabled` attribute. */
     async isDisabled() {
@@ -4553,6 +4689,11 @@ class TnMenuItemHarness extends ComponentHarness {
         const disabled = await host.getProperty('disabled');
         return !!disabled;
     }
+    /** Checks whether this menu item is marked as the currently-selected option. */
+    async isSelected() {
+        const host = await this.host();
+        return (await host.getAttribute('aria-current')) === 'true';
+    }
     /** Clicks this menu item. */
     async click() {
         const host = await this.host();
@@ -4688,6 +4829,42 @@ class TnMenuHarness extends ComponentHarness {
     async getItemCount() {
         return (await this._items()).length;
     }
+    /**
+     * Checks whether a menu item is marked as the currently-selected option
+     * (i.e. has `aria-current="true"`).
+     *
+     * @example
+     * ```typescript
+     * const menu = await rootLoader.getHarness(TnMenuHarness);
+     * expect(await menu.isItemSelected({ label: 'JSON' })).toBe(true);
+     * ```
+     */
+    async isItemSelected(filter) {
+        const items = await this._items();
+        for (const item of items) {
+            const text = await item.getLabel();
+            const matches = filter.label instanceof RegExp
+                ? filter.label.test(text)
+                : text === filter.label;
+            if (matches) {
+                return item.isSelected();
+            }
+        }
+        throw new Error(`Could not find menu item with label "${String(filter.label)}"`);
+    }
+    /**
+     * Gets the label of the currently-selected item, or `null` when no item is
+     * marked as selected.
+     */
+    async getSelectedItemLabel() {
+        const items = await this._items();
+        for (const item of items) {
+            if (await item.isSelected()) {
+                return item.getLabel();
+            }
+        }
+        return null;
+    }
 }
 
 /**
@@ -6228,16 +6405,22 @@ class TnEmptyComponent {
     description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
     iconLibrary = input('mdi', ...(ngDevMode ? [{ debugName: "iconLibrary" }] : []));
+    /**
+     * Overrides the icon size derived from `size`. Accepts any valid CSS size value
+     * (e.g. `'48px'`, `'3rem'`). Use this when the variant presets are too small for an
+     * empty-state illustration. When unset, the icon falls back to the `size`-based preset.
+     */
+    iconSize = input(...(ngDevMode ? [undefined, { debugName: "iconSize" }] : []));
     actionText = input(...(ngDevMode ? [undefined, { debugName: "actionText" }] : []));
     bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : []));
     size = input('compact', ...(ngDevMode ? [{ debugName: "size" }] : []));
     onAction = output();
     hasAction = computed(() => !!this.actionText(), ...(ngDevMode ? [{ debugName: "hasAction" }] : []));
-    iconSize = computed(() => {
+    iconSizePreset = computed(() => {
         return this.size() === 'compact' ? 'lg' : 'xl';
-    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "iconSizePreset" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnEmptyComponent, isStandalone: true, selector: "tn-empty", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconLibrary: { classPropertyName: "iconLibrary", publicName: "iconLibrary", isSignal: true, isRequired: false, transformFunction: null }, actionText: { classPropertyName: "actionText", publicName: "actionText", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, host: { attributes: { "role": "status" }, properties: { "class.tn-empty--compact": "size() === \"compact\"", "class.tn-empty--bordered": "bordered()" }, classAttribute: "tn-empty" }, ngImport: i0, template: "@if (icon()) {\n  <div class=\"tn-empty__icon\">\n    <tn-icon\n      aria-hidden=\"true\"\n      [name]=\"icon()!\"\n      [library]=\"iconLibrary()\"\n      [size]=\"iconSize()\"\n    />\n  </div>\n}\n\n<div class=\"tn-empty__title\">\n  {{ title() }}\n</div>\n\n@if (description()) {\n  <div class=\"tn-empty__description\">\n    {{ description() }}\n  </div>\n}\n\n@if (hasAction()) {\n  <div class=\"tn-empty__action\">\n    <tn-button\n      color=\"primary\"\n      variant=\"outline\"\n      [label]=\"actionText()!\"\n      (onClick)=\"onAction.emit()\"\n    />\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:48px 24px;border-radius:8px}:host(.tn-empty--bordered){border:1px solid var(--tn-lines)}:host(.tn-empty--compact){padding:24px 16px}:host(.tn-empty--compact) .tn-empty__title{font-size:1rem}:host(.tn-empty--compact) .tn-empty__description{font-size:.8125rem}:host(.tn-empty--compact) .tn-empty__icon{margin-bottom:4px}:host(.tn-empty--compact) .tn-empty__action{margin-top:4px}.tn-empty__icon{color:var(--tn-fg2, #6b7280);margin-bottom:8px}.tn-empty__title{font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #e5e7eb);line-height:1.4}.tn-empty__description{font-size:.875rem;color:var(--tn-fg2, #6b7280);line-height:1.5;max-width:420px}.tn-empty__action{margin-top:8px}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "disabled", "testId"], outputs: ["onClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnEmptyComponent, isStandalone: true, selector: "tn-empty", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconLibrary: { classPropertyName: "iconLibrary", publicName: "iconLibrary", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, actionText: { classPropertyName: "actionText", publicName: "actionText", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, host: { attributes: { "role": "status" }, properties: { "class.tn-empty--compact": "size() === \"compact\"", "class.tn-empty--bordered": "bordered()" }, classAttribute: "tn-empty" }, ngImport: i0, template: "@if (icon()) {\n  <div class=\"tn-empty__icon\">\n    <tn-icon\n      aria-hidden=\"true\"\n      [name]=\"icon()!\"\n      [library]=\"iconLibrary()\"\n      [size]=\"iconSizePreset()\"\n      [customSize]=\"iconSize()\"\n    />\n  </div>\n}\n\n<div class=\"tn-empty__title\">\n  {{ title() }}\n</div>\n\n@if (description()) {\n  <div class=\"tn-empty__description\">\n    {{ description() }}\n  </div>\n}\n\n@if (hasAction()) {\n  <div class=\"tn-empty__action\">\n    <tn-button\n      color=\"primary\"\n      variant=\"outline\"\n      [label]=\"actionText()!\"\n      (onClick)=\"onAction.emit()\"\n    />\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:48px 24px;border-radius:8px}:host(.tn-empty--bordered){border:1px solid var(--tn-lines)}:host(.tn-empty--compact){padding:24px 16px}:host(.tn-empty--compact) .tn-empty__title{font-size:1rem}:host(.tn-empty--compact) .tn-empty__description{font-size:.8125rem}:host(.tn-empty--compact) .tn-empty__icon{margin-bottom:4px}:host(.tn-empty--compact) .tn-empty__action{margin-top:4px}.tn-empty__icon{color:var(--tn-fg2, #6b7280);margin-bottom:8px}.tn-empty__title{font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #e5e7eb);line-height:1.4}.tn-empty__description{font-size:.875rem;color:var(--tn-fg2, #6b7280);line-height:1.5;max-width:420px}.tn-empty__action{margin-top:8px}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "disabled", "testId", "href", "routerLink", "queryParams", "fragment", "target", "rel", "ariaLabel"], outputs: ["onClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnEmptyComponent, decorators: [{
             type: Component,
@@ -6246,8 +6429,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[class.tn-empty--compact]': 'size() === "compact"',
                         '[class.tn-empty--bordered]': 'bordered()',
                         'role': 'status',
-                    }, template: "@if (icon()) {\n  <div class=\"tn-empty__icon\">\n    <tn-icon\n      aria-hidden=\"true\"\n      [name]=\"icon()!\"\n      [library]=\"iconLibrary()\"\n      [size]=\"iconSize()\"\n    />\n  </div>\n}\n\n<div class=\"tn-empty__title\">\n  {{ title() }}\n</div>\n\n@if (description()) {\n  <div class=\"tn-empty__description\">\n    {{ description() }}\n  </div>\n}\n\n@if (hasAction()) {\n  <div class=\"tn-empty__action\">\n    <tn-button\n      color=\"primary\"\n      variant=\"outline\"\n      [label]=\"actionText()!\"\n      (onClick)=\"onAction.emit()\"\n    />\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:48px 24px;border-radius:8px}:host(.tn-empty--bordered){border:1px solid var(--tn-lines)}:host(.tn-empty--compact){padding:24px 16px}:host(.tn-empty--compact) .tn-empty__title{font-size:1rem}:host(.tn-empty--compact) .tn-empty__description{font-size:.8125rem}:host(.tn-empty--compact) .tn-empty__icon{margin-bottom:4px}:host(.tn-empty--compact) .tn-empty__action{margin-top:4px}.tn-empty__icon{color:var(--tn-fg2, #6b7280);margin-bottom:8px}.tn-empty__title{font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #e5e7eb);line-height:1.4}.tn-empty__description{font-size:.875rem;color:var(--tn-fg2, #6b7280);line-height:1.5;max-width:420px}.tn-empty__action{margin-top:8px}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconLibrary: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLibrary", required: false }] }], actionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionText", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }] } });
+                    }, template: "@if (icon()) {\n  <div class=\"tn-empty__icon\">\n    <tn-icon\n      aria-hidden=\"true\"\n      [name]=\"icon()!\"\n      [library]=\"iconLibrary()\"\n      [size]=\"iconSizePreset()\"\n      [customSize]=\"iconSize()\"\n    />\n  </div>\n}\n\n<div class=\"tn-empty__title\">\n  {{ title() }}\n</div>\n\n@if (description()) {\n  <div class=\"tn-empty__description\">\n    {{ description() }}\n  </div>\n}\n\n@if (hasAction()) {\n  <div class=\"tn-empty__action\">\n    <tn-button\n      color=\"primary\"\n      variant=\"outline\"\n      [label]=\"actionText()!\"\n      (onClick)=\"onAction.emit()\"\n    />\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:48px 24px;border-radius:8px}:host(.tn-empty--bordered){border:1px solid var(--tn-lines)}:host(.tn-empty--compact){padding:24px 16px}:host(.tn-empty--compact) .tn-empty__title{font-size:1rem}:host(.tn-empty--compact) .tn-empty__description{font-size:.8125rem}:host(.tn-empty--compact) .tn-empty__icon{margin-bottom:4px}:host(.tn-empty--compact) .tn-empty__action{margin-top:4px}.tn-empty__icon{color:var(--tn-fg2, #6b7280);margin-bottom:8px}.tn-empty__title{font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #e5e7eb);line-height:1.4}.tn-empty__description{font-size:.875rem;color:var(--tn-fg2, #6b7280);line-height:1.5;max-width:420px}.tn-empty__action{margin-top:8px}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconLibrary: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLibrary", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], actionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionText", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }] } });
 
 class TnHeaderCellDefDirective {
     template = inject((TemplateRef));
@@ -6517,7 +6700,7 @@ class TnTableComponent {
         return row[column];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTableComponent, isStandalone: true, selector: "tn-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange" }, host: { properties: { "class.tn-table--bordered": "bordered()" }, classAttribute: "tn-table" }, queries: [{ propertyName: "columnDefs", predicate: TnTableColumnDirective, isSignal: true }, { propertyName: "detailRowDef", first: true, predicate: TnDetailRowDefDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<table class=\"tn-table__table\">\n  <!-- Header Row -->\n  <thead class=\"tn-table__header\">\n    <tr class=\"tn-table__header-row\">\n      @for (column of effectiveDisplayedColumns(); track $index) {\n        @if (column === '__select') {\n          <th class=\"tn-table__header-cell tn-table__select-cell\"\n            role=\"checkbox\"\n            tabindex=\"0\"\n            [attr.aria-checked]=\"isAllSelected()\"\n            (click)=\"toggleSelectAll()\"\n            (keydown.enter)=\"toggleSelectAll()\"\n            (keydown.space)=\"toggleSelectAll(); $event.preventDefault()\">\n            <tn-checkbox\n              class=\"tn-table__checkbox\"\n              label=\"Select all rows\"\n              [hideLabel]=\"true\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\" />\n          </th>\n        } @else if (column === '__expand') {\n          <th class=\"tn-table__header-cell tn-table__expand-cell\">\n            <span class=\"cdk-visually-hidden\">Expand</span>\n          </th>\n        } @else {\n          <th\n            class=\"tn-table__header-cell\"\n            [class.tn-table__header-cell--sortable]=\"getColumnDef(column)?.sortable()\"\n            [class.tn-table__header-cell--sorted]=\"isSorted(column)\"\n            [style.width]=\"getColumnDef(column)?.width()\"\n            [attr.aria-sort]=\"\n              isSorted(column)\n                ? sortDirection() === 'asc' ? 'ascending' : 'descending'\n                : null\n            \"\n            [attr.tabindex]=\"getColumnDef(column)?.sortable() ? 0 : null\"\n            [attr.data-column]=\"column\"\n            (click)=\"getColumnDef(column)?.sortable() && onSortClick(column)\"\n            (keydown.enter)=\"onSortClick(column)\"\n            (keydown.space)=\"onSortClick(column); $event.preventDefault()\">\n            <span class=\"tn-table__sort-container\">\n              <span class=\"tn-table__header-text\">\n                @if (getColumnDef(column)?.headerTemplate(); as tmpl) {\n                  <ng-container [ngTemplateOutlet]=\"tmpl\" />\n                } @else {\n                  {{ column }}\n                }\n              </span>\n              @if (getColumnDef(column)?.sortable()) {\n                <tn-icon\n                  class=\"tn-table__sort-icon\"\n                  size=\"sm\"\n                  [name]=\"getSortIcon(column)\" />\n              }\n            </span>\n          </th>\n        }\n      }\n    </tr>\n  </thead>\n\n  <!-- Data Rows -->\n  <tbody class=\"tn-table__body\">\n    @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n      <tr\n        class=\"tn-table__row\"\n        [attr.data-row-index]=\"rowIdx\"\n        [class.tn-table__row--expandable]=\"expandable()\"\n        [class.tn-table__row--expanded]=\"isRowExpanded(row)\">\n        @for (column of effectiveDisplayedColumns(); track $index) {\n          @if (column === '__select') {\n            <td class=\"tn-table__cell tn-table__select-cell\"\n              (click)=\"toggleRowSelection(row); $event.stopPropagation()\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                [label]=\"'Select row ' + (rowIdx + 1)\"\n                [hideLabel]=\"true\"\n                [checked]=\"isRowSelected(row)\" />\n            </td>\n          } @else if (column === '__expand') {\n            <td class=\"tn-table__cell tn-table__expand-cell\"\n              (click)=\"$event.stopPropagation()\">\n              <button\n                type=\"button\"\n                class=\"tn-table__expand-button\"\n                [attr.aria-expanded]=\"isRowExpanded(row)\"\n                [attr.aria-label]=\"isRowExpanded(row) ? 'Collapse row' : 'Expand row'\"\n                (click)=\"toggleRowExpansion(row)\">\n                <tn-icon\n                  class=\"tn-table__expand-icon\"\n                  [name]=\"getExpandIcon(row)\" />\n              </button>\n            </td>\n          } @else {\n            <td\n              class=\"tn-table__cell\"\n              [style.width]=\"getColumnDef(column)?.width()\"\n              [attr.data-column]=\"column\">\n              @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tmpl\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n              } @else {\n                <span>{{ getCellValue(row, column) }}</span>\n              }\n            </td>\n          }\n        }\n      </tr>\n\n      <!-- Detail / Expanded Row -->\n      @if (expandable() && detailRowDef() && isRowExpanded(row)) {\n        <tr class=\"tn-table__detail-row\" [@detailExpand]=\"'expanded'\">\n          <td\n            class=\"tn-table__detail-cell\"\n            [attr.colspan]=\"effectiveDisplayedColumns().length\">\n            <ng-container\n              [ngTemplateOutlet]=\"detailRowDef()!.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n          </td>\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n\n@if (data().length === 0) {\n  <tn-empty\n    size=\"compact\"\n    [title]=\"emptyMessage()\"\n    [icon]=\"emptyIcon()\" />\n}\n", styles: [":host{display:block}:host(.tn-table--bordered){border:1px solid var(--tn-lines);border-radius:4px}.tn-table{display:block;width:100%;overflow-x:auto}.tn-table__table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--tn-bg2);border-radius:4px;overflow:hidden}.tn-table__header{background-color:var(--tn-topbar);color:var(--tn-topbar-txt)}.tn-table__header-row{height:56px}.tn-table__header-cell{padding:0 16px;text-align:left;font-weight:600;font-size:14px;border-bottom:1px solid var(--tn-lines);white-space:nowrap;vertical-align:middle}.tn-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.tn-table__header-cell--sortable:hover{background-color:var(--tn-alt-bg1)}.tn-table__sort-container{display:inline-flex;align-items:center;gap:4px}.tn-table__sort-icon{opacity:0;transition:opacity .2s ease}.tn-table__header-cell--sortable:hover .tn-table__sort-icon{opacity:.5}.tn-table__header-cell--sorted .tn-table__sort-icon{opacity:1}.tn-table__body{background-color:var(--tn-bg2)}.tn-table__row{height:48px;transition:background-color .2s ease}.tn-table__row:hover{background-color:var(--tn-alt-bg1)}.tn-table__row:not(:last-child){border-bottom:1px solid var(--tn-lines)}.tn-table__row--expanded{background-color:var(--tn-alt-bg1)}.tn-table__cell{padding:0 16px;font-size:14px;color:var(--tn-fg1);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn-table__select-cell{width:48px;padding:0 8px 0 16px;cursor:pointer}.tn-table__checkbox{pointer-events:none}.tn-table__expand-cell{width:48px;padding:0 16px 0 8px;text-align:center}.tn-table__expand-button{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:inline-flex;align-items:center;color:var(--tn-fg2)}.tn-table__expand-button:hover{background-color:var(--tn-alt-bg1)}.tn-table__expand-button:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__expand-icon{transition:transform .2s ease}.tn-table__detail-row{background-color:var(--tn-alt-bg1);border-bottom:1px solid var(--tn-lines)}.tn-table__detail-cell{padding:16px}.tn-table--dense .tn-table__header-row{height:40px}.tn-table--dense .tn-table__row{height:32px}.tn-table--dense .tn-table__header-cell,.tn-table--dense .tn-table__cell{padding:0 12px;font-size:13px}@media(max-width:768px){.tn-table__table{font-size:12px}.tn-table__header-cell,.tn-table__cell{padding:0 8px}}@media(prefers-reduced-motion:reduce){.tn-table__sort-icon,.tn-table__expand-icon,.tn-table__row{transition:none}.tn-table__detail-row{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "component", type: TnEmptyComponent, selector: "tn-empty", inputs: ["title", "description", "icon", "iconLibrary", "actionText", "bordered", "size"], outputs: ["onAction"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTableComponent, isStandalone: true, selector: "tn-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange" }, host: { properties: { "class.tn-table--bordered": "bordered()" }, classAttribute: "tn-table" }, queries: [{ propertyName: "columnDefs", predicate: TnTableColumnDirective, isSignal: true }, { propertyName: "detailRowDef", first: true, predicate: TnDetailRowDefDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<table class=\"tn-table__table\">\n  <!-- Header Row -->\n  <thead class=\"tn-table__header\">\n    <tr class=\"tn-table__header-row\">\n      @for (column of effectiveDisplayedColumns(); track $index) {\n        @if (column === '__select') {\n          <th class=\"tn-table__header-cell tn-table__select-cell\"\n            role=\"checkbox\"\n            tabindex=\"0\"\n            [attr.aria-checked]=\"isAllSelected()\"\n            (click)=\"toggleSelectAll()\"\n            (keydown.enter)=\"toggleSelectAll()\"\n            (keydown.space)=\"toggleSelectAll(); $event.preventDefault()\">\n            <tn-checkbox\n              class=\"tn-table__checkbox\"\n              label=\"Select all rows\"\n              [hideLabel]=\"true\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\" />\n          </th>\n        } @else if (column === '__expand') {\n          <th class=\"tn-table__header-cell tn-table__expand-cell\">\n            <span class=\"cdk-visually-hidden\">Expand</span>\n          </th>\n        } @else {\n          <th\n            class=\"tn-table__header-cell\"\n            [class.tn-table__header-cell--sortable]=\"getColumnDef(column)?.sortable()\"\n            [class.tn-table__header-cell--sorted]=\"isSorted(column)\"\n            [style.width]=\"getColumnDef(column)?.width()\"\n            [attr.aria-sort]=\"\n              isSorted(column)\n                ? sortDirection() === 'asc' ? 'ascending' : 'descending'\n                : null\n            \"\n            [attr.tabindex]=\"getColumnDef(column)?.sortable() ? 0 : null\"\n            [attr.data-column]=\"column\"\n            (click)=\"getColumnDef(column)?.sortable() && onSortClick(column)\"\n            (keydown.enter)=\"onSortClick(column)\"\n            (keydown.space)=\"onSortClick(column); $event.preventDefault()\">\n            <span class=\"tn-table__sort-container\">\n              <span class=\"tn-table__header-text\">\n                @if (getColumnDef(column)?.headerTemplate(); as tmpl) {\n                  <ng-container [ngTemplateOutlet]=\"tmpl\" />\n                } @else {\n                  {{ column }}\n                }\n              </span>\n              @if (getColumnDef(column)?.sortable()) {\n                <tn-icon\n                  class=\"tn-table__sort-icon\"\n                  size=\"sm\"\n                  [name]=\"getSortIcon(column)\" />\n              }\n            </span>\n          </th>\n        }\n      }\n    </tr>\n  </thead>\n\n  <!-- Data Rows -->\n  <tbody class=\"tn-table__body\">\n    @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n      <tr\n        class=\"tn-table__row\"\n        [attr.data-row-index]=\"rowIdx\"\n        [class.tn-table__row--expandable]=\"expandable()\"\n        [class.tn-table__row--expanded]=\"isRowExpanded(row)\">\n        @for (column of effectiveDisplayedColumns(); track $index) {\n          @if (column === '__select') {\n            <td class=\"tn-table__cell tn-table__select-cell\"\n              (click)=\"toggleRowSelection(row); $event.stopPropagation()\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                [label]=\"'Select row ' + (rowIdx + 1)\"\n                [hideLabel]=\"true\"\n                [checked]=\"isRowSelected(row)\" />\n            </td>\n          } @else if (column === '__expand') {\n            <td class=\"tn-table__cell tn-table__expand-cell\"\n              (click)=\"$event.stopPropagation()\">\n              <button\n                type=\"button\"\n                class=\"tn-table__expand-button\"\n                [attr.aria-expanded]=\"isRowExpanded(row)\"\n                [attr.aria-label]=\"isRowExpanded(row) ? 'Collapse row' : 'Expand row'\"\n                (click)=\"toggleRowExpansion(row)\">\n                <tn-icon\n                  class=\"tn-table__expand-icon\"\n                  [name]=\"getExpandIcon(row)\" />\n              </button>\n            </td>\n          } @else {\n            <td\n              class=\"tn-table__cell\"\n              [style.width]=\"getColumnDef(column)?.width()\"\n              [attr.data-column]=\"column\">\n              @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tmpl\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n              } @else {\n                <span>{{ getCellValue(row, column) }}</span>\n              }\n            </td>\n          }\n        }\n      </tr>\n\n      <!-- Detail / Expanded Row -->\n      @if (expandable() && detailRowDef() && isRowExpanded(row)) {\n        <tr class=\"tn-table__detail-row\" [@detailExpand]=\"'expanded'\">\n          <td\n            class=\"tn-table__detail-cell\"\n            [attr.colspan]=\"effectiveDisplayedColumns().length\">\n            <ng-container\n              [ngTemplateOutlet]=\"detailRowDef()!.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n          </td>\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n\n@if (data().length === 0) {\n  <tn-empty\n    size=\"compact\"\n    [title]=\"emptyMessage()\"\n    [icon]=\"emptyIcon()\" />\n}\n", styles: [":host{display:block}:host(.tn-table--bordered){border:1px solid var(--tn-lines);border-radius:4px}.tn-table{display:block;width:100%;overflow-x:auto}.tn-table__table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--tn-bg2);border-radius:4px;overflow:hidden}.tn-table__header{background-color:var(--tn-topbar);color:var(--tn-topbar-txt)}.tn-table__header-row{height:56px}.tn-table__header-cell{padding:0 16px;text-align:left;font-weight:600;font-size:14px;border-bottom:1px solid var(--tn-lines);white-space:nowrap;vertical-align:middle}.tn-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.tn-table__header-cell--sortable:hover{background-color:var(--tn-alt-bg1)}.tn-table__sort-container{display:inline-flex;align-items:center;gap:4px}.tn-table__sort-icon{opacity:0;transition:opacity .2s ease}.tn-table__header-cell--sortable:hover .tn-table__sort-icon{opacity:.5}.tn-table__header-cell--sorted .tn-table__sort-icon{opacity:1}.tn-table__body{background-color:var(--tn-bg2)}.tn-table__row{height:48px;transition:background-color .2s ease}.tn-table__row:hover{background-color:var(--tn-alt-bg1)}.tn-table__row:not(:last-child){border-bottom:1px solid var(--tn-lines)}.tn-table__row--expanded{background-color:var(--tn-alt-bg1)}.tn-table__cell{padding:0 16px;font-size:14px;color:var(--tn-fg1);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn-table__select-cell{width:48px;padding:0 8px 0 16px;cursor:pointer}.tn-table__checkbox{pointer-events:none}.tn-table__expand-cell{width:48px;padding:0 16px 0 8px;text-align:center}.tn-table__expand-button{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:inline-flex;align-items:center;color:var(--tn-fg2)}.tn-table__expand-button:hover{background-color:var(--tn-alt-bg1)}.tn-table__expand-button:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__expand-icon{transition:transform .2s ease}.tn-table__detail-row{background-color:var(--tn-alt-bg1);border-bottom:1px solid var(--tn-lines)}.tn-table__detail-cell{padding:16px}.tn-table--dense .tn-table__header-row{height:40px}.tn-table--dense .tn-table__row{height:32px}.tn-table--dense .tn-table__header-cell,.tn-table--dense .tn-table__cell{padding:0 12px;font-size:13px}@media(max-width:768px){.tn-table__table{font-size:12px}.tn-table__header-cell,.tn-table__cell{padding:0 8px}}@media(prefers-reduced-motion:reduce){.tn-table__sort-icon,.tn-table__expand-icon,.tn-table__row{transition:none}.tn-table__detail-row{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "component", type: TnEmptyComponent, selector: "tn-empty", inputs: ["title", "description", "icon", "iconLibrary", "iconSize", "actionText", "bordered", "size"], outputs: ["onAction"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }], animations: [
             trigger('detailExpand', [
                 state('collapsed,void', style({ height: '0px', minHeight: '0', overflow: 'hidden' })),
                 state('expanded', style({ height: '*' })),
@@ -10695,7 +10878,7 @@ class TnConfirmDialogComponent {
     ref = inject((DialogRef));
     data = inject(DIALOG_DATA);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: TnConfirmDialogComponent, isStandalone: true, selector: "tn-confirm-dialog", host: { properties: { "class.tn-dialog--destructive": "data.destructive" }, classAttribute: "tn-dialog-shell" }, ngImport: i0, template: "<tn-dialog-shell [title]=\"data.title\">\n  <p style=\"margin: 0;\">{{ data.message }}</p>\n  <div tnDialogAction>\n    <tn-button\n      type=\"button\"\n      variant=\"outline\"\n      [label]=\"data.cancelText || 'Cancel'\"\n      (click)=\"ref.close(false)\" />\n    <tn-button\n      type=\"button\"\n      [color]=\"data.destructive ? 'warn' : 'primary'\"\n      [label]=\"data.confirmText || 'OK'\"\n      (click)=\"ref.close(true)\" />\n  </div>\n</tn-dialog-shell>\n", dependencies: [{ kind: "component", type: TnDialogShellComponent, selector: "tn-dialog-shell", inputs: ["title", "showFullscreenButton"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "disabled", "testId"], outputs: ["onClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: TnConfirmDialogComponent, isStandalone: true, selector: "tn-confirm-dialog", host: { properties: { "class.tn-dialog--destructive": "data.destructive" }, classAttribute: "tn-dialog-shell" }, ngImport: i0, template: "<tn-dialog-shell [title]=\"data.title\">\n  <p style=\"margin: 0;\">{{ data.message }}</p>\n  <div tnDialogAction>\n    <tn-button\n      type=\"button\"\n      variant=\"outline\"\n      [label]=\"data.cancelText || 'Cancel'\"\n      (click)=\"ref.close(false)\" />\n    <tn-button\n      type=\"button\"\n      [color]=\"data.destructive ? 'warn' : 'primary'\"\n      [label]=\"data.confirmText || 'OK'\"\n      (click)=\"ref.close(true)\" />\n  </div>\n</tn-dialog-shell>\n", dependencies: [{ kind: "component", type: TnDialogShellComponent, selector: "tn-dialog-shell", inputs: ["title", "showFullscreenButton"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "disabled", "testId", "href", "routerLink", "queryParams", "fragment", "target", "rel", "ariaLabel"], outputs: ["onClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnConfirmDialogComponent, decorators: [{
             type: Component,
@@ -11664,7 +11847,7 @@ class TnFilePickerPopupComponent {
         return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}/${date.getFullYear()} ${timePart}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFilePickerPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFilePickerPopupComponent, isStandalone: true, selector: "tn-file-picker-popup", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, allowDatasetCreate: { classPropertyName: "allowDatasetCreate", publicName: "allowDatasetCreate", isSignal: true, isRequired: false, transformFunction: null }, allowZvolCreate: { classPropertyName: "allowZvolCreate", publicName: "allowZvolCreate", isSignal: true, isRequired: false, transformFunction: null }, currentPath: { classPropertyName: "currentPath", publicName: "currentPath", isSignal: true, isRequired: false, transformFunction: null }, fileItems: { classPropertyName: "fileItems", publicName: "fileItems", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, creationLoading: { classPropertyName: "creationLoading", publicName: "creationLoading", isSignal: true, isRequired: false, transformFunction: null }, fileExtensions: { classPropertyName: "fileExtensions", publicName: "fileExtensions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemDoubleClick: "itemDoubleClick", pathNavigate: "pathNavigate", createFolder: "createFolder", clearSelection: "clearSelection", close: "close", submit: "submit", cancel: "cancel", submitFolderName: "submitFolderName", cancelFolderCreation: "cancelFolderCreation" }, host: { classAttribute: "tn-file-picker-popup" }, ngImport: i0, template: "<!-- Header with breadcrumb navigation -->\n<div class=\"tn-file-picker-header\">\n  <nav class=\"tn-file-picker-breadcrumb\" aria-label=\"File path\">\n    @for (segment of currentPath() | tnTruncatePath; track $index; let last = $last) {\n      <button\n        class=\"breadcrumb-segment\"\n        [class.current]=\"last\"\n        [class.parent-nav]=\"segment.name === '..'\"\n        [disabled]=\"last\"\n        (click)=\"navigateToPath(segment.path)\">\n        {{ segment.name }}\n      </button>\n    }\n  </nav>\n\n  <div class=\"tn-file-picker-actions\">\n    @if (allowCreate()) {\n      <tn-button\n        variant=\"outline\"\n        label=\"New Folder\"\n        [disabled]=\"isCreateDisabled()\"\n        (onClick)=\"onCreateFolder()\" />\n    }\n  </div>\n</div>\n\n<!-- Loading indicator -->\n@if (loading()) {\n  <div class=\"tn-file-picker-loading\">\n    <tn-icon name=\"loading\" library=\"mdi\" />\n    <span>Loading...</span>\n  </div>\n}\n\n<!-- File table -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-content\">\n  <tn-table\n    [dataSource]=\"filteredFileItems()\"\n    [displayedColumns]=\"multiSelect() ? displayedColumns : displayedColumns.slice(1)\">\n\n    <!-- Selection column -->\n    @if (multiSelect()) {\n      <ng-container tnColumnDef=\"select\">\n      <ng-template tnHeaderCellDef>\n        <!-- Select all checkbox -->\n      </ng-template>\n      <ng-template let-item tnCellDef>\n        <input \n          type=\"checkbox\" \n          [checked]=\"isSelected(item)\"\n          [disabled]=\"!!item.disabled\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"onItemClick(item)\">\n      </ng-template>\n      </ng-container>\n    }\n\n    <!-- Name column -->\n    <ng-container tnColumnDef=\"name\">\n      <ng-template tnHeaderCellDef>Name</ng-template>\n      <ng-template let-item tnCellDef>\n\n        <!-- NORMAL MODE: Display name -->\n        @if (!item.isCreating) {\n          <div\n               class=\"file-name-cell\"\n               [class.disabled]=\"!!item.disabled\"\n               [class.zfs-object]=\"isZfsObject(item)\"\n               [attr.tabindex]=\"item.disabled ? null : 0\"\n               [attr.role]=\"'button'\"\n               (click)=\"onItemClick(item)\"\n               (dblclick)=\"onItemDoubleClick(item)\"\n               (keydown.enter)=\"onItemDoubleClick(item)\"\n               (keydown.space)=\"onItemClick(item)\">\n            <tn-icon\n              [name]=\"getItemIcon(item)\"\n              [library]=\"getItemIconLibrary(item)\"\n              [class]=\"'file-icon file-icon-' + item.type\" />\n            <span class=\"file-name\">{{ item.name }}</span>\n\n            <!-- ZFS badge -->\n            @if (isZfsObject(item)) {\n              <span\n                [class]=\"'zfs-badge zfs-badge-' + item.type\">\n                {{ getZfsBadge(item) }}\n              </span>\n            }\n\n            <!-- Permission indicator -->\n            @if (item.permissions === 'none') {\n              <tn-icon\n                name=\"lock\"\n                library=\"mdi\"\n                class=\"permission-icon\" />\n            }\n          </div>\n        }\n\n        <!-- EDIT MODE: Inline name input with error display -->\n        @if (item.isCreating) {\n          <div class=\"file-name-cell-wrapper\">\n            <div class=\"file-name-cell editing\" [class.has-error]=\"!!item.creationError\">\n              <tn-icon\n                name=\"folder\"\n                library=\"mdi\"\n                class=\"file-icon file-icon-folder\" />\n              <input\n                #folderNameInput\n                type=\"text\"\n                role=\"textbox\"\n                aria-label=\"Folder name\"\n                class=\"folder-name-input\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                [class.error]=\"!!item.creationError\"\n                [value]=\"item.name\"\n                [disabled]=\"creationLoading()\"\n                [attr.data-autofocus]=\"true\"\n                (keydown)=\"onFolderNameKeyDown($event, item)\"\n                (blur)=\"onFolderNameInputBlur($event, item)\">\n\n              <!-- Loading indicator during submission -->\n              @if (creationLoading()) {\n                <tn-icon\n                  name=\"loading\"\n                  library=\"mdi\"\n                  class=\"creation-loading-icon\" />\n              }\n            </div>\n\n            <!-- Inline error message -->\n            @if (item.creationError) {\n              <div class=\"folder-creation-error\">\n                <tn-icon name=\"alert-circle\" library=\"mdi\" class=\"error-icon\" />\n                <span class=\"error-text\">{{ item.creationError }}</span>\n              </div>\n            }\n          </div>\n        }\n\n      </ng-template>\n    </ng-container>\n\n    <!-- Size column -->\n    <ng-container tnColumnDef=\"size\">\n      <ng-template tnHeaderCellDef>Size</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.size !== undefined) {\n          <span>{{ item.size | tnFileSize }}</span>\n        }\n        @if (item.size === undefined && item.type === 'folder') {\n          <span class=\"folder-indicator\">--</span>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Modified column -->\n    <ng-container tnColumnDef=\"modified\">\n      <ng-template tnHeaderCellDef>Modified</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.modified) {\n          <span>{{ formatDate(item.modified) }}</span>\n        }\n      </ng-template>\n    </ng-container>\n\n\n  </tn-table>\n\n  <!-- Empty state -->\n  @if (filteredFileItems().length === 0) {\n    <div class=\"empty-state\">\n      <tn-icon name=\"folder-open\" library=\"mdi\" customSize=\"48px\" />\n      <p>No items found</p>\n    </div>\n  }\n  </div>\n}\n\n<!-- Footer -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-footer\">\n    @if (selectedItems().length > 0) {\n      <span class=\"selection-count\">\n        {{ selectedItems().length }} item{{ selectedItems().length !== 1 ? 's' : '' }} selected\n      </span>\n    }\n    @if (selectedItems().length === 0) {\n      <span class=\"selection-count\">\n        No items selected\n      </span>\n    }\n    <div class=\"footer-actions\">\n      <tn-button\n        label=\"Select\"\n        [disabled]=\"selectedItems().length === 0\"\n        (onClick)=\"onSubmit()\" />\n    </div>\n  </div>\n}", styles: [":host{display:block;background:var(--tn-bg1, white);color:var(--tn-fg1, #333);padding:0;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014;border-radius:8px;border:1px solid var(--tn-lines, #e0e0e0);min-width:400px;max-width:600px;min-height:500px;max-height:600px;font-family:var(--tn-font-family-body);display:flex;flex-direction:column;overflow:hidden}.tn-file-picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--tn-content-padding, 24px);padding-bottom:16px;border-bottom:1px solid var(--tn-lines)}.tn-file-picker-breadcrumb{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.tn-file-picker-breadcrumb .breadcrumb-segment{background:transparent;border:none;color:var(--tn-primary);cursor:pointer;padding:4px 8px;border-radius:4px;font-size:.875rem;white-space:nowrap;transition:background-color .15s ease-in-out}.tn-file-picker-breadcrumb .breadcrumb-segment:hover:not(:disabled){background:var(--tn-bg2)}.tn-file-picker-breadcrumb .breadcrumb-segment:disabled,.tn-file-picker-breadcrumb .breadcrumb-segment.current{color:var(--tn-fg1);cursor:default;font-weight:500}.tn-file-picker-breadcrumb .breadcrumb-segment:not(:last-child):after{content:\"/\";margin-left:8px;color:var(--tn-alt-fg1)}.tn-file-picker-actions{display:flex;align-items:center;gap:8px}.tn-file-picker-actions tn-button{font-size:.875rem}.tn-file-picker-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px;color:var(--tn-fg2)}.tn-file-picker-loading tn-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tn-file-picker-content{flex:1;min-height:0;overflow-y:auto}.file-list-viewport{width:100%;height:100%}.file-list-viewport .cdk-virtual-scroll-content-wrapper{width:100%}tn-table{width:100%}tn-table th,tn-table .tn-table__header-cell{font-weight:600;color:var(--tn-fg1);padding:12px 16px;border-bottom:2px solid var(--tn-lines)}tn-table td,tn-table .tn-table__cell{padding:8px 16px;border-bottom:1px solid var(--tn-lines)}.file-checkbox{display:flex;align-items:center}.file-checkbox input[type=checkbox]{margin:0;width:16px;height:16px}.file-name-cell{display:flex;align-items:center;gap:8px;cursor:pointer}.file-name-cell.disabled{opacity:.5;color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-name{color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-icon{opacity:.6}.file-name-cell.disabled:has(.file-icon-folder),.file-name-cell.disabled:has(.file-icon-dataset),.file-name-cell.disabled:has(.file-icon-mountpoint){cursor:pointer}.file-name-cell.disabled:not(:has(.file-icon-folder)):not(:has(.file-icon-dataset)):not(:has(.file-icon-mountpoint)){cursor:not-allowed}.file-name-cell.editing{display:flex;align-items:center;gap:8px;padding:2px;cursor:default}.file-name-cell.editing .folder-name-input{flex:1;border:2px solid var(--tn-primary, #0066cc);padding:4px 8px;font-size:inherit;font-family:inherit;background:var(--tn-bg1, white);color:var(--tn-fg1, black);outline:none;border-radius:3px;min-width:200px}.file-name-cell.editing .folder-name-input:focus{border-color:var(--tn-primary, #0066cc);box-shadow:0 0 0 3px #0066cc1a}.file-name-cell.editing .folder-name-input.error{border-color:var(--tn-error, #d32f2f)}.file-name-cell.editing .folder-name-input:disabled{opacity:.6;cursor:not-allowed;background:var(--tn-bg2, #f5f5f5)}.file-name-cell.editing .creation-loading-icon{animation:spin 1s linear infinite;color:var(--tn-primary, #0066cc);flex-shrink:0}.file-name-cell-wrapper{display:flex;flex-direction:column;gap:4px}.folder-creation-error{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 36px;margin-bottom:12px;background:#d32f2f1a;border-left:3px solid var(--tn-error, #d32f2f);border-radius:3px;font-size:.875rem;color:var(--tn-error, #d32f2f)}.folder-creation-error .error-icon{flex-shrink:0;width:20px;height:20px}.folder-creation-error .error-text{flex:1}.file-icon{display:flex;align-items:center;justify-content:center;font-size:var(--tn-icon-md, 20px);flex-shrink:0;line-height:1}.file-icon.file-icon-folder{color:var(--tn-primary)}.file-icon.file-icon-dataset{color:var(--tn-blue, #007db3)}.file-icon.file-icon-zvol{color:var(--tn-green, #71BF44)}.file-icon.file-icon-mountpoint{color:var(--tn-orange, #E68D37)}.file-name{flex:1;font-weight:500;line-height:1.4}.zfs-badge{display:inline-flex;align-items:center;background:var(--tn-alt-bg2);color:var(--tn-alt-fg2);font-size:.625rem;font-weight:600;padding:2px 6px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;line-height:1}.zfs-badge.zfs-badge-dataset{background:var(--tn-blue);color:#fff}.zfs-badge.zfs-badge-zvol{background:var(--tn-green);color:#fff}.zfs-badge.zfs-badge-mountpoint{background:var(--tn-orange);color:#fff}.permission-icon{display:flex;align-items:center;justify-content:center;color:var(--tn-red);font-size:var(--tn-icon-sm, 16px);line-height:1}.file-type{font-size:.875rem;padding:2px 8px;border-radius:12px}.file-type.type-folder{background:var(--tn-alt-bg1);color:var(--tn-alt-fg2)}.file-type.type-file{background:var(--tn-bg2);color:var(--tn-fg2)}.file-type.type-dataset{background:#007db31a;color:var(--tn-blue)}.file-type.type-zvol{background:#71bf441a;color:var(--tn-green)}.file-type.type-mountpoint{background:#e68d371a;color:var(--tn-orange)}.folder-indicator{color:var(--tn-alt-fg1);font-style:italic}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--tn-alt-fg1);text-align:center}.empty-state tn-icon{margin-bottom:16px;opacity:.5}.empty-state p{margin:0;font-size:.875rem}.tn-file-picker-footer{display:flex;align-items:center;justify-content:space-between;padding:16px var(--tn-content-padding, 24px);border-top:1px solid var(--tn-lines);background:var(--tn-bg2);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.selection-count{font-size:.875rem;color:var(--tn-fg2);font-weight:500}.footer-actions{display:flex;gap:8px}@media(prefers-reduced-motion:reduce){.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){:host{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:.875rem}}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "disabled", "testId"], outputs: ["onClick"] }, { kind: "component", type: TnTableComponent, selector: "tn-table", inputs: ["dataSource", "displayedColumns", "trackBy", "emptyMessage", "emptyIcon", "selectable", "expandable", "bordered"], outputs: ["sortChange", "selectionChange"] }, { kind: "directive", type: TnTableColumnDirective, selector: "[tnColumnDef]", inputs: ["tnColumnDef", "sortable", "width"], exportAs: ["tnColumnDef"] }, { kind: "directive", type: TnHeaderCellDefDirective, selector: "[tnHeaderCellDef]" }, { kind: "directive", type: TnCellDefDirective, selector: "[tnCellDef]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: FileSizePipe, name: "tnFileSize" }, { kind: "pipe", type: TruncatePathPipe, name: "tnTruncatePath" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFilePickerPopupComponent, isStandalone: true, selector: "tn-file-picker-popup", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, allowDatasetCreate: { classPropertyName: "allowDatasetCreate", publicName: "allowDatasetCreate", isSignal: true, isRequired: false, transformFunction: null }, allowZvolCreate: { classPropertyName: "allowZvolCreate", publicName: "allowZvolCreate", isSignal: true, isRequired: false, transformFunction: null }, currentPath: { classPropertyName: "currentPath", publicName: "currentPath", isSignal: true, isRequired: false, transformFunction: null }, fileItems: { classPropertyName: "fileItems", publicName: "fileItems", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, creationLoading: { classPropertyName: "creationLoading", publicName: "creationLoading", isSignal: true, isRequired: false, transformFunction: null }, fileExtensions: { classPropertyName: "fileExtensions", publicName: "fileExtensions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemDoubleClick: "itemDoubleClick", pathNavigate: "pathNavigate", createFolder: "createFolder", clearSelection: "clearSelection", close: "close", submit: "submit", cancel: "cancel", submitFolderName: "submitFolderName", cancelFolderCreation: "cancelFolderCreation" }, host: { classAttribute: "tn-file-picker-popup" }, ngImport: i0, template: "<!-- Header with breadcrumb navigation -->\n<div class=\"tn-file-picker-header\">\n  <nav class=\"tn-file-picker-breadcrumb\" aria-label=\"File path\">\n    @for (segment of currentPath() | tnTruncatePath; track $index; let last = $last) {\n      <button\n        class=\"breadcrumb-segment\"\n        [class.current]=\"last\"\n        [class.parent-nav]=\"segment.name === '..'\"\n        [disabled]=\"last\"\n        (click)=\"navigateToPath(segment.path)\">\n        {{ segment.name }}\n      </button>\n    }\n  </nav>\n\n  <div class=\"tn-file-picker-actions\">\n    @if (allowCreate()) {\n      <tn-button\n        variant=\"outline\"\n        label=\"New Folder\"\n        [disabled]=\"isCreateDisabled()\"\n        (onClick)=\"onCreateFolder()\" />\n    }\n  </div>\n</div>\n\n<!-- Loading indicator -->\n@if (loading()) {\n  <div class=\"tn-file-picker-loading\">\n    <tn-icon name=\"loading\" library=\"mdi\" />\n    <span>Loading...</span>\n  </div>\n}\n\n<!-- File table -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-content\">\n  <tn-table\n    [dataSource]=\"filteredFileItems()\"\n    [displayedColumns]=\"multiSelect() ? displayedColumns : displayedColumns.slice(1)\">\n\n    <!-- Selection column -->\n    @if (multiSelect()) {\n      <ng-container tnColumnDef=\"select\">\n      <ng-template tnHeaderCellDef>\n        <!-- Select all checkbox -->\n      </ng-template>\n      <ng-template let-item tnCellDef>\n        <input \n          type=\"checkbox\" \n          [checked]=\"isSelected(item)\"\n          [disabled]=\"!!item.disabled\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"onItemClick(item)\">\n      </ng-template>\n      </ng-container>\n    }\n\n    <!-- Name column -->\n    <ng-container tnColumnDef=\"name\">\n      <ng-template tnHeaderCellDef>Name</ng-template>\n      <ng-template let-item tnCellDef>\n\n        <!-- NORMAL MODE: Display name -->\n        @if (!item.isCreating) {\n          <div\n               class=\"file-name-cell\"\n               [class.disabled]=\"!!item.disabled\"\n               [class.zfs-object]=\"isZfsObject(item)\"\n               [attr.tabindex]=\"item.disabled ? null : 0\"\n               [attr.role]=\"'button'\"\n               (click)=\"onItemClick(item)\"\n               (dblclick)=\"onItemDoubleClick(item)\"\n               (keydown.enter)=\"onItemDoubleClick(item)\"\n               (keydown.space)=\"onItemClick(item)\">\n            <tn-icon\n              [name]=\"getItemIcon(item)\"\n              [library]=\"getItemIconLibrary(item)\"\n              [class]=\"'file-icon file-icon-' + item.type\" />\n            <span class=\"file-name\">{{ item.name }}</span>\n\n            <!-- ZFS badge -->\n            @if (isZfsObject(item)) {\n              <span\n                [class]=\"'zfs-badge zfs-badge-' + item.type\">\n                {{ getZfsBadge(item) }}\n              </span>\n            }\n\n            <!-- Permission indicator -->\n            @if (item.permissions === 'none') {\n              <tn-icon\n                name=\"lock\"\n                library=\"mdi\"\n                class=\"permission-icon\" />\n            }\n          </div>\n        }\n\n        <!-- EDIT MODE: Inline name input with error display -->\n        @if (item.isCreating) {\n          <div class=\"file-name-cell-wrapper\">\n            <div class=\"file-name-cell editing\" [class.has-error]=\"!!item.creationError\">\n              <tn-icon\n                name=\"folder\"\n                library=\"mdi\"\n                class=\"file-icon file-icon-folder\" />\n              <input\n                #folderNameInput\n                type=\"text\"\n                role=\"textbox\"\n                aria-label=\"Folder name\"\n                class=\"folder-name-input\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                [class.error]=\"!!item.creationError\"\n                [value]=\"item.name\"\n                [disabled]=\"creationLoading()\"\n                [attr.data-autofocus]=\"true\"\n                (keydown)=\"onFolderNameKeyDown($event, item)\"\n                (blur)=\"onFolderNameInputBlur($event, item)\">\n\n              <!-- Loading indicator during submission -->\n              @if (creationLoading()) {\n                <tn-icon\n                  name=\"loading\"\n                  library=\"mdi\"\n                  class=\"creation-loading-icon\" />\n              }\n            </div>\n\n            <!-- Inline error message -->\n            @if (item.creationError) {\n              <div class=\"folder-creation-error\">\n                <tn-icon name=\"alert-circle\" library=\"mdi\" class=\"error-icon\" />\n                <span class=\"error-text\">{{ item.creationError }}</span>\n              </div>\n            }\n          </div>\n        }\n\n      </ng-template>\n    </ng-container>\n\n    <!-- Size column -->\n    <ng-container tnColumnDef=\"size\">\n      <ng-template tnHeaderCellDef>Size</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.size !== undefined) {\n          <span>{{ item.size | tnFileSize }}</span>\n        }\n        @if (item.size === undefined && item.type === 'folder') {\n          <span class=\"folder-indicator\">--</span>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Modified column -->\n    <ng-container tnColumnDef=\"modified\">\n      <ng-template tnHeaderCellDef>Modified</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.modified) {\n          <span>{{ formatDate(item.modified) }}</span>\n        }\n      </ng-template>\n    </ng-container>\n\n\n  </tn-table>\n\n  <!-- Empty state -->\n  @if (filteredFileItems().length === 0) {\n    <div class=\"empty-state\">\n      <tn-icon name=\"folder-open\" library=\"mdi\" customSize=\"48px\" />\n      <p>No items found</p>\n    </div>\n  }\n  </div>\n}\n\n<!-- Footer -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-footer\">\n    @if (selectedItems().length > 0) {\n      <span class=\"selection-count\">\n        {{ selectedItems().length }} item{{ selectedItems().length !== 1 ? 's' : '' }} selected\n      </span>\n    }\n    @if (selectedItems().length === 0) {\n      <span class=\"selection-count\">\n        No items selected\n      </span>\n    }\n    <div class=\"footer-actions\">\n      <tn-button\n        label=\"Select\"\n        [disabled]=\"selectedItems().length === 0\"\n        (onClick)=\"onSubmit()\" />\n    </div>\n  </div>\n}", styles: [":host{display:block;background:var(--tn-bg1, white);color:var(--tn-fg1, #333);padding:0;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014;border-radius:8px;border:1px solid var(--tn-lines, #e0e0e0);min-width:400px;max-width:600px;min-height:500px;max-height:600px;font-family:var(--tn-font-family-body);display:flex;flex-direction:column;overflow:hidden}.tn-file-picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--tn-content-padding, 24px);padding-bottom:16px;border-bottom:1px solid var(--tn-lines)}.tn-file-picker-breadcrumb{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.tn-file-picker-breadcrumb .breadcrumb-segment{background:transparent;border:none;color:var(--tn-primary);cursor:pointer;padding:4px 8px;border-radius:4px;font-size:.875rem;white-space:nowrap;transition:background-color .15s ease-in-out}.tn-file-picker-breadcrumb .breadcrumb-segment:hover:not(:disabled){background:var(--tn-bg2)}.tn-file-picker-breadcrumb .breadcrumb-segment:disabled,.tn-file-picker-breadcrumb .breadcrumb-segment.current{color:var(--tn-fg1);cursor:default;font-weight:500}.tn-file-picker-breadcrumb .breadcrumb-segment:not(:last-child):after{content:\"/\";margin-left:8px;color:var(--tn-alt-fg1)}.tn-file-picker-actions{display:flex;align-items:center;gap:8px}.tn-file-picker-actions tn-button{font-size:.875rem}.tn-file-picker-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px;color:var(--tn-fg2)}.tn-file-picker-loading tn-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tn-file-picker-content{flex:1;min-height:0;overflow-y:auto}.file-list-viewport{width:100%;height:100%}.file-list-viewport .cdk-virtual-scroll-content-wrapper{width:100%}tn-table{width:100%}tn-table th,tn-table .tn-table__header-cell{font-weight:600;color:var(--tn-fg1);padding:12px 16px;border-bottom:2px solid var(--tn-lines)}tn-table td,tn-table .tn-table__cell{padding:8px 16px;border-bottom:1px solid var(--tn-lines)}.file-checkbox{display:flex;align-items:center}.file-checkbox input[type=checkbox]{margin:0;width:16px;height:16px}.file-name-cell{display:flex;align-items:center;gap:8px;cursor:pointer}.file-name-cell.disabled{opacity:.5;color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-name{color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-icon{opacity:.6}.file-name-cell.disabled:has(.file-icon-folder),.file-name-cell.disabled:has(.file-icon-dataset),.file-name-cell.disabled:has(.file-icon-mountpoint){cursor:pointer}.file-name-cell.disabled:not(:has(.file-icon-folder)):not(:has(.file-icon-dataset)):not(:has(.file-icon-mountpoint)){cursor:not-allowed}.file-name-cell.editing{display:flex;align-items:center;gap:8px;padding:2px;cursor:default}.file-name-cell.editing .folder-name-input{flex:1;border:2px solid var(--tn-primary, #0066cc);padding:4px 8px;font-size:inherit;font-family:inherit;background:var(--tn-bg1, white);color:var(--tn-fg1, black);outline:none;border-radius:3px;min-width:200px}.file-name-cell.editing .folder-name-input:focus{border-color:var(--tn-primary, #0066cc);box-shadow:0 0 0 3px #0066cc1a}.file-name-cell.editing .folder-name-input.error{border-color:var(--tn-error, #d32f2f)}.file-name-cell.editing .folder-name-input:disabled{opacity:.6;cursor:not-allowed;background:var(--tn-bg2, #f5f5f5)}.file-name-cell.editing .creation-loading-icon{animation:spin 1s linear infinite;color:var(--tn-primary, #0066cc);flex-shrink:0}.file-name-cell-wrapper{display:flex;flex-direction:column;gap:4px}.folder-creation-error{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 36px;margin-bottom:12px;background:#d32f2f1a;border-left:3px solid var(--tn-error, #d32f2f);border-radius:3px;font-size:.875rem;color:var(--tn-error, #d32f2f)}.folder-creation-error .error-icon{flex-shrink:0;width:20px;height:20px}.folder-creation-error .error-text{flex:1}.file-icon{display:flex;align-items:center;justify-content:center;font-size:var(--tn-icon-md, 20px);flex-shrink:0;line-height:1}.file-icon.file-icon-folder{color:var(--tn-primary)}.file-icon.file-icon-dataset{color:var(--tn-blue, #007db3)}.file-icon.file-icon-zvol{color:var(--tn-green, #71BF44)}.file-icon.file-icon-mountpoint{color:var(--tn-orange, #E68D37)}.file-name{flex:1;font-weight:500;line-height:1.4}.zfs-badge{display:inline-flex;align-items:center;background:var(--tn-alt-bg2);color:var(--tn-alt-fg2);font-size:.625rem;font-weight:600;padding:2px 6px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;line-height:1}.zfs-badge.zfs-badge-dataset{background:var(--tn-blue);color:#fff}.zfs-badge.zfs-badge-zvol{background:var(--tn-green);color:#fff}.zfs-badge.zfs-badge-mountpoint{background:var(--tn-orange);color:#fff}.permission-icon{display:flex;align-items:center;justify-content:center;color:var(--tn-red);font-size:var(--tn-icon-sm, 16px);line-height:1}.file-type{font-size:.875rem;padding:2px 8px;border-radius:12px}.file-type.type-folder{background:var(--tn-alt-bg1);color:var(--tn-alt-fg2)}.file-type.type-file{background:var(--tn-bg2);color:var(--tn-fg2)}.file-type.type-dataset{background:#007db31a;color:var(--tn-blue)}.file-type.type-zvol{background:#71bf441a;color:var(--tn-green)}.file-type.type-mountpoint{background:#e68d371a;color:var(--tn-orange)}.folder-indicator{color:var(--tn-alt-fg1);font-style:italic}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--tn-alt-fg1);text-align:center}.empty-state tn-icon{margin-bottom:16px;opacity:.5}.empty-state p{margin:0;font-size:.875rem}.tn-file-picker-footer{display:flex;align-items:center;justify-content:space-between;padding:16px var(--tn-content-padding, 24px);border-top:1px solid var(--tn-lines);background:var(--tn-bg2);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.selection-count{font-size:.875rem;color:var(--tn-fg2);font-weight:500}.footer-actions{display:flex;gap:8px}@media(prefers-reduced-motion:reduce){.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){:host{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:.875rem}}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "disabled", "testId", "href", "routerLink", "queryParams", "fragment", "target", "rel", "ariaLabel"], outputs: ["onClick"] }, { kind: "component", type: TnTableComponent, selector: "tn-table", inputs: ["dataSource", "displayedColumns", "trackBy", "emptyMessage", "emptyIcon", "selectable", "expandable", "bordered"], outputs: ["sortChange", "selectionChange"] }, { kind: "directive", type: TnTableColumnDirective, selector: "[tnColumnDef]", inputs: ["tnColumnDef", "sortable", "width"], exportAs: ["tnColumnDef"] }, { kind: "directive", type: TnHeaderCellDefDirective, selector: "[tnHeaderCellDef]" }, { kind: "directive", type: TnCellDefDirective, selector: "[tnCellDef]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: FileSizePipe, name: "tnFileSize" }, { kind: "pipe", type: TruncatePathPipe, name: "tnTruncatePath" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFilePickerPopupComponent, decorators: [{
             type: Component,
@@ -13124,5 +13307,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, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, 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, 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, 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, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, 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, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, 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, 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, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
 //# sourceMappingURL=truenas-ui-components.mjs.map