npm - @weeehaoooz/talos-ui - Versions diffs - 0.1.1 → 0.1.2 - Mend

@weeehaoooz/talos-ui 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

package/fesm2022/weeehaoooz-talos-ui-nav.mjs CHANGED Viewed

@@ -3,7 +3,7 @@ import * as i0 from '@angular/core';
 import { input, model, Component, inject, output, computed, ViewEncapsulation, signal, ElementRef, NgModule } from '@angular/core';
 import { LucideChevronDown, LucideMonitor, LucideMoon, LucideSun, LucidePanelLeftOpen, LucidePanelLeftClose, LucideCircleHelp, LucideSettings, LucidePanelLeft, LucideChevronsUpDown, LucideX, LucideSearch, LucideMenu } from '@lucide/angular';
 import { LayoutService } from '@weeehaoooz/talos-ui/layout';
-import { TalosTooltipDirective } from '@weeehaoooz/talos-ui/feedback/tooltip';
+import { TalosTooltipDirective } from '@weeehaoooz/talos-ui/feedback';
 import { Router } from '@angular/router';
 class TalosNavGroupComponent {
@@ -818,7 +818,7 @@ class TopNavComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TopNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TopNavComponent, isStandalone: true, selector: "talos-top-nav, [talos-top-nav], [talosTopNav]", inputs: { brandTitle: { classPropertyName: "brandTitle", publicName: "brandTitle", isSignal: true, isRequired: false, transformFunction: null }, brandSubtitle: { classPropertyName: "brandSubtitle", publicName: "brandSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandBadge: { classPropertyName: "brandBadge", publicName: "brandBadge", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, brandRoute: { classPropertyName: "brandRoute", publicName: "brandRoute", isSignal: true, isRequired: false, transformFunction: null }, brandUrl: { classPropertyName: "brandUrl", publicName: "brandUrl", isSignal: true, isRequired: false, transformFunction: null }, showBrand: { classPropertyName: "showBrand", publicName: "showBrand", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, logoComponent: { classPropertyName: "logoComponent", publicName: "logoComponent", isSignal: true, isRequired: false, transformFunction: null }, logoComponentInputs: { classPropertyName: "logoComponentInputs", publicName: "logoComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, logoTemplate: { classPropertyName: "logoTemplate", publicName: "logoTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showThemeToggle: { classPropertyName: "showThemeToggle", publicName: "showThemeToggle", isSignal: true, isRequired: false, transformFunction: null }, themeMode: { classPropertyName: "themeMode", publicName: "themeMode", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, glass: { classPropertyName: "glass", publicName: "glass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leftComponent: { classPropertyName: "leftComponent", publicName: "leftComponent", isSignal: true, isRequired: false, transformFunction: null }, leftComponentInputs: { classPropertyName: "leftComponentInputs", publicName: "leftComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, leftTemplate: { classPropertyName: "leftTemplate", publicName: "leftTemplate", isSignal: true, isRequired: false, transformFunction: null }, centerComponent: { classPropertyName: "centerComponent", publicName: "centerComponent", isSignal: true, isRequired: false, transformFunction: null }, centerComponentInputs: { classPropertyName: "centerComponentInputs", publicName: "centerComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, centerTemplate: { classPropertyName: "centerTemplate", publicName: "centerTemplate", isSignal: true, isRequired: false, transformFunction: null }, rightComponent: { classPropertyName: "rightComponent", publicName: "rightComponent", isSignal: true, isRequired: false, transformFunction: null }, rightComponentInputs: { classPropertyName: "rightComponentInputs", publicName: "rightComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, rightTemplate: { classPropertyName: "rightTemplate", publicName: "rightTemplate", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemId: "activeItemIdChange", sidebarCollapsed: "sidebarCollapsedChange", itemClick: "itemClick", actionClick: "actionClick", userClick: "userClick", themeToggle: "themeToggle", themeModeChange: "themeModeChange", searchChange: "searchChange", sidebarToggleClick: "sidebarToggleClick", brandClick: "brandClick" }, host: { attributes: { "role": "banner" }, listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "closeAllDropdowns()" }, properties: { "class.is-sticky": "sticky()", "class.is-glass": "glass()", "class.is-bordered": "bordered()", "class.size-sm": "size() === \"sm\"", "class.size-md": "size() === \"md\"", "class.size-lg": "size() === \"lg\"", "class.dark-theme": "isDarkMode()", "attr.data-theme": "isDarkMode() ? \"dark\" : \"light\"" }, classAttribute: "talos-top-nav-host" }, ngImport: i0, template: "<div class=\"talos-top-nav-inner\">\n  <!-- Left Section: Toggle, Brand, Logo -->\n  <div class=\"top-nav-left\">\n    @if (leftComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: leftComponentInputs()\" />\n    } @else if (leftTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-left]\">\n      <!-- Sidebar Collapse Toggle Button -->\n      @if (showSidebarToggle()) {\n      <ng-content select=\"[top-nav-toggle]\">\n        <button type=\"button\" class=\"nav-toggle-btn\" (click)=\"toggleSidebar()\"\n          [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\">\n          @if (isSidebarCollapsed()) {\n          <svg lucidePanelLeftOpen [size]=\"18\"></svg>\n          } @else {\n          <svg lucidePanelLeftClose [size]=\"18\"></svg>\n          }\n        </button>\n      </ng-content>\n      }\n\n      <!-- Brand / Logo Area -->\n      @if (showLogo() || showBrand()) {\n      <div class=\"brand-container\" (click)=\"handleBrandClick()\"\n        [attr.tabindex]=\"(brandRoute() || brandUrl()) ? 0 : null\"\n        [attr.role]=\"(brandRoute() || brandUrl()) ? 'link' : null\">\n        @if (showLogo()) {\n        <div class=\"brand-logo-wrapper\">\n          @if (logoComponent(); as comp) {\n          <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n          } @else if (logoTemplate(); as tmpl) {\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n          <ng-content select=\"[top-nav-logo]\" />\n          }\n        </div>\n        }\n\n        @if (showBrand()) {\n        <ng-content select=\"[top-nav-brand]\">\n          <div class=\"brand-text-group\">\n            <div class=\"brand-title-row\">\n              @if (brandIcon(); as iconComp) {\n              <span class=\"brand-icon\">\n                <ng-container *ngComponentOutlet=\"iconComp\" />\n              </span>\n              }\n              <span class=\"brand-title\">{{ brandTitle() }}</span>\n              @if (brandBadge(); as badge) {\n              <span class=\"brand-badge\">{{ badge }}</span>\n              }\n            </div>\n            @if (brandSubtitle(); as subtitle) {\n            <span class=\"brand-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </ng-content>\n        }\n      </div>\n      }\n    </ng-content>\n    }\n  </div>\n\n  <!-- Center Section: Navigation Links & Search -->\n  <div class=\"top-nav-center\">\n    @if (centerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: centerComponentInputs()\" />\n    } @else if (centerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-center]\">\n      <!-- Direct Navigation Items -->\n      @if (items().length > 0) {\n      <nav class=\"nav-links-bar\" aria-label=\"Main Navigation\">\n        @for (item of items(); track item.id || item.label) {\n        @if (item.children && item.children.length > 0) {\n        <!-- Item with Dropdown Menu -->\n        <div class=\"nav-item-dropdown-container\" [class.is-open]=\"openDropdownId() === (item.id || item.label)\">\n          <button type=\"button\" class=\"nav-link-btn has-dropdown\"\n            [class.is-active]=\"activeItemId() === item.id || !!item.active\" [disabled]=\"item.disabled ?? false\"\n            [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"openDropdownId() === (item.id || item.label)\"\n            (click)=\"toggleDropdown(item.id || item.label, $event)\">\n            @if (item.icon; as itemIcon) {\n            <span class=\"nav-link-icon\">\n              <ng-container *ngComponentOutlet=\"itemIcon\" />\n            </span>\n            }\n            <span class=\"nav-link-label\">{{ item.label }}</span>\n            @if (item.badge) {\n            <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n              {{ item.badge }}\n            </span>\n            }\n            <svg lucideChevronDown class=\"dropdown-chevron\" [size]=\"14\"></svg>\n          </button>\n\n          <!-- Dropdown Panel -->\n          @if (openDropdownId() === (item.id || item.label)) {\n          <div class=\"top-nav-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n            @if (item.dropdownTemplate; as customTmpl) {\n            <ng-container *ngTemplateOutlet=\"customTmpl\" />\n            } @else {\n            <ul class=\"dropdown-menu-list\">\n              @for (child of item.children; track child.id || child.label) {\n              @if (child.divider) {\n              <li class=\"dropdown-divider\" role=\"separator\"></li>\n              }\n              <li role=\"none\">\n                <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                  [class.is-active]=\"activeItemId() === child.id || !!child.active\" [disabled]=\"child.disabled ?? false\"\n                  (click)=\"selectChildItem(child, item, $event)\">\n                  @if (child.icon; as childIcon) {\n                  <span class=\"dropdown-item-icon\">\n                    <ng-container *ngComponentOutlet=\"childIcon\" />\n                  </span>\n                  }\n                  <div class=\"dropdown-item-content\">\n                    <span class=\"dropdown-item-label\">{{ child.label }}</span>\n                    @if (child.description) {\n                    <span class=\"dropdown-item-desc\">{{ child.description }}</span>\n                    }\n                  </div>\n                  @if (child.badge) {\n                  <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (child.badgeVariant ?? 'subtle')\">\n                    {{ child.badge }}\n                  </span>\n                  }\n                </button>\n              </li>\n              }\n            </ul>\n            }\n          </div>\n          }\n        </div>\n        } @else {\n        <!-- Standard Single Nav Link -->\n        <button type=\"button\" class=\"nav-link-btn\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n          [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event)\">\n          @if (item.icon; as itemIcon) {\n          <span class=\"nav-link-icon\">\n            <ng-container *ngComponentOutlet=\"itemIcon\" />\n          </span>\n          }\n          <span class=\"nav-link-label\">{{ item.label }}</span>\n          @if (item.badge) {\n          <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n            {{ item.badge }}\n          </span>\n          }\n        </button>\n        }\n        }\n      </nav>\n      }\n\n      <!-- Search Input Slot -->\n      @if (showSearch()) {\n      <div class=\"search-bar-wrapper\">\n        <svg lucideSearch class=\"search-icon\" [size]=\"15\"></svg>\n        <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n          (input)=\"onSearchInput($event)\" />\n      </div>\n      }\n\n      <!-- Custom projected center content -->\n      <ng-content select=\"[top-nav-links]\" />\n      <ng-content />\n    </ng-content>\n    }\n  </div>\n\n  <!-- Right Section: Actions, Theme Toggle, User Profile -->\n  <div class=\"top-nav-right\">\n    @if (rightComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: rightComponentInputs()\" />\n    } @else if (rightTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-right]\">\n      <!-- Action Buttons -->\n      @if (actions().length > 0) {\n      <div class=\"actions-group\">\n        @for (action of actions(); track action.id || action.label || $index) {\n        <button type=\"button\" class=\"action-btn\" [class.has-label]=\"action.showLabel && !!action.label\"\n          [disabled]=\"action.disabled ?? false\" [attr.aria-label]=\"action.label || 'Action'\"\n          [talosTooltip]=\"action.showLabel ? '' : (action.label || '')\" (click)=\"handleActionClick(action, $event)\">\n          @if (action.icon; as actIcon) {\n          <span class=\"action-btn-icon\">\n            <ng-container *ngComponentOutlet=\"actIcon\" />\n          </span>\n          }\n          @if (action.showLabel && action.label) {\n          <span class=\"action-btn-label\">{{ action.label }}</span>\n          }\n          @if (action.badge) {\n          <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n            {{ action.badge }}\n          </span>\n          }\n        </button>\n        }\n      </div>\n      }\n\n      <ng-content select=\"[top-nav-actions]\" />\n\n      <!-- 3-Way System/Light/Dark Theme Toggle -->\n      @if (showThemeToggle()) {\n      <button type=\"button\" class=\"theme-toggle-btn\" (click)=\"handleThemeToggle()\"\n        [attr.aria-label]=\"themeToggleAriaLabel()\" [talosTooltip]=\"themeToggleTooltip()\">\n        <talos-theme-morph-icon [mode]=\"effectiveThemeMode()\" [size]=\"16\" />\n      </button>\n      }\n\n      <!-- User Profile & User Dropdown Menu -->\n      @if (userProfile(); as user) {\n      <div class=\"user-profile-container\" [class.is-open]=\"isUserDropdownOpen()\">\n        <button type=\"button\" class=\"user-profile-btn\" [attr.aria-haspopup]=\"'true'\"\n          [attr.aria-expanded]=\"isUserDropdownOpen()\" (click)=\"toggleUserDropdown($event)\">\n          <div class=\"user-avatar-circle\">\n            @if (user.avatarUrl) {\n            <img [src]=\"user.avatarUrl\" [alt]=\"user.name\" class=\"user-avatar-img\" />\n            } @else {\n            <span class=\"avatar-initials\">{{ user.name.charAt(0) }}</span>\n            }\n          </div>\n          <div class=\"user-profile-meta\">\n            <span class=\"user-name-text\">{{ user.name }}</span>\n            @if (user.role) {\n            <span class=\"user-role-text\">{{ user.role }}</span>\n            }\n          </div>\n          @if (user.menuItems && user.menuItems.length > 0) {\n          <svg lucideChevronDown class=\"user-dropdown-chevron\" [size]=\"13\"></svg>\n          }\n        </button>\n\n        <!-- User Dropdown Panel -->\n        @if (isUserDropdownOpen() && user.menuItems && user.menuItems.length > 0) {\n        <div class=\"top-nav-dropdown-menu user-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n          <div class=\"user-menu-header\">\n            <span class=\"user-menu-header-name\">{{ user.name }}</span>\n            @if (user.email) {\n            <span class=\"user-menu-header-email\">{{ user.email }}</span>\n            }\n          </div>\n          <div class=\"dropdown-divider\" role=\"separator\"></div>\n          <ul class=\"dropdown-menu-list\">\n            @for (menuItem of user.menuItems; track menuItem.id || menuItem.label) {\n            @if (menuItem.divider) {\n            <li class=\"dropdown-divider\" role=\"separator\"></li>\n            }\n            <li role=\"none\">\n              <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                [class.is-active]=\"activeItemId() === menuItem.id || !!menuItem.active\"\n                [disabled]=\"menuItem.disabled ?? false\" (click)=\"selectItem(menuItem, $event)\">\n                @if (menuItem.icon; as menuIcon) {\n                <span class=\"dropdown-item-icon\">\n                  <ng-container *ngComponentOutlet=\"menuIcon\" />\n                </span>\n                }\n                <div class=\"dropdown-item-content\">\n                  <span class=\"dropdown-item-label\">{{ menuItem.label }}</span>\n                  @if (menuItem.description) {\n                  <span class=\"dropdown-item-desc\">{{ menuItem.description }}</span>\n                  }\n                </div>\n                @if (menuItem.badge) {\n                <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (menuItem.badgeVariant ?? 'subtle')\">\n                  {{ menuItem.badge }}\n                </span>\n                }\n              </button>\n            </li>\n            }\n          </ul>\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Mobile Top Nav Hamburger Toggle Button -->\n      @if (items().length > 0 || actions().length > 0) {\n      <button type=\"button\" class=\"top-nav-mobile-hamburger-btn\" (click)=\"toggleMobileMenu()\"\n        [class.is-open]=\"isMobileMenuOpen()\" [attr.aria-expanded]=\"isMobileMenuOpen()\"\n        [attr.aria-label]=\"isMobileMenuOpen() ? 'Close navigation menu' : 'Open navigation menu'\">\n        @if (isMobileMenuOpen()) {\n        <svg lucideX [size]=\"20\"></svg>\n        } @else {\n        <svg lucideMenu [size]=\"20\"></svg>\n        }\n      </button>\n      }\n\n      <ng-content select=\"[top-nav-user]\" />\n    </ng-content>\n    }\n  </div>\n</div>\n\n<!-- Mobile Top Navigation Expanding Sheet (Expands Downwards from Top) -->\n@if (isMobileMenuOpen()) {\n<div class=\"top-nav-mobile-sheet\" role=\"navigation\" aria-label=\"Mobile Navigation\" (click)=\"$event.stopPropagation()\">\n  @if (showSearch()) {\n  <div class=\"mobile-search-bar\">\n    <svg lucideSearch class=\"search-icon\" [size]=\"16\"></svg>\n    <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n      (input)=\"onSearchInput($event)\" />\n  </div>\n  }\n\n  @if (items().length > 0) {\n  <nav class=\"mobile-nav-links-list\" aria-label=\"Mobile Main Navigation\">\n    @for (item of items(); track item.id || item.label) {\n    <button type=\"button\" class=\"mobile-nav-link-btn\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n      [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event); closeMobileMenu()\">\n      @if (item.icon; as itemIcon) {\n      <span class=\"nav-link-icon\">\n        <ng-container *ngComponentOutlet=\"itemIcon\" />\n      </span>\n      }\n      <span class=\"nav-link-label\">{{ item.label }}</span>\n      @if (item.badge) {\n      <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n        {{ item.badge }}\n      </span>\n      }\n    </button>\n    }\n  </nav>\n  }\n\n  @if (actions().length > 0) {\n  <div class=\"mobile-sheet-actions\">\n    @for (action of actions(); track action.id || action.label || $index) {\n    <button type=\"button\" class=\"mobile-action-btn\" [disabled]=\"action.disabled ?? false\"\n      (click)=\"handleActionClick(action, $event); closeMobileMenu()\">\n      @if (action.icon; as actIcon) {\n      <span class=\"action-btn-icon\">\n        <ng-container *ngComponentOutlet=\"actIcon\" />\n      </span>\n      }\n      @if (action.label) {\n      <span class=\"action-btn-label\">{{ action.label }}</span>\n      }\n      @if (action.badge) {\n      <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n        {{ action.badge }}\n      </span>\n      }\n    </button>\n    }\n  </div>\n  }\n</div>\n\n<!-- Backdrop for Top Nav Mobile Sheet -->\n<div class=\"top-nav-mobile-backdrop\" (click)=\"closeMobileMenu()\" aria-hidden=\"true\"></div>\n}", styles: [":host,talos-top-nav,.talos-top-nav-host{display:block;width:100%;box-sizing:border-box;z-index:50;position:relative;overflow:visible;container-type:inline-size;container-name:topnav;--talos-top-nav-height: 60px;--talos-top-nav-bg: var(--talos-header-bg, var(--talos-bg-surface, #ffffff));--talos-top-nav-border: var(--talos-header-border-color, var(--talos-border-default, #e2e8f0));--talos-top-nav-text: var(--talos-text-primary, #0f172a);--talos-top-nav-muted: var(--talos-text-muted, #64748b);--talos-top-nav-hover-bg: var(--talos-nav-hover-bg, rgba(0, 0, 0, .04));--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, #eff6ff);--talos-top-nav-active-text: var(--talos-primary-text, #1d4ed8);--talos-top-nav-dropdown-bg: var(--talos-bg-surface, #ffffff);--talos-top-nav-dropdown-border: var(--talos-border-default, #e2e8f0);--talos-top-nav-dropdown-shadow: var(--talos-shadow-dropdown, 0 10px 25px -5px rgba(0, 0, 0, .08))}:host.size-sm,talos-top-nav.size-sm,.talos-top-nav-host.size-sm{--talos-top-nav-height: 48px}:host.size-md,talos-top-nav.size-md,.talos-top-nav-host.size-md{--talos-top-nav-height: 60px}:host.size-lg,talos-top-nav.size-lg,.talos-top-nav-host.size-lg{--talos-top-nav-height: 72px}:host.is-sticky,talos-top-nav.is-sticky,.talos-top-nav-host.is-sticky{position:sticky;top:0;z-index:50}:host.is-bordered,talos-top-nav.is-bordered,.talos-top-nav-host.is-bordered{border-bottom:1px solid var(--talos-top-nav-border)}:host.is-glass,talos-top-nav.is-glass,.talos-top-nav-host.is-glass{--talos-top-nav-bg: rgba(255, 255, 255, .85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:root[data-theme=dark] talos-top-nav,:root.dark talos-top-nav,[data-theme=dark] talos-top-nav,[data-mode=dark] talos-top-nav,.dark talos-top-nav,.dark-theme talos-top-nav{--talos-top-nav-bg: var(--talos-header-bg, #090d16);--talos-top-nav-border: var(--talos-header-border-color, rgba(255, 255, 255, .08));--talos-top-nav-text: #f8fafc;--talos-top-nav-muted: #94a3b8;--talos-top-nav-hover-bg: rgba(255, 255, 255, .06);--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));--talos-top-nav-active-text: #ffffff;--talos-top-nav-dropdown-bg: #0f172a;--talos-top-nav-dropdown-border: rgba(255, 255, 255, .1);--talos-top-nav-dropdown-shadow: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08)}:root[data-theme=dark] :host.is-glass,:root.dark :host.is-glass,[data-theme=dark] :host.is-glass,[data-mode=dark] :host.is-glass,.dark :host.is-glass,.dark-theme :host.is-glass,:root[data-theme=dark] talos-top-nav.is-glass,:root.dark talos-top-nav.is-glass,[data-theme=dark] talos-top-nav.is-glass,[data-mode=dark] talos-top-nav.is-glass,.dark talos-top-nav.is-glass,.dark-theme talos-top-nav.is-glass{--talos-top-nav-bg: rgba(9, 13, 22, .85)}.talos-top-nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--talos-top-nav-height);padding:0 20px;background:var(--talos-top-nav-bg);box-sizing:border-box;gap:12px;position:relative;overflow:visible}@media(max-width:640px){.talos-top-nav-inner{padding:0 10px;gap:6px}}.top-nav-left{display:flex;align-items:center;gap:10px;flex-shrink:0}.nav-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0}.nav-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.brand-container{display:flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer}.brand-logo-wrapper{display:inline-flex;align-items:center;justify-content:center}.brand-text-group{display:flex;flex-direction:column;line-height:1.2}.brand-title-row{display:flex;align-items:center;gap:6px}.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff)));color:var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb)));border:1px solid var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2));flex-shrink:0;transition:all .2s ease}.brand-icon svg,.brand-icon i-lucide,.brand-icon .lucide{width:15px;height:15px;display:block}.brand-title{font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:var(--talos-top-nav-text);white-space:nowrap}.brand-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:6px;font-size:.625rem;font-weight:600;letter-spacing:.02em;background:var(--talos-top-nav-brand-badge-bg, var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff))));color:var(--talos-top-nav-brand-badge-color, var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb))));border:1px solid var(--talos-top-nav-brand-badge-border, var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2)));white-space:nowrap}.brand-subtitle{font-size:.6875rem;color:var(--talos-top-nav-muted);white-space:nowrap}.top-nav-center{display:flex;align-items:center;gap:10px;flex:1;min-width:0;justify-content:flex-start;overflow:visible;position:relative}.nav-links-bar{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;flex-shrink:0;overflow:visible;position:relative}.nav-item-dropdown-container{position:relative;display:inline-flex;overflow:visible}.nav-link-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;height:32px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;text-decoration:none;flex-shrink:0}.nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.nav-link-btn[disabled]{opacity:.5;cursor:not-allowed}.nav-link-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.nav-link-btn .dropdown-chevron{transition:transform .2s ease;opacity:.7}.nav-link-btn.has-dropdown{padding-right:6px}.nav-item-dropdown-container.is-open .nav-link-btn .dropdown-chevron{transform:rotate(180deg)}.nav-link-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.nav-link-icon svg,.nav-link-icon i-lucide,.nav-link-icon .lucide{width:15px;height:15px;display:block}.nav-link-badge,.dropdown-item-badge,.action-badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:9999px;font-size:.625rem;font-weight:600;line-height:1.2}.nav-link-badge.badge-primary,.dropdown-item-badge.badge-primary,.action-badge.badge-primary{background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2563eb))}.nav-link-badge.badge-secondary,.dropdown-item-badge.badge-secondary,.action-badge.badge-secondary{background:#64748b1f;color:var(--text-muted, #64748b)}.nav-link-badge.badge-success,.dropdown-item-badge.badge-success,.action-badge.badge-success{background:#22c55e1f;color:#16a34a}.nav-link-badge.badge-warning,.dropdown-item-badge.badge-warning,.action-badge.badge-warning{background:#eab3081f;color:#ca8a04}.nav-link-badge.badge-danger,.dropdown-item-badge.badge-danger,.action-badge.badge-danger{background:#ef44441f;color:#dc2626}.nav-link-badge.badge-subtle,.dropdown-item-badge.badge-subtle,.action-badge.badge-subtle{background:#0000000d;color:var(--talos-top-nav-muted)}.top-nav-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;max-width:320px;background:var(--talos-top-nav-dropdown-bg);border:1px solid var(--talos-top-nav-dropdown-border);border-radius:10px;box-shadow:var(--talos-top-nav-dropdown-shadow);padding:6px;z-index:1050;animation:dropdownFadeSlide .18s cubic-bezier(.16,1,.3,1);box-sizing:border-box}.top-nav-dropdown-menu.user-dropdown-menu{right:0;left:auto;min-width:240px}@keyframes dropdownFadeSlide{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.dropdown-divider{height:1px;background:var(--talos-top-nav-dropdown-border);margin:4px 0}.dropdown-menu-item{width:100%;display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;border:none;background:transparent;color:var(--talos-top-nav-text);font-size:.8125rem;font-weight:500;text-align:left;cursor:pointer;transition:all .12s ease;box-sizing:border-box}.dropdown-menu-item:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-primary-color, var(--talos-top-nav-text))}.dropdown-menu-item.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.dropdown-menu-item[disabled]{opacity:.45;cursor:not-allowed}.dropdown-menu-item:focus-visible{outline:none;background:var(--talos-top-nav-hover-bg)}.dropdown-item-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-top-nav-muted);flex-shrink:0;width:16px;height:16px}.dropdown-item-icon svg,.dropdown-item-icon i-lucide,.dropdown-item-icon .lucide{width:15px;height:15px;display:block}.dropdown-item-content{display:flex;flex-direction:column;flex:1;min-width:0}.dropdown-item-label{font-weight:500;color:var(--talos-top-nav-text)}.dropdown-item-desc{font-size:.6875rem;color:var(--talos-top-nav-muted);margin-top:1px}.search-bar-wrapper{display:flex;align-items:center;position:relative;flex:0 1 180px;min-width:100px;max-width:220px}.search-icon{position:absolute;left:9px;color:var(--talos-top-nav-muted);pointer-events:none}.top-nav-search-input{width:100%;height:30px;padding:0 8px 0 28px;border-radius:6px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text);font-size:.75rem;transition:all .15s ease}.top-nav-search-input::placeholder{color:var(--talos-top-nav-muted)}.top-nav-search-input:focus{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));background:var(--talos-top-nav-dropdown-bg);box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.top-nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.actions-group{display:flex;align-items:center;gap:3px}.action-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;gap:6px}.action-btn.has-label{width:auto;padding:0 10px;font-size:.8125rem;font-weight:500}.action-btn .action-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.action-btn .action-btn-icon svg,.action-btn .action-btn-icon i-lucide,.action-btn .action-btn-icon .lucide{width:15px;height:15px;display:block}.action-btn .action-btn-label{font-size:.8125rem;font-weight:500;white-space:nowrap}.action-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.action-btn[disabled]{opacity:.5;cursor:not-allowed}.action-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.action-btn .action-badge{position:absolute;top:2px;right:2px;padding:1px 4px;font-size:.5625rem}.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;position:relative}.theme-toggle-btn talos-theme-morph-icon,.theme-toggle-btn svg{width:16px;height:16px;display:block}.theme-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.theme-toggle-btn:active{transform:scale(.9)}.theme-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-container{position:relative;display:inline-flex;flex-shrink:0}.user-profile-btn{display:flex;align-items:center;gap:7px;padding:3px 7px 3px 3px;border-radius:9999px;border:1px solid var(--talos-top-nav-border);background:transparent;cursor:pointer;transition:all .15s ease}.user-profile-btn:hover{background:var(--talos-top-nav-hover-bg)}.user-profile-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-btn .user-dropdown-chevron{color:var(--talos-top-nav-muted);transition:transform .2s ease}.user-profile-container.is-open .user-dropdown-chevron{transform:rotate(180deg)}.user-avatar-circle{width:26px;height:26px;border-radius:50%;background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2592eb));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;overflow:hidden;flex-shrink:0}.user-avatar-img{width:100%;height:100%;object-fit:cover}.user-profile-meta{display:flex;flex-direction:column;text-align:left;line-height:1.15}.user-name-text{font-size:.75rem;font-weight:600;color:var(--talos-top-nav-text);white-space:nowrap}.user-role-text{font-size:.625rem;color:var(--talos-top-nav-muted);white-space:nowrap}.user-menu-header{padding:8px 10px 6px;display:flex;flex-direction:column;gap:2px}.user-menu-header-name{font-size:.8125rem;font-weight:600;color:var(--talos-top-nav-text)}.user-menu-header-email{font-size:.6875rem;color:var(--talos-top-nav-muted)}@container topnav (max-width: 840px){.brand-subtitle,.user-role-text{display:none}}@container topnav (max-width: 640px){.brand-badge,.user-profile-meta{display:none}.search-bar-wrapper{max-width:130px}.action-btn.has-label .action-btn-label{display:none}.nav-links-bar{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}.nav-links-bar::-webkit-scrollbar{display:none}}@container topnav (max-width: 480px){.search-bar-wrapper{display:none}.brand-title{font-size:.9375rem}}@media(max-width:480px){.top-nav-dropdown-menu{max-width:calc(100vw - 24px);right:0;left:auto}}.top-nav-mobile-hamburger-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);cursor:pointer;transition:all .15s ease;flex-shrink:0}.top-nav-mobile-hamburger-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-hamburger-btn.is-open{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-sheet{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;width:100vw;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);background:var(--talos-top-nav-bg);border-bottom:1px solid var(--talos-top-nav-border);box-shadow:0 20px 35px -5px #00000040;z-index:95;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.875rem;overflow-y:auto;box-sizing:border-box;animation:topNavSheetSlideDown .25s cubic-bezier(.16,1,.3,1)}@keyframes topNavSheetSlideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.top-nav-mobile-backdrop{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;bottom:0;background:#0f172a73;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:94;animation:fadeIn .2s ease-out}.mobile-nav-links-list{display:flex;flex-direction:column;gap:.375rem;width:100%}.mobile-nav-link-btn{display:flex;align-items:center;width:100%;height:42px;padding:0 1rem;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .15s ease;gap:.75rem;text-align:left;box-sizing:border-box}.mobile-nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.mobile-nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-subtle-border, rgba(37, 99, 235, .25))}.mobile-nav-link-btn .nav-link-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.mobile-nav-link-btn .nav-link-label{flex:1}.mobile-sheet-actions{display:flex;align-items:center;gap:.75rem;padding-top:.75rem;border-top:1px solid var(--talos-top-nav-border);flex-wrap:wrap}.mobile-sheet-actions .mobile-action-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s ease}.mobile-sheet-actions .mobile-action-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}@media(max-width:768px){.top-nav-center .nav-links-bar{display:none}.top-nav-mobile-hamburger-btn{display:inline-flex}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucidePanelLeftOpen, selector: "svg[lucidePanelLeftOpen], svg[lucideSidebarOpen]" }, { kind: "component", type: LucidePanelLeftClose, selector: "svg[lucidePanelLeftClose], svg[lucideSidebarClose]" }, { kind: "component", type: LucideSearch, selector: "svg[lucideSearch]" }, { kind: "component", type: LucideMenu, selector: "svg[lucideMenu]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "component", type: TalosThemeMorphIconComponent, selector: "talos-theme-morph-icon", inputs: ["mode", "size"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TopNavComponent, isStandalone: true, selector: "talos-top-nav, [talos-top-nav], [talosTopNav]", inputs: { brandTitle: { classPropertyName: "brandTitle", publicName: "brandTitle", isSignal: true, isRequired: false, transformFunction: null }, brandSubtitle: { classPropertyName: "brandSubtitle", publicName: "brandSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandBadge: { classPropertyName: "brandBadge", publicName: "brandBadge", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, brandRoute: { classPropertyName: "brandRoute", publicName: "brandRoute", isSignal: true, isRequired: false, transformFunction: null }, brandUrl: { classPropertyName: "brandUrl", publicName: "brandUrl", isSignal: true, isRequired: false, transformFunction: null }, showBrand: { classPropertyName: "showBrand", publicName: "showBrand", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, logoComponent: { classPropertyName: "logoComponent", publicName: "logoComponent", isSignal: true, isRequired: false, transformFunction: null }, logoComponentInputs: { classPropertyName: "logoComponentInputs", publicName: "logoComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, logoTemplate: { classPropertyName: "logoTemplate", publicName: "logoTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showThemeToggle: { classPropertyName: "showThemeToggle", publicName: "showThemeToggle", isSignal: true, isRequired: false, transformFunction: null }, themeMode: { classPropertyName: "themeMode", publicName: "themeMode", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, glass: { classPropertyName: "glass", publicName: "glass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leftComponent: { classPropertyName: "leftComponent", publicName: "leftComponent", isSignal: true, isRequired: false, transformFunction: null }, leftComponentInputs: { classPropertyName: "leftComponentInputs", publicName: "leftComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, leftTemplate: { classPropertyName: "leftTemplate", publicName: "leftTemplate", isSignal: true, isRequired: false, transformFunction: null }, centerComponent: { classPropertyName: "centerComponent", publicName: "centerComponent", isSignal: true, isRequired: false, transformFunction: null }, centerComponentInputs: { classPropertyName: "centerComponentInputs", publicName: "centerComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, centerTemplate: { classPropertyName: "centerTemplate", publicName: "centerTemplate", isSignal: true, isRequired: false, transformFunction: null }, rightComponent: { classPropertyName: "rightComponent", publicName: "rightComponent", isSignal: true, isRequired: false, transformFunction: null }, rightComponentInputs: { classPropertyName: "rightComponentInputs", publicName: "rightComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, rightTemplate: { classPropertyName: "rightTemplate", publicName: "rightTemplate", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemId: "activeItemIdChange", sidebarCollapsed: "sidebarCollapsedChange", itemClick: "itemClick", actionClick: "actionClick", userClick: "userClick", themeToggle: "themeToggle", themeModeChange: "themeModeChange", searchChange: "searchChange", sidebarToggleClick: "sidebarToggleClick", brandClick: "brandClick" }, host: { attributes: { "role": "banner" }, listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "closeAllDropdowns()" }, properties: { "class.is-sticky": "sticky()", "class.is-glass": "glass()", "class.is-bordered": "bordered()", "class.size-sm": "size() === \"sm\"", "class.size-md": "size() === \"md\"", "class.size-lg": "size() === \"lg\"", "class.dark-theme": "isDarkMode()", "attr.data-theme": "isDarkMode() ? \"dark\" : \"light\"" }, classAttribute: "talos-top-nav-host" }, ngImport: i0, template: "<div class=\"talos-top-nav-inner\">\n  <!-- Left Section: Toggle, Brand, Logo -->\n  <div class=\"top-nav-left\">\n    @if (leftComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: leftComponentInputs()\" />\n    } @else if (leftTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-left]\">\n      <!-- Sidebar Collapse Toggle Button -->\n      @if (showSidebarToggle()) {\n      <ng-content select=\"[top-nav-toggle]\">\n        <button type=\"button\" class=\"nav-toggle-btn\" (click)=\"toggleSidebar()\"\n          [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\">\n          @if (isSidebarCollapsed()) {\n          <svg lucidePanelLeftOpen [size]=\"18\"></svg>\n          } @else {\n          <svg lucidePanelLeftClose [size]=\"18\"></svg>\n          }\n        </button>\n      </ng-content>\n      }\n\n      <!-- Brand / Logo Area -->\n      @if (showLogo() || showBrand()) {\n      <div class=\"brand-container\" (click)=\"handleBrandClick()\"\n        [attr.tabindex]=\"(brandRoute() || brandUrl()) ? 0 : null\"\n        [attr.role]=\"(brandRoute() || brandUrl()) ? 'link' : null\">\n        @if (showLogo()) {\n        <div class=\"brand-logo-wrapper\">\n          @if (logoComponent(); as comp) {\n          <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n          } @else if (logoTemplate(); as tmpl) {\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n          <ng-content select=\"[top-nav-logo]\" />\n          }\n        </div>\n        }\n\n        @if (showBrand()) {\n        <ng-content select=\"[top-nav-brand]\">\n          <div class=\"brand-text-group\">\n            <div class=\"brand-title-row\">\n              @if (brandIcon(); as iconComp) {\n              <span class=\"brand-icon\">\n                <ng-container *ngComponentOutlet=\"iconComp\" />\n              </span>\n              }\n              <span class=\"brand-title\">{{ brandTitle() }}</span>\n              @if (brandBadge(); as badge) {\n              <span class=\"brand-badge\">{{ badge }}</span>\n              }\n            </div>\n            @if (brandSubtitle(); as subtitle) {\n            <span class=\"brand-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </ng-content>\n        }\n      </div>\n      }\n    </ng-content>\n    }\n  </div>\n\n  <!-- Center Section: Navigation Links & Search -->\n  <div class=\"top-nav-center\">\n    @if (centerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: centerComponentInputs()\" />\n    } @else if (centerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-center]\">\n      <!-- Direct Navigation Items -->\n      @if (items().length > 0) {\n      <nav class=\"nav-links-bar\" aria-label=\"Main Navigation\">\n        @for (item of items(); track item.id || item.label) {\n        @if (item.children && item.children.length > 0) {\n        <!-- Item with Dropdown Menu -->\n        <div class=\"nav-item-dropdown-container\" [class.is-open]=\"openDropdownId() === (item.id || item.label)\">\n          <button type=\"button\" class=\"nav-link-btn has-dropdown\"\n            [class.is-active]=\"activeItemId() === item.id || !!item.active\" [disabled]=\"item.disabled ?? false\"\n            [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"openDropdownId() === (item.id || item.label)\"\n            (click)=\"toggleDropdown(item.id || item.label, $event)\">\n            @if (item.icon; as itemIcon) {\n            <span class=\"nav-link-icon\">\n              <ng-container *ngComponentOutlet=\"itemIcon\" />\n            </span>\n            }\n            <span class=\"nav-link-label\">{{ item.label }}</span>\n            @if (item.badge) {\n            <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n              {{ item.badge }}\n            </span>\n            }\n            <svg lucideChevronDown class=\"dropdown-chevron\" [size]=\"14\"></svg>\n          </button>\n\n          <!-- Dropdown Panel -->\n          @if (openDropdownId() === (item.id || item.label)) {\n          <div class=\"top-nav-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n            @if (item.dropdownTemplate; as customTmpl) {\n            <ng-container *ngTemplateOutlet=\"customTmpl\" />\n            } @else {\n            <ul class=\"dropdown-menu-list\">\n              @for (child of item.children; track child.id || child.label) {\n              @if (child.divider) {\n              <li class=\"dropdown-divider\" role=\"separator\"></li>\n              }\n              <li role=\"none\">\n                <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                  [class.is-active]=\"activeItemId() === child.id || !!child.active\" [disabled]=\"child.disabled ?? false\"\n                  (click)=\"selectChildItem(child, item, $event)\">\n                  @if (child.icon; as childIcon) {\n                  <span class=\"dropdown-item-icon\">\n                    <ng-container *ngComponentOutlet=\"childIcon\" />\n                  </span>\n                  }\n                  <div class=\"dropdown-item-content\">\n                    <span class=\"dropdown-item-label\">{{ child.label }}</span>\n                    @if (child.description) {\n                    <span class=\"dropdown-item-desc\">{{ child.description }}</span>\n                    }\n                  </div>\n                  @if (child.badge) {\n                  <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (child.badgeVariant ?? 'subtle')\">\n                    {{ child.badge }}\n                  </span>\n                  }\n                </button>\n              </li>\n              }\n            </ul>\n            }\n          </div>\n          }\n        </div>\n        } @else {\n        <!-- Standard Single Nav Link -->\n        <button type=\"button\" class=\"nav-link-btn\" [attr.data-item-id]=\"item.id\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n          [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event)\">\n          @if (item.icon; as itemIcon) {\n          <span class=\"nav-link-icon\">\n            <ng-container *ngComponentOutlet=\"itemIcon\" />\n          </span>\n          }\n          <span class=\"nav-link-label\">{{ item.label }}</span>\n          @if (item.badge) {\n          <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n            {{ item.badge }}\n          </span>\n          }\n        </button>\n        }\n        }\n      </nav>\n      }\n\n      <!-- Search Input Slot -->\n      @if (showSearch()) {\n      <div class=\"search-bar-wrapper\">\n        <svg lucideSearch class=\"search-icon\" [size]=\"15\"></svg>\n        <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n          (input)=\"onSearchInput($event)\" />\n      </div>\n      }\n\n      <!-- Custom projected center content -->\n      <ng-content select=\"[top-nav-links]\" />\n      <ng-content />\n    </ng-content>\n    }\n  </div>\n\n  <!-- Right Section: Actions, Theme Toggle, User Profile -->\n  <div class=\"top-nav-right\">\n    @if (rightComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: rightComponentInputs()\" />\n    } @else if (rightTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-right]\">\n      <!-- Action Buttons -->\n      @if (actions().length > 0) {\n      <div class=\"actions-group\">\n        @for (action of actions(); track action.id || action.label || $index) {\n        <button type=\"button\" class=\"action-btn\" [class.has-label]=\"action.showLabel && !!action.label\"\n          [disabled]=\"action.disabled ?? false\" [attr.aria-label]=\"action.label || 'Action'\"\n          [talosTooltip]=\"action.showLabel ? '' : (action.label || '')\" (click)=\"handleActionClick(action, $event)\">\n          @if (action.icon; as actIcon) {\n          <span class=\"action-btn-icon\">\n            <ng-container *ngComponentOutlet=\"actIcon\" />\n          </span>\n          }\n          @if (action.showLabel && action.label) {\n          <span class=\"action-btn-label\">{{ action.label }}</span>\n          }\n          @if (action.badge) {\n          <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n            {{ action.badge }}\n          </span>\n          }\n        </button>\n        }\n      </div>\n      }\n\n      <ng-content select=\"[top-nav-actions]\" />\n\n      <!-- 3-Way System/Light/Dark Theme Toggle -->\n      @if (showThemeToggle()) {\n      <button type=\"button\" class=\"theme-toggle-btn\" (click)=\"handleThemeToggle()\"\n        [attr.aria-label]=\"themeToggleAriaLabel()\" [talosTooltip]=\"themeToggleTooltip()\">\n        <talos-theme-morph-icon [mode]=\"effectiveThemeMode()\" [size]=\"16\" />\n      </button>\n      }\n\n      <!-- User Profile & User Dropdown Menu -->\n      @if (userProfile(); as user) {\n      <div class=\"user-profile-container\" [class.is-open]=\"isUserDropdownOpen()\">\n        <button type=\"button\" class=\"user-profile-btn\" [attr.aria-haspopup]=\"'true'\"\n          [attr.aria-expanded]=\"isUserDropdownOpen()\" (click)=\"toggleUserDropdown($event)\">\n          <div class=\"user-avatar-circle\">\n            @if (user.avatarUrl) {\n            <img [src]=\"user.avatarUrl\" [alt]=\"user.name\" class=\"user-avatar-img\" />\n            } @else {\n            <span class=\"avatar-initials\">{{ user.name.charAt(0) }}</span>\n            }\n          </div>\n          <div class=\"user-profile-meta\">\n            <span class=\"user-name-text\">{{ user.name }}</span>\n            @if (user.role) {\n            <span class=\"user-role-text\">{{ user.role }}</span>\n            }\n          </div>\n          @if (user.menuItems && user.menuItems.length > 0) {\n          <svg lucideChevronDown class=\"user-dropdown-chevron\" [size]=\"13\"></svg>\n          }\n        </button>\n\n        <!-- User Dropdown Panel -->\n        @if (isUserDropdownOpen() && user.menuItems && user.menuItems.length > 0) {\n        <div class=\"top-nav-dropdown-menu user-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n          <div class=\"user-menu-header\">\n            <span class=\"user-menu-header-name\">{{ user.name }}</span>\n            @if (user.email) {\n            <span class=\"user-menu-header-email\">{{ user.email }}</span>\n            }\n          </div>\n          <div class=\"dropdown-divider\" role=\"separator\"></div>\n          <ul class=\"dropdown-menu-list\">\n            @for (menuItem of user.menuItems; track menuItem.id || menuItem.label) {\n            @if (menuItem.divider) {\n            <li class=\"dropdown-divider\" role=\"separator\"></li>\n            }\n            <li role=\"none\">\n              <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                [class.is-active]=\"activeItemId() === menuItem.id || !!menuItem.active\"\n                [disabled]=\"menuItem.disabled ?? false\" (click)=\"selectItem(menuItem, $event)\">\n                @if (menuItem.icon; as menuIcon) {\n                <span class=\"dropdown-item-icon\">\n                  <ng-container *ngComponentOutlet=\"menuIcon\" />\n                </span>\n                }\n                <div class=\"dropdown-item-content\">\n                  <span class=\"dropdown-item-label\">{{ menuItem.label }}</span>\n                  @if (menuItem.description) {\n                  <span class=\"dropdown-item-desc\">{{ menuItem.description }}</span>\n                  }\n                </div>\n                @if (menuItem.badge) {\n                <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (menuItem.badgeVariant ?? 'subtle')\">\n                  {{ menuItem.badge }}\n                </span>\n                }\n              </button>\n            </li>\n            }\n          </ul>\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Mobile Top Nav Hamburger Toggle Button -->\n      @if (items().length > 0 || actions().length > 0) {\n      <button type=\"button\" class=\"top-nav-mobile-hamburger-btn\" (click)=\"toggleMobileMenu()\"\n        [class.is-open]=\"isMobileMenuOpen()\" [attr.aria-expanded]=\"isMobileMenuOpen()\"\n        [attr.aria-label]=\"isMobileMenuOpen() ? 'Close navigation menu' : 'Open navigation menu'\">\n        @if (isMobileMenuOpen()) {\n        <svg lucideX [size]=\"20\"></svg>\n        } @else {\n        <svg lucideMenu [size]=\"20\"></svg>\n        }\n      </button>\n      }\n\n      <ng-content select=\"[top-nav-user]\" />\n    </ng-content>\n    }\n  </div>\n</div>\n\n<!-- Mobile Top Navigation Expanding Sheet (Expands Downwards from Top) -->\n@if (isMobileMenuOpen()) {\n<div class=\"top-nav-mobile-sheet\" role=\"navigation\" aria-label=\"Mobile Navigation\" (click)=\"$event.stopPropagation()\">\n  @if (showSearch()) {\n  <div class=\"mobile-search-bar\">\n    <svg lucideSearch class=\"search-icon\" [size]=\"16\"></svg>\n    <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n      (input)=\"onSearchInput($event)\" />\n  </div>\n  }\n\n  @if (items().length > 0) {\n  <nav class=\"mobile-nav-links-list\" aria-label=\"Mobile Main Navigation\">\n    @for (item of items(); track item.id || item.label) {\n    <button type=\"button\" class=\"mobile-nav-link-btn\" [attr.data-item-id]=\"item.id\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n      [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event); closeMobileMenu()\">\n      @if (item.icon; as itemIcon) {\n      <span class=\"nav-link-icon\">\n        <ng-container *ngComponentOutlet=\"itemIcon\" />\n      </span>\n      }\n      <span class=\"nav-link-label\">{{ item.label }}</span>\n      @if (item.badge) {\n      <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n        {{ item.badge }}\n      </span>\n      }\n    </button>\n    }\n  </nav>\n  }\n\n  @if (actions().length > 0) {\n  <div class=\"mobile-sheet-actions\">\n    @for (action of actions(); track action.id || action.label || $index) {\n    <button type=\"button\" class=\"mobile-action-btn\" [disabled]=\"action.disabled ?? false\"\n      (click)=\"handleActionClick(action, $event); closeMobileMenu()\">\n      @if (action.icon; as actIcon) {\n      <span class=\"action-btn-icon\">\n        <ng-container *ngComponentOutlet=\"actIcon\" />\n      </span>\n      }\n      @if (action.label) {\n      <span class=\"action-btn-label\">{{ action.label }}</span>\n      }\n      @if (action.badge) {\n      <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n        {{ action.badge }}\n      </span>\n      }\n    </button>\n    }\n  </div>\n  }\n</div>\n\n<!-- Backdrop for Top Nav Mobile Sheet -->\n<div class=\"top-nav-mobile-backdrop\" (click)=\"closeMobileMenu()\" aria-hidden=\"true\"></div>\n}", styles: [":host,talos-top-nav,.talos-top-nav-host{display:block;width:100%;box-sizing:border-box;z-index:50;position:relative;overflow:visible;container-type:inline-size;container-name:topnav;--talos-top-nav-height: 60px;--talos-top-nav-bg: var(--talos-header-bg, var(--talos-bg-surface, #ffffff));--talos-top-nav-border: var(--talos-header-border-color, var(--talos-border-default, #e2e8f0));--talos-top-nav-text: var(--talos-text-primary, #0f172a);--talos-top-nav-muted: var(--talos-text-muted, #64748b);--talos-top-nav-hover-bg: var(--talos-nav-hover-bg, rgba(0, 0, 0, .04));--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, #eff6ff);--talos-top-nav-active-text: var(--talos-primary-text, #1d4ed8);--talos-top-nav-dropdown-bg: var(--talos-bg-surface, #ffffff);--talos-top-nav-dropdown-border: var(--talos-border-default, #e2e8f0);--talos-top-nav-dropdown-shadow: var(--talos-shadow-dropdown, 0 10px 25px -5px rgba(0, 0, 0, .08))}:host.size-sm,talos-top-nav.size-sm,.talos-top-nav-host.size-sm{--talos-top-nav-height: 48px}:host.size-md,talos-top-nav.size-md,.talos-top-nav-host.size-md{--talos-top-nav-height: 60px}:host.size-lg,talos-top-nav.size-lg,.talos-top-nav-host.size-lg{--talos-top-nav-height: 72px}:host.is-sticky,talos-top-nav.is-sticky,.talos-top-nav-host.is-sticky{position:sticky;top:0;z-index:50}:host.is-bordered,talos-top-nav.is-bordered,.talos-top-nav-host.is-bordered{border-bottom:1px solid var(--talos-top-nav-border)}:host.is-glass,talos-top-nav.is-glass,.talos-top-nav-host.is-glass{--talos-top-nav-bg: rgba(255, 255, 255, .85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:root[data-theme=dark] talos-top-nav,:root.dark talos-top-nav,[data-theme=dark] talos-top-nav,[data-mode=dark] talos-top-nav,.dark talos-top-nav,.dark-theme talos-top-nav{--talos-top-nav-bg: var(--talos-header-bg, #090d16);--talos-top-nav-border: var(--talos-header-border-color, rgba(255, 255, 255, .08));--talos-top-nav-text: #f8fafc;--talos-top-nav-muted: #94a3b8;--talos-top-nav-hover-bg: rgba(255, 255, 255, .06);--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));--talos-top-nav-active-text: #ffffff;--talos-top-nav-dropdown-bg: #0f172a;--talos-top-nav-dropdown-border: rgba(255, 255, 255, .1);--talos-top-nav-dropdown-shadow: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08)}:root[data-theme=dark] :host.is-glass,:root.dark :host.is-glass,[data-theme=dark] :host.is-glass,[data-mode=dark] :host.is-glass,.dark :host.is-glass,.dark-theme :host.is-glass,:root[data-theme=dark] talos-top-nav.is-glass,:root.dark talos-top-nav.is-glass,[data-theme=dark] talos-top-nav.is-glass,[data-mode=dark] talos-top-nav.is-glass,.dark talos-top-nav.is-glass,.dark-theme talos-top-nav.is-glass{--talos-top-nav-bg: rgba(9, 13, 22, .85)}.talos-top-nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--talos-top-nav-height);padding:0 20px;background:var(--talos-top-nav-bg);box-sizing:border-box;gap:12px;position:relative;overflow:visible}@media(max-width:640px){.talos-top-nav-inner{padding:0 10px;gap:6px}}.top-nav-left{display:flex;align-items:center;gap:10px;flex-shrink:0}.nav-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0}.nav-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.brand-container{display:flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer}.brand-logo-wrapper{display:inline-flex;align-items:center;justify-content:center}.brand-text-group{display:flex;flex-direction:column;line-height:1.2}.brand-title-row{display:flex;align-items:center;gap:6px}.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff)));color:var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb)));border:1px solid var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2));flex-shrink:0;transition:all .2s ease}.brand-icon svg,.brand-icon i-lucide,.brand-icon .lucide{width:15px;height:15px;display:block}.brand-title{font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:var(--talos-top-nav-text);white-space:nowrap}.brand-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:6px;font-size:.625rem;font-weight:600;letter-spacing:.02em;background:var(--talos-top-nav-brand-badge-bg, var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff))));color:var(--talos-top-nav-brand-badge-color, var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb))));border:1px solid var(--talos-top-nav-brand-badge-border, var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2)));white-space:nowrap}.brand-subtitle{font-size:.6875rem;color:var(--talos-top-nav-muted);white-space:nowrap}.top-nav-center{display:flex;align-items:center;gap:10px;flex:1;min-width:0;justify-content:flex-start;overflow:visible;position:relative}.nav-links-bar{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;flex-shrink:0;overflow:visible;position:relative}.nav-item-dropdown-container{position:relative;display:inline-flex;overflow:visible}.nav-link-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;height:32px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;text-decoration:none;flex-shrink:0}.nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.nav-link-btn[disabled]{opacity:.5;cursor:not-allowed}.nav-link-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.nav-link-btn .dropdown-chevron{transition:transform .2s ease;opacity:.7}.nav-link-btn.has-dropdown{padding-right:6px}.nav-item-dropdown-container.is-open .nav-link-btn .dropdown-chevron{transform:rotate(180deg)}.nav-link-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.nav-link-icon svg,.nav-link-icon i-lucide,.nav-link-icon .lucide{width:15px;height:15px;display:block}.nav-link-badge,.dropdown-item-badge,.action-badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:9999px;font-size:.625rem;font-weight:600;line-height:1.2}.nav-link-badge.badge-primary,.dropdown-item-badge.badge-primary,.action-badge.badge-primary{background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2563eb))}.nav-link-badge.badge-secondary,.dropdown-item-badge.badge-secondary,.action-badge.badge-secondary{background:#64748b1f;color:var(--text-muted, #64748b)}.nav-link-badge.badge-success,.dropdown-item-badge.badge-success,.action-badge.badge-success{background:#22c55e1f;color:#16a34a}.nav-link-badge.badge-warning,.dropdown-item-badge.badge-warning,.action-badge.badge-warning{background:#eab3081f;color:#ca8a04}.nav-link-badge.badge-danger,.dropdown-item-badge.badge-danger,.action-badge.badge-danger{background:#ef44441f;color:#dc2626}.nav-link-badge.badge-subtle,.dropdown-item-badge.badge-subtle,.action-badge.badge-subtle{background:#0000000d;color:var(--talos-top-nav-muted)}.top-nav-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;max-width:320px;background:var(--talos-top-nav-dropdown-bg);border:1px solid var(--talos-top-nav-dropdown-border);border-radius:10px;box-shadow:var(--talos-top-nav-dropdown-shadow);padding:6px;z-index:1050;animation:dropdownFadeSlide .18s cubic-bezier(.16,1,.3,1);box-sizing:border-box}.top-nav-dropdown-menu.user-dropdown-menu{right:0;left:auto;min-width:240px}@keyframes dropdownFadeSlide{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.dropdown-divider{height:1px;background:var(--talos-top-nav-dropdown-border);margin:4px 0}.dropdown-menu-item{width:100%;display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;border:none;background:transparent;color:var(--talos-top-nav-text);font-size:.8125rem;font-weight:500;text-align:left;cursor:pointer;transition:all .12s ease;box-sizing:border-box}.dropdown-menu-item:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-primary-color, var(--talos-top-nav-text))}.dropdown-menu-item.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.dropdown-menu-item[disabled]{opacity:.45;cursor:not-allowed}.dropdown-menu-item:focus-visible{outline:none;background:var(--talos-top-nav-hover-bg)}.dropdown-item-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-top-nav-muted);flex-shrink:0;width:16px;height:16px}.dropdown-item-icon svg,.dropdown-item-icon i-lucide,.dropdown-item-icon .lucide{width:15px;height:15px;display:block}.dropdown-item-content{display:flex;flex-direction:column;flex:1;min-width:0}.dropdown-item-label{font-weight:500;color:var(--talos-top-nav-text)}.dropdown-item-desc{font-size:.6875rem;color:var(--talos-top-nav-muted);margin-top:1px}.search-bar-wrapper{display:flex;align-items:center;position:relative;flex:0 1 180px;min-width:100px;max-width:220px}.search-icon{position:absolute;left:9px;color:var(--talos-top-nav-muted);pointer-events:none}.top-nav-search-input{width:100%;height:30px;padding:0 8px 0 28px;border-radius:6px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text);font-size:.75rem;transition:all .15s ease}.top-nav-search-input::placeholder{color:var(--talos-top-nav-muted)}.top-nav-search-input:focus{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));background:var(--talos-top-nav-dropdown-bg);box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.top-nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.actions-group{display:flex;align-items:center;gap:3px}.action-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;gap:6px}.action-btn.has-label{width:auto;padding:0 10px;font-size:.8125rem;font-weight:500}.action-btn .action-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.action-btn .action-btn-icon svg,.action-btn .action-btn-icon i-lucide,.action-btn .action-btn-icon .lucide{width:15px;height:15px;display:block}.action-btn .action-btn-label{font-size:.8125rem;font-weight:500;white-space:nowrap}.action-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.action-btn[disabled]{opacity:.5;cursor:not-allowed}.action-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.action-btn .action-badge{position:absolute;top:2px;right:2px;padding:1px 4px;font-size:.5625rem}.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;position:relative}.theme-toggle-btn talos-theme-morph-icon,.theme-toggle-btn svg{width:16px;height:16px;display:block}.theme-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.theme-toggle-btn:active{transform:scale(.9)}.theme-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-container{position:relative;display:inline-flex;flex-shrink:0}.user-profile-btn{display:flex;align-items:center;gap:7px;padding:3px 7px 3px 3px;border-radius:9999px;border:1px solid var(--talos-top-nav-border);background:transparent;cursor:pointer;transition:all .15s ease}.user-profile-btn:hover{background:var(--talos-top-nav-hover-bg)}.user-profile-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-btn .user-dropdown-chevron{color:var(--talos-top-nav-muted);transition:transform .2s ease}.user-profile-container.is-open .user-dropdown-chevron{transform:rotate(180deg)}.user-avatar-circle{width:26px;height:26px;border-radius:50%;background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2592eb));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;overflow:hidden;flex-shrink:0}.user-avatar-img{width:100%;height:100%;object-fit:cover}.user-profile-meta{display:flex;flex-direction:column;text-align:left;line-height:1.15}.user-name-text{font-size:.75rem;font-weight:600;color:var(--talos-top-nav-text);white-space:nowrap}.user-role-text{font-size:.625rem;color:var(--talos-top-nav-muted);white-space:nowrap}.user-menu-header{padding:8px 10px 6px;display:flex;flex-direction:column;gap:2px}.user-menu-header-name{font-size:.8125rem;font-weight:600;color:var(--talos-top-nav-text)}.user-menu-header-email{font-size:.6875rem;color:var(--talos-top-nav-muted)}@container topnav (max-width: 840px){.brand-subtitle,.user-role-text{display:none}}@container topnav (max-width: 640px){.brand-badge,.user-profile-meta{display:none}.search-bar-wrapper{max-width:130px}.action-btn.has-label .action-btn-label{display:none}.nav-links-bar{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}.nav-links-bar::-webkit-scrollbar{display:none}}@container topnav (max-width: 480px){.search-bar-wrapper{display:none}.brand-title{font-size:.9375rem}}@media(max-width:480px){.top-nav-dropdown-menu{max-width:calc(100vw - 24px);right:0;left:auto}}.top-nav-mobile-hamburger-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);cursor:pointer;transition:all .15s ease;flex-shrink:0}.top-nav-mobile-hamburger-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-hamburger-btn.is-open{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-sheet{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;width:100vw;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);background:var(--talos-top-nav-bg);border-bottom:1px solid var(--talos-top-nav-border);box-shadow:0 20px 35px -5px #00000040;z-index:95;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.875rem;overflow-y:auto;box-sizing:border-box;animation:topNavSheetSlideDown .25s cubic-bezier(.16,1,.3,1)}@keyframes topNavSheetSlideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.top-nav-mobile-backdrop{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;bottom:0;background:#0f172a73;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:94;animation:fadeIn .2s ease-out}.mobile-nav-links-list{display:flex;flex-direction:column;gap:.375rem;width:100%}.mobile-nav-link-btn{display:flex;align-items:center;width:100%;height:42px;padding:0 1rem;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .15s ease;gap:.75rem;text-align:left;box-sizing:border-box}.mobile-nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.mobile-nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-subtle-border, rgba(37, 99, 235, .25))}.mobile-nav-link-btn .nav-link-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.mobile-nav-link-btn .nav-link-label{flex:1}.mobile-sheet-actions{display:flex;align-items:center;gap:.75rem;padding-top:.75rem;border-top:1px solid var(--talos-top-nav-border);flex-wrap:wrap}.mobile-sheet-actions .mobile-action-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s ease}.mobile-sheet-actions .mobile-action-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}@media(max-width:768px){.top-nav-center .nav-links-bar{display:none}.top-nav-mobile-hamburger-btn{display:inline-flex}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucidePanelLeftOpen, selector: "svg[lucidePanelLeftOpen], svg[lucideSidebarOpen]" }, { kind: "component", type: LucidePanelLeftClose, selector: "svg[lucidePanelLeftClose], svg[lucideSidebarClose]" }, { kind: "component", type: LucideSearch, selector: "svg[lucideSearch]" }, { kind: "component", type: LucideMenu, selector: "svg[lucideMenu]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "component", type: TalosThemeMorphIconComponent, selector: "talos-theme-morph-icon", inputs: ["mode", "size"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TopNavComponent, decorators: [{
             type: Component,
@@ -846,7 +846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         'role': 'banner',
                         '(document:click)': 'onDocumentClick($event)',
                         '(document:keydown.escape)': 'closeAllDropdowns()'
-                    }, template: "<div class=\"talos-top-nav-inner\">\n  <!-- Left Section: Toggle, Brand, Logo -->\n  <div class=\"top-nav-left\">\n    @if (leftComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: leftComponentInputs()\" />\n    } @else if (leftTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-left]\">\n      <!-- Sidebar Collapse Toggle Button -->\n      @if (showSidebarToggle()) {\n      <ng-content select=\"[top-nav-toggle]\">\n        <button type=\"button\" class=\"nav-toggle-btn\" (click)=\"toggleSidebar()\"\n          [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\">\n          @if (isSidebarCollapsed()) {\n          <svg lucidePanelLeftOpen [size]=\"18\"></svg>\n          } @else {\n          <svg lucidePanelLeftClose [size]=\"18\"></svg>\n          }\n        </button>\n      </ng-content>\n      }\n\n      <!-- Brand / Logo Area -->\n      @if (showLogo() || showBrand()) {\n      <div class=\"brand-container\" (click)=\"handleBrandClick()\"\n        [attr.tabindex]=\"(brandRoute() || brandUrl()) ? 0 : null\"\n        [attr.role]=\"(brandRoute() || brandUrl()) ? 'link' : null\">\n        @if (showLogo()) {\n        <div class=\"brand-logo-wrapper\">\n          @if (logoComponent(); as comp) {\n          <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n          } @else if (logoTemplate(); as tmpl) {\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n          <ng-content select=\"[top-nav-logo]\" />\n          }\n        </div>\n        }\n\n        @if (showBrand()) {\n        <ng-content select=\"[top-nav-brand]\">\n          <div class=\"brand-text-group\">\n            <div class=\"brand-title-row\">\n              @if (brandIcon(); as iconComp) {\n              <span class=\"brand-icon\">\n                <ng-container *ngComponentOutlet=\"iconComp\" />\n              </span>\n              }\n              <span class=\"brand-title\">{{ brandTitle() }}</span>\n              @if (brandBadge(); as badge) {\n              <span class=\"brand-badge\">{{ badge }}</span>\n              }\n            </div>\n            @if (brandSubtitle(); as subtitle) {\n            <span class=\"brand-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </ng-content>\n        }\n      </div>\n      }\n    </ng-content>\n    }\n  </div>\n\n  <!-- Center Section: Navigation Links & Search -->\n  <div class=\"top-nav-center\">\n    @if (centerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: centerComponentInputs()\" />\n    } @else if (centerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-center]\">\n      <!-- Direct Navigation Items -->\n      @if (items().length > 0) {\n      <nav class=\"nav-links-bar\" aria-label=\"Main Navigation\">\n        @for (item of items(); track item.id || item.label) {\n        @if (item.children && item.children.length > 0) {\n        <!-- Item with Dropdown Menu -->\n        <div class=\"nav-item-dropdown-container\" [class.is-open]=\"openDropdownId() === (item.id || item.label)\">\n          <button type=\"button\" class=\"nav-link-btn has-dropdown\"\n            [class.is-active]=\"activeItemId() === item.id || !!item.active\" [disabled]=\"item.disabled ?? false\"\n            [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"openDropdownId() === (item.id || item.label)\"\n            (click)=\"toggleDropdown(item.id || item.label, $event)\">\n            @if (item.icon; as itemIcon) {\n            <span class=\"nav-link-icon\">\n              <ng-container *ngComponentOutlet=\"itemIcon\" />\n            </span>\n            }\n            <span class=\"nav-link-label\">{{ item.label }}</span>\n            @if (item.badge) {\n            <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n              {{ item.badge }}\n            </span>\n            }\n            <svg lucideChevronDown class=\"dropdown-chevron\" [size]=\"14\"></svg>\n          </button>\n\n          <!-- Dropdown Panel -->\n          @if (openDropdownId() === (item.id || item.label)) {\n          <div class=\"top-nav-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n            @if (item.dropdownTemplate; as customTmpl) {\n            <ng-container *ngTemplateOutlet=\"customTmpl\" />\n            } @else {\n            <ul class=\"dropdown-menu-list\">\n              @for (child of item.children; track child.id || child.label) {\n              @if (child.divider) {\n              <li class=\"dropdown-divider\" role=\"separator\"></li>\n              }\n              <li role=\"none\">\n                <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                  [class.is-active]=\"activeItemId() === child.id || !!child.active\" [disabled]=\"child.disabled ?? false\"\n                  (click)=\"selectChildItem(child, item, $event)\">\n                  @if (child.icon; as childIcon) {\n                  <span class=\"dropdown-item-icon\">\n                    <ng-container *ngComponentOutlet=\"childIcon\" />\n                  </span>\n                  }\n                  <div class=\"dropdown-item-content\">\n                    <span class=\"dropdown-item-label\">{{ child.label }}</span>\n                    @if (child.description) {\n                    <span class=\"dropdown-item-desc\">{{ child.description }}</span>\n                    }\n                  </div>\n                  @if (child.badge) {\n                  <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (child.badgeVariant ?? 'subtle')\">\n                    {{ child.badge }}\n                  </span>\n                  }\n                </button>\n              </li>\n              }\n            </ul>\n            }\n          </div>\n          }\n        </div>\n        } @else {\n        <!-- Standard Single Nav Link -->\n        <button type=\"button\" class=\"nav-link-btn\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n          [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event)\">\n          @if (item.icon; as itemIcon) {\n          <span class=\"nav-link-icon\">\n            <ng-container *ngComponentOutlet=\"itemIcon\" />\n          </span>\n          }\n          <span class=\"nav-link-label\">{{ item.label }}</span>\n          @if (item.badge) {\n          <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n            {{ item.badge }}\n          </span>\n          }\n        </button>\n        }\n        }\n      </nav>\n      }\n\n      <!-- Search Input Slot -->\n      @if (showSearch()) {\n      <div class=\"search-bar-wrapper\">\n        <svg lucideSearch class=\"search-icon\" [size]=\"15\"></svg>\n        <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n          (input)=\"onSearchInput($event)\" />\n      </div>\n      }\n\n      <!-- Custom projected center content -->\n      <ng-content select=\"[top-nav-links]\" />\n      <ng-content />\n    </ng-content>\n    }\n  </div>\n\n  <!-- Right Section: Actions, Theme Toggle, User Profile -->\n  <div class=\"top-nav-right\">\n    @if (rightComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: rightComponentInputs()\" />\n    } @else if (rightTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-right]\">\n      <!-- Action Buttons -->\n      @if (actions().length > 0) {\n      <div class=\"actions-group\">\n        @for (action of actions(); track action.id || action.label || $index) {\n        <button type=\"button\" class=\"action-btn\" [class.has-label]=\"action.showLabel && !!action.label\"\n          [disabled]=\"action.disabled ?? false\" [attr.aria-label]=\"action.label || 'Action'\"\n          [talosTooltip]=\"action.showLabel ? '' : (action.label || '')\" (click)=\"handleActionClick(action, $event)\">\n          @if (action.icon; as actIcon) {\n          <span class=\"action-btn-icon\">\n            <ng-container *ngComponentOutlet=\"actIcon\" />\n          </span>\n          }\n          @if (action.showLabel && action.label) {\n          <span class=\"action-btn-label\">{{ action.label }}</span>\n          }\n          @if (action.badge) {\n          <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n            {{ action.badge }}\n          </span>\n          }\n        </button>\n        }\n      </div>\n      }\n\n      <ng-content select=\"[top-nav-actions]\" />\n\n      <!-- 3-Way System/Light/Dark Theme Toggle -->\n      @if (showThemeToggle()) {\n      <button type=\"button\" class=\"theme-toggle-btn\" (click)=\"handleThemeToggle()\"\n        [attr.aria-label]=\"themeToggleAriaLabel()\" [talosTooltip]=\"themeToggleTooltip()\">\n        <talos-theme-morph-icon [mode]=\"effectiveThemeMode()\" [size]=\"16\" />\n      </button>\n      }\n\n      <!-- User Profile & User Dropdown Menu -->\n      @if (userProfile(); as user) {\n      <div class=\"user-profile-container\" [class.is-open]=\"isUserDropdownOpen()\">\n        <button type=\"button\" class=\"user-profile-btn\" [attr.aria-haspopup]=\"'true'\"\n          [attr.aria-expanded]=\"isUserDropdownOpen()\" (click)=\"toggleUserDropdown($event)\">\n          <div class=\"user-avatar-circle\">\n            @if (user.avatarUrl) {\n            <img [src]=\"user.avatarUrl\" [alt]=\"user.name\" class=\"user-avatar-img\" />\n            } @else {\n            <span class=\"avatar-initials\">{{ user.name.charAt(0) }}</span>\n            }\n          </div>\n          <div class=\"user-profile-meta\">\n            <span class=\"user-name-text\">{{ user.name }}</span>\n            @if (user.role) {\n            <span class=\"user-role-text\">{{ user.role }}</span>\n            }\n          </div>\n          @if (user.menuItems && user.menuItems.length > 0) {\n          <svg lucideChevronDown class=\"user-dropdown-chevron\" [size]=\"13\"></svg>\n          }\n        </button>\n\n        <!-- User Dropdown Panel -->\n        @if (isUserDropdownOpen() && user.menuItems && user.menuItems.length > 0) {\n        <div class=\"top-nav-dropdown-menu user-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n          <div class=\"user-menu-header\">\n            <span class=\"user-menu-header-name\">{{ user.name }}</span>\n            @if (user.email) {\n            <span class=\"user-menu-header-email\">{{ user.email }}</span>\n            }\n          </div>\n          <div class=\"dropdown-divider\" role=\"separator\"></div>\n          <ul class=\"dropdown-menu-list\">\n            @for (menuItem of user.menuItems; track menuItem.id || menuItem.label) {\n            @if (menuItem.divider) {\n            <li class=\"dropdown-divider\" role=\"separator\"></li>\n            }\n            <li role=\"none\">\n              <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                [class.is-active]=\"activeItemId() === menuItem.id || !!menuItem.active\"\n                [disabled]=\"menuItem.disabled ?? false\" (click)=\"selectItem(menuItem, $event)\">\n                @if (menuItem.icon; as menuIcon) {\n                <span class=\"dropdown-item-icon\">\n                  <ng-container *ngComponentOutlet=\"menuIcon\" />\n                </span>\n                }\n                <div class=\"dropdown-item-content\">\n                  <span class=\"dropdown-item-label\">{{ menuItem.label }}</span>\n                  @if (menuItem.description) {\n                  <span class=\"dropdown-item-desc\">{{ menuItem.description }}</span>\n                  }\n                </div>\n                @if (menuItem.badge) {\n                <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (menuItem.badgeVariant ?? 'subtle')\">\n                  {{ menuItem.badge }}\n                </span>\n                }\n              </button>\n            </li>\n            }\n          </ul>\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Mobile Top Nav Hamburger Toggle Button -->\n      @if (items().length > 0 || actions().length > 0) {\n      <button type=\"button\" class=\"top-nav-mobile-hamburger-btn\" (click)=\"toggleMobileMenu()\"\n        [class.is-open]=\"isMobileMenuOpen()\" [attr.aria-expanded]=\"isMobileMenuOpen()\"\n        [attr.aria-label]=\"isMobileMenuOpen() ? 'Close navigation menu' : 'Open navigation menu'\">\n        @if (isMobileMenuOpen()) {\n        <svg lucideX [size]=\"20\"></svg>\n        } @else {\n        <svg lucideMenu [size]=\"20\"></svg>\n        }\n      </button>\n      }\n\n      <ng-content select=\"[top-nav-user]\" />\n    </ng-content>\n    }\n  </div>\n</div>\n\n<!-- Mobile Top Navigation Expanding Sheet (Expands Downwards from Top) -->\n@if (isMobileMenuOpen()) {\n<div class=\"top-nav-mobile-sheet\" role=\"navigation\" aria-label=\"Mobile Navigation\" (click)=\"$event.stopPropagation()\">\n  @if (showSearch()) {\n  <div class=\"mobile-search-bar\">\n    <svg lucideSearch class=\"search-icon\" [size]=\"16\"></svg>\n    <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n      (input)=\"onSearchInput($event)\" />\n  </div>\n  }\n\n  @if (items().length > 0) {\n  <nav class=\"mobile-nav-links-list\" aria-label=\"Mobile Main Navigation\">\n    @for (item of items(); track item.id || item.label) {\n    <button type=\"button\" class=\"mobile-nav-link-btn\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n      [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event); closeMobileMenu()\">\n      @if (item.icon; as itemIcon) {\n      <span class=\"nav-link-icon\">\n        <ng-container *ngComponentOutlet=\"itemIcon\" />\n      </span>\n      }\n      <span class=\"nav-link-label\">{{ item.label }}</span>\n      @if (item.badge) {\n      <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n        {{ item.badge }}\n      </span>\n      }\n    </button>\n    }\n  </nav>\n  }\n\n  @if (actions().length > 0) {\n  <div class=\"mobile-sheet-actions\">\n    @for (action of actions(); track action.id || action.label || $index) {\n    <button type=\"button\" class=\"mobile-action-btn\" [disabled]=\"action.disabled ?? false\"\n      (click)=\"handleActionClick(action, $event); closeMobileMenu()\">\n      @if (action.icon; as actIcon) {\n      <span class=\"action-btn-icon\">\n        <ng-container *ngComponentOutlet=\"actIcon\" />\n      </span>\n      }\n      @if (action.label) {\n      <span class=\"action-btn-label\">{{ action.label }}</span>\n      }\n      @if (action.badge) {\n      <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n        {{ action.badge }}\n      </span>\n      }\n    </button>\n    }\n  </div>\n  }\n</div>\n\n<!-- Backdrop for Top Nav Mobile Sheet -->\n<div class=\"top-nav-mobile-backdrop\" (click)=\"closeMobileMenu()\" aria-hidden=\"true\"></div>\n}", styles: [":host,talos-top-nav,.talos-top-nav-host{display:block;width:100%;box-sizing:border-box;z-index:50;position:relative;overflow:visible;container-type:inline-size;container-name:topnav;--talos-top-nav-height: 60px;--talos-top-nav-bg: var(--talos-header-bg, var(--talos-bg-surface, #ffffff));--talos-top-nav-border: var(--talos-header-border-color, var(--talos-border-default, #e2e8f0));--talos-top-nav-text: var(--talos-text-primary, #0f172a);--talos-top-nav-muted: var(--talos-text-muted, #64748b);--talos-top-nav-hover-bg: var(--talos-nav-hover-bg, rgba(0, 0, 0, .04));--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, #eff6ff);--talos-top-nav-active-text: var(--talos-primary-text, #1d4ed8);--talos-top-nav-dropdown-bg: var(--talos-bg-surface, #ffffff);--talos-top-nav-dropdown-border: var(--talos-border-default, #e2e8f0);--talos-top-nav-dropdown-shadow: var(--talos-shadow-dropdown, 0 10px 25px -5px rgba(0, 0, 0, .08))}:host.size-sm,talos-top-nav.size-sm,.talos-top-nav-host.size-sm{--talos-top-nav-height: 48px}:host.size-md,talos-top-nav.size-md,.talos-top-nav-host.size-md{--talos-top-nav-height: 60px}:host.size-lg,talos-top-nav.size-lg,.talos-top-nav-host.size-lg{--talos-top-nav-height: 72px}:host.is-sticky,talos-top-nav.is-sticky,.talos-top-nav-host.is-sticky{position:sticky;top:0;z-index:50}:host.is-bordered,talos-top-nav.is-bordered,.talos-top-nav-host.is-bordered{border-bottom:1px solid var(--talos-top-nav-border)}:host.is-glass,talos-top-nav.is-glass,.talos-top-nav-host.is-glass{--talos-top-nav-bg: rgba(255, 255, 255, .85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:root[data-theme=dark] talos-top-nav,:root.dark talos-top-nav,[data-theme=dark] talos-top-nav,[data-mode=dark] talos-top-nav,.dark talos-top-nav,.dark-theme talos-top-nav{--talos-top-nav-bg: var(--talos-header-bg, #090d16);--talos-top-nav-border: var(--talos-header-border-color, rgba(255, 255, 255, .08));--talos-top-nav-text: #f8fafc;--talos-top-nav-muted: #94a3b8;--talos-top-nav-hover-bg: rgba(255, 255, 255, .06);--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));--talos-top-nav-active-text: #ffffff;--talos-top-nav-dropdown-bg: #0f172a;--talos-top-nav-dropdown-border: rgba(255, 255, 255, .1);--talos-top-nav-dropdown-shadow: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08)}:root[data-theme=dark] :host.is-glass,:root.dark :host.is-glass,[data-theme=dark] :host.is-glass,[data-mode=dark] :host.is-glass,.dark :host.is-glass,.dark-theme :host.is-glass,:root[data-theme=dark] talos-top-nav.is-glass,:root.dark talos-top-nav.is-glass,[data-theme=dark] talos-top-nav.is-glass,[data-mode=dark] talos-top-nav.is-glass,.dark talos-top-nav.is-glass,.dark-theme talos-top-nav.is-glass{--talos-top-nav-bg: rgba(9, 13, 22, .85)}.talos-top-nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--talos-top-nav-height);padding:0 20px;background:var(--talos-top-nav-bg);box-sizing:border-box;gap:12px;position:relative;overflow:visible}@media(max-width:640px){.talos-top-nav-inner{padding:0 10px;gap:6px}}.top-nav-left{display:flex;align-items:center;gap:10px;flex-shrink:0}.nav-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0}.nav-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.brand-container{display:flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer}.brand-logo-wrapper{display:inline-flex;align-items:center;justify-content:center}.brand-text-group{display:flex;flex-direction:column;line-height:1.2}.brand-title-row{display:flex;align-items:center;gap:6px}.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff)));color:var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb)));border:1px solid var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2));flex-shrink:0;transition:all .2s ease}.brand-icon svg,.brand-icon i-lucide,.brand-icon .lucide{width:15px;height:15px;display:block}.brand-title{font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:var(--talos-top-nav-text);white-space:nowrap}.brand-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:6px;font-size:.625rem;font-weight:600;letter-spacing:.02em;background:var(--talos-top-nav-brand-badge-bg, var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff))));color:var(--talos-top-nav-brand-badge-color, var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb))));border:1px solid var(--talos-top-nav-brand-badge-border, var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2)));white-space:nowrap}.brand-subtitle{font-size:.6875rem;color:var(--talos-top-nav-muted);white-space:nowrap}.top-nav-center{display:flex;align-items:center;gap:10px;flex:1;min-width:0;justify-content:flex-start;overflow:visible;position:relative}.nav-links-bar{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;flex-shrink:0;overflow:visible;position:relative}.nav-item-dropdown-container{position:relative;display:inline-flex;overflow:visible}.nav-link-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;height:32px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;text-decoration:none;flex-shrink:0}.nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.nav-link-btn[disabled]{opacity:.5;cursor:not-allowed}.nav-link-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.nav-link-btn .dropdown-chevron{transition:transform .2s ease;opacity:.7}.nav-link-btn.has-dropdown{padding-right:6px}.nav-item-dropdown-container.is-open .nav-link-btn .dropdown-chevron{transform:rotate(180deg)}.nav-link-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.nav-link-icon svg,.nav-link-icon i-lucide,.nav-link-icon .lucide{width:15px;height:15px;display:block}.nav-link-badge,.dropdown-item-badge,.action-badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:9999px;font-size:.625rem;font-weight:600;line-height:1.2}.nav-link-badge.badge-primary,.dropdown-item-badge.badge-primary,.action-badge.badge-primary{background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2563eb))}.nav-link-badge.badge-secondary,.dropdown-item-badge.badge-secondary,.action-badge.badge-secondary{background:#64748b1f;color:var(--text-muted, #64748b)}.nav-link-badge.badge-success,.dropdown-item-badge.badge-success,.action-badge.badge-success{background:#22c55e1f;color:#16a34a}.nav-link-badge.badge-warning,.dropdown-item-badge.badge-warning,.action-badge.badge-warning{background:#eab3081f;color:#ca8a04}.nav-link-badge.badge-danger,.dropdown-item-badge.badge-danger,.action-badge.badge-danger{background:#ef44441f;color:#dc2626}.nav-link-badge.badge-subtle,.dropdown-item-badge.badge-subtle,.action-badge.badge-subtle{background:#0000000d;color:var(--talos-top-nav-muted)}.top-nav-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;max-width:320px;background:var(--talos-top-nav-dropdown-bg);border:1px solid var(--talos-top-nav-dropdown-border);border-radius:10px;box-shadow:var(--talos-top-nav-dropdown-shadow);padding:6px;z-index:1050;animation:dropdownFadeSlide .18s cubic-bezier(.16,1,.3,1);box-sizing:border-box}.top-nav-dropdown-menu.user-dropdown-menu{right:0;left:auto;min-width:240px}@keyframes dropdownFadeSlide{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.dropdown-divider{height:1px;background:var(--talos-top-nav-dropdown-border);margin:4px 0}.dropdown-menu-item{width:100%;display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;border:none;background:transparent;color:var(--talos-top-nav-text);font-size:.8125rem;font-weight:500;text-align:left;cursor:pointer;transition:all .12s ease;box-sizing:border-box}.dropdown-menu-item:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-primary-color, var(--talos-top-nav-text))}.dropdown-menu-item.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.dropdown-menu-item[disabled]{opacity:.45;cursor:not-allowed}.dropdown-menu-item:focus-visible{outline:none;background:var(--talos-top-nav-hover-bg)}.dropdown-item-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-top-nav-muted);flex-shrink:0;width:16px;height:16px}.dropdown-item-icon svg,.dropdown-item-icon i-lucide,.dropdown-item-icon .lucide{width:15px;height:15px;display:block}.dropdown-item-content{display:flex;flex-direction:column;flex:1;min-width:0}.dropdown-item-label{font-weight:500;color:var(--talos-top-nav-text)}.dropdown-item-desc{font-size:.6875rem;color:var(--talos-top-nav-muted);margin-top:1px}.search-bar-wrapper{display:flex;align-items:center;position:relative;flex:0 1 180px;min-width:100px;max-width:220px}.search-icon{position:absolute;left:9px;color:var(--talos-top-nav-muted);pointer-events:none}.top-nav-search-input{width:100%;height:30px;padding:0 8px 0 28px;border-radius:6px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text);font-size:.75rem;transition:all .15s ease}.top-nav-search-input::placeholder{color:var(--talos-top-nav-muted)}.top-nav-search-input:focus{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));background:var(--talos-top-nav-dropdown-bg);box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.top-nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.actions-group{display:flex;align-items:center;gap:3px}.action-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;gap:6px}.action-btn.has-label{width:auto;padding:0 10px;font-size:.8125rem;font-weight:500}.action-btn .action-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.action-btn .action-btn-icon svg,.action-btn .action-btn-icon i-lucide,.action-btn .action-btn-icon .lucide{width:15px;height:15px;display:block}.action-btn .action-btn-label{font-size:.8125rem;font-weight:500;white-space:nowrap}.action-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.action-btn[disabled]{opacity:.5;cursor:not-allowed}.action-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.action-btn .action-badge{position:absolute;top:2px;right:2px;padding:1px 4px;font-size:.5625rem}.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;position:relative}.theme-toggle-btn talos-theme-morph-icon,.theme-toggle-btn svg{width:16px;height:16px;display:block}.theme-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.theme-toggle-btn:active{transform:scale(.9)}.theme-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-container{position:relative;display:inline-flex;flex-shrink:0}.user-profile-btn{display:flex;align-items:center;gap:7px;padding:3px 7px 3px 3px;border-radius:9999px;border:1px solid var(--talos-top-nav-border);background:transparent;cursor:pointer;transition:all .15s ease}.user-profile-btn:hover{background:var(--talos-top-nav-hover-bg)}.user-profile-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-btn .user-dropdown-chevron{color:var(--talos-top-nav-muted);transition:transform .2s ease}.user-profile-container.is-open .user-dropdown-chevron{transform:rotate(180deg)}.user-avatar-circle{width:26px;height:26px;border-radius:50%;background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2592eb));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;overflow:hidden;flex-shrink:0}.user-avatar-img{width:100%;height:100%;object-fit:cover}.user-profile-meta{display:flex;flex-direction:column;text-align:left;line-height:1.15}.user-name-text{font-size:.75rem;font-weight:600;color:var(--talos-top-nav-text);white-space:nowrap}.user-role-text{font-size:.625rem;color:var(--talos-top-nav-muted);white-space:nowrap}.user-menu-header{padding:8px 10px 6px;display:flex;flex-direction:column;gap:2px}.user-menu-header-name{font-size:.8125rem;font-weight:600;color:var(--talos-top-nav-text)}.user-menu-header-email{font-size:.6875rem;color:var(--talos-top-nav-muted)}@container topnav (max-width: 840px){.brand-subtitle,.user-role-text{display:none}}@container topnav (max-width: 640px){.brand-badge,.user-profile-meta{display:none}.search-bar-wrapper{max-width:130px}.action-btn.has-label .action-btn-label{display:none}.nav-links-bar{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}.nav-links-bar::-webkit-scrollbar{display:none}}@container topnav (max-width: 480px){.search-bar-wrapper{display:none}.brand-title{font-size:.9375rem}}@media(max-width:480px){.top-nav-dropdown-menu{max-width:calc(100vw - 24px);right:0;left:auto}}.top-nav-mobile-hamburger-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);cursor:pointer;transition:all .15s ease;flex-shrink:0}.top-nav-mobile-hamburger-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-hamburger-btn.is-open{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-sheet{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;width:100vw;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);background:var(--talos-top-nav-bg);border-bottom:1px solid var(--talos-top-nav-border);box-shadow:0 20px 35px -5px #00000040;z-index:95;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.875rem;overflow-y:auto;box-sizing:border-box;animation:topNavSheetSlideDown .25s cubic-bezier(.16,1,.3,1)}@keyframes topNavSheetSlideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.top-nav-mobile-backdrop{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;bottom:0;background:#0f172a73;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:94;animation:fadeIn .2s ease-out}.mobile-nav-links-list{display:flex;flex-direction:column;gap:.375rem;width:100%}.mobile-nav-link-btn{display:flex;align-items:center;width:100%;height:42px;padding:0 1rem;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .15s ease;gap:.75rem;text-align:left;box-sizing:border-box}.mobile-nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.mobile-nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-subtle-border, rgba(37, 99, 235, .25))}.mobile-nav-link-btn .nav-link-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.mobile-nav-link-btn .nav-link-label{flex:1}.mobile-sheet-actions{display:flex;align-items:center;gap:.75rem;padding-top:.75rem;border-top:1px solid var(--talos-top-nav-border);flex-wrap:wrap}.mobile-sheet-actions .mobile-action-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s ease}.mobile-sheet-actions .mobile-action-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}@media(max-width:768px){.top-nav-center .nav-links-bar{display:none}.top-nav-mobile-hamburger-btn{display:inline-flex}}\n"] }]
+                    }, template: "<div class=\"talos-top-nav-inner\">\n  <!-- Left Section: Toggle, Brand, Logo -->\n  <div class=\"top-nav-left\">\n    @if (leftComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: leftComponentInputs()\" />\n    } @else if (leftTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-left]\">\n      <!-- Sidebar Collapse Toggle Button -->\n      @if (showSidebarToggle()) {\n      <ng-content select=\"[top-nav-toggle]\">\n        <button type=\"button\" class=\"nav-toggle-btn\" (click)=\"toggleSidebar()\"\n          [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\">\n          @if (isSidebarCollapsed()) {\n          <svg lucidePanelLeftOpen [size]=\"18\"></svg>\n          } @else {\n          <svg lucidePanelLeftClose [size]=\"18\"></svg>\n          }\n        </button>\n      </ng-content>\n      }\n\n      <!-- Brand / Logo Area -->\n      @if (showLogo() || showBrand()) {\n      <div class=\"brand-container\" (click)=\"handleBrandClick()\"\n        [attr.tabindex]=\"(brandRoute() || brandUrl()) ? 0 : null\"\n        [attr.role]=\"(brandRoute() || brandUrl()) ? 'link' : null\">\n        @if (showLogo()) {\n        <div class=\"brand-logo-wrapper\">\n          @if (logoComponent(); as comp) {\n          <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n          } @else if (logoTemplate(); as tmpl) {\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n          <ng-content select=\"[top-nav-logo]\" />\n          }\n        </div>\n        }\n\n        @if (showBrand()) {\n        <ng-content select=\"[top-nav-brand]\">\n          <div class=\"brand-text-group\">\n            <div class=\"brand-title-row\">\n              @if (brandIcon(); as iconComp) {\n              <span class=\"brand-icon\">\n                <ng-container *ngComponentOutlet=\"iconComp\" />\n              </span>\n              }\n              <span class=\"brand-title\">{{ brandTitle() }}</span>\n              @if (brandBadge(); as badge) {\n              <span class=\"brand-badge\">{{ badge }}</span>\n              }\n            </div>\n            @if (brandSubtitle(); as subtitle) {\n            <span class=\"brand-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </ng-content>\n        }\n      </div>\n      }\n    </ng-content>\n    }\n  </div>\n\n  <!-- Center Section: Navigation Links & Search -->\n  <div class=\"top-nav-center\">\n    @if (centerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: centerComponentInputs()\" />\n    } @else if (centerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-center]\">\n      <!-- Direct Navigation Items -->\n      @if (items().length > 0) {\n      <nav class=\"nav-links-bar\" aria-label=\"Main Navigation\">\n        @for (item of items(); track item.id || item.label) {\n        @if (item.children && item.children.length > 0) {\n        <!-- Item with Dropdown Menu -->\n        <div class=\"nav-item-dropdown-container\" [class.is-open]=\"openDropdownId() === (item.id || item.label)\">\n          <button type=\"button\" class=\"nav-link-btn has-dropdown\"\n            [class.is-active]=\"activeItemId() === item.id || !!item.active\" [disabled]=\"item.disabled ?? false\"\n            [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"openDropdownId() === (item.id || item.label)\"\n            (click)=\"toggleDropdown(item.id || item.label, $event)\">\n            @if (item.icon; as itemIcon) {\n            <span class=\"nav-link-icon\">\n              <ng-container *ngComponentOutlet=\"itemIcon\" />\n            </span>\n            }\n            <span class=\"nav-link-label\">{{ item.label }}</span>\n            @if (item.badge) {\n            <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n              {{ item.badge }}\n            </span>\n            }\n            <svg lucideChevronDown class=\"dropdown-chevron\" [size]=\"14\"></svg>\n          </button>\n\n          <!-- Dropdown Panel -->\n          @if (openDropdownId() === (item.id || item.label)) {\n          <div class=\"top-nav-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n            @if (item.dropdownTemplate; as customTmpl) {\n            <ng-container *ngTemplateOutlet=\"customTmpl\" />\n            } @else {\n            <ul class=\"dropdown-menu-list\">\n              @for (child of item.children; track child.id || child.label) {\n              @if (child.divider) {\n              <li class=\"dropdown-divider\" role=\"separator\"></li>\n              }\n              <li role=\"none\">\n                <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                  [class.is-active]=\"activeItemId() === child.id || !!child.active\" [disabled]=\"child.disabled ?? false\"\n                  (click)=\"selectChildItem(child, item, $event)\">\n                  @if (child.icon; as childIcon) {\n                  <span class=\"dropdown-item-icon\">\n                    <ng-container *ngComponentOutlet=\"childIcon\" />\n                  </span>\n                  }\n                  <div class=\"dropdown-item-content\">\n                    <span class=\"dropdown-item-label\">{{ child.label }}</span>\n                    @if (child.description) {\n                    <span class=\"dropdown-item-desc\">{{ child.description }}</span>\n                    }\n                  </div>\n                  @if (child.badge) {\n                  <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (child.badgeVariant ?? 'subtle')\">\n                    {{ child.badge }}\n                  </span>\n                  }\n                </button>\n              </li>\n              }\n            </ul>\n            }\n          </div>\n          }\n        </div>\n        } @else {\n        <!-- Standard Single Nav Link -->\n        <button type=\"button\" class=\"nav-link-btn\" [attr.data-item-id]=\"item.id\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n          [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event)\">\n          @if (item.icon; as itemIcon) {\n          <span class=\"nav-link-icon\">\n            <ng-container *ngComponentOutlet=\"itemIcon\" />\n          </span>\n          }\n          <span class=\"nav-link-label\">{{ item.label }}</span>\n          @if (item.badge) {\n          <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n            {{ item.badge }}\n          </span>\n          }\n        </button>\n        }\n        }\n      </nav>\n      }\n\n      <!-- Search Input Slot -->\n      @if (showSearch()) {\n      <div class=\"search-bar-wrapper\">\n        <svg lucideSearch class=\"search-icon\" [size]=\"15\"></svg>\n        <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n          (input)=\"onSearchInput($event)\" />\n      </div>\n      }\n\n      <!-- Custom projected center content -->\n      <ng-content select=\"[top-nav-links]\" />\n      <ng-content />\n    </ng-content>\n    }\n  </div>\n\n  <!-- Right Section: Actions, Theme Toggle, User Profile -->\n  <div class=\"top-nav-right\">\n    @if (rightComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: rightComponentInputs()\" />\n    } @else if (rightTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-right]\">\n      <!-- Action Buttons -->\n      @if (actions().length > 0) {\n      <div class=\"actions-group\">\n        @for (action of actions(); track action.id || action.label || $index) {\n        <button type=\"button\" class=\"action-btn\" [class.has-label]=\"action.showLabel && !!action.label\"\n          [disabled]=\"action.disabled ?? false\" [attr.aria-label]=\"action.label || 'Action'\"\n          [talosTooltip]=\"action.showLabel ? '' : (action.label || '')\" (click)=\"handleActionClick(action, $event)\">\n          @if (action.icon; as actIcon) {\n          <span class=\"action-btn-icon\">\n            <ng-container *ngComponentOutlet=\"actIcon\" />\n          </span>\n          }\n          @if (action.showLabel && action.label) {\n          <span class=\"action-btn-label\">{{ action.label }}</span>\n          }\n          @if (action.badge) {\n          <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n            {{ action.badge }}\n          </span>\n          }\n        </button>\n        }\n      </div>\n      }\n\n      <ng-content select=\"[top-nav-actions]\" />\n\n      <!-- 3-Way System/Light/Dark Theme Toggle -->\n      @if (showThemeToggle()) {\n      <button type=\"button\" class=\"theme-toggle-btn\" (click)=\"handleThemeToggle()\"\n        [attr.aria-label]=\"themeToggleAriaLabel()\" [talosTooltip]=\"themeToggleTooltip()\">\n        <talos-theme-morph-icon [mode]=\"effectiveThemeMode()\" [size]=\"16\" />\n      </button>\n      }\n\n      <!-- User Profile & User Dropdown Menu -->\n      @if (userProfile(); as user) {\n      <div class=\"user-profile-container\" [class.is-open]=\"isUserDropdownOpen()\">\n        <button type=\"button\" class=\"user-profile-btn\" [attr.aria-haspopup]=\"'true'\"\n          [attr.aria-expanded]=\"isUserDropdownOpen()\" (click)=\"toggleUserDropdown($event)\">\n          <div class=\"user-avatar-circle\">\n            @if (user.avatarUrl) {\n            <img [src]=\"user.avatarUrl\" [alt]=\"user.name\" class=\"user-avatar-img\" />\n            } @else {\n            <span class=\"avatar-initials\">{{ user.name.charAt(0) }}</span>\n            }\n          </div>\n          <div class=\"user-profile-meta\">\n            <span class=\"user-name-text\">{{ user.name }}</span>\n            @if (user.role) {\n            <span class=\"user-role-text\">{{ user.role }}</span>\n            }\n          </div>\n          @if (user.menuItems && user.menuItems.length > 0) {\n          <svg lucideChevronDown class=\"user-dropdown-chevron\" [size]=\"13\"></svg>\n          }\n        </button>\n\n        <!-- User Dropdown Panel -->\n        @if (isUserDropdownOpen() && user.menuItems && user.menuItems.length > 0) {\n        <div class=\"top-nav-dropdown-menu user-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n          <div class=\"user-menu-header\">\n            <span class=\"user-menu-header-name\">{{ user.name }}</span>\n            @if (user.email) {\n            <span class=\"user-menu-header-email\">{{ user.email }}</span>\n            }\n          </div>\n          <div class=\"dropdown-divider\" role=\"separator\"></div>\n          <ul class=\"dropdown-menu-list\">\n            @for (menuItem of user.menuItems; track menuItem.id || menuItem.label) {\n            @if (menuItem.divider) {\n            <li class=\"dropdown-divider\" role=\"separator\"></li>\n            }\n            <li role=\"none\">\n              <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                [class.is-active]=\"activeItemId() === menuItem.id || !!menuItem.active\"\n                [disabled]=\"menuItem.disabled ?? false\" (click)=\"selectItem(menuItem, $event)\">\n                @if (menuItem.icon; as menuIcon) {\n                <span class=\"dropdown-item-icon\">\n                  <ng-container *ngComponentOutlet=\"menuIcon\" />\n                </span>\n                }\n                <div class=\"dropdown-item-content\">\n                  <span class=\"dropdown-item-label\">{{ menuItem.label }}</span>\n                  @if (menuItem.description) {\n                  <span class=\"dropdown-item-desc\">{{ menuItem.description }}</span>\n                  }\n                </div>\n                @if (menuItem.badge) {\n                <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (menuItem.badgeVariant ?? 'subtle')\">\n                  {{ menuItem.badge }}\n                </span>\n                }\n              </button>\n            </li>\n            }\n          </ul>\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Mobile Top Nav Hamburger Toggle Button -->\n      @if (items().length > 0 || actions().length > 0) {\n      <button type=\"button\" class=\"top-nav-mobile-hamburger-btn\" (click)=\"toggleMobileMenu()\"\n        [class.is-open]=\"isMobileMenuOpen()\" [attr.aria-expanded]=\"isMobileMenuOpen()\"\n        [attr.aria-label]=\"isMobileMenuOpen() ? 'Close navigation menu' : 'Open navigation menu'\">\n        @if (isMobileMenuOpen()) {\n        <svg lucideX [size]=\"20\"></svg>\n        } @else {\n        <svg lucideMenu [size]=\"20\"></svg>\n        }\n      </button>\n      }\n\n      <ng-content select=\"[top-nav-user]\" />\n    </ng-content>\n    }\n  </div>\n</div>\n\n<!-- Mobile Top Navigation Expanding Sheet (Expands Downwards from Top) -->\n@if (isMobileMenuOpen()) {\n<div class=\"top-nav-mobile-sheet\" role=\"navigation\" aria-label=\"Mobile Navigation\" (click)=\"$event.stopPropagation()\">\n  @if (showSearch()) {\n  <div class=\"mobile-search-bar\">\n    <svg lucideSearch class=\"search-icon\" [size]=\"16\"></svg>\n    <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n      (input)=\"onSearchInput($event)\" />\n  </div>\n  }\n\n  @if (items().length > 0) {\n  <nav class=\"mobile-nav-links-list\" aria-label=\"Mobile Main Navigation\">\n    @for (item of items(); track item.id || item.label) {\n    <button type=\"button\" class=\"mobile-nav-link-btn\" [attr.data-item-id]=\"item.id\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n      [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event); closeMobileMenu()\">\n      @if (item.icon; as itemIcon) {\n      <span class=\"nav-link-icon\">\n        <ng-container *ngComponentOutlet=\"itemIcon\" />\n      </span>\n      }\n      <span class=\"nav-link-label\">{{ item.label }}</span>\n      @if (item.badge) {\n      <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n        {{ item.badge }}\n      </span>\n      }\n    </button>\n    }\n  </nav>\n  }\n\n  @if (actions().length > 0) {\n  <div class=\"mobile-sheet-actions\">\n    @for (action of actions(); track action.id || action.label || $index) {\n    <button type=\"button\" class=\"mobile-action-btn\" [disabled]=\"action.disabled ?? false\"\n      (click)=\"handleActionClick(action, $event); closeMobileMenu()\">\n      @if (action.icon; as actIcon) {\n      <span class=\"action-btn-icon\">\n        <ng-container *ngComponentOutlet=\"actIcon\" />\n      </span>\n      }\n      @if (action.label) {\n      <span class=\"action-btn-label\">{{ action.label }}</span>\n      }\n      @if (action.badge) {\n      <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n        {{ action.badge }}\n      </span>\n      }\n    </button>\n    }\n  </div>\n  }\n</div>\n\n<!-- Backdrop for Top Nav Mobile Sheet -->\n<div class=\"top-nav-mobile-backdrop\" (click)=\"closeMobileMenu()\" aria-hidden=\"true\"></div>\n}", styles: [":host,talos-top-nav,.talos-top-nav-host{display:block;width:100%;box-sizing:border-box;z-index:50;position:relative;overflow:visible;container-type:inline-size;container-name:topnav;--talos-top-nav-height: 60px;--talos-top-nav-bg: var(--talos-header-bg, var(--talos-bg-surface, #ffffff));--talos-top-nav-border: var(--talos-header-border-color, var(--talos-border-default, #e2e8f0));--talos-top-nav-text: var(--talos-text-primary, #0f172a);--talos-top-nav-muted: var(--talos-text-muted, #64748b);--talos-top-nav-hover-bg: var(--talos-nav-hover-bg, rgba(0, 0, 0, .04));--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, #eff6ff);--talos-top-nav-active-text: var(--talos-primary-text, #1d4ed8);--talos-top-nav-dropdown-bg: var(--talos-bg-surface, #ffffff);--talos-top-nav-dropdown-border: var(--talos-border-default, #e2e8f0);--talos-top-nav-dropdown-shadow: var(--talos-shadow-dropdown, 0 10px 25px -5px rgba(0, 0, 0, .08))}:host.size-sm,talos-top-nav.size-sm,.talos-top-nav-host.size-sm{--talos-top-nav-height: 48px}:host.size-md,talos-top-nav.size-md,.talos-top-nav-host.size-md{--talos-top-nav-height: 60px}:host.size-lg,talos-top-nav.size-lg,.talos-top-nav-host.size-lg{--talos-top-nav-height: 72px}:host.is-sticky,talos-top-nav.is-sticky,.talos-top-nav-host.is-sticky{position:sticky;top:0;z-index:50}:host.is-bordered,talos-top-nav.is-bordered,.talos-top-nav-host.is-bordered{border-bottom:1px solid var(--talos-top-nav-border)}:host.is-glass,talos-top-nav.is-glass,.talos-top-nav-host.is-glass{--talos-top-nav-bg: rgba(255, 255, 255, .85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:root[data-theme=dark] talos-top-nav,:root.dark talos-top-nav,[data-theme=dark] talos-top-nav,[data-mode=dark] talos-top-nav,.dark talos-top-nav,.dark-theme talos-top-nav{--talos-top-nav-bg: var(--talos-header-bg, #090d16);--talos-top-nav-border: var(--talos-header-border-color, rgba(255, 255, 255, .08));--talos-top-nav-text: #f8fafc;--talos-top-nav-muted: #94a3b8;--talos-top-nav-hover-bg: rgba(255, 255, 255, .06);--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));--talos-top-nav-active-text: #ffffff;--talos-top-nav-dropdown-bg: #0f172a;--talos-top-nav-dropdown-border: rgba(255, 255, 255, .1);--talos-top-nav-dropdown-shadow: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08)}:root[data-theme=dark] :host.is-glass,:root.dark :host.is-glass,[data-theme=dark] :host.is-glass,[data-mode=dark] :host.is-glass,.dark :host.is-glass,.dark-theme :host.is-glass,:root[data-theme=dark] talos-top-nav.is-glass,:root.dark talos-top-nav.is-glass,[data-theme=dark] talos-top-nav.is-glass,[data-mode=dark] talos-top-nav.is-glass,.dark talos-top-nav.is-glass,.dark-theme talos-top-nav.is-glass{--talos-top-nav-bg: rgba(9, 13, 22, .85)}.talos-top-nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--talos-top-nav-height);padding:0 20px;background:var(--talos-top-nav-bg);box-sizing:border-box;gap:12px;position:relative;overflow:visible}@media(max-width:640px){.talos-top-nav-inner{padding:0 10px;gap:6px}}.top-nav-left{display:flex;align-items:center;gap:10px;flex-shrink:0}.nav-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0}.nav-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.brand-container{display:flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer}.brand-logo-wrapper{display:inline-flex;align-items:center;justify-content:center}.brand-text-group{display:flex;flex-direction:column;line-height:1.2}.brand-title-row{display:flex;align-items:center;gap:6px}.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff)));color:var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb)));border:1px solid var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2));flex-shrink:0;transition:all .2s ease}.brand-icon svg,.brand-icon i-lucide,.brand-icon .lucide{width:15px;height:15px;display:block}.brand-title{font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:var(--talos-top-nav-text);white-space:nowrap}.brand-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:6px;font-size:.625rem;font-weight:600;letter-spacing:.02em;background:var(--talos-top-nav-brand-badge-bg, var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff))));color:var(--talos-top-nav-brand-badge-color, var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb))));border:1px solid var(--talos-top-nav-brand-badge-border, var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2)));white-space:nowrap}.brand-subtitle{font-size:.6875rem;color:var(--talos-top-nav-muted);white-space:nowrap}.top-nav-center{display:flex;align-items:center;gap:10px;flex:1;min-width:0;justify-content:flex-start;overflow:visible;position:relative}.nav-links-bar{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;flex-shrink:0;overflow:visible;position:relative}.nav-item-dropdown-container{position:relative;display:inline-flex;overflow:visible}.nav-link-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;height:32px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;text-decoration:none;flex-shrink:0}.nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.nav-link-btn[disabled]{opacity:.5;cursor:not-allowed}.nav-link-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.nav-link-btn .dropdown-chevron{transition:transform .2s ease;opacity:.7}.nav-link-btn.has-dropdown{padding-right:6px}.nav-item-dropdown-container.is-open .nav-link-btn .dropdown-chevron{transform:rotate(180deg)}.nav-link-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.nav-link-icon svg,.nav-link-icon i-lucide,.nav-link-icon .lucide{width:15px;height:15px;display:block}.nav-link-badge,.dropdown-item-badge,.action-badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:9999px;font-size:.625rem;font-weight:600;line-height:1.2}.nav-link-badge.badge-primary,.dropdown-item-badge.badge-primary,.action-badge.badge-primary{background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2563eb))}.nav-link-badge.badge-secondary,.dropdown-item-badge.badge-secondary,.action-badge.badge-secondary{background:#64748b1f;color:var(--text-muted, #64748b)}.nav-link-badge.badge-success,.dropdown-item-badge.badge-success,.action-badge.badge-success{background:#22c55e1f;color:#16a34a}.nav-link-badge.badge-warning,.dropdown-item-badge.badge-warning,.action-badge.badge-warning{background:#eab3081f;color:#ca8a04}.nav-link-badge.badge-danger,.dropdown-item-badge.badge-danger,.action-badge.badge-danger{background:#ef44441f;color:#dc2626}.nav-link-badge.badge-subtle,.dropdown-item-badge.badge-subtle,.action-badge.badge-subtle{background:#0000000d;color:var(--talos-top-nav-muted)}.top-nav-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;max-width:320px;background:var(--talos-top-nav-dropdown-bg);border:1px solid var(--talos-top-nav-dropdown-border);border-radius:10px;box-shadow:var(--talos-top-nav-dropdown-shadow);padding:6px;z-index:1050;animation:dropdownFadeSlide .18s cubic-bezier(.16,1,.3,1);box-sizing:border-box}.top-nav-dropdown-menu.user-dropdown-menu{right:0;left:auto;min-width:240px}@keyframes dropdownFadeSlide{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.dropdown-divider{height:1px;background:var(--talos-top-nav-dropdown-border);margin:4px 0}.dropdown-menu-item{width:100%;display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;border:none;background:transparent;color:var(--talos-top-nav-text);font-size:.8125rem;font-weight:500;text-align:left;cursor:pointer;transition:all .12s ease;box-sizing:border-box}.dropdown-menu-item:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-primary-color, var(--talos-top-nav-text))}.dropdown-menu-item.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.dropdown-menu-item[disabled]{opacity:.45;cursor:not-allowed}.dropdown-menu-item:focus-visible{outline:none;background:var(--talos-top-nav-hover-bg)}.dropdown-item-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-top-nav-muted);flex-shrink:0;width:16px;height:16px}.dropdown-item-icon svg,.dropdown-item-icon i-lucide,.dropdown-item-icon .lucide{width:15px;height:15px;display:block}.dropdown-item-content{display:flex;flex-direction:column;flex:1;min-width:0}.dropdown-item-label{font-weight:500;color:var(--talos-top-nav-text)}.dropdown-item-desc{font-size:.6875rem;color:var(--talos-top-nav-muted);margin-top:1px}.search-bar-wrapper{display:flex;align-items:center;position:relative;flex:0 1 180px;min-width:100px;max-width:220px}.search-icon{position:absolute;left:9px;color:var(--talos-top-nav-muted);pointer-events:none}.top-nav-search-input{width:100%;height:30px;padding:0 8px 0 28px;border-radius:6px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text);font-size:.75rem;transition:all .15s ease}.top-nav-search-input::placeholder{color:var(--talos-top-nav-muted)}.top-nav-search-input:focus{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));background:var(--talos-top-nav-dropdown-bg);box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.top-nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.actions-group{display:flex;align-items:center;gap:3px}.action-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;gap:6px}.action-btn.has-label{width:auto;padding:0 10px;font-size:.8125rem;font-weight:500}.action-btn .action-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.action-btn .action-btn-icon svg,.action-btn .action-btn-icon i-lucide,.action-btn .action-btn-icon .lucide{width:15px;height:15px;display:block}.action-btn .action-btn-label{font-size:.8125rem;font-weight:500;white-space:nowrap}.action-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.action-btn[disabled]{opacity:.5;cursor:not-allowed}.action-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.action-btn .action-badge{position:absolute;top:2px;right:2px;padding:1px 4px;font-size:.5625rem}.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;position:relative}.theme-toggle-btn talos-theme-morph-icon,.theme-toggle-btn svg{width:16px;height:16px;display:block}.theme-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.theme-toggle-btn:active{transform:scale(.9)}.theme-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-container{position:relative;display:inline-flex;flex-shrink:0}.user-profile-btn{display:flex;align-items:center;gap:7px;padding:3px 7px 3px 3px;border-radius:9999px;border:1px solid var(--talos-top-nav-border);background:transparent;cursor:pointer;transition:all .15s ease}.user-profile-btn:hover{background:var(--talos-top-nav-hover-bg)}.user-profile-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-btn .user-dropdown-chevron{color:var(--talos-top-nav-muted);transition:transform .2s ease}.user-profile-container.is-open .user-dropdown-chevron{transform:rotate(180deg)}.user-avatar-circle{width:26px;height:26px;border-radius:50%;background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2592eb));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;overflow:hidden;flex-shrink:0}.user-avatar-img{width:100%;height:100%;object-fit:cover}.user-profile-meta{display:flex;flex-direction:column;text-align:left;line-height:1.15}.user-name-text{font-size:.75rem;font-weight:600;color:var(--talos-top-nav-text);white-space:nowrap}.user-role-text{font-size:.625rem;color:var(--talos-top-nav-muted);white-space:nowrap}.user-menu-header{padding:8px 10px 6px;display:flex;flex-direction:column;gap:2px}.user-menu-header-name{font-size:.8125rem;font-weight:600;color:var(--talos-top-nav-text)}.user-menu-header-email{font-size:.6875rem;color:var(--talos-top-nav-muted)}@container topnav (max-width: 840px){.brand-subtitle,.user-role-text{display:none}}@container topnav (max-width: 640px){.brand-badge,.user-profile-meta{display:none}.search-bar-wrapper{max-width:130px}.action-btn.has-label .action-btn-label{display:none}.nav-links-bar{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}.nav-links-bar::-webkit-scrollbar{display:none}}@container topnav (max-width: 480px){.search-bar-wrapper{display:none}.brand-title{font-size:.9375rem}}@media(max-width:480px){.top-nav-dropdown-menu{max-width:calc(100vw - 24px);right:0;left:auto}}.top-nav-mobile-hamburger-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);cursor:pointer;transition:all .15s ease;flex-shrink:0}.top-nav-mobile-hamburger-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-hamburger-btn.is-open{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-sheet{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;width:100vw;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);background:var(--talos-top-nav-bg);border-bottom:1px solid var(--talos-top-nav-border);box-shadow:0 20px 35px -5px #00000040;z-index:95;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.875rem;overflow-y:auto;box-sizing:border-box;animation:topNavSheetSlideDown .25s cubic-bezier(.16,1,.3,1)}@keyframes topNavSheetSlideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.top-nav-mobile-backdrop{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;bottom:0;background:#0f172a73;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:94;animation:fadeIn .2s ease-out}.mobile-nav-links-list{display:flex;flex-direction:column;gap:.375rem;width:100%}.mobile-nav-link-btn{display:flex;align-items:center;width:100%;height:42px;padding:0 1rem;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .15s ease;gap:.75rem;text-align:left;box-sizing:border-box}.mobile-nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.mobile-nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-subtle-border, rgba(37, 99, 235, .25))}.mobile-nav-link-btn .nav-link-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.mobile-nav-link-btn .nav-link-label{flex:1}.mobile-sheet-actions{display:flex;align-items:center;gap:.75rem;padding-top:.75rem;border-top:1px solid var(--talos-top-nav-border);flex-wrap:wrap}.mobile-sheet-actions .mobile-action-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s ease}.mobile-sheet-actions .mobile-action-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}@media(max-width:768px){.top-nav-center .nav-links-bar{display:none}.top-nav-mobile-hamburger-btn{display:inline-flex}}\n"] }]
         }], propDecorators: { brandTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandTitle", required: false }] }], brandSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandSubtitle", required: false }] }], brandBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandBadge", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], brandRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandRoute", required: false }] }], brandUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandUrl", required: false }] }], showBrand: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBrand", required: false }] }], showLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogo", required: false }] }], logoComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoComponent", required: false }] }], logoComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoComponentInputs", required: false }] }], logoTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoTemplate", required: false }] }], showSidebarToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSidebarToggle", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }, { type: i0.Output, args: ["activeItemIdChange"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showThemeToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeToggle", required: false }] }], themeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeMode", required: false }] }], isDarkMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDarkMode", required: false }] }], userProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "userProfile", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], glass: [{ type: i0.Input, args: [{ isSignal: true, alias: "glass", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], leftComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftComponent", required: false }] }], leftComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftComponentInputs", required: false }] }], leftTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftTemplate", required: false }] }], centerComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerComponent", required: false }] }], centerComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerComponentInputs", required: false }] }], centerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerTemplate", required: false }] }], rightComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightComponent", required: false }] }], rightComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightComponentInputs", required: false }] }], rightTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightTemplate", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }, { type: i0.Output, args: ["sidebarCollapsedChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], userClick: [{ type: i0.Output, args: ["userClick"] }], themeToggle: [{ type: i0.Output, args: ["themeToggle"] }], themeModeChange: [{ type: i0.Output, args: ["themeModeChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], sidebarToggleClick: [{ type: i0.Output, args: ["sidebarToggleClick"] }], brandClick: [{ type: i0.Output, args: ["brandClick"] }] } });
 class TalosTopNavModule {