@weeehaoooz/talos-ui 0.1.0

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

@@ -0,0 +1,897 @@
+import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, model, Component, inject, output, computed, signal, ViewEncapsulation, ElementRef, NgModule } from '@angular/core';
+import { LucideChevronDown, LucideSun, LucideMoon, LucideMonitor, LucidePanelLeftOpen, LucidePanelLeftClose, LucideCircleHelp, LucideSettings, LucidePanelLeft, LucideChevronsUpDown, LucideSearch } from '@lucide/angular';
+import { LayoutService } from '@weeehaoooz/talos-ui/layout';
+import { TalosTooltipDirective } from '@weeehaoooz/talos-ui/feedback/tooltip';
+import { Router } from '@angular/router';
+
+class TalosNavGroupComponent {
+    /** Optional title for the navigation group */
+    title = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Whether the navigation group is collapsible */
+    collapsible = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+    /** Two-way model signal for the collapsed state */
+    collapsed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Toggle the collapsed state */
+    toggleCollapse() {
+        if (!this.collapsible())
+            return;
+        this.collapsed.update((c) => !c);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosNavGroupComponent, isStandalone: true, selector: "talos-nav-group", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { attributes: { "role": "group" }, properties: { "class.is-collapsible": "collapsible()", "class.is-collapsed": "collapsible() && collapsed()" }, classAttribute: "nav-group talos-nav-group" }, ngImport: i0, template: `
+    @if (title(); as groupTitle) {
+      @if (collapsible()) {
+        <button
+          type="button"
+          class="nav-group-title nav-group-header-btn"
+          [attr.aria-expanded]="!collapsed()"
+          (click)="toggleCollapse()">
+          <span class="nav-group-title-text">{{ groupTitle }}</span>
+          <span class="nav-group-chevron" [class.is-collapsed]="collapsed()">
+            <svg lucideChevronDown [size]="14"></svg>
+          </span>
+        </button>
+      } @else {
+        <div class="nav-group-title">{{ groupTitle }}</div>
+      }
+    }
+    <div class="nav-group-content" [class.is-collapsed]="collapsible() && collapsed()">
+      <ul class="nav-item-list">
+        <ng-content />
+      </ul>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosNavGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'talos-nav-group',
+                    imports: [LucideChevronDown],
+                    template: `
+    @if (title(); as groupTitle) {
+      @if (collapsible()) {
+        <button
+          type="button"
+          class="nav-group-title nav-group-header-btn"
+          [attr.aria-expanded]="!collapsed()"
+          (click)="toggleCollapse()">
+          <span class="nav-group-title-text">{{ groupTitle }}</span>
+          <span class="nav-group-chevron" [class.is-collapsed]="collapsed()">
+            <svg lucideChevronDown [size]="14"></svg>
+          </span>
+        </button>
+      } @else {
+        <div class="nav-group-title">{{ groupTitle }}</div>
+      }
+    }
+    <div class="nav-group-content" [class.is-collapsed]="collapsible() && collapsed()">
+      <ul class="nav-item-list">
+        <ng-content />
+      </ul>
+    </div>
+  `,
+                    host: {
+                        'class': 'nav-group talos-nav-group',
+                        '[class.is-collapsible]': 'collapsible()',
+                        '[class.is-collapsed]': 'collapsible() && collapsed()',
+                        'role': 'group'
+                    }
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }] } });
+
+class TalosNavItemComponent {
+    layoutService = inject(LayoutService, { optional: true });
+    /** Text label for the nav item */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Icon component type (e.g. Lucide icon) */
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Whether the item is currently active */
+    active = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** Badge or counter displayed on the right */
+    badge = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    /** Whether the nav item is disabled */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Optional route path */
+    route = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "route" }] : /* istanbul ignore next */ []));
+    /** Optional custom tooltip text when collapsed */
+    tooltip = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    /** Optional collapsed override passed from parent side-nav */
+    collapsed = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Output event when the nav item is clicked */
+    itemClick = output();
+    /** Whether parent sidebar is in collapsed mode */
+    isSidebarCollapsed = computed(() => {
+        const col = this.collapsed();
+        if (col !== undefined) {
+            return col;
+        }
+        return this.layoutService?.isLeftNavCollapsed() ?? false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSidebarCollapsed" }] : /* istanbul ignore next */ []));
+    /** Computed tooltip for collapsed sidebar state */
+    computedTooltip = computed(() => {
+        if (!this.isSidebarCollapsed())
+            return null;
+        return this.tooltip() || this.label() || null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedTooltip" }] : /* istanbul ignore next */ []));
+    handleClick() {
+        if (this.disabled())
+            return;
+        this.itemClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosNavItemComponent, isStandalone: true, selector: "talos-nav-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { attributes: { "role": "listitem" }, classAttribute: "nav-item talos-nav-item" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="nav-link"
+      [class.active]="active()"
+      [disabled]="disabled()"
+      (click)="handleClick()"
+      [attr.aria-current]="active() ? 'page' : null"
+      [talosTooltip]="computedTooltip() || ''"
+      [tooltipDisabled]="!isSidebarCollapsed()"
+      tooltipPosition="right">
+      @if (icon(); as iconComp) {
+        <span class="nav-icon">
+          <ng-container *ngComponentOutlet="iconComp" />
+        </span>
+      }
+      <span class="nav-label">
+        @if (label()) {
+          {{ label() }}
+        } @else {
+          <ng-content />
+        }
+      </span>
+      @if (badge(); as b) {
+        <span class="nav-badge">{{ b }}</span>
+      }
+    </button>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosNavItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'talos-nav-item',
+                    imports: [NgComponentOutlet, TalosTooltipDirective],
+                    template: `
+    <button
+      type="button"
+      class="nav-link"
+      [class.active]="active()"
+      [disabled]="disabled()"
+      (click)="handleClick()"
+      [attr.aria-current]="active() ? 'page' : null"
+      [talosTooltip]="computedTooltip() || ''"
+      [tooltipDisabled]="!isSidebarCollapsed()"
+      tooltipPosition="right">
+      @if (icon(); as iconComp) {
+        <span class="nav-icon">
+          <ng-container *ngComponentOutlet="iconComp" />
+        </span>
+      }
+      <span class="nav-label">
+        @if (label()) {
+          {{ label() }}
+        } @else {
+          <ng-content />
+        }
+      </span>
+      @if (badge(); as b) {
+        <span class="nav-badge">{{ b }}</span>
+      }
+    </button>
+  `,
+                    host: {
+                        'class': 'nav-item talos-nav-item',
+                        'role': 'listitem'
+                    }
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+class TalosNavThemeToggleComponent {
+    layoutService = inject(LayoutService, { optional: true });
+    /** Explicit 3-way theme mode: 'system' | 'light' | 'dark' */
+    themeMode = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeMode" }] : /* istanbul ignore next */ []));
+    /** Current dark mode state (boolean fallback for backward compatibility) */
+    isDarkMode = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDarkMode" }] : /* istanbul ignore next */ []));
+    /** Whether to show the text label beside the toggle */
+    showLabel = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    /** Label shown for system mode */
+    systemLabel = input('System Mode', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "systemLabel" }] : /* istanbul ignore next */ []));
+    /** Label shown for light mode */
+    lightLabel = input('Light Mode', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lightLabel" }] : /* istanbul ignore next */ []));
+    /** Label shown for dark mode */
+    darkLabel = input('Dark Mode', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "darkLabel" }] : /* istanbul ignore next */ []));
+    /** Optional custom tooltip text when collapsed */
+    tooltip = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    /** Output event when the toggle is clicked */
+    themeToggle = output();
+    /** Output event with next theme mode ('system' | 'light' | 'dark') */
+    themeModeChange = output();
+    /** Output event with next dark mode state */
+    isDarkModeChange = output();
+    /** Computed effective theme mode */
+    effectiveMode = computed(() => {
+        const mode = this.themeMode();
+        if (mode)
+            return mode;
+        return this.isDarkMode() ? 'dark' : 'light';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []));
+    /** Computed label for active mode */
+    currentModeLabel = computed(() => {
+        switch (this.effectiveMode()) {
+            case 'system': return this.systemLabel();
+            case 'dark': return this.darkLabel();
+            default: return this.lightLabel();
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentModeLabel" }] : /* istanbul ignore next */ []));
+    /** Computed next mode in cycle: system -> light -> dark -> system */
+    nextMode = computed(() => {
+        switch (this.effectiveMode()) {
+            case 'system': return 'light';
+            case 'light': return 'dark';
+            case 'dark': return 'system';
+            default: return 'system';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextMode" }] : /* istanbul ignore next */ []));
+    /** Computed accessible aria label */
+    computedAriaLabel = computed(() => {
+        const current = this.currentModeLabel();
+        const nextModeName = this.nextMode() === 'system' ? this.systemLabel() : this.nextMode() === 'dark' ? this.darkLabel() : this.lightLabel();
+        return `Current theme: ${current}. Switch to ${nextModeName}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Computed tooltip for collapsed sidebar state */
+    computedTooltip = computed(() => {
+        const isCollapsed = this.layoutService?.isLeftNavCollapsed() ?? false;
+        if (!isCollapsed)
+            return null;
+        return this.tooltip() || `Theme: ${this.currentModeLabel()}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedTooltip" }] : /* istanbul ignore next */ []));
+    handleToggle() {
+        const next = this.nextMode();
+        this.themeToggle.emit();
+        this.themeModeChange.emit(next);
+        this.isDarkModeChange.emit(next === 'dark');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosNavThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosNavThemeToggleComponent, isStandalone: true, selector: "talos-nav-theme-toggle", inputs: { themeMode: { classPropertyName: "themeMode", publicName: "themeMode", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, systemLabel: { classPropertyName: "systemLabel", publicName: "systemLabel", isSignal: true, isRequired: false, transformFunction: null }, lightLabel: { classPropertyName: "lightLabel", publicName: "lightLabel", isSignal: true, isRequired: false, transformFunction: null }, darkLabel: { classPropertyName: "darkLabel", publicName: "darkLabel", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeToggle: "themeToggle", themeModeChange: "themeModeChange", isDarkModeChange: "isDarkModeChange" }, host: { properties: { "class.is-collapsed": "layoutService?.isLeftNavCollapsed() ?? false" }, classAttribute: "talos-nav-theme-toggle-host" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="theme-toggle-btn"
+      (click)="handleToggle()"
+      [attr.aria-label]="computedAriaLabel()"
+      [talosTooltip]="computedTooltip() || ''"
+      [tooltipDisabled]="!layoutService?.isLeftNavCollapsed()"
+      tooltipPosition="right">
+      <span class="theme-toggle-icon">
+        @if (effectiveMode() === 'system') {
+          <svg lucideMonitor [size]="16"></svg>
+        } @else if (effectiveMode() === 'dark') {
+          <svg lucideMoon [size]="16"></svg>
+        } @else {
+          <svg lucideSun [size]="16"></svg>
+        }
+      </span>
+      @if (showLabel()) {
+        <span class="theme-toggle-label">{{ currentModeLabel() }}</span>
+      }
+      <span
+        class="theme-toggle-indicator"
+        [class.is-system]="effectiveMode() === 'system'"
+        [class.is-light]="effectiveMode() === 'light'"
+        [class.is-dark]="effectiveMode() === 'dark'"
+        aria-hidden="true">
+        <span class="indicator-thumb"></span>
+      </span>
+    </button>
+  `, isInline: true, styles: [":host{display:block;width:100%}.theme-toggle-btn{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-color, var(--text-color, #0f172a));font-size:12.5px;font-weight:500;cursor:pointer;box-sizing:border-box;gap:9px;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1)}.theme-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb))}.theme-toggle-btn:hover .theme-toggle-icon{color:var(--talos-primary-color, var(--primary-color, #2563eb))}.theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--talos-primary-color, var(--primary-color, #2563eb));transition:color .15s ease}.theme-toggle-icon svg,.theme-toggle-icon lucide-icon{width:15px;height:15px}.theme-toggle-label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;transform:translate(0);max-width:140px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.theme-toggle-indicator{width:40px;height:16px;border-radius:9999px;background:var(--talos-border-color, #cbd5e1);position:relative;flex-shrink:0;display:flex;align-items:center;padding:2px;box-sizing:border-box;opacity:1;max-width:44px;transition:background-color .2s ease,opacity .18s cubic-bezier(.4,0,.2,1),max-width .25s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.theme-toggle-indicator .indicator-thumb{display:block;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:transform .22s cubic-bezier(.4,0,.2,1);transform:translate(0)}.theme-toggle-indicator.is-system{background:var(--talos-border-color, #94a3b8)}.theme-toggle-indicator.is-system .indicator-thumb{transform:translate(0)}.theme-toggle-indicator.is-light{background:#f59e0b}.theme-toggle-indicator.is-light .indicator-thumb{transform:translate(12px)}.theme-toggle-indicator.is-dark{background:var(--talos-primary-color, var(--primary-color, #2563eb))}.theme-toggle-indicator.is-dark .indicator-thumb{transform:translate(24px)}:host(.is-collapsed) .theme-toggle-btn{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto}:host(.is-collapsed) .theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;margin:0}:host(.is-collapsed) .theme-toggle-btn .theme-toggle-label{display:none!important;opacity:0;max-width:0;width:0;padding:0;margin:0;flex:0 0 0;overflow:hidden;visibility:hidden;pointer-events:none}:host(.is-collapsed) .theme-toggle-btn .theme-toggle-indicator{display:none!important;opacity:0;max-width:0;width:0!important;height:0!important;padding:0!important;margin:0!important;border:none!important;flex:0 0 0!important;overflow:hidden;visibility:hidden;pointer-events:none}\n"], dependencies: [{ kind: "component", type: LucideSun, selector: "svg[lucideSun]" }, { kind: "component", type: LucideMoon, selector: "svg[lucideMoon]" }, { kind: "component", type: LucideMonitor, selector: "svg[lucideMonitor]" }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosNavThemeToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-nav-theme-toggle', imports: [LucideSun, LucideMoon, LucideMonitor, TalosTooltipDirective], template: `
+    <button
+      type="button"
+      class="theme-toggle-btn"
+      (click)="handleToggle()"
+      [attr.aria-label]="computedAriaLabel()"
+      [talosTooltip]="computedTooltip() || ''"
+      [tooltipDisabled]="!layoutService?.isLeftNavCollapsed()"
+      tooltipPosition="right">
+      <span class="theme-toggle-icon">
+        @if (effectiveMode() === 'system') {
+          <svg lucideMonitor [size]="16"></svg>
+        } @else if (effectiveMode() === 'dark') {
+          <svg lucideMoon [size]="16"></svg>
+        } @else {
+          <svg lucideSun [size]="16"></svg>
+        }
+      </span>
+      @if (showLabel()) {
+        <span class="theme-toggle-label">{{ currentModeLabel() }}</span>
+      }
+      <span
+        class="theme-toggle-indicator"
+        [class.is-system]="effectiveMode() === 'system'"
+        [class.is-light]="effectiveMode() === 'light'"
+        [class.is-dark]="effectiveMode() === 'dark'"
+        aria-hidden="true">
+        <span class="indicator-thumb"></span>
+      </span>
+    </button>
+  `, host: {
+                        'class': 'talos-nav-theme-toggle-host',
+                        '[class.is-collapsed]': 'layoutService?.isLeftNavCollapsed() ?? false'
+                    }, styles: [":host{display:block;width:100%}.theme-toggle-btn{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-color, var(--text-color, #0f172a));font-size:12.5px;font-weight:500;cursor:pointer;box-sizing:border-box;gap:9px;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1)}.theme-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb))}.theme-toggle-btn:hover .theme-toggle-icon{color:var(--talos-primary-color, var(--primary-color, #2563eb))}.theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--talos-primary-color, var(--primary-color, #2563eb));transition:color .15s ease}.theme-toggle-icon svg,.theme-toggle-icon lucide-icon{width:15px;height:15px}.theme-toggle-label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;transform:translate(0);max-width:140px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.theme-toggle-indicator{width:40px;height:16px;border-radius:9999px;background:var(--talos-border-color, #cbd5e1);position:relative;flex-shrink:0;display:flex;align-items:center;padding:2px;box-sizing:border-box;opacity:1;max-width:44px;transition:background-color .2s ease,opacity .18s cubic-bezier(.4,0,.2,1),max-width .25s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.theme-toggle-indicator .indicator-thumb{display:block;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:transform .22s cubic-bezier(.4,0,.2,1);transform:translate(0)}.theme-toggle-indicator.is-system{background:var(--talos-border-color, #94a3b8)}.theme-toggle-indicator.is-system .indicator-thumb{transform:translate(0)}.theme-toggle-indicator.is-light{background:#f59e0b}.theme-toggle-indicator.is-light .indicator-thumb{transform:translate(12px)}.theme-toggle-indicator.is-dark{background:var(--talos-primary-color, var(--primary-color, #2563eb))}.theme-toggle-indicator.is-dark .indicator-thumb{transform:translate(24px)}:host(.is-collapsed) .theme-toggle-btn{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto}:host(.is-collapsed) .theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;margin:0}:host(.is-collapsed) .theme-toggle-btn .theme-toggle-label{display:none!important;opacity:0;max-width:0;width:0;padding:0;margin:0;flex:0 0 0;overflow:hidden;visibility:hidden;pointer-events:none}:host(.is-collapsed) .theme-toggle-btn .theme-toggle-indicator{display:none!important;opacity:0;max-width:0;width:0!important;height:0!important;padding:0!important;margin:0!important;border:none!important;flex:0 0 0!important;overflow:hidden;visibility:hidden;pointer-events:none}\n"] }]
+        }], propDecorators: { themeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeMode", required: false }] }], isDarkMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDarkMode", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], systemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemLabel", required: false }] }], lightLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightLabel", required: false }] }], darkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkLabel", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], themeToggle: [{ type: i0.Output, args: ["themeToggle"] }], themeModeChange: [{ type: i0.Output, args: ["themeModeChange"] }], isDarkModeChange: [{ type: i0.Output, args: ["isDarkModeChange"] }] } });
+
+class SideNavComponent {
+    layoutService = inject(LayoutService, { optional: true });
+    LucidePanelLeftOpen = LucidePanelLeftOpen;
+    LucidePanelLeftClose = LucidePanelLeftClose;
+    /** Optional external two-way binding for collapsed state. If omitted, syncs with LayoutService. */
+    collapsed = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Effective collapsed state */
+    isCollapsed = computed(() => {
+        const ext = this.collapsed();
+        if (ext !== undefined) {
+            return ext;
+        }
+        return this.layoutService?.isLeftNavCollapsed() ?? false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    /** Toggle collapsed state */
+    toggleCollapse() {
+        if (this.collapsed() !== undefined) {
+            this.collapsed.update((c) => !c);
+        }
+        else if (this.layoutService) {
+            this.layoutService.toggleLeftNav();
+        }
+    }
+    /** Custom header component to render entire header */
+    headerComponent = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerComponent" }] : /* istanbul ignore next */ []));
+    /** Component inputs object to pass to headerComponent */
+    headerComponentInputs = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerComponentInputs" }] : /* istanbul ignore next */ []));
+    /** Custom header template to render entire header */
+    headerTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+    /** Custom logo component to render in header */
+    logoComponent = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logoComponent" }] : /* istanbul ignore next */ []));
+    /** Component inputs object to pass to logoComponent */
+    logoComponentInputs = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logoComponentInputs" }] : /* istanbul ignore next */ []));
+    /** Custom logo template to render in header */
+    logoTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logoTemplate" }] : /* istanbul ignore next */ []));
+    /** Custom body component to render sidebar body */
+    bodyComponent = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyComponent" }] : /* istanbul ignore next */ []));
+    /** Component inputs object to pass to bodyComponent */
+    bodyComponentInputs = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyComponentInputs" }] : /* istanbul ignore next */ []));
+    /** Custom body template to render sidebar body */
+    bodyTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyTemplate" }] : /* istanbul ignore next */ []));
+    /** Custom footer component to render sidebar footer */
+    footerComponent = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerComponent" }] : /* istanbul ignore next */ []));
+    /** Component inputs object to pass to footerComponent */
+    footerComponentInputs = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerComponentInputs" }] : /* istanbul ignore next */ []));
+    /** Custom footer template to render sidebar footer */
+    footerTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+    /** Whether to show the header in sidebar */
+    showHeader = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
+    /** Whether to show the logo in header */
+    showLogo = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLogo" }] : /* istanbul ignore next */ []));
+    /** Whether to show the hamburger / panel toggle button in header */
+    showToggle = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []));
+    /** Whether to show the dark mode / light mode theme toggle button in sidebar */
+    showThemeToggle = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showThemeToggle" }] : /* istanbul ignore next */ []));
+    /** Explicit 3-way theme mode: 'system' | 'light' | 'dark' */
+    themeMode = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeMode" }] : /* istanbul ignore next */ []));
+    /** Current dark mode status (boolean fallback) */
+    isDarkMode = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDarkMode" }] : /* istanbul ignore next */ []));
+    /** Output event when theme toggle is clicked */
+    themeToggle = output();
+    /** Output event when theme mode changes */
+    themeModeChange = output();
+    /** Track active item ID */
+    activeItemId = signal('dashboards', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeItemId" }] : /* istanbul ignore next */ []));
+    /** Concise Navigation Groups for clean sidebar UI */
+    navGroups = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navGroups" }] : /* istanbul ignore next */ []));
+    /** Secondary / Footer Navigation Items */
+    footerItems = input([
+        { id: 'help', label: 'Help Center', icon: LucideCircleHelp },
+        { id: 'settings', label: 'Settings', icon: LucideSettings }
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerItems" }] : /* istanbul ignore next */ []));
+    /** User Profile Info for Bottom Footer */
+    userProfile = input({
+        name: 'Eugene Lamar',
+        email: 'eugene@glan.com'
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userProfile" }] : /* istanbul ignore next */ []));
+    /** Output event when a nav item is clicked */
+    itemClick = output();
+    selectItem(item) {
+        if (item.disabled)
+            return;
+        if (item.id) {
+            this.activeItemId.set(item.id);
+        }
+        this.itemClick.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SideNavComponent, isStandalone: true, selector: "talos-side-nav", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, headerComponent: { classPropertyName: "headerComponent", publicName: "headerComponent", isSignal: true, isRequired: false, transformFunction: null }, headerComponentInputs: { classPropertyName: "headerComponentInputs", publicName: "headerComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", 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 }, bodyComponent: { classPropertyName: "bodyComponent", publicName: "bodyComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyComponentInputs: { classPropertyName: "bodyComponentInputs", publicName: "bodyComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyTemplate: { classPropertyName: "bodyTemplate", publicName: "bodyTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerComponent: { classPropertyName: "footerComponent", publicName: "footerComponent", isSignal: true, isRequired: false, transformFunction: null }, footerComponentInputs: { classPropertyName: "footerComponentInputs", publicName: "footerComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", 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 }, navGroups: { classPropertyName: "navGroups", publicName: "navGroups", isSignal: true, isRequired: false, transformFunction: null }, footerItems: { classPropertyName: "footerItems", publicName: "footerItems", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", themeToggle: "themeToggle", themeModeChange: "themeModeChange", itemClick: "itemClick" }, host: { attributes: { "role": "navigation" }, properties: { "class.is-collapsed": "isCollapsed()", "class.dark-theme": "isDarkMode()", "attr.data-theme": "isDarkMode() ? \"dark\" : \"light\"", "attr.aria-hidden": "isCollapsed()" }, classAttribute: "talos-side-nav-host" }, ngImport: i0, template: "<div class=\"side-nav-inner\">\n  <!-- Header -->\n  @if (showHeader()) {\n  <div class=\"side-nav-header\">\n    @if (headerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: headerComponentInputs()\" />\n    } @else if (headerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[side-nav-header]\">\n      <div class=\"default-nav-header\">\n        <ng-content select=\"[side-nav-brand]\">\n          @if (showLogo()) {\n          <div class=\"brand-wrapper\" title=\"Logo\">\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=\"[side-nav-logo]\" />\n            }\n          </div>\n          }\n        </ng-content>\n\n        @if (showToggle()) {\n        <button type=\"button\" class=\"hamburger-toggle-btn\" (click)=\"toggleCollapse()\"\n          [attr.aria-label]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          tooltipPosition=\"right\">\n          <svg lucidePanelLeft class=\"toggle-icon\" [size]=\"18\"></svg>\n        </button>\n        }\n      </div>\n    </ng-content>\n    }\n  </div>\n  }\n\n  <!-- Body Navigation Items -->\n  <div class=\"side-nav-body\">\n    @if (bodyComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: bodyComponentInputs()\" />\n    } @else if (bodyTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else if (navGroups().length > 0) {\n    <nav class=\"nav-groups-container\" aria-label=\"Sidebar Navigation\">\n      @for (group of navGroups(); track group.title || $index) {\n      <talos-nav-group [title]=\"group.title\" [collapsible]=\"group.collapsible ?? false\"\n        [collapsed]=\"group.collapsed ?? false\">\n        @for (item of group.items; track item.id || item.label) {\n        <talos-nav-item [label]=\"item.label\" [icon]=\"item.icon\" [badge]=\"item.badge\" [disabled]=\"item.disabled ?? false\"\n          [collapsed]=\"isCollapsed()\"\n          [active]=\"(item.id && activeItemId() === item.id) || !!item.active\" (itemClick)=\"selectItem(item)\" />\n        }\n      </talos-nav-group>\n      }\n    </nav>\n    } @else {\n    <!-- Projected content slot for custom body content -->\n    <ng-content select=\"[side-nav-body]\" />\n    <ng-content />\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"side-nav-footer\">\n    @if (footerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: footerComponentInputs()\" />\n    } @else if (footerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[side-nav-footer]\">\n      <div class=\"default-nav-footer\">\n        @if (footerItems().length > 0) {\n        <ul class=\"footer-nav-list\">\n          @for (item of footerItems(); track item.id || item.label) {\n          <talos-nav-item [label]=\"item.label\" [icon]=\"item.icon\" [disabled]=\"item.disabled ?? false\"\n            [collapsed]=\"isCollapsed()\"\n            [active]=\"item.id ? activeItemId() === item.id : !!item.active\" (itemClick)=\"selectItem(item)\" />\n          }\n        </ul>\n        }\n\n        @if (showThemeToggle()) {\n        <talos-nav-theme-toggle\n          [themeMode]=\"themeMode()\"\n          [isDarkMode]=\"isDarkMode()\"\n          (themeToggle)=\"themeToggle.emit()\"\n          (themeModeChange)=\"themeModeChange.emit($event)\"\n        />\n        }\n\n        @if (userProfile(); as profile) {\n        <div class=\"user-profile-card\"\n          [talosTooltip]=\"profile.name + ' (' + profile.email + ')'\"\n          [tooltipDisabled]=\"!isCollapsed()\"\n          tooltipPosition=\"right\">\n          <div class=\"avatar-container\">\n            @if (profile.avatarUrl) {\n            <img [src]=\"profile.avatarUrl\" [alt]=\"profile.name\" class=\"avatar-img\" />\n            } @else {\n            <div class=\"avatar-placeholder\">\n              {{ profile.name.charAt(0) }}\n            </div>\n            }\n          </div>\n          <div class=\"user-info\">\n            <span class=\"user-name\">{{ profile.name }}</span>\n            <span class=\"user-email\">{{ profile.email }}</span>\n          </div>\n          <div class=\"profile-action\">\n            <svg lucideChevronsUpDown class=\"profile-chevron\" [size]=\"14\"></svg>\n          </div>\n        </div>\n        }\n\n        <!-- Bottom Collapse/Expand Bar -->\n        <button type=\"button\" class=\"footer-collapse-bar\" (click)=\"toggleCollapse()\"\n          [attr.aria-label]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [tooltipDisabled]=\"!isCollapsed()\"\n          tooltipPosition=\"right\">\n          <span class=\"collapse-bar-icon\">\n            @if (isCollapsed()) {\n            <svg lucidePanelLeftOpen [size]=\"16\"></svg>\n            } @else {\n            <svg lucidePanelLeftClose [size]=\"16\"></svg>\n            }\n          </span>\n          <span class=\"collapse-bar-text\">Collapse sidebar</span>\n        </button>\n      </div>\n    </ng-content>\n    }\n  </div>\n</div>", styles: [":host,talos-side-nav,.talos-side-nav-host{display:flex;flex-direction:column;width:var(--talos-sidebar-width, var(--sidebar-width, 260px));height:100%;min-height:0;background:var(--talos-nav-bg, var(--nav-bg, #ffffff));border-right:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));transition:width .25s cubic-bezier(.4,0,.2,1);box-sizing:border-box;position:relative;overflow:hidden}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:host.dark-theme,talos-side-nav.dark-theme,.talos-side-nav-host.dark-theme{--talos-nav-bg: #090d16;--nav-bg: #090d16;--talos-card-bg: #0f172a;--talos-nav-border-color: rgba(255, 255, 255, .08);--nav-border-color: rgba(255, 255, 255, .08);--talos-border-color: rgba(255, 255, 255, .1);--border-color: rgba(255, 255, 255, .1);--talos-bg-color: #131d31;--bg-color: #131d31;--talos-text-color: #f8fafc;--text-color: #f8fafc;--talos-text-muted: #94a3b8;--text-muted: #94a3b8;--talos-nav-hover-bg: rgba(255, 255, 255, .06);--talos-nav-hover-text: #f8fafc;--talos-active-nav-bg: rgba(59, 130, 246, .16);--talos-active-nav-text: #ffffff}:root[data-theme=dark] :host .hamburger-toggle-btn,:root.dark :host .hamburger-toggle-btn,[data-theme=dark] :host .hamburger-toggle-btn,[data-mode=dark] :host .hamburger-toggle-btn,.dark :host .hamburger-toggle-btn,.dark-theme :host .hamburger-toggle-btn,:host.dark-theme .hamburger-toggle-btn,talos-side-nav.dark-theme .hamburger-toggle-btn,.talos-side-nav-host.dark-theme .hamburger-toggle-btn{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .hamburger-toggle-btn:hover,:root.dark :host .hamburger-toggle-btn:hover,[data-theme=dark] :host .hamburger-toggle-btn:hover,[data-mode=dark] :host .hamburger-toggle-btn:hover,.dark :host .hamburger-toggle-btn:hover,.dark-theme :host .hamburger-toggle-btn:hover,:host.dark-theme .hamburger-toggle-btn:hover,talos-side-nav.dark-theme .hamburger-toggle-btn:hover,.talos-side-nav-host.dark-theme .hamburger-toggle-btn:hover{background:#131d31;color:var(--talos-primary, #3b82f6);border-color:var(--talos-primary, #3b82f6);box-shadow:0 0 12px #3b82f640}:root[data-theme=dark] :host .nav-group-title,:root.dark :host .nav-group-title,[data-theme=dark] :host .nav-group-title,[data-mode=dark] :host .nav-group-title,.dark :host .nav-group-title,.dark-theme :host .nav-group-title,:host.dark-theme .nav-group-title,talos-side-nav.dark-theme .nav-group-title,.talos-side-nav-host.dark-theme .nav-group-title{color:#94a3b8}:root[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover,:root.dark :host .nav-group-title.nav-group-header-btn:hover,[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover,[data-mode=dark] :host .nav-group-title.nav-group-header-btn:hover,.dark :host .nav-group-title.nav-group-header-btn:hover,.dark-theme :host .nav-group-title.nav-group-header-btn:hover,:host.dark-theme .nav-group-title.nav-group-header-btn:hover,talos-side-nav.dark-theme .nav-group-title.nav-group-header-btn:hover,.talos-side-nav-host.dark-theme .nav-group-title.nav-group-header-btn:hover{color:#f8fafc}:root[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,:root.dark :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,[data-mode=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.dark :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.dark-theme :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,:host.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,talos-side-nav.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.talos-side-nav-host.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron{color:#f8fafc}:root[data-theme=dark] :host .nav-link,:root.dark :host .nav-link,[data-theme=dark] :host .nav-link,[data-mode=dark] :host .nav-link,.dark :host .nav-link,.dark-theme :host .nav-link,:host.dark-theme .nav-link,talos-side-nav.dark-theme .nav-link,.talos-side-nav-host.dark-theme .nav-link{color:#94a3b8}:root[data-theme=dark] :host .nav-link .nav-icon,:root.dark :host .nav-link .nav-icon,[data-theme=dark] :host .nav-link .nav-icon,[data-mode=dark] :host .nav-link .nav-icon,.dark :host .nav-link .nav-icon,.dark-theme :host .nav-link .nav-icon,:host.dark-theme .nav-link .nav-icon,talos-side-nav.dark-theme .nav-link .nav-icon,.talos-side-nav-host.dark-theme .nav-link .nav-icon{color:#94a3b8}:root[data-theme=dark] :host .nav-link:hover,:root.dark :host .nav-link:hover,[data-theme=dark] :host .nav-link:hover,[data-mode=dark] :host .nav-link:hover,.dark :host .nav-link:hover,.dark-theme :host .nav-link:hover,:host.dark-theme .nav-link:hover,talos-side-nav.dark-theme .nav-link:hover,.talos-side-nav-host.dark-theme .nav-link:hover{background-color:#ffffff0f;color:#f8fafc}:root[data-theme=dark] :host .nav-link:hover .nav-icon,:root.dark :host .nav-link:hover .nav-icon,[data-theme=dark] :host .nav-link:hover .nav-icon,[data-mode=dark] :host .nav-link:hover .nav-icon,.dark :host .nav-link:hover .nav-icon,.dark-theme :host .nav-link:hover .nav-icon,:host.dark-theme .nav-link:hover .nav-icon,talos-side-nav.dark-theme .nav-link:hover .nav-icon,.talos-side-nav-host.dark-theme .nav-link:hover .nav-icon{color:#f8fafc}:root[data-theme=dark] :host .nav-link.active,:root.dark :host .nav-link.active,[data-theme=dark] :host .nav-link.active,[data-mode=dark] :host .nav-link.active,.dark :host .nav-link.active,.dark-theme :host .nav-link.active,:host.dark-theme .nav-link.active,talos-side-nav.dark-theme .nav-link.active,.talos-side-nav-host.dark-theme .nav-link.active{background-color:var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));color:#fff}:root[data-theme=dark] :host .nav-link.active .nav-icon,:root.dark :host .nav-link.active .nav-icon,[data-theme=dark] :host .nav-link.active .nav-icon,[data-mode=dark] :host .nav-link.active .nav-icon,.dark :host .nav-link.active .nav-icon,.dark-theme :host .nav-link.active .nav-icon,:host.dark-theme .nav-link.active .nav-icon,talos-side-nav.dark-theme .nav-link.active .nav-icon,.talos-side-nav-host.dark-theme .nav-link.active .nav-icon{color:var(--talos-primary, #3b82f6)}:root[data-theme=dark] :host .user-profile-card:hover,:root.dark :host .user-profile-card:hover,[data-theme=dark] :host .user-profile-card:hover,[data-mode=dark] :host .user-profile-card:hover,.dark :host .user-profile-card:hover,.dark-theme :host .user-profile-card:hover,:host.dark-theme .user-profile-card:hover,talos-side-nav.dark-theme .user-profile-card:hover,.talos-side-nav-host.dark-theme .user-profile-card:hover{background-color:#ffffff0f}:root[data-theme=dark] :host .user-profile-card .user-name,:root.dark :host .user-profile-card .user-name,[data-theme=dark] :host .user-profile-card .user-name,[data-mode=dark] :host .user-profile-card .user-name,.dark :host .user-profile-card .user-name,.dark-theme :host .user-profile-card .user-name,:host.dark-theme .user-profile-card .user-name,talos-side-nav.dark-theme .user-profile-card .user-name,.talos-side-nav-host.dark-theme .user-profile-card .user-name{color:#f8fafc}:root[data-theme=dark] :host .user-profile-card .user-email,:root.dark :host .user-profile-card .user-email,[data-theme=dark] :host .user-profile-card .user-email,[data-mode=dark] :host .user-profile-card .user-email,.dark :host .user-profile-card .user-email,.dark-theme :host .user-profile-card .user-email,:host.dark-theme .user-profile-card .user-email,talos-side-nav.dark-theme .user-profile-card .user-email,.talos-side-nav-host.dark-theme .user-profile-card .user-email{color:#94a3b8}:root[data-theme=dark] :host .footer-collapse-bar,:root.dark :host .footer-collapse-bar,[data-theme=dark] :host .footer-collapse-bar,[data-mode=dark] :host .footer-collapse-bar,.dark :host .footer-collapse-bar,.dark-theme :host .footer-collapse-bar,:host.dark-theme .footer-collapse-bar,talos-side-nav.dark-theme .footer-collapse-bar,.talos-side-nav-host.dark-theme .footer-collapse-bar{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .footer-collapse-bar:hover,:root.dark :host .footer-collapse-bar:hover,[data-theme=dark] :host .footer-collapse-bar:hover,[data-mode=dark] :host .footer-collapse-bar:hover,.dark :host .footer-collapse-bar:hover,.dark-theme :host .footer-collapse-bar:hover,:host.dark-theme .footer-collapse-bar:hover,talos-side-nav.dark-theme .footer-collapse-bar:hover,.talos-side-nav-host.dark-theme .footer-collapse-bar:hover{background-color:#131d31;color:#f8fafc;border-color:#fff3}:root[data-theme=dark] :host .theme-toggle-btn,:root.dark :host .theme-toggle-btn,[data-theme=dark] :host .theme-toggle-btn,[data-mode=dark] :host .theme-toggle-btn,.dark :host .theme-toggle-btn,.dark-theme :host .theme-toggle-btn,:host.dark-theme .theme-toggle-btn,talos-side-nav.dark-theme .theme-toggle-btn,.talos-side-nav-host.dark-theme .theme-toggle-btn{background:#0f172a;border-color:#ffffff1a;color:#f8fafc}:root[data-theme=dark] :host .theme-toggle-btn:hover,:root.dark :host .theme-toggle-btn:hover,[data-theme=dark] :host .theme-toggle-btn:hover,[data-mode=dark] :host .theme-toggle-btn:hover,.dark :host .theme-toggle-btn:hover,.dark-theme :host .theme-toggle-btn:hover,:host.dark-theme .theme-toggle-btn:hover,talos-side-nav.dark-theme .theme-toggle-btn:hover,.talos-side-nav-host.dark-theme .theme-toggle-btn:hover{background-color:#131d31;color:var(--talos-primary, #3b82f6);border-color:var(--talos-primary, #3b82f6)}:host.is-collapsed,talos-side-nav.is-collapsed,.talos-side-nav-host.is-collapsed{width:var(--talos-sidebar-collapsed-width, var(--sidebar-collapsed-width, 68px))}:host.is-collapsed .side-nav-header,talos-side-nav.is-collapsed .side-nav-header,.talos-side-nav-host.is-collapsed .side-nav-header{flex-shrink:0}:host.is-collapsed .default-nav-header,talos-side-nav.is-collapsed .default-nav-header,.talos-side-nav-host.is-collapsed .default-nav-header{justify-content:center;padding:0;gap:0}:host.is-collapsed .brand-wrapper,talos-side-nav.is-collapsed .brand-wrapper,.talos-side-nav-host.is-collapsed .brand-wrapper{max-width:0;opacity:0;transform:translate(-15px);visibility:hidden;pointer-events:none}:host.is-collapsed .hamburger-toggle-btn,talos-side-nav.is-collapsed .hamburger-toggle-btn,.talos-side-nav-host.is-collapsed .hamburger-toggle-btn{margin:0 auto}:host.is-collapsed .side-nav-body,talos-side-nav.is-collapsed .side-nav-body,.talos-side-nav-host.is-collapsed .side-nav-body{padding:12px 6px;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1}:host.is-collapsed .side-nav-body::-webkit-scrollbar,talos-side-nav.is-collapsed .side-nav-body::-webkit-scrollbar,.talos-side-nav-host.is-collapsed .side-nav-body::-webkit-scrollbar{width:3px}:host.is-collapsed .nav-groups-container,talos-side-nav.is-collapsed .nav-groups-container,.talos-side-nav-host.is-collapsed .nav-groups-container{gap:8px}:host.is-collapsed .nav-group-title,talos-side-nav.is-collapsed .nav-group-title,.talos-side-nav-host.is-collapsed .nav-group-title{max-height:0;opacity:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .nav-link,talos-side-nav.is-collapsed .nav-link,.talos-side-nav-host.is-collapsed .nav-link{padding:0;gap:0;justify-content:center;width:38px;height:36px;margin:0 auto;border-radius:8px}:host.is-collapsed .nav-link .nav-icon,talos-side-nav.is-collapsed .nav-link .nav-icon,.talos-side-nav-host.is-collapsed .nav-link .nav-icon{margin:0}:host.is-collapsed .nav-label,talos-side-nav.is-collapsed .nav-label,.talos-side-nav-host.is-collapsed .nav-label{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .nav-badge,talos-side-nav.is-collapsed .nav-badge,.talos-side-nav-host.is-collapsed .nav-badge{opacity:0;max-width:0;padding:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .side-nav-footer,talos-side-nav.is-collapsed .side-nav-footer,.talos-side-nav-host.is-collapsed .side-nav-footer{padding:12px 6px 16px;flex-shrink:0}:host.is-collapsed .theme-toggle-btn,talos-side-nav.is-collapsed .theme-toggle-btn,.talos-side-nav-host.is-collapsed .theme-toggle-btn{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto}:host.is-collapsed .theme-toggle-btn .theme-toggle-icon,talos-side-nav.is-collapsed .theme-toggle-btn .theme-toggle-icon,.talos-side-nav-host.is-collapsed .theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;margin:0}:host.is-collapsed .theme-toggle-label,talos-side-nav.is-collapsed .theme-toggle-label,.talos-side-nav-host.is-collapsed .theme-toggle-label{opacity:0;max-width:0;width:0;padding:0;margin:0;flex:0 0 0;overflow:hidden;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .theme-toggle-indicator,talos-side-nav.is-collapsed .theme-toggle-indicator,.talos-side-nav-host.is-collapsed .theme-toggle-indicator{display:none!important;opacity:0;max-width:0;width:0!important;height:0!important;padding:0!important;margin:0!important;border:none!important;flex:0 0 0!important;overflow:hidden;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .user-profile-card,talos-side-nav.is-collapsed .user-profile-card,.talos-side-nav-host.is-collapsed .user-profile-card{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto;box-sizing:border-box}:host.is-collapsed .user-info,:host.is-collapsed .profile-action,talos-side-nav.is-collapsed .user-info,talos-side-nav.is-collapsed .profile-action,.talos-side-nav-host.is-collapsed .user-info,.talos-side-nav-host.is-collapsed .profile-action{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .footer-collapse-bar,talos-side-nav.is-collapsed .footer-collapse-bar,.talos-side-nav-host.is-collapsed .footer-collapse-bar{padding:0;gap:0;justify-content:center;width:38px;height:36px;margin:0 auto}:host.is-collapsed .collapse-bar-text,talos-side-nav.is-collapsed .collapse-bar-text,.talos-side-nav-host.is-collapsed .collapse-bar-text{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}.side-nav-inner{display:flex;flex-direction:column;height:100%;min-height:0;position:relative;overflow:hidden}.side-nav-header{flex-shrink:0;min-height:64px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9))}.default-nav-header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}.brand-wrapper{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;max-width:180px;opacity:1;transform:translate(0);white-space:nowrap;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.brand-wrapper>*{display:flex;align-items:center;gap:10px;overflow:hidden;white-space:nowrap;max-width:100%}.brand-wrapper img,.brand-wrapper svg{flex-shrink:0;max-height:32px;object-fit:contain}.hamburger-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));cursor:pointer;transition:all .15s ease;flex-shrink:0}.hamburger-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:0 2px 6px #2563eb26}.hamburger-toggle-btn .toggle-icon{display:block}.side-nav-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 12px;transition:padding .25s cubic-bezier(.4,0,.2,1)}.side-nav-body::-webkit-scrollbar{width:4px}.side-nav-body::-webkit-scrollbar-thumb{background-color:var(--talos-border-color, #e2e8f0);border-radius:4px}.nav-groups-container{display:flex;flex-direction:column;gap:12px}.nav-group,talos-nav-group,.talos-nav-group{display:flex;flex-direction:column}.nav-item,talos-nav-item,.talos-nav-item{display:block}talos-nav-theme-toggle,.talos-nav-theme-toggle-host{display:block}.nav-group-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--talos-text-muted, var(--text-muted, #94a3b8));padding:0 10px;margin-bottom:4px;white-space:nowrap;overflow:hidden;max-height:22px;opacity:1;transform:translate(0);transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),margin .25s cubic-bezier(.4,0,.2,1),padding .25s cubic-bezier(.4,0,.2,1),visibility .25s}.nav-group-title.nav-group-header-btn{display:flex;align-items:center;justify-content:space-between;width:100%;height:22px;background:transparent;border:none;cursor:pointer;text-align:left;border-radius:6px;box-sizing:border-box;font-family:inherit}.nav-group-title.nav-group-header-btn:hover,.nav-group-title.nav-group-header-btn:hover .nav-group-chevron{color:var(--talos-text-color, var(--text-color, #1e293b))}.nav-group-title.nav-group-header-btn:focus-visible{outline:2px solid var(--talos-primary-color, var(--primary-color, #3b82f6));outline-offset:1px}.nav-group-chevron{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s cubic-bezier(.4,0,.2,1),color .15s ease;color:var(--talos-text-muted, var(--text-muted, #94a3b8))}.nav-group-chevron.is-collapsed{transform:rotate(-90deg)}.nav-group-content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);opacity:1;overflow:visible}.nav-group-content.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none;overflow:hidden}.nav-group-content.is-collapsed>.nav-item-list{overflow:hidden}.nav-group-content>.nav-item-list{min-height:0;overflow:visible}.nav-item-list,.footer-nav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}.nav-link{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border-radius:8px;border:none;background:transparent;color:var(--talos-text-muted, #64748b);font-size:13px;font-weight:500;line-height:1.4;cursor:pointer;transition:background-color .15s ease,color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);text-align:left;gap:10px;white-space:nowrap;outline:none}.nav-link:hover{background-color:var(--talos-nav-hover-bg, var(--talos-bg-subtle, #f1f5f9));color:var(--talos-nav-hover-text, var(--talos-text-primary, #0f172a))}.nav-link:hover .nav-icon{color:var(--talos-nav-hover-text, var(--talos-text-primary, #0f172a))}.nav-link.active{background-color:var(--talos-active-nav-bg, var(--talos-primary-subtle-bg, #eff6ff));color:var(--talos-active-nav-text, var(--talos-primary-text, #1d4ed8));font-weight:600}.nav-link.active .nav-icon{color:var(--talos-primary, #2563eb)}.nav-link .nav-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--talos-text-muted, #64748b);flex-shrink:0;transition:color .15s ease}.nav-link .nav-icon svg,.nav-link .nav-icon lucide-icon{width:17px;height:17px;stroke-width:1.85px}.nav-link .nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transform:translate(0);max-width:180px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.nav-link .nav-badge{font-size:10px;font-weight:600;padding:1.5px 6px;border-radius:10px;background-color:var(--talos-badge-bg, #eff6ff);color:var(--talos-primary-color, var(--primary-color, #2563eb));white-space:nowrap;overflow:hidden;opacity:1;transform:translate(0);max-width:60px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),padding .25s cubic-bezier(.4,0,.2,1),visibility .25s}.side-nav-footer{flex-shrink:0;padding:14px 10px;border-top:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));transition:padding .25s cubic-bezier(.4,0,.2,1)}.default-nav-footer{display:flex;flex-direction:column;gap:10px}talos-nav-theme-toggle .theme-toggle-btn,.talos-nav-theme-toggle-host .theme-toggle-btn,.talos-side-nav-host .theme-toggle-btn{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-color, var(--text-color, #0f172a));font-size:12.5px;font-weight:500;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease,border-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);gap:9px;white-space:nowrap}talos-nav-theme-toggle .theme-toggle-btn:hover,.talos-nav-theme-toggle-host .theme-toggle-btn:hover,.talos-side-nav-host .theme-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb))}talos-nav-theme-toggle .theme-toggle-btn:hover .theme-toggle-icon,.talos-nav-theme-toggle-host .theme-toggle-btn:hover .theme-toggle-icon,.talos-side-nav-host .theme-toggle-btn:hover .theme-toggle-icon{color:var(--talos-primary-color, var(--primary-color, #2563eb))}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-icon,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-icon,.talos-side-nav-host .theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--talos-primary-color, var(--primary-color, #2563eb));transition:color .15s ease}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-icon svg,talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-icon lucide-icon,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-icon svg,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-icon lucide-icon,.talos-side-nav-host .theme-toggle-btn .theme-toggle-icon svg,.talos-side-nav-host .theme-toggle-btn .theme-toggle-icon lucide-icon{width:15px;height:15px}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-label,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-label,.talos-side-nav-host .theme-toggle-btn .theme-toggle-label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;transform:translate(0);max-width:140px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator{width:30px;height:16px;border-radius:9999px;background:var(--talos-border-color, #cbd5e1);position:relative;flex-shrink:0;display:flex;align-items:center;padding:2px;box-sizing:border-box;opacity:1;max-width:40px;transition:background-color .2s ease,opacity .18s cubic-bezier(.4,0,.2,1),max-width .25s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator .indicator-thumb,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator .indicator-thumb,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator .indicator-thumb{display:block;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s cubic-bezier(.4,0,.2,1);transform:translate(0)}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator.is-dark,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator.is-dark,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator.is-dark{background:var(--talos-primary-color, var(--primary-color, #2563eb))}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator.is-dark .indicator-thumb,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator.is-dark .indicator-thumb,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator.is-dark .indicator-thumb{transform:translate(14px)}.user-profile-card{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;background:transparent;cursor:pointer;transition:background-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none}.user-profile-card:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc))}.user-profile-card:hover .profile-chevron{color:var(--talos-text-color, #334155)}.avatar-container{flex-shrink:0}.avatar-img{width:30px;height:30px;border-radius:50%;object-fit:cover}.avatar-placeholder{width:30px;height:30px;border-radius:50%;background:var(--talos-avatar-bg, #e0f2fe);color:var(--talos-primary-color, var(--primary-color, #0369a1));font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center}.user-info{flex:1;display:flex;flex-direction:column;overflow:hidden;max-width:150px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.user-name{font-size:12.5px;font-weight:600;color:var(--talos-text-color, var(--text-color, #0f172a));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.user-email{font-size:11px;color:var(--talos-text-muted, var(--text-muted, #94a3b8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.profile-action{flex-shrink:0;display:flex;align-items:center;max-width:20px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.profile-chevron{color:var(--talos-text-muted, var(--text-muted, #94a3b8));transition:color .15s ease}.footer-collapse-bar{display:flex;align-items:center;gap:9px;width:100%;height:36px;padding:0 10px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));border-radius:8px;background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));font-size:12.5px;font-weight:500;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease,border-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);white-space:nowrap}.footer-collapse-bar:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb))}.footer-collapse-bar .collapse-bar-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.footer-collapse-bar .collapse-bar-icon svg,.footer-collapse-bar .collapse-bar-icon lucide-icon{width:15px;height:15px}.collapse-bar-text{white-space:nowrap;overflow:hidden;max-width:140px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}\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: LucidePanelLeft, selector: "svg[lucidePanelLeft], svg[lucideSidebar]" }, { kind: "component", type: LucideChevronsUpDown, selector: "svg[lucideChevronsUpDown]" }, { kind: "component", type: LucidePanelLeftOpen, selector: "svg[lucidePanelLeftOpen], svg[lucideSidebarOpen]" }, { kind: "component", type: LucidePanelLeftClose, selector: "svg[lucidePanelLeftClose], svg[lucideSidebarClose]" }, { kind: "component", type: TalosNavGroupComponent, selector: "talos-nav-group", inputs: ["title", "collapsible", "collapsed"], outputs: ["collapsedChange"] }, { kind: "component", type: TalosNavItemComponent, selector: "talos-nav-item", inputs: ["label", "icon", "active", "badge", "disabled", "route", "tooltip", "collapsed"], outputs: ["itemClick"] }, { kind: "component", type: TalosNavThemeToggleComponent, selector: "talos-nav-theme-toggle", inputs: ["themeMode", "isDarkMode", "showLabel", "systemLabel", "lightLabel", "darkLabel", "tooltip"], outputs: ["themeToggle", "themeModeChange", "isDarkModeChange"] }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SideNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-side-nav', imports: [
+                        NgComponentOutlet,
+                        NgTemplateOutlet,
+                        LucidePanelLeft,
+                        LucideChevronsUpDown,
+                        LucidePanelLeftOpen,
+                        LucidePanelLeftClose,
+                        TalosNavGroupComponent,
+                        TalosNavItemComponent,
+                        TalosNavThemeToggleComponent,
+                        TalosTooltipDirective
+                    ], encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'talos-side-nav-host',
+                        '[class.is-collapsed]': 'isCollapsed()',
+                        '[class.dark-theme]': 'isDarkMode()',
+                        '[attr.data-theme]': 'isDarkMode() ? "dark" : "light"',
+                        '[attr.aria-hidden]': 'isCollapsed()',
+                        'role': 'navigation'
+                    }, template: "<div class=\"side-nav-inner\">\n  <!-- Header -->\n  @if (showHeader()) {\n  <div class=\"side-nav-header\">\n    @if (headerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: headerComponentInputs()\" />\n    } @else if (headerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[side-nav-header]\">\n      <div class=\"default-nav-header\">\n        <ng-content select=\"[side-nav-brand]\">\n          @if (showLogo()) {\n          <div class=\"brand-wrapper\" title=\"Logo\">\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=\"[side-nav-logo]\" />\n            }\n          </div>\n          }\n        </ng-content>\n\n        @if (showToggle()) {\n        <button type=\"button\" class=\"hamburger-toggle-btn\" (click)=\"toggleCollapse()\"\n          [attr.aria-label]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          tooltipPosition=\"right\">\n          <svg lucidePanelLeft class=\"toggle-icon\" [size]=\"18\"></svg>\n        </button>\n        }\n      </div>\n    </ng-content>\n    }\n  </div>\n  }\n\n  <!-- Body Navigation Items -->\n  <div class=\"side-nav-body\">\n    @if (bodyComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: bodyComponentInputs()\" />\n    } @else if (bodyTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else if (navGroups().length > 0) {\n    <nav class=\"nav-groups-container\" aria-label=\"Sidebar Navigation\">\n      @for (group of navGroups(); track group.title || $index) {\n      <talos-nav-group [title]=\"group.title\" [collapsible]=\"group.collapsible ?? false\"\n        [collapsed]=\"group.collapsed ?? false\">\n        @for (item of group.items; track item.id || item.label) {\n        <talos-nav-item [label]=\"item.label\" [icon]=\"item.icon\" [badge]=\"item.badge\" [disabled]=\"item.disabled ?? false\"\n          [collapsed]=\"isCollapsed()\"\n          [active]=\"(item.id && activeItemId() === item.id) || !!item.active\" (itemClick)=\"selectItem(item)\" />\n        }\n      </talos-nav-group>\n      }\n    </nav>\n    } @else {\n    <!-- Projected content slot for custom body content -->\n    <ng-content select=\"[side-nav-body]\" />\n    <ng-content />\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"side-nav-footer\">\n    @if (footerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: footerComponentInputs()\" />\n    } @else if (footerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[side-nav-footer]\">\n      <div class=\"default-nav-footer\">\n        @if (footerItems().length > 0) {\n        <ul class=\"footer-nav-list\">\n          @for (item of footerItems(); track item.id || item.label) {\n          <talos-nav-item [label]=\"item.label\" [icon]=\"item.icon\" [disabled]=\"item.disabled ?? false\"\n            [collapsed]=\"isCollapsed()\"\n            [active]=\"item.id ? activeItemId() === item.id : !!item.active\" (itemClick)=\"selectItem(item)\" />\n          }\n        </ul>\n        }\n\n        @if (showThemeToggle()) {\n        <talos-nav-theme-toggle\n          [themeMode]=\"themeMode()\"\n          [isDarkMode]=\"isDarkMode()\"\n          (themeToggle)=\"themeToggle.emit()\"\n          (themeModeChange)=\"themeModeChange.emit($event)\"\n        />\n        }\n\n        @if (userProfile(); as profile) {\n        <div class=\"user-profile-card\"\n          [talosTooltip]=\"profile.name + ' (' + profile.email + ')'\"\n          [tooltipDisabled]=\"!isCollapsed()\"\n          tooltipPosition=\"right\">\n          <div class=\"avatar-container\">\n            @if (profile.avatarUrl) {\n            <img [src]=\"profile.avatarUrl\" [alt]=\"profile.name\" class=\"avatar-img\" />\n            } @else {\n            <div class=\"avatar-placeholder\">\n              {{ profile.name.charAt(0) }}\n            </div>\n            }\n          </div>\n          <div class=\"user-info\">\n            <span class=\"user-name\">{{ profile.name }}</span>\n            <span class=\"user-email\">{{ profile.email }}</span>\n          </div>\n          <div class=\"profile-action\">\n            <svg lucideChevronsUpDown class=\"profile-chevron\" [size]=\"14\"></svg>\n          </div>\n        </div>\n        }\n\n        <!-- Bottom Collapse/Expand Bar -->\n        <button type=\"button\" class=\"footer-collapse-bar\" (click)=\"toggleCollapse()\"\n          [attr.aria-label]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [tooltipDisabled]=\"!isCollapsed()\"\n          tooltipPosition=\"right\">\n          <span class=\"collapse-bar-icon\">\n            @if (isCollapsed()) {\n            <svg lucidePanelLeftOpen [size]=\"16\"></svg>\n            } @else {\n            <svg lucidePanelLeftClose [size]=\"16\"></svg>\n            }\n          </span>\n          <span class=\"collapse-bar-text\">Collapse sidebar</span>\n        </button>\n      </div>\n    </ng-content>\n    }\n  </div>\n</div>", styles: [":host,talos-side-nav,.talos-side-nav-host{display:flex;flex-direction:column;width:var(--talos-sidebar-width, var(--sidebar-width, 260px));height:100%;min-height:0;background:var(--talos-nav-bg, var(--nav-bg, #ffffff));border-right:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));transition:width .25s cubic-bezier(.4,0,.2,1);box-sizing:border-box;position:relative;overflow:hidden}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:host.dark-theme,talos-side-nav.dark-theme,.talos-side-nav-host.dark-theme{--talos-nav-bg: #090d16;--nav-bg: #090d16;--talos-card-bg: #0f172a;--talos-nav-border-color: rgba(255, 255, 255, .08);--nav-border-color: rgba(255, 255, 255, .08);--talos-border-color: rgba(255, 255, 255, .1);--border-color: rgba(255, 255, 255, .1);--talos-bg-color: #131d31;--bg-color: #131d31;--talos-text-color: #f8fafc;--text-color: #f8fafc;--talos-text-muted: #94a3b8;--text-muted: #94a3b8;--talos-nav-hover-bg: rgba(255, 255, 255, .06);--talos-nav-hover-text: #f8fafc;--talos-active-nav-bg: rgba(59, 130, 246, .16);--talos-active-nav-text: #ffffff}:root[data-theme=dark] :host .hamburger-toggle-btn,:root.dark :host .hamburger-toggle-btn,[data-theme=dark] :host .hamburger-toggle-btn,[data-mode=dark] :host .hamburger-toggle-btn,.dark :host .hamburger-toggle-btn,.dark-theme :host .hamburger-toggle-btn,:host.dark-theme .hamburger-toggle-btn,talos-side-nav.dark-theme .hamburger-toggle-btn,.talos-side-nav-host.dark-theme .hamburger-toggle-btn{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .hamburger-toggle-btn:hover,:root.dark :host .hamburger-toggle-btn:hover,[data-theme=dark] :host .hamburger-toggle-btn:hover,[data-mode=dark] :host .hamburger-toggle-btn:hover,.dark :host .hamburger-toggle-btn:hover,.dark-theme :host .hamburger-toggle-btn:hover,:host.dark-theme .hamburger-toggle-btn:hover,talos-side-nav.dark-theme .hamburger-toggle-btn:hover,.talos-side-nav-host.dark-theme .hamburger-toggle-btn:hover{background:#131d31;color:var(--talos-primary, #3b82f6);border-color:var(--talos-primary, #3b82f6);box-shadow:0 0 12px #3b82f640}:root[data-theme=dark] :host .nav-group-title,:root.dark :host .nav-group-title,[data-theme=dark] :host .nav-group-title,[data-mode=dark] :host .nav-group-title,.dark :host .nav-group-title,.dark-theme :host .nav-group-title,:host.dark-theme .nav-group-title,talos-side-nav.dark-theme .nav-group-title,.talos-side-nav-host.dark-theme .nav-group-title{color:#94a3b8}:root[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover,:root.dark :host .nav-group-title.nav-group-header-btn:hover,[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover,[data-mode=dark] :host .nav-group-title.nav-group-header-btn:hover,.dark :host .nav-group-title.nav-group-header-btn:hover,.dark-theme :host .nav-group-title.nav-group-header-btn:hover,:host.dark-theme .nav-group-title.nav-group-header-btn:hover,talos-side-nav.dark-theme .nav-group-title.nav-group-header-btn:hover,.talos-side-nav-host.dark-theme .nav-group-title.nav-group-header-btn:hover{color:#f8fafc}:root[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,:root.dark :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,[data-mode=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.dark :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.dark-theme :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,:host.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,talos-side-nav.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.talos-side-nav-host.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron{color:#f8fafc}:root[data-theme=dark] :host .nav-link,:root.dark :host .nav-link,[data-theme=dark] :host .nav-link,[data-mode=dark] :host .nav-link,.dark :host .nav-link,.dark-theme :host .nav-link,:host.dark-theme .nav-link,talos-side-nav.dark-theme .nav-link,.talos-side-nav-host.dark-theme .nav-link{color:#94a3b8}:root[data-theme=dark] :host .nav-link .nav-icon,:root.dark :host .nav-link .nav-icon,[data-theme=dark] :host .nav-link .nav-icon,[data-mode=dark] :host .nav-link .nav-icon,.dark :host .nav-link .nav-icon,.dark-theme :host .nav-link .nav-icon,:host.dark-theme .nav-link .nav-icon,talos-side-nav.dark-theme .nav-link .nav-icon,.talos-side-nav-host.dark-theme .nav-link .nav-icon{color:#94a3b8}:root[data-theme=dark] :host .nav-link:hover,:root.dark :host .nav-link:hover,[data-theme=dark] :host .nav-link:hover,[data-mode=dark] :host .nav-link:hover,.dark :host .nav-link:hover,.dark-theme :host .nav-link:hover,:host.dark-theme .nav-link:hover,talos-side-nav.dark-theme .nav-link:hover,.talos-side-nav-host.dark-theme .nav-link:hover{background-color:#ffffff0f;color:#f8fafc}:root[data-theme=dark] :host .nav-link:hover .nav-icon,:root.dark :host .nav-link:hover .nav-icon,[data-theme=dark] :host .nav-link:hover .nav-icon,[data-mode=dark] :host .nav-link:hover .nav-icon,.dark :host .nav-link:hover .nav-icon,.dark-theme :host .nav-link:hover .nav-icon,:host.dark-theme .nav-link:hover .nav-icon,talos-side-nav.dark-theme .nav-link:hover .nav-icon,.talos-side-nav-host.dark-theme .nav-link:hover .nav-icon{color:#f8fafc}:root[data-theme=dark] :host .nav-link.active,:root.dark :host .nav-link.active,[data-theme=dark] :host .nav-link.active,[data-mode=dark] :host .nav-link.active,.dark :host .nav-link.active,.dark-theme :host .nav-link.active,:host.dark-theme .nav-link.active,talos-side-nav.dark-theme .nav-link.active,.talos-side-nav-host.dark-theme .nav-link.active{background-color:var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));color:#fff}:root[data-theme=dark] :host .nav-link.active .nav-icon,:root.dark :host .nav-link.active .nav-icon,[data-theme=dark] :host .nav-link.active .nav-icon,[data-mode=dark] :host .nav-link.active .nav-icon,.dark :host .nav-link.active .nav-icon,.dark-theme :host .nav-link.active .nav-icon,:host.dark-theme .nav-link.active .nav-icon,talos-side-nav.dark-theme .nav-link.active .nav-icon,.talos-side-nav-host.dark-theme .nav-link.active .nav-icon{color:var(--talos-primary, #3b82f6)}:root[data-theme=dark] :host .user-profile-card:hover,:root.dark :host .user-profile-card:hover,[data-theme=dark] :host .user-profile-card:hover,[data-mode=dark] :host .user-profile-card:hover,.dark :host .user-profile-card:hover,.dark-theme :host .user-profile-card:hover,:host.dark-theme .user-profile-card:hover,talos-side-nav.dark-theme .user-profile-card:hover,.talos-side-nav-host.dark-theme .user-profile-card:hover{background-color:#ffffff0f}:root[data-theme=dark] :host .user-profile-card .user-name,:root.dark :host .user-profile-card .user-name,[data-theme=dark] :host .user-profile-card .user-name,[data-mode=dark] :host .user-profile-card .user-name,.dark :host .user-profile-card .user-name,.dark-theme :host .user-profile-card .user-name,:host.dark-theme .user-profile-card .user-name,talos-side-nav.dark-theme .user-profile-card .user-name,.talos-side-nav-host.dark-theme .user-profile-card .user-name{color:#f8fafc}:root[data-theme=dark] :host .user-profile-card .user-email,:root.dark :host .user-profile-card .user-email,[data-theme=dark] :host .user-profile-card .user-email,[data-mode=dark] :host .user-profile-card .user-email,.dark :host .user-profile-card .user-email,.dark-theme :host .user-profile-card .user-email,:host.dark-theme .user-profile-card .user-email,talos-side-nav.dark-theme .user-profile-card .user-email,.talos-side-nav-host.dark-theme .user-profile-card .user-email{color:#94a3b8}:root[data-theme=dark] :host .footer-collapse-bar,:root.dark :host .footer-collapse-bar,[data-theme=dark] :host .footer-collapse-bar,[data-mode=dark] :host .footer-collapse-bar,.dark :host .footer-collapse-bar,.dark-theme :host .footer-collapse-bar,:host.dark-theme .footer-collapse-bar,talos-side-nav.dark-theme .footer-collapse-bar,.talos-side-nav-host.dark-theme .footer-collapse-bar{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .footer-collapse-bar:hover,:root.dark :host .footer-collapse-bar:hover,[data-theme=dark] :host .footer-collapse-bar:hover,[data-mode=dark] :host .footer-collapse-bar:hover,.dark :host .footer-collapse-bar:hover,.dark-theme :host .footer-collapse-bar:hover,:host.dark-theme .footer-collapse-bar:hover,talos-side-nav.dark-theme .footer-collapse-bar:hover,.talos-side-nav-host.dark-theme .footer-collapse-bar:hover{background-color:#131d31;color:#f8fafc;border-color:#fff3}:root[data-theme=dark] :host .theme-toggle-btn,:root.dark :host .theme-toggle-btn,[data-theme=dark] :host .theme-toggle-btn,[data-mode=dark] :host .theme-toggle-btn,.dark :host .theme-toggle-btn,.dark-theme :host .theme-toggle-btn,:host.dark-theme .theme-toggle-btn,talos-side-nav.dark-theme .theme-toggle-btn,.talos-side-nav-host.dark-theme .theme-toggle-btn{background:#0f172a;border-color:#ffffff1a;color:#f8fafc}:root[data-theme=dark] :host .theme-toggle-btn:hover,:root.dark :host .theme-toggle-btn:hover,[data-theme=dark] :host .theme-toggle-btn:hover,[data-mode=dark] :host .theme-toggle-btn:hover,.dark :host .theme-toggle-btn:hover,.dark-theme :host .theme-toggle-btn:hover,:host.dark-theme .theme-toggle-btn:hover,talos-side-nav.dark-theme .theme-toggle-btn:hover,.talos-side-nav-host.dark-theme .theme-toggle-btn:hover{background-color:#131d31;color:var(--talos-primary, #3b82f6);border-color:var(--talos-primary, #3b82f6)}:host.is-collapsed,talos-side-nav.is-collapsed,.talos-side-nav-host.is-collapsed{width:var(--talos-sidebar-collapsed-width, var(--sidebar-collapsed-width, 68px))}:host.is-collapsed .side-nav-header,talos-side-nav.is-collapsed .side-nav-header,.talos-side-nav-host.is-collapsed .side-nav-header{flex-shrink:0}:host.is-collapsed .default-nav-header,talos-side-nav.is-collapsed .default-nav-header,.talos-side-nav-host.is-collapsed .default-nav-header{justify-content:center;padding:0;gap:0}:host.is-collapsed .brand-wrapper,talos-side-nav.is-collapsed .brand-wrapper,.talos-side-nav-host.is-collapsed .brand-wrapper{max-width:0;opacity:0;transform:translate(-15px);visibility:hidden;pointer-events:none}:host.is-collapsed .hamburger-toggle-btn,talos-side-nav.is-collapsed .hamburger-toggle-btn,.talos-side-nav-host.is-collapsed .hamburger-toggle-btn{margin:0 auto}:host.is-collapsed .side-nav-body,talos-side-nav.is-collapsed .side-nav-body,.talos-side-nav-host.is-collapsed .side-nav-body{padding:12px 6px;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1}:host.is-collapsed .side-nav-body::-webkit-scrollbar,talos-side-nav.is-collapsed .side-nav-body::-webkit-scrollbar,.talos-side-nav-host.is-collapsed .side-nav-body::-webkit-scrollbar{width:3px}:host.is-collapsed .nav-groups-container,talos-side-nav.is-collapsed .nav-groups-container,.talos-side-nav-host.is-collapsed .nav-groups-container{gap:8px}:host.is-collapsed .nav-group-title,talos-side-nav.is-collapsed .nav-group-title,.talos-side-nav-host.is-collapsed .nav-group-title{max-height:0;opacity:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .nav-link,talos-side-nav.is-collapsed .nav-link,.talos-side-nav-host.is-collapsed .nav-link{padding:0;gap:0;justify-content:center;width:38px;height:36px;margin:0 auto;border-radius:8px}:host.is-collapsed .nav-link .nav-icon,talos-side-nav.is-collapsed .nav-link .nav-icon,.talos-side-nav-host.is-collapsed .nav-link .nav-icon{margin:0}:host.is-collapsed .nav-label,talos-side-nav.is-collapsed .nav-label,.talos-side-nav-host.is-collapsed .nav-label{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .nav-badge,talos-side-nav.is-collapsed .nav-badge,.talos-side-nav-host.is-collapsed .nav-badge{opacity:0;max-width:0;padding:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .side-nav-footer,talos-side-nav.is-collapsed .side-nav-footer,.talos-side-nav-host.is-collapsed .side-nav-footer{padding:12px 6px 16px;flex-shrink:0}:host.is-collapsed .theme-toggle-btn,talos-side-nav.is-collapsed .theme-toggle-btn,.talos-side-nav-host.is-collapsed .theme-toggle-btn{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto}:host.is-collapsed .theme-toggle-btn .theme-toggle-icon,talos-side-nav.is-collapsed .theme-toggle-btn .theme-toggle-icon,.talos-side-nav-host.is-collapsed .theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;margin:0}:host.is-collapsed .theme-toggle-label,talos-side-nav.is-collapsed .theme-toggle-label,.talos-side-nav-host.is-collapsed .theme-toggle-label{opacity:0;max-width:0;width:0;padding:0;margin:0;flex:0 0 0;overflow:hidden;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .theme-toggle-indicator,talos-side-nav.is-collapsed .theme-toggle-indicator,.talos-side-nav-host.is-collapsed .theme-toggle-indicator{display:none!important;opacity:0;max-width:0;width:0!important;height:0!important;padding:0!important;margin:0!important;border:none!important;flex:0 0 0!important;overflow:hidden;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .user-profile-card,talos-side-nav.is-collapsed .user-profile-card,.talos-side-nav-host.is-collapsed .user-profile-card{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto;box-sizing:border-box}:host.is-collapsed .user-info,:host.is-collapsed .profile-action,talos-side-nav.is-collapsed .user-info,talos-side-nav.is-collapsed .profile-action,.talos-side-nav-host.is-collapsed .user-info,.talos-side-nav-host.is-collapsed .profile-action{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .footer-collapse-bar,talos-side-nav.is-collapsed .footer-collapse-bar,.talos-side-nav-host.is-collapsed .footer-collapse-bar{padding:0;gap:0;justify-content:center;width:38px;height:36px;margin:0 auto}:host.is-collapsed .collapse-bar-text,talos-side-nav.is-collapsed .collapse-bar-text,.talos-side-nav-host.is-collapsed .collapse-bar-text{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}.side-nav-inner{display:flex;flex-direction:column;height:100%;min-height:0;position:relative;overflow:hidden}.side-nav-header{flex-shrink:0;min-height:64px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9))}.default-nav-header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}.brand-wrapper{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;max-width:180px;opacity:1;transform:translate(0);white-space:nowrap;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.brand-wrapper>*{display:flex;align-items:center;gap:10px;overflow:hidden;white-space:nowrap;max-width:100%}.brand-wrapper img,.brand-wrapper svg{flex-shrink:0;max-height:32px;object-fit:contain}.hamburger-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));cursor:pointer;transition:all .15s ease;flex-shrink:0}.hamburger-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:0 2px 6px #2563eb26}.hamburger-toggle-btn .toggle-icon{display:block}.side-nav-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 12px;transition:padding .25s cubic-bezier(.4,0,.2,1)}.side-nav-body::-webkit-scrollbar{width:4px}.side-nav-body::-webkit-scrollbar-thumb{background-color:var(--talos-border-color, #e2e8f0);border-radius:4px}.nav-groups-container{display:flex;flex-direction:column;gap:12px}.nav-group,talos-nav-group,.talos-nav-group{display:flex;flex-direction:column}.nav-item,talos-nav-item,.talos-nav-item{display:block}talos-nav-theme-toggle,.talos-nav-theme-toggle-host{display:block}.nav-group-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--talos-text-muted, var(--text-muted, #94a3b8));padding:0 10px;margin-bottom:4px;white-space:nowrap;overflow:hidden;max-height:22px;opacity:1;transform:translate(0);transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),margin .25s cubic-bezier(.4,0,.2,1),padding .25s cubic-bezier(.4,0,.2,1),visibility .25s}.nav-group-title.nav-group-header-btn{display:flex;align-items:center;justify-content:space-between;width:100%;height:22px;background:transparent;border:none;cursor:pointer;text-align:left;border-radius:6px;box-sizing:border-box;font-family:inherit}.nav-group-title.nav-group-header-btn:hover,.nav-group-title.nav-group-header-btn:hover .nav-group-chevron{color:var(--talos-text-color, var(--text-color, #1e293b))}.nav-group-title.nav-group-header-btn:focus-visible{outline:2px solid var(--talos-primary-color, var(--primary-color, #3b82f6));outline-offset:1px}.nav-group-chevron{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s cubic-bezier(.4,0,.2,1),color .15s ease;color:var(--talos-text-muted, var(--text-muted, #94a3b8))}.nav-group-chevron.is-collapsed{transform:rotate(-90deg)}.nav-group-content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);opacity:1;overflow:visible}.nav-group-content.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none;overflow:hidden}.nav-group-content.is-collapsed>.nav-item-list{overflow:hidden}.nav-group-content>.nav-item-list{min-height:0;overflow:visible}.nav-item-list,.footer-nav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}.nav-link{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border-radius:8px;border:none;background:transparent;color:var(--talos-text-muted, #64748b);font-size:13px;font-weight:500;line-height:1.4;cursor:pointer;transition:background-color .15s ease,color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);text-align:left;gap:10px;white-space:nowrap;outline:none}.nav-link:hover{background-color:var(--talos-nav-hover-bg, var(--talos-bg-subtle, #f1f5f9));color:var(--talos-nav-hover-text, var(--talos-text-primary, #0f172a))}.nav-link:hover .nav-icon{color:var(--talos-nav-hover-text, var(--talos-text-primary, #0f172a))}.nav-link.active{background-color:var(--talos-active-nav-bg, var(--talos-primary-subtle-bg, #eff6ff));color:var(--talos-active-nav-text, var(--talos-primary-text, #1d4ed8));font-weight:600}.nav-link.active .nav-icon{color:var(--talos-primary, #2563eb)}.nav-link .nav-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--talos-text-muted, #64748b);flex-shrink:0;transition:color .15s ease}.nav-link .nav-icon svg,.nav-link .nav-icon lucide-icon{width:17px;height:17px;stroke-width:1.85px}.nav-link .nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transform:translate(0);max-width:180px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.nav-link .nav-badge{font-size:10px;font-weight:600;padding:1.5px 6px;border-radius:10px;background-color:var(--talos-badge-bg, #eff6ff);color:var(--talos-primary-color, var(--primary-color, #2563eb));white-space:nowrap;overflow:hidden;opacity:1;transform:translate(0);max-width:60px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),padding .25s cubic-bezier(.4,0,.2,1),visibility .25s}.side-nav-footer{flex-shrink:0;padding:14px 10px;border-top:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));transition:padding .25s cubic-bezier(.4,0,.2,1)}.default-nav-footer{display:flex;flex-direction:column;gap:10px}talos-nav-theme-toggle .theme-toggle-btn,.talos-nav-theme-toggle-host .theme-toggle-btn,.talos-side-nav-host .theme-toggle-btn{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-color, var(--text-color, #0f172a));font-size:12.5px;font-weight:500;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease,border-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);gap:9px;white-space:nowrap}talos-nav-theme-toggle .theme-toggle-btn:hover,.talos-nav-theme-toggle-host .theme-toggle-btn:hover,.talos-side-nav-host .theme-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb))}talos-nav-theme-toggle .theme-toggle-btn:hover .theme-toggle-icon,.talos-nav-theme-toggle-host .theme-toggle-btn:hover .theme-toggle-icon,.talos-side-nav-host .theme-toggle-btn:hover .theme-toggle-icon{color:var(--talos-primary-color, var(--primary-color, #2563eb))}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-icon,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-icon,.talos-side-nav-host .theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--talos-primary-color, var(--primary-color, #2563eb));transition:color .15s ease}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-icon svg,talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-icon lucide-icon,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-icon svg,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-icon lucide-icon,.talos-side-nav-host .theme-toggle-btn .theme-toggle-icon svg,.talos-side-nav-host .theme-toggle-btn .theme-toggle-icon lucide-icon{width:15px;height:15px}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-label,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-label,.talos-side-nav-host .theme-toggle-btn .theme-toggle-label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;transform:translate(0);max-width:140px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator{width:30px;height:16px;border-radius:9999px;background:var(--talos-border-color, #cbd5e1);position:relative;flex-shrink:0;display:flex;align-items:center;padding:2px;box-sizing:border-box;opacity:1;max-width:40px;transition:background-color .2s ease,opacity .18s cubic-bezier(.4,0,.2,1),max-width .25s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator .indicator-thumb,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator .indicator-thumb,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator .indicator-thumb{display:block;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s cubic-bezier(.4,0,.2,1);transform:translate(0)}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator.is-dark,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator.is-dark,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator.is-dark{background:var(--talos-primary-color, var(--primary-color, #2563eb))}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator.is-dark .indicator-thumb,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator.is-dark .indicator-thumb,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator.is-dark .indicator-thumb{transform:translate(14px)}.user-profile-card{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;background:transparent;cursor:pointer;transition:background-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none}.user-profile-card:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc))}.user-profile-card:hover .profile-chevron{color:var(--talos-text-color, #334155)}.avatar-container{flex-shrink:0}.avatar-img{width:30px;height:30px;border-radius:50%;object-fit:cover}.avatar-placeholder{width:30px;height:30px;border-radius:50%;background:var(--talos-avatar-bg, #e0f2fe);color:var(--talos-primary-color, var(--primary-color, #0369a1));font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center}.user-info{flex:1;display:flex;flex-direction:column;overflow:hidden;max-width:150px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.user-name{font-size:12.5px;font-weight:600;color:var(--talos-text-color, var(--text-color, #0f172a));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.user-email{font-size:11px;color:var(--talos-text-muted, var(--text-muted, #94a3b8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.profile-action{flex-shrink:0;display:flex;align-items:center;max-width:20px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.profile-chevron{color:var(--talos-text-muted, var(--text-muted, #94a3b8));transition:color .15s ease}.footer-collapse-bar{display:flex;align-items:center;gap:9px;width:100%;height:36px;padding:0 10px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));border-radius:8px;background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));font-size:12.5px;font-weight:500;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease,border-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);white-space:nowrap}.footer-collapse-bar:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb))}.footer-collapse-bar .collapse-bar-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.footer-collapse-bar .collapse-bar-icon svg,.footer-collapse-bar .collapse-bar-icon lucide-icon{width:15px;height:15px}.collapse-bar-text{white-space:nowrap;overflow:hidden;max-width:140px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}\n"] }]
+        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], headerComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerComponent", required: false }] }], headerComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerComponentInputs", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", 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 }] }], bodyComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyComponent", required: false }] }], bodyComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyComponentInputs", required: false }] }], bodyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyTemplate", required: false }] }], footerComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerComponent", required: false }] }], footerComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerComponentInputs", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], showLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogo", required: false }] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", 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 }] }], themeToggle: [{ type: i0.Output, args: ["themeToggle"] }], themeModeChange: [{ type: i0.Output, args: ["themeModeChange"] }], navGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "navGroups", required: false }] }], footerItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerItems", required: false }] }], userProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "userProfile", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+class TopNavComponent {
+    layoutService = inject(LayoutService, { optional: true });
+    router = inject(Router, { optional: true });
+    elementRef = inject(ElementRef);
+    /** Brand title displayed in left header */
+    brandTitle = input('Talos', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandTitle" }] : /* istanbul ignore next */ []));
+    /** Brand subtitle or description */
+    brandSubtitle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandSubtitle" }] : /* istanbul ignore next */ []));
+    /** Badge displayed beside brand title */
+    brandBadge = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandBadge" }] : /* istanbul ignore next */ []));
+    /** Icon component type for brand badge */
+    brandIcon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandIcon" }] : /* istanbul ignore next */ []));
+    /** Route link for brand header click */
+    brandRoute = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandRoute" }] : /* istanbul ignore next */ []));
+    /** Direct href for brand header click */
+    brandUrl = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandUrl" }] : /* istanbul ignore next */ []));
+    /** Whether to render brand title & badge */
+    showBrand = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showBrand" }] : /* istanbul ignore next */ []));
+    /** Whether to show logo in top-nav */
+    showLogo = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLogo" }] : /* istanbul ignore next */ []));
+    /** Custom logo component */
+    logoComponent = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logoComponent" }] : /* istanbul ignore next */ []));
+    /** Inputs for custom logo component */
+    logoComponentInputs = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logoComponentInputs" }] : /* istanbul ignore next */ []));
+    /** Custom logo template */
+    logoTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logoTemplate" }] : /* istanbul ignore next */ []));
+    /** Whether to show sidebar collapse toggle button */
+    showSidebarToggle = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSidebarToggle" }] : /* istanbul ignore next */ []));
+    /** Navigation items list with optional dropdown children */
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Two-way active item identifier */
+    activeItemId = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeItemId" }] : /* istanbul ignore next */ []));
+    /** Action buttons displayed in right section (e.g. notifications, docs) */
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    /** Whether to show theme dark/light mode toggle button */
+    showThemeToggle = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showThemeToggle" }] : /* istanbul ignore next */ []));
+    /** Explicit 3-way theme mode: 'system' | 'light' | 'dark' */
+    themeMode = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeMode" }] : /* istanbul ignore next */ []));
+    /** Current dark mode state (boolean fallback) */
+    isDarkMode = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDarkMode" }] : /* istanbul ignore next */ []));
+    /** User profile information and user dropdown items */
+    userProfile = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userProfile" }] : /* istanbul ignore next */ []));
+    /** Whether to show search bar */
+    showSearch = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+    /** Placeholder text for search bar */
+    searchPlaceholder = input('Search...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Whether top navbar is sticky at top */
+    sticky = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    /** Whether bottom border is rendered */
+    bordered = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    /** Whether glassmorphism backdrop blur is applied */
+    glass = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "glass" }] : /* istanbul ignore next */ []));
+    /** Size variant for height and spacing */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Custom left section component */
+    leftComponent = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leftComponent" }] : /* istanbul ignore next */ []));
+    leftComponentInputs = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leftComponentInputs" }] : /* istanbul ignore next */ []));
+    leftTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leftTemplate" }] : /* istanbul ignore next */ []));
+    /** Custom center section component */
+    centerComponent = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "centerComponent" }] : /* istanbul ignore next */ []));
+    centerComponentInputs = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "centerComponentInputs" }] : /* istanbul ignore next */ []));
+    centerTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "centerTemplate" }] : /* istanbul ignore next */ []));
+    /** Custom right section component */
+    rightComponent = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rightComponent" }] : /* istanbul ignore next */ []));
+    rightComponentInputs = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rightComponentInputs" }] : /* istanbul ignore next */ []));
+    rightTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rightTemplate" }] : /* istanbul ignore next */ []));
+    /** Optional external two-way binding for sidebar collapsed state. If omitted, syncs with LayoutService. */
+    sidebarCollapsed = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarCollapsed" }] : /* istanbul ignore next */ []));
+    /** Effective sidebar collapsed state */
+    isSidebarCollapsed = computed(() => {
+        const ext = this.sidebarCollapsed();
+        if (ext !== undefined) {
+            return ext;
+        }
+        return this.layoutService?.isLeftNavCollapsed() ?? false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSidebarCollapsed" }] : /* istanbul ignore next */ []));
+    /** Output emitted when a nav item or child item is clicked */
+    itemClick = output();
+    /** Output emitted when an action button is clicked */
+    actionClick = output();
+    /** Output emitted when user profile is clicked */
+    userClick = output();
+    /** Output emitted when theme toggle button is clicked */
+    themeToggle = output();
+    /** Output emitted with next theme mode */
+    themeModeChange = output();
+    /** Output emitted on search input change */
+    searchChange = output();
+    /** Output emitted when sidebar toggle button is clicked */
+    sidebarToggleClick = output();
+    /** Output emitted when brand logo or title is clicked */
+    brandClick = output();
+    /** Track active open dropdown item ID */
+    openDropdownId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openDropdownId" }] : /* istanbul ignore next */ []));
+    /** Track whether user profile dropdown menu is open */
+    isUserDropdownOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isUserDropdownOpen" }] : /* istanbul ignore next */ []));
+    /** Computed effective theme mode */
+    effectiveThemeMode = computed(() => {
+        const mode = this.themeMode();
+        if (mode)
+            return mode;
+        return this.isDarkMode() ? 'dark' : 'light';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveThemeMode" }] : /* istanbul ignore next */ []));
+    /** Computed next mode in cycle: system -> light -> dark -> system */
+    nextThemeMode = computed(() => {
+        switch (this.effectiveThemeMode()) {
+            case 'system': return 'light';
+            case 'light': return 'dark';
+            case 'dark': return 'system';
+            default: return 'system';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextThemeMode" }] : /* istanbul ignore next */ []));
+    /** Computed tooltip for theme toggle button */
+    themeToggleTooltip = computed(() => {
+        const mode = this.effectiveThemeMode();
+        const label = mode === 'system' ? 'System (Auto)' : mode === 'dark' ? 'Dark' : 'Light';
+        return `Theme: ${label} (Click to cycle)`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeToggleTooltip" }] : /* istanbul ignore next */ []));
+    /** Computed aria label for theme toggle button */
+    themeToggleAriaLabel = computed(() => {
+        const next = this.nextThemeMode();
+        const nextName = next === 'system' ? 'System Mode' : next === 'dark' ? 'Dark Mode' : 'Light Mode';
+        return `Switch to ${nextName}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeToggleAriaLabel" }] : /* istanbul ignore next */ []));
+    handleThemeToggle() {
+        const next = this.nextThemeMode();
+        this.themeToggle.emit();
+        this.themeModeChange.emit(next);
+    }
+    /** Handle brand click */
+    handleBrandClick() {
+        if (this.brandUrl()) {
+            window.open(this.brandUrl(), '_self');
+        }
+        else if (this.brandRoute() !== undefined && this.router) {
+            const route = this.brandRoute();
+            this.router.navigate(Array.isArray(route) ? route : [route]);
+        }
+        this.brandClick.emit();
+    }
+    /** Toggle sidebar collapse state via model or LayoutService */
+    toggleSidebar() {
+        if (this.sidebarCollapsed() !== undefined) {
+            this.sidebarCollapsed.update((c) => !c);
+        }
+        else if (this.layoutService) {
+            this.layoutService.toggleLeftNav();
+        }
+        this.sidebarToggleClick.emit();
+    }
+    /** Toggle dropdown state for a given item */
+    toggleDropdown(itemId, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.isUserDropdownOpen.set(false);
+        this.openDropdownId.update((curr) => (curr === itemId ? null : itemId));
+    }
+    /** Toggle user profile dropdown menu */
+    toggleUserDropdown(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.openDropdownId.set(null);
+        this.isUserDropdownOpen.update((open) => !open);
+        if (this.userProfile()) {
+            this.userClick.emit(this.userProfile());
+        }
+    }
+    /** Select a navigation item */
+    selectItem(item, event) {
+        if (item.disabled)
+            return;
+        if (item.children && item.children.length > 0) {
+            this.toggleDropdown(item.id || item.label, event);
+            return;
+        }
+        if (item.id) {
+            this.activeItemId.set(item.id);
+        }
+        this.closeAllDropdowns();
+        if (item.href) {
+            window.open(item.href, item.target ?? '_self');
+        }
+        else if (item.route !== undefined && this.router) {
+            this.router.navigate(Array.isArray(item.route) ? item.route : [item.route]);
+        }
+        this.itemClick.emit(item);
+    }
+    /** Select a child item inside a dropdown menu */
+    selectChildItem(child, parent, event) {
+        if (child.disabled)
+            return;
+        if (event) {
+            event.stopPropagation();
+        }
+        if (child.id) {
+            this.activeItemId.set(child.id);
+        }
+        this.closeAllDropdowns();
+        if (child.href) {
+            window.open(child.href, child.target ?? '_self');
+        }
+        else if (child.route !== undefined && this.router) {
+            this.router.navigate(Array.isArray(child.route) ? child.route : [child.route]);
+        }
+        this.itemClick.emit(child);
+    }
+    /** Handle action button click */
+    handleActionClick(action, event) {
+        if (action.disabled)
+            return;
+        if (action.onClick) {
+            action.onClick(action, event);
+        }
+        if (action.href) {
+            window.open(action.href, action.target ?? '_blank');
+        }
+        else if (action.route !== undefined && this.router) {
+            this.router.navigate(Array.isArray(action.route) ? action.route : [action.route]);
+        }
+        this.actionClick.emit(action);
+    }
+    /** Handle search input changes */
+    onSearchInput(event) {
+        const value = event.target.value;
+        this.searchChange.emit(value);
+    }
+    /** Close all open dropdown menus */
+    closeAllDropdowns() {
+        this.openDropdownId.set(null);
+        this.isUserDropdownOpen.set(false);
+    }
+    /** Dismiss dropdowns when clicking outside the component */
+    onDocumentClick(event) {
+        const target = event.target;
+        if (target && !this.elementRef.nativeElement.contains(target)) {
+            this.closeAllDropdowns();
+        }
+    }
+    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()\"\n        [talosTooltip]=\"themeToggleTooltip()\">\n        @if (effectiveThemeMode() === 'system') {\n        <svg lucideMonitor [size]=\"16\"></svg>\n        } @else if (effectiveThemeMode() === 'dark') {\n        <svg lucideMoon [size]=\"16\"></svg>\n        } @else {\n        <svg lucideSun [size]=\"16\"></svg>\n        }\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      <ng-content select=\"[top-nav-user]\" />\n    </ng-content>\n    }\n  </div>\n</div>", 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}.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}.theme-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.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}}@container topnav (max-width: 480px){.search-bar-wrapper{display:none}}\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: LucideSun, selector: "svg[lucideSun]" }, { kind: "component", type: LucideMoon, selector: "svg[lucideMoon]" }, { kind: "component", type: LucideMonitor, selector: "svg[lucideMonitor]" }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TopNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-top-nav, [talos-top-nav], [talosTopNav]', imports: [
+                        NgComponentOutlet,
+                        NgTemplateOutlet,
+                        LucideChevronDown,
+                        LucidePanelLeftOpen,
+                        LucidePanelLeftClose,
+                        LucideSearch,
+                        LucideSun,
+                        LucideMoon,
+                        LucideMonitor,
+                        TalosTooltipDirective
+                    ], encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'talos-top-nav-host',
+                        '[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"',
+                        '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()\"\n        [talosTooltip]=\"themeToggleTooltip()\">\n        @if (effectiveThemeMode() === 'system') {\n        <svg lucideMonitor [size]=\"16\"></svg>\n        } @else if (effectiveThemeMode() === 'dark') {\n        <svg lucideMoon [size]=\"16\"></svg>\n        } @else {\n        <svg lucideSun [size]=\"16\"></svg>\n        }\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      <ng-content select=\"[top-nav-user]\" />\n    </ng-content>\n    }\n  </div>\n</div>", 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}.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}.theme-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.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}}@container topnav (max-width: 480px){.search-bar-wrapper{display:none}}\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 {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTopNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosTopNavModule, imports: [TopNavComponent], exports: [TopNavComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTopNavModule, imports: [TopNavComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTopNavModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TopNavComponent],
+                    exports: [TopNavComponent]
+                }]
+        }] });
+
+class TalosSideNavModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosSideNavModule, imports: [SideNavComponent,
+            TalosNavGroupComponent,
+            TalosNavItemComponent,
+            TalosNavThemeToggleComponent], exports: [SideNavComponent,
+            TalosNavGroupComponent,
+            TalosNavItemComponent,
+            TalosNavThemeToggleComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosSideNavModule, imports: [SideNavComponent,
+            TalosNavGroupComponent,
+            TalosNavThemeToggleComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosSideNavModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SideNavComponent,
+                        TalosNavGroupComponent,
+                        TalosNavItemComponent,
+                        TalosNavThemeToggleComponent
+                    ],
+                    exports: [
+                        SideNavComponent,
+                        TalosNavGroupComponent,
+                        TalosNavItemComponent,
+                        TalosNavThemeToggleComponent
+                    ]
+                }]
+        }] });
+class TalosNavModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosNavModule, imports: [SideNavComponent,
+            TopNavComponent,
+            TalosNavGroupComponent,
+            TalosNavItemComponent,
+            TalosNavThemeToggleComponent,
+            TalosTopNavModule, TalosSideNavModule], exports: [SideNavComponent,
+            TopNavComponent,
+            TalosNavGroupComponent,
+            TalosNavItemComponent,
+            TalosNavThemeToggleComponent,
+            TalosTopNavModule, TalosSideNavModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosNavModule, imports: [SideNavComponent,
+            TopNavComponent,
+            TalosNavGroupComponent,
+            TalosNavThemeToggleComponent,
+            TalosTopNavModule,
+            TalosSideNavModule, TalosTopNavModule, TalosSideNavModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosNavModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SideNavComponent,
+                        TopNavComponent,
+                        TalosNavGroupComponent,
+                        TalosNavItemComponent,
+                        TalosNavThemeToggleComponent,
+                        TalosTopNavModule,
+                        TalosSideNavModule
+                    ],
+                    exports: [
+                        SideNavComponent,
+                        TopNavComponent,
+                        TalosNavGroupComponent,
+                        TalosNavItemComponent,
+                        TalosNavThemeToggleComponent,
+                        TalosTopNavModule,
+                        TalosSideNavModule
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SideNavComponent, TalosNavGroupComponent, TalosNavItemComponent, TalosNavModule, TalosNavThemeToggleComponent, TalosSideNavModule, TalosTopNavModule, TopNavComponent };
+//# sourceMappingURL=weeehaoooz-talos-ui-nav.mjs.map