@truenas/ui-components 0.1.66 → 0.1.68

package/fesm2022/truenas-ui-components.mjs

@@ -1,5 +1,7 @@
+import { Overlay, OverlayPositionBuilder, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Renderer2, ElementRef, input, effect, Directive, output, viewChild, signal, computed, forwardRef, Component, model, afterNextRender, ChangeDetectionStrategy, Injectable, isDevMode, ViewEncapsulation, contentChildren, ViewContainerRef, HostListener, contentChild, ChangeDetectorRef, TemplateRef, DestroyRef, isSignal, untracked, IterableDiffers, Pipe, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
+import { InjectionToken, inject, Renderer2, ElementRef, input, effect, Directive, ViewContainerRef, output, viewChild, computed, signal, forwardRef, Component, model, afterNextRender, ChangeDetectionStrategy, Injectable, isDevMode, ViewEncapsulation, contentChildren, HostListener, contentChild, ChangeDetectorRef, TemplateRef, DestroyRef, isSignal, untracked, IterableDiffers, Pipe, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NgControl } from '@angular/forms';
 import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
@@ -13,8 +15,6 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
 import { firstValueFrom, BehaviorSubject, merge, Subject, take } from 'rxjs';
 import { RouterLink } from '@angular/router';
-import { Overlay, OverlayPositionBuilder, OverlayModule } from '@angular/cdk/overlay';
-import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { SPACE, ENTER, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
@@ -96,6 +96,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 let nextId$1 = 0;
 class TnAutocompleteComponent {
     elementRef = inject(ElementRef);
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
     /** Unique instance ID for ARIA linkage */
     uid = `tn-autocomplete-${nextId$1++}`;
     /** All available options */
@@ -112,14 +114,34 @@ class TnAutocompleteComponent {
     filterFn = input(undefined, ...(ngDevMode ? [{ debugName: "filterFn" }] : []));
     /** Text shown when no options match the search */
     noResultsText = input('No results found', ...(ngDevMode ? [{ debugName: "noResultsText" }] : []));
-    /** Maximum number of options to render */
-    maxResults = input(100, ...(ngDevMode ? [{ debugName: "maxResults" }] : []));
+    /**
+     * Maximum number of options to render.
+     *
+     * Defaults to `Infinity` so browsing the open dropdown without a search term
+     * never silently truncates a long list. Pass an explicit cap if you want to
+     * limit how many filtered results are rendered at once.
+     */
+    maxResults = input(Infinity, ...(ngDevMode ? [{ debugName: "maxResults" }] : []));
+    /**
+     * Max height of the dropdown panel before it scrolls. Accepts a number
+     * (interpreted as `px`) or any CSS length string (e.g. `'320px'`,
+     * `'min(320px, 40vh)'`). Surfaced as the `--tn-autocomplete-panel-max-height`
+     * custom property so it can also be themed in CSS.
+     */
+    panelMaxHeight = input('320px', ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : []));
     /** Test ID attribute */
     testId = input('', ...(ngDevMode ? [{ debugName: "testId" }] : []));
     /** Emits when an option is selected */
     optionSelected = output();
     /** Reference to the input element */
     inputEl = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputEl" }] : []));
+    /** Template for the dropdown panel, portaled into a CDK overlay on open. */
+    dropdownTemplate = viewChild.required('dropdownTemplate');
+    /** Normalized panel max-height as a CSS length string. */
+    panelMaxHeightValue = computed(() => {
+        const value = this.panelMaxHeight();
+        return typeof value === 'number' ? `${value}px` : value;
+    }, ...(ngDevMode ? [{ debugName: "panelMaxHeightValue" }] : []));
     /** Current search term typed by the user */
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
     /** Whether the dropdown is open */
@@ -152,24 +174,14 @@ class TnAutocompleteComponent {
     hasResults = computed(() => this.filteredOptions().length > 0, ...(ngDevMode ? [{ debugName: "hasResults" }] : []));
     onChange = (_value) => { };
     onTouched = () => { };
-    constructor() {
-        // Click-outside detection
-        effect(() => {
-            if (this.isOpen()) {
-                const listener = (event) => {
-                    if (!this.elementRef.nativeElement.contains(event.target)) {
-                        this.close();
-                    }
-                };
-                setTimeout(() => {
-                    document.addEventListener('click', listener);
-                }, 0);
-                return () => {
-                    document.removeEventListener('click', listener);
-                };
-            }
-            return undefined;
-        });
+    /** Live overlay holding the dropdown panel, or undefined when closed. */
+    overlayRef;
+    /** Subscriptions tied to the current overlay; torn down on close. */
+    overlaySubs = [];
+    ngOnDestroy() {
+        // If the component is destroyed while the dropdown is open (e.g. router
+        // navigates away), close() never runs — clean up the overlay directly.
+        this.detachOverlay();
     }
     // ── ControlValueAccessor ──
     writeValue(value) {
@@ -196,12 +208,17 @@ class TnAutocompleteComponent {
         this.searchTerm.set(value);
         this.highlightedIndex.set(-1);
         if (!this.isOpen()) {
-            this.isOpen.set(true);
+            this.open();
+        }
+        else {
+            // Filtering changes the panel's height; nudge CDK to re-evaluate the
+            // anchored position so it stays attached to the input.
+            this.overlayRef?.updatePosition();
         }
     }
     onFocus() {
         if (!this.isDisabled()) {
-            this.isOpen.set(true);
+            this.open();
         }
     }
     onBlur() {
@@ -236,7 +253,7 @@ class TnAutocompleteComponent {
             case 'ArrowDown':
                 event.preventDefault();
                 if (!this.isOpen()) {
-                    this.isOpen.set(true);
+                    this.open();
                 }
                 else {
                     this.highlightedIndex.update((i) => i < options.length - 1 ? i + 1 : 0);
@@ -271,26 +288,81 @@ class TnAutocompleteComponent {
         this.optionSelected.emit(option);
         this.close();
     }
+    open() {
+        if (this.isDisabled() || this.isOpen()) {
+            return;
+        }
+        this.isOpen.set(true);
+        this.attachOverlay();
+    }
     close() {
         this.isOpen.set(false);
         this.highlightedIndex.set(-1);
+        this.detachOverlay();
+    }
+    /**
+     * Attach the dropdown panel as a CDK overlay anchored to the input.
+     *
+     * Why an overlay (vs. an inline absolutely-positioned panel): the panel is
+     * appended to the overlay container on `document.body`, so it can never be
+     * clipped by an ancestor's `overflow: hidden`/`auto` (e.g. a surrounding
+     * card). CDK also flips the panel above the input near the viewport edge and
+     * matches its width to the input. Mirrors TnSelectComponent's approach.
+     */
+    attachOverlay() {
+        const anchor = this.inputEl()?.nativeElement;
+        if (!anchor) {
+            return;
+        }
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(anchor)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ]);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false,
+            width: anchor.offsetWidth,
+        });
+        this.overlayRef.attach(new TemplatePortal(this.dropdownTemplate(), this.viewContainerRef));
+        // Non-intercepting click-outside: the pointer event still reaches whatever
+        // the user clicked; we just notice and close. Ignore targets inside the
+        // host (the input itself) so we don't fight the focus/typing handlers.
+        this.overlaySubs.push(this.overlayRef.outsidePointerEvents().subscribe((event) => {
+            const target = event.target;
+            if (target && this.elementRef.nativeElement.contains(target)) {
+                return;
+            }
+            this.close();
+        }));
+    }
+    detachOverlay() {
+        this.overlaySubs.forEach((sub) => sub.unsubscribe());
+        this.overlaySubs = [];
+        this.overlayRef?.dispose();
+        this.overlayRef = undefined;
     }
     scrollToHighlighted() {
         const idx = this.highlightedIndex();
-        const dropdown = this.elementRef.nativeElement.querySelector('.tn-autocomplete__dropdown');
-        const options = dropdown?.querySelectorAll('.tn-autocomplete__option');
+        // The panel lives in the CDK overlay (outside the host), so scope the query
+        // to the overlay element rather than the host element.
+        const overlayEl = this.overlayRef?.overlayElement;
+        const options = overlayEl?.querySelectorAll('.tn-autocomplete__option');
         if (options?.[idx]?.scrollIntoView) {
             options[idx].scrollIntoView({ block: 'nearest' });
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnAutocompleteComponent, isStandalone: true, selector: "tn-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requireSelection: { classPropertyName: "requireSelection", publicName: "requireSelection", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnAutocompleteComponent, isStandalone: true, selector: "tn-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requireSelection: { classPropertyName: "requireSelection", publicName: "requireSelection", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnAutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-autocomplete\" [tnTestId]=\"testId()\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n\n  @if (isOpen()) {\n    <div\n      class=\"tn-autocomplete__dropdown\"\n      role=\"listbox\"\n      [attr.id]=\"uid + '-dropdown'\">\n\n      @if (hasResults()) {\n        @for (option of filteredOptions(); track $index) {\n          <div\n            class=\"tn-autocomplete__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            [class.highlighted]=\"highlightedIndex() === $index\"\n            [attr.id]=\"uid + '-option-' + $index\"\n            [attr.aria-selected]=\"highlightedIndex() === $index\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\">\n            {{ displayWith()(option) }}\n          </div>\n        }\n      } @else {\n        <div class=\"tn-autocomplete__no-results\">\n          {{ noResultsText() }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:.25rem;background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:200px;overflow-y:auto;padding:.25rem 0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover{background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}\n"], dependencies: [{ kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId"] }] });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-autocomplete\" [tnTestId]=\"testId()\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-owns]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. Attach/detach (driven by open()/close()) controls\n     visibility; the input keeps DOM focus throughout. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-autocomplete__dropdown\"\n    role=\"listbox\"\n    [style.--tn-autocomplete-panel-max-height]=\"panelMaxHeightValue()\"\n    [attr.id]=\"uid + '-dropdown'\">\n\n    @if (hasResults()) {\n      @for (option of filteredOptions(); track $index) {\n        <div\n          class=\"tn-autocomplete__option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [class.highlighted]=\"highlightedIndex() === $index\"\n          [attr.id]=\"uid + '-option-' + $index\"\n          [attr.aria-selected]=\"highlightedIndex() === $index\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onOptionClick(option)\"\n          (keydown.enter)=\"onOptionClick(option)\">\n          {{ displayWith()(option) }}\n        </div>\n      }\n    } @else {\n      <div class=\"tn-autocomplete__no-results\">\n        {{ noResultsText() }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:var(--tn-autocomplete-panel-max-height, 320px);overflow-y:auto;padding:.25rem 0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover{background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}\n"], dependencies: [{ kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnAutocompleteComponent, decorators: [{
             type: Component,
@@ -300,8 +372,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             useExisting: forwardRef(() => TnAutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"tn-autocomplete\" [tnTestId]=\"testId()\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n\n  @if (isOpen()) {\n    <div\n      class=\"tn-autocomplete__dropdown\"\n      role=\"listbox\"\n      [attr.id]=\"uid + '-dropdown'\">\n\n      @if (hasResults()) {\n        @for (option of filteredOptions(); track $index) {\n          <div\n            class=\"tn-autocomplete__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            [class.highlighted]=\"highlightedIndex() === $index\"\n            [attr.id]=\"uid + '-option-' + $index\"\n            [attr.aria-selected]=\"highlightedIndex() === $index\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\">\n            {{ displayWith()(option) }}\n          </div>\n        }\n      } @else {\n        <div class=\"tn-autocomplete__no-results\">\n          {{ noResultsText() }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:.25rem;background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:200px;overflow-y:auto;padding:.25rem 0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover{background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requireSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSelection", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
+                    ], template: "<div class=\"tn-autocomplete\" [tnTestId]=\"testId()\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-owns]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. Attach/detach (driven by open()/close()) controls\n     visibility; the input keeps DOM focus throughout. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-autocomplete__dropdown\"\n    role=\"listbox\"\n    [style.--tn-autocomplete-panel-max-height]=\"panelMaxHeightValue()\"\n    [attr.id]=\"uid + '-dropdown'\">\n\n    @if (hasResults()) {\n      @for (option of filteredOptions(); track $index) {\n        <div\n          class=\"tn-autocomplete__option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [class.highlighted]=\"highlightedIndex() === $index\"\n          [attr.id]=\"uid + '-option-' + $index\"\n          [attr.aria-selected]=\"highlightedIndex() === $index\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onOptionClick(option)\"\n          (keydown.enter)=\"onOptionClick(option)\">\n          {{ displayWith()(option) }}\n        </div>\n      }\n    } @else {\n      <div class=\"tn-autocomplete__no-results\">\n        {{ noResultsText() }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:var(--tn-autocomplete-panel-max-height, 320px);overflow-y:auto;padding:.25rem 0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover{background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requireSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSelection", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
 
 /**
  * Harness for interacting with tn-autocomplete in tests.
@@ -415,8 +487,11 @@ class TnAutocompleteHarness extends ComponentHarness {
      * ```
      */
     async isOpen() {
-        const dropdown = await this.locatorForOptional('.tn-autocomplete__dropdown')();
-        return dropdown !== null;
+        // The dropdown panel is rendered in a CDK overlay (outside the host), so we
+        // read the open state from the `.open` class the input carries while the
+        // panel is attached rather than looking for the panel in the host subtree.
+        const input = await this._input();
+        return input.hasClass('open');
     }
     /**
      * Checks whether the autocomplete input is disabled.
@@ -448,7 +523,9 @@ class TnAutocompleteHarness extends ComponentHarness {
      * ```
      */
     async getOptions() {
-        const options = await this.locatorForAll('.tn-autocomplete__option')();
+        // Options render inside a CDK overlay (outside the host element), so search
+        // the document root rather than the harness-local subtree.
+        const options = await this.documentRootLocatorFactory().locatorForAll('.tn-autocomplete__option')();
         const labels = [];
         for (const option of options) {
             labels.push((await option.text()).trim());
@@ -476,7 +553,9 @@ class TnAutocompleteHarness extends ComponentHarness {
     async selectOption(filter) {
         const input = await this._input();
         await input.focus();
-        const options = await this.locatorForAll('.tn-autocomplete__option')();
+        // Options render inside a CDK overlay (outside the host element), so search
+        // the document root rather than the harness-local subtree.
+        const options = await this.documentRootLocatorFactory().locatorForAll('.tn-autocomplete__option')();
         for (const option of options) {
             const text = (await option.text()).trim();
             const matches = filter instanceof RegExp ? filter.test(text) : text === filter;
@@ -3173,52 +3252,6 @@ 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 }] }] } });
 
-/**
- * Renders a single `TnMenuItem` (separator, leaf button, or submenu trigger).
- *
- * Used recursively by `<tn-menu>` so the same authoring covers root items and
- * arbitrarily-nested submenus — adding a new menu-item property (badge,
- * tooltip, etc.) only needs to be wired up here, not duplicated across every
- * nesting level.
- *
- * **Why a component, not an ng-template:** earlier prototypes used a recursive
- * `<ng-template #menuItem>` outletted via `[ngTemplateOutlet]`. That fails
- * because the embedded view's DI chain resolves through the template's
- * declaration site, not the outlet anchor — `CdkMenuItem` then can't find
- * `MENU_STACK`, which is provided per-`CdkMenu`. A real component's DI walks
- * up through its host element instead, so each renderer instance sees the
- * `CdkMenu` it's actually rendered under (root or any nested submenu).
- *
- * @internal Implementation detail of `<tn-menu>`. Not re-exported from the
- * menu barrel or `public-api.ts` because it depends on injecting
- * `TnMenuComponent` from the host DI scope and cannot be used standalone.
- */
-class TnMenuItemRendererComponent {
-    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
-    // The renderer is rendered inside a CDK overlay portal, but the portal is
-    // created from a template defined inside `<tn-menu>` — so the view-DI chain
-    // still walks back to the host `<tn-menu>` component, which means inject()
-    // here resolves it correctly.
-    menu = inject(TnMenuComponent);
-    onClick() {
-        this.menu.onMenuItemClick(this.item());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMenuItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnMenuItemRendererComponent, isStandalone: true, selector: "tn-menu-item-renderer", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (item().separator) {\n  <div class=\"tn-menu-separator\" role=\"separator\"></div>\n} @else 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    [cdkMenuItemDisabled]=\"!!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)=\"onClick()\"\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]=\"submenuTpl\"\n    [disabled]=\"item().disabled\"\n    [cdkMenuItemDisabled]=\"!!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 #submenuTpl>\n    <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n      @for (child of item().children!; track child.id) {\n        <tn-menu-item-renderer [item]=\"child\" />\n      }\n    </div>\n  </ng-template>\n}\n", 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:1rem;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: "component", type: i0.forwardRef(() => TnMenuItemRendererComponent), selector: "tn-menu-item-renderer", inputs: ["item"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => CdkMenu), selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i0.forwardRef(() => CdkMenuItem), selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => CdkMenuTrigger), selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: i0.forwardRef(() => TnIconComponent), selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "directive", type: i0.forwardRef(() => TnTestIdDirective), selector: "[tnTestId]", inputs: ["tnTestId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMenuItemRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tn-menu-item-renderer', standalone: true, imports: [
-                        CommonModule,
-                        CdkMenu,
-                        CdkMenuItem,
-                        CdkMenuTrigger,
-                        TnIconComponent,
-                        TnTestIdDirective,
-                        forwardRef(() => TnMenuItemRendererComponent),
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (item().separator) {\n  <div class=\"tn-menu-separator\" role=\"separator\"></div>\n} @else 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    [cdkMenuItemDisabled]=\"!!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)=\"onClick()\"\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]=\"submenuTpl\"\n    [disabled]=\"item().disabled\"\n    [cdkMenuItemDisabled]=\"!!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 #submenuTpl>\n    <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n      @for (child of item().children!; track child.id) {\n        <tn-menu-item-renderer [item]=\"child\" />\n      }\n    </div>\n  </ng-template>\n}\n", 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:1rem;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: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
-
 /**
  * Projection-based menu item for use inside `<tn-menu>`.
  *
@@ -3286,27 +3319,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
         }], 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"] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
 
 /**
- * Activates CDK menu hover-to-open behavior for menus opened via custom overlays.
+ * Activates CDK menu hover-to-open behavior — and keyboard focus entry — for a
+ * root menu opened via a custom overlay instead of CDK's own `CdkMenuTrigger`.
  *
  * CDK's hover-to-open for submenu triggers is guarded by `!menuStack.isEmpty()`.
- * When a CdkMenu is opened via TnMenuTriggerDirective (custom overlay) instead of
- * CDK's own CdkMenuTrigger, the menu is considered "inline" and doesn't register
- * with the stack, disabling hover for its submenu triggers.
- *
- * This directive pushes the CdkMenu to its own stack and focuses the element
- * (to trigger the CdkMenu's focusin host listener, preventing the hasFocus
- * auto-close subscription from immediately clearing the stack).
+ * When a `CdkMenu` is opened via `TnMenuTriggerDirective` (custom overlay)
+ * rather than `CdkMenuTrigger`, the menu is considered "inline" and doesn't
+ * register with the stack, disabling hover for its submenu triggers and leaving
+ * keyboard focus outside the panel.
+ *
+ * This directive pushes that root menu onto its own stack and moves focus to
+ * the first (or selected) item so arrow-key navigation works immediately.
+ * Submenus — opened by `CdkMenuTrigger` — already push themselves and are
+ * focused by CDK, so for them this directive only installs the skip-disabled
+ * predicate and otherwise stays out of the way.
  */
 class TnMenuActivateHoverDirective {
     cdkMenu = inject(CdkMenu);
     elementRef = inject((ElementRef));
     ngAfterContentInit() {
+        // A root inline menu (opened via our custom overlay, not CdkMenuTrigger)
+        // hasn't been pushed onto the stack yet. Submenus opened by CdkMenuTrigger
+        // push themselves in CdkMenuBase.ngAfterContentInit, so the stack is already
+        // non-empty by the time this runs for them — which is how we tell the two
+        // apart without reaching for more CDK internals.
         const stack = this.cdkMenu.menuStack;
-        if (stack.isEmpty()) {
+        const isRootInline = stack.isEmpty();
+        if (isRootInline) {
             stack.push(this.cdkMenu);
         }
         const km = this.cdkMenu.keyManager;
         km?.skipPredicate?.((item) => item.disabled);
+        // Only the root inline menu needs manual focus entry. CdkMenuTrigger already
+        // focuses the first item of any submenu it opens, so we must not fight it.
+        if (!isRootInline) {
+            return;
+        }
         // Prefer the marked "selected" item when one exists — matches user
         // expectation for option pickers (export format, sort key, etc.) where
         // reopening the menu should land focus on the current choice, not always
@@ -3336,6 +3384,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     standalone: true,
                 }]
         }] });
+
+/**
+ * Renders one complete menu panel: the `<div cdkMenu>` container plus every
+ * item in it (separators, leaf buttons, and submenu triggers). Used for the
+ * root menu and recursively for each nested submenu.
+ *
+ * **Why this owns the `<div cdkMenu>` (and the items aren't rendered by
+ * `<tn-menu>` directly):** `CdkMenu` discovers its items via
+ * `@ContentChildren(CdkMenuItem, {descendants: true})`, which only sees nodes
+ * within the *same view* as the `cdkMenu` element — it does **not** cross into
+ * a child component's view. An earlier design kept the `<div cdkMenu>` in
+ * `<tn-menu>`'s template and rendered each item through a separate
+ * `<tn-menu-item-renderer>` component; those item buttons lived in the
+ * renderer's view, so `CdkMenu`'s query never found them. The result: an empty
+ * `FocusKeyManager`, no focus on open, and dead arrow keys for the entire
+ * `[items]` API. Keeping the container and its buttons together in this one
+ * component's view is what makes keyboard navigation work.
+ *
+ * **Why a component, not a recursive `<ng-template>`:** an embedded view from
+ * `*ngTemplateOutlet` resolves DI through the template's *declaration* site,
+ * so a nested submenu item would inject the root menu's `MENU_STACK` instead of
+ * its own. A real component resolves DI through its host's insertion point, so
+ * each panel — root or any nesting depth — sees the `CdkMenu` it's actually
+ * rendered under.
+ *
+ * **Projected `<tn-menu-item>` entries** (`projectedItems`) are only passed at
+ * the root; submenus are always driven by `item.children`. They render as
+ * sibling `cdkMenuItem` buttons so they share the same keyboard navigation.
+ *
+ * @internal Implementation detail of `<tn-menu>`. Not re-exported from the
+ * menu barrel or `public-api.ts` because it depends on injecting
+ * `TnMenuComponent` from the host DI scope and cannot be used standalone.
+ */
+class TnMenuPanelComponent {
+    /** Items for this menu level (the root array, or a submenu's `children`). */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Projected `<tn-menu-item>` children — only supplied for the root panel. */
+    projectedItems = input([], ...(ngDevMode ? [{ debugName: "projectedItems" }] : []));
+    /** Applies the nested-submenu styling/offset. */
+    nested = input(false, ...(ngDevMode ? [{ debugName: "nested" }] : []));
+    // The panel is rendered inside a CDK overlay portal, but the portal's
+    // template is declared inside `<tn-menu>` — so the view-DI chain still walks
+    // back to the host `<tn-menu>` component and inject() resolves it.
+    menu = inject(TnMenuComponent);
+    onItemClick(item) {
+        this.menu.onMenuItemClick(item);
+    }
+    onProjectedClick(item, event) {
+        this.menu.onProjectedItemClick(item, event);
+    }
+    trackByItemId(index, item) {
+        return item.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMenuPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnMenuPanelComponent, isStandalone: true, selector: "tn-menu-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, projectedItems: { classPropertyName: "projectedItems", publicName: "projectedItems", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tn-menu\" cdkMenu tnMenuActivateHover [class.tn-menu--nested]=\"nested()\">\n  <!--\n    Projected <tn-menu-item> entries (root panel only) render as sibling\n    cdkMenuItem buttons so they participate in CdkMenu's keyboard navigation\n    (arrow keys, Home/End, type-ahead) alongside the items() array below.\n  -->\n  @for (projected of projectedItems(); track projected) {\n    <button\n      cdkMenuItem\n      class=\"tn-menu-item\"\n      type=\"button\"\n      [tnTestId]=\"projected.resolvedTestId()\"\n      [disabled]=\"projected.disabled()\"\n      [cdkMenuItemDisabled]=\"projected.disabled()\"\n      [class.disabled]=\"projected.disabled()\"\n      [class.tn-menu-item--selected]=\"projected.selected()\"\n      [attr.aria-current]=\"projected.selected() ? 'true' : null\"\n      (click)=\"onProjectedClick(projected, $event)\"\n    >\n      @if (projected.label() !== undefined) {\n        @if (projected.icon()) {\n          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"projected.icon()!\" [library]=\"projected.iconLibrary()\" />\n        }\n        <span class=\"tn-menu-item-label\">{{ projected.label() }}</span>\n        @if (projected.shortcut()) {\n          <span class=\"tn-menu-item-shortcut\">{{ projected.shortcut() }}</span>\n        }\n      } @else {\n        <ng-container [ngTemplateOutlet]=\"projected.content()\" />\n      }\n    </button>\n  }\n\n  @for (item of items(); track trackByItemId($index, item)) {\n    @if (item.separator) {\n      <div class=\"tn-menu-separator\" role=\"separator\"></div>\n    } @else 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        [cdkMenuItemDisabled]=\"!!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)=\"onItemClick(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]=\"submenuTpl\"\n        [disabled]=\"item.disabled\"\n        [cdkMenuItemDisabled]=\"!!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 #submenuTpl>\n        <tn-menu-panel [items]=\"item.children!\" [nested]=\"true\" />\n      </ng-template>\n    }\n  }\n</div>\n", 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:1rem;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: "component", type: i0.forwardRef(() => TnMenuPanelComponent), selector: "tn-menu-panel", inputs: ["items", "projectedItems", "nested"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => CdkMenu), selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i0.forwardRef(() => CdkMenuItem), selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => CdkMenuTrigger), selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: i0.forwardRef(() => TnIconComponent), selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "directive", type: i0.forwardRef(() => TnTestIdDirective), selector: "[tnTestId]", inputs: ["tnTestId"] }, { kind: "directive", type: i0.forwardRef(() => TnMenuActivateHoverDirective), selector: "[tnMenuActivateHover]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMenuPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-menu-panel', standalone: true, imports: [
+                        CommonModule,
+                        CdkMenu,
+                        CdkMenuItem,
+                        CdkMenuTrigger,
+                        TnIconComponent,
+                        TnTestIdDirective,
+                        TnMenuActivateHoverDirective,
+                        forwardRef(() => TnMenuPanelComponent),
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tn-menu\" cdkMenu tnMenuActivateHover [class.tn-menu--nested]=\"nested()\">\n  <!--\n    Projected <tn-menu-item> entries (root panel only) render as sibling\n    cdkMenuItem buttons so they participate in CdkMenu's keyboard navigation\n    (arrow keys, Home/End, type-ahead) alongside the items() array below.\n  -->\n  @for (projected of projectedItems(); track projected) {\n    <button\n      cdkMenuItem\n      class=\"tn-menu-item\"\n      type=\"button\"\n      [tnTestId]=\"projected.resolvedTestId()\"\n      [disabled]=\"projected.disabled()\"\n      [cdkMenuItemDisabled]=\"projected.disabled()\"\n      [class.disabled]=\"projected.disabled()\"\n      [class.tn-menu-item--selected]=\"projected.selected()\"\n      [attr.aria-current]=\"projected.selected() ? 'true' : null\"\n      (click)=\"onProjectedClick(projected, $event)\"\n    >\n      @if (projected.label() !== undefined) {\n        @if (projected.icon()) {\n          <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"projected.icon()!\" [library]=\"projected.iconLibrary()\" />\n        }\n        <span class=\"tn-menu-item-label\">{{ projected.label() }}</span>\n        @if (projected.shortcut()) {\n          <span class=\"tn-menu-item-shortcut\">{{ projected.shortcut() }}</span>\n        }\n      } @else {\n        <ng-container [ngTemplateOutlet]=\"projected.content()\" />\n      }\n    </button>\n  }\n\n  @for (item of items(); track trackByItemId($index, item)) {\n    @if (item.separator) {\n      <div class=\"tn-menu-separator\" role=\"separator\"></div>\n    } @else 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        [cdkMenuItemDisabled]=\"!!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)=\"onItemClick(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]=\"submenuTpl\"\n        [disabled]=\"item.disabled\"\n        [cdkMenuItemDisabled]=\"!!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 #submenuTpl>\n        <tn-menu-panel [items]=\"item.children!\" [nested]=\"true\" />\n      </ng-template>\n    }\n  }\n</div>\n", 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:1rem;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 }] }], projectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "projectedItems", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }] } });
+
 class TnMenuComponent {
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     contextMenu = input(false, ...(ngDevMode ? [{ debugName: "contextMenu" }] : [])); // Enable context menu mode (right-click)
@@ -3449,15 +3567,12 @@ class TnMenuComponent {
             this.openContextMenuAt(event.clientX, event.clientY);
         }
     }
-    trackByItemId(index, item) {
-        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" }, 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      <tn-menu-item-renderer [item]=\"item\" />\n    }\n  </div>\n</ng-template>\n\n<!-- Regular menu template -->\n<ng-template #menuTemplate>\n  <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n    <!--\n      Projected <tn-menu-item> entries are re-rendered here inside the\n      overlay so they participate in CdkMenu's keyboard navigation (arrow\n      keys, Home/End, type-ahead) alongside the items() array below.\n    -->\n    @for (projected of contentItems(); track projected) {\n      <button\n        cdkMenuItem\n        class=\"tn-menu-item\"\n        type=\"button\"\n        [tnTestId]=\"projected.resolvedTestId()\"\n        [disabled]=\"projected.disabled()\"\n        [cdkMenuItemDisabled]=\"projected.disabled()\"\n        [class.disabled]=\"projected.disabled()\"\n        [class.tn-menu-item--selected]=\"projected.selected()\"\n        [attr.aria-current]=\"projected.selected() ? 'true' : null\"\n        (click)=\"onProjectedItemClick(projected, $event)\"\n      >\n        @if (projected.label() !== undefined) {\n          @if (projected.icon()) {\n            <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"projected.icon()!\" [library]=\"projected.iconLibrary()\" />\n          }\n          <span class=\"tn-menu-item-label\">{{ projected.label() }}</span>\n          @if (projected.shortcut()) {\n            <span class=\"tn-menu-item-shortcut\">{{ projected.shortcut() }}</span>\n          }\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"projected.content()\" />\n        }\n      </button>\n    }\n    @for (item of items(); track trackByItemId($index, item)) {\n      <tn-menu-item-renderer [item]=\"item\" />\n    }\n  </div>\n</ng-template>\n", 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:1rem;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: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "directive", type: TnMenuActivateHoverDirective, selector: "[tnMenuActivateHover]" }, { kind: "component", type: TnMenuItemRendererComponent, selector: "tn-menu-item-renderer", inputs: ["item"] }, { 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  <tn-menu-panel [items]=\"items()\" />\n</ng-template>\n\n<!-- Regular menu template -->\n<ng-template #menuTemplate>\n  <tn-menu-panel [items]=\"items()\" [projectedItems]=\"contentItems()\" />\n</ng-template>\n", 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:1rem;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: "component", type: TnMenuPanelComponent, selector: "tn-menu-panel", inputs: ["items", "projectedItems", "nested"] }] });
 }
 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, TnMenuItemRendererComponent, 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      <tn-menu-item-renderer [item]=\"item\" />\n    }\n  </div>\n</ng-template>\n\n<!-- Regular menu template -->\n<ng-template #menuTemplate>\n  <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n    <!--\n      Projected <tn-menu-item> entries are re-rendered here inside the\n      overlay so they participate in CdkMenu's keyboard navigation (arrow\n      keys, Home/End, type-ahead) alongside the items() array below.\n    -->\n    @for (projected of contentItems(); track projected) {\n      <button\n        cdkMenuItem\n        class=\"tn-menu-item\"\n        type=\"button\"\n        [tnTestId]=\"projected.resolvedTestId()\"\n        [disabled]=\"projected.disabled()\"\n        [cdkMenuItemDisabled]=\"projected.disabled()\"\n        [class.disabled]=\"projected.disabled()\"\n        [class.tn-menu-item--selected]=\"projected.selected()\"\n        [attr.aria-current]=\"projected.selected() ? 'true' : null\"\n        (click)=\"onProjectedItemClick(projected, $event)\"\n      >\n        @if (projected.label() !== undefined) {\n          @if (projected.icon()) {\n            <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"projected.icon()!\" [library]=\"projected.iconLibrary()\" />\n          }\n          <span class=\"tn-menu-item-label\">{{ projected.label() }}</span>\n          @if (projected.shortcut()) {\n            <span class=\"tn-menu-item-shortcut\">{{ projected.shortcut() }}</span>\n          }\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"projected.content()\" />\n        }\n      </button>\n    }\n    @for (item of items(); track trackByItemId($index, item)) {\n      <tn-menu-item-renderer [item]=\"item\" />\n    }\n  </div>\n</ng-template>\n", 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:1rem;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"] }]
+            args: [{ selector: 'tn-menu', standalone: true, imports: [TnMenuPanelComponent], 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  <tn-menu-panel [items]=\"items()\" />\n</ng-template>\n\n<!-- Regular menu template -->\n<ng-template #menuTemplate>\n  <tn-menu-panel [items]=\"items()\" [projectedItems]=\"contentItems()\" />\n</ng-template>\n", 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:1rem;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 }] }], contentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnMenuItemComponent), { isSignal: true }] }] } });
 
 class TnSlideToggleComponent {