@weeehaoooz/talos-ui 0.1.0 → 0.1.1

package/fesm2022/weeehaoooz-talos-ui.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, input, output, Component, inject, Directive, NgModule, forwardRef, effect, DestroyRef, model, ContentChild, ViewEncapsulation, ElementRef, contentChildren, ViewChild, Injector, untracked, viewChild, ChangeDetectorRef, TemplateRef, InjectionToken, Renderer2, linkedSignal, afterNextRender, ViewChildren } from '@angular/core';
+import { signal, computed, Injectable, input, output, Component, inject, Directive, NgModule, forwardRef, effect, DestroyRef, model, ContentChild, ViewEncapsulation, ElementRef, contentChildren, ViewChild, Injector, untracked, viewChild, ChangeDetectorRef, TemplateRef, InjectionToken, Renderer2, linkedSignal, afterNextRender, ViewChildren, Pipe } from '@angular/core';
 import { NgComponentOutlet, NgTemplateOutlet, DatePipe, KeyValuePipe } from '@angular/common';
 import { TalosButtonDirective as TalosButtonDirective$1 } from '@weeehaoooz/talos-ui/button/button';
-import { LucideX, LucideChevronDown, LucideSun, LucideMoon, LucideMonitor, LucidePanelLeftOpen, LucidePanelLeftClose, LucideCircleHelp, LucideSettings, LucidePanelLeft, LucideChevronsUpDown, LucideSearch, LucideLock, LucideEye, LucideEyeOff, LucideCheck, LucideInfo, LucideCheckCircle2, LucideAlertTriangle, LucideCircleAlert, LucideRefreshCw, LucideUpload, LucideMaximize2, LucideMinimize2, LucideFileSpreadsheet, LucideFileJson, LucideCalendar, LucideClock, LucideArrowLeftRight, LucideClockAlert, LucideBan, LucideCheckCheck, LucideFastForward, LucideRotateCcw, LucideCirclePause, LucideLoader2, LucideSparkles, LucideAlertCircle, LucideAlertOctagon, LucideShieldAlert, LucideChevronUp, LucideUser, LucideChevronRight, LucideChevronLeft, LucideChevronsRight, LucideChevronsLeft, LucideChevronsUp, LucideChevronsDown, LucideGripVertical } from '@lucide/angular';
+import { LucideX, LucideChevronDown, LucideMonitor, LucideMoon, LucideSun, LucidePanelLeftOpen, LucidePanelLeftClose, LucideCircleHelp, LucideSettings, LucidePanelLeft, LucideChevronsUpDown, LucideSearch, LucideMenu, LucideLock, LucideEye, LucideEyeOff, LucideCheck, LucideInfo, LucideCheckCircle2, LucideAlertTriangle, LucideCircleAlert, LucideRefreshCw, LucideUpload, LucideMaximize2, LucideMinimize2, LucideFileSpreadsheet, LucideFileJson, LucideCalendar, LucideClock, LucideArrowLeftRight, LucideClockAlert, LucideBan, LucideCheckCheck, LucideFastForward, LucideRotateCcw, LucideCirclePause, LucideLoader2, LucideSparkles, LucideAlertCircle, LucideAlertOctagon, LucideShieldAlert, LucideChevronUp, LucideUser, LucideChevronRight, LucideChevronLeft, LucideChevronsRight, LucideChevronsLeft, LucideChevronsUp, LucideChevronsDown, LucideGripVertical, LucideArrowUp, LucideArrowDown, LucideArrowUpDown, LucideInbox, LucideFilter } from '@lucide/angular';
 import { LayoutService as LayoutService$1 } from '@weeehaoooz/talos-ui/layout';
 import { TalosTooltipDirective as TalosTooltipDirective$1, TalosTooltipComponent as TalosTooltipComponent$1 } from '@weeehaoooz/talos-ui/feedback/tooltip';
 import { Router } from '@angular/router';
-import * as i2 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { SelectionModel } from '@angular/cdk/collections';
 import { FocusMonitor } from '@angular/cdk/a11y';
@@ -22,6 +22,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject, of, isObservable, from } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap, catchError } from 'rxjs/operators';
 import { moveItemInArray, transferArrayItem, CdkDropListGroup, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragPreview, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { TalosStatusTagComponent as TalosStatusTagComponent$1 } from '@weeehaoooz/talos-ui/data-display/status-tag';
 
 class LayoutService {
     // Reactive Signals for layout state
@@ -131,7 +132,7 @@ class SidePanelComponent {
         this.close.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SidePanelComponent, isStandalone: true, selector: "talos-side-panel", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, componentInputs: { classPropertyName: "componentInputs", publicName: "componentInputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { attributes: { "role": "complementary" }, properties: { "class.is-open": "isOpen()", "class.is-overlay": "mode() === \"overlay\"", "class.is-inline": "mode() === \"inline\"", "style.--panel-width": "width()", "attr.aria-label": "title() || \"Details Panel\"" }, classAttribute: "side-panel-host" }, ngImport: i0, template: "<div class=\"side-panel-inner\">\n  <div class=\"side-panel-header\">\n    <h3 class=\"side-panel-title\">\n      {{ title() }}\n    </h3>\n    <button type=\"button\" talosButton variant=\"ghost\" size=\"sm\" [iconOnly]=\"true\" class=\"side-panel-close-btn\"\n      (click)=\"onClose()\" aria-label=\"Close details panel\">\n      <svg lucideX [size]=\"16\"></svg>\n    </button>\n  </div>\n  <div class=\"side-panel-body\">\n    @if (component()) {\n    <ng-container *ngComponentOutlet=\"component()!; inputs: componentInputs()\" />\n    }\n    <ng-content />\n  </div>\n</div>", styles: [":host{display:flex;flex-direction:column;background:var(--talos-right-panel-bg, var(--talos-card-bg, var(--card-bg, #ffffff)));border-left:1px solid var(--talos-right-panel-border, var(--talos-border-color, var(--border-color, #e2e8f0)));box-sizing:border-box;overflow:hidden;transition:width .3s cubic-bezier(.16,1,.3,1),max-width .3s cubic-bezier(.16,1,.3,1),opacity .25s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility .3s,border-left-color .3s}:host.is-overlay{position:absolute;top:0;right:0;bottom:0;z-index:40;width:var(--panel-width, 380px);box-shadow:-8px 0 24px #00000026;transform:translate(100%);opacity:0;visibility:hidden;pointer-events:none}:host.is-overlay.is-open{transform:translate(0);opacity:1;visibility:visible;pointer-events:auto}:host.is-inline{position:relative;height:100%;z-index:10;flex-shrink:0;width:0;max-width:0;opacity:0;visibility:hidden;pointer-events:none;border-left-color:transparent}:host.is-inline.is-open{width:var(--panel-width, 380px);max-width:var(--panel-width, 380px);opacity:1;visibility:visible;pointer-events:auto;border-left-color:var(--talos-right-panel-border, var(--right-panel-border, #e2e8f0))}.side-panel-inner{display:flex;flex-direction:column;width:var(--panel-width, 380px);height:100%;box-sizing:border-box}.side-panel-inner .side-panel-header{height:60px;min-height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--talos-right-panel-border, var(--right-panel-border, #e2e8f0))}.side-panel-inner .side-panel-header .side-panel-title{margin:0;font-size:16px;font-weight:600;color:var(--talos-text-color, var(--panel-title-color, #0f172a))}.side-panel-inner .side-panel-body{flex:1;overflow-y:auto;padding:20px}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: TalosButtonDirective$1, selector: "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", inputs: ["variant", "size", "iconOnly", "fullWidth", "pill", "loading", "disabled", "animation", "spinning", "popping", "feedback"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SidePanelComponent, isStandalone: true, selector: "talos-side-panel", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, componentInputs: { classPropertyName: "componentInputs", publicName: "componentInputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { attributes: { "role": "complementary" }, properties: { "class.is-open": "isOpen()", "class.is-overlay": "mode() === \"overlay\"", "class.is-inline": "mode() === \"inline\"", "style.--panel-width": "width()", "attr.aria-label": "title() || \"Details Panel\"" }, classAttribute: "side-panel-host" }, ngImport: i0, template: "<div class=\"side-panel-inner\">\n  <div class=\"side-panel-header\">\n    <h3 class=\"side-panel-title\">\n      {{ title() }}\n    </h3>\n    <button type=\"button\" talosButton variant=\"ghost\" size=\"sm\" [iconOnly]=\"true\" class=\"side-panel-close-btn\"\n      (click)=\"onClose()\" aria-label=\"Close details panel\">\n      <svg lucideX [size]=\"16\"></svg>\n    </button>\n  </div>\n  <div class=\"side-panel-body\">\n    @if (component()) {\n    <ng-container *ngComponentOutlet=\"component()!; inputs: componentInputs()\" />\n    }\n    <ng-content />\n  </div>\n</div>", styles: [":host{display:flex;flex-direction:column;background:var(--talos-right-panel-bg, var(--talos-card-bg, var(--card-bg, #ffffff)));border-left:1px solid var(--talos-right-panel-border, var(--talos-border-color, var(--border-color, #e2e8f0)));box-sizing:border-box;overflow:hidden;transition:width .3s cubic-bezier(.16,1,.3,1),max-width .3s cubic-bezier(.16,1,.3,1),opacity .25s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility .3s,border-left-color .3s}:host.is-overlay{position:absolute;top:0;right:0;bottom:0;z-index:40;width:var(--panel-width, 380px);box-shadow:-8px 0 24px #00000026;transform:translate(100%);opacity:0;visibility:hidden;pointer-events:none}:host.is-overlay.is-open{transform:translate(0);opacity:1;visibility:visible;pointer-events:auto}:host.is-inline{position:relative;height:100%;z-index:10;flex-shrink:0;width:0;max-width:0;opacity:0;visibility:hidden;pointer-events:none;border-left-color:transparent}:host.is-inline.is-open{width:var(--panel-width, 380px);max-width:var(--panel-width, 380px);opacity:1;visibility:visible;pointer-events:auto;border-left-color:var(--talos-right-panel-border, var(--right-panel-border, #e2e8f0))}.side-panel-inner{display:flex;flex-direction:column;width:var(--panel-width, 380px);height:100%;box-sizing:border-box}.side-panel-inner .side-panel-header{height:60px;min-height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--talos-right-panel-border, var(--right-panel-border, #e2e8f0))}.side-panel-inner .side-panel-header .side-panel-title{margin:0;font-size:16px;font-weight:600;color:var(--talos-text-color, var(--panel-title-color, #0f172a))}.side-panel-inner .side-panel-body{flex:1;overflow-y:auto;padding:20px}@media(max-width:768px){:host.is-overlay{position:absolute;inset:0;width:100%!important;max-width:100%!important;height:100%!important;z-index:50}:host.is-inline.is-open{position:absolute;inset:0;width:100%!important;max-width:100%!important;height:100%!important;z-index:50;box-shadow:0 10px 25px -5px #00000040}.side-panel-inner{width:100%!important;max-width:100%!important;height:100%}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: TalosButtonDirective$1, selector: "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", inputs: ["variant", "size", "iconOnly", "fullWidth", "pill", "loading", "disabled", "animation", "spinning", "popping", "feedback"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SidePanelComponent, decorators: [{
             type: Component,
@@ -143,7 +144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[class.is-inline]': 'mode() === "inline"',
                         '[style.--panel-width]': 'width()',
                         '[attr.aria-label]': 'title() || "Details Panel"'
-                    }, template: "<div class=\"side-panel-inner\">\n  <div class=\"side-panel-header\">\n    <h3 class=\"side-panel-title\">\n      {{ title() }}\n    </h3>\n    <button type=\"button\" talosButton variant=\"ghost\" size=\"sm\" [iconOnly]=\"true\" class=\"side-panel-close-btn\"\n      (click)=\"onClose()\" aria-label=\"Close details panel\">\n      <svg lucideX [size]=\"16\"></svg>\n    </button>\n  </div>\n  <div class=\"side-panel-body\">\n    @if (component()) {\n    <ng-container *ngComponentOutlet=\"component()!; inputs: componentInputs()\" />\n    }\n    <ng-content />\n  </div>\n</div>", styles: [":host{display:flex;flex-direction:column;background:var(--talos-right-panel-bg, var(--talos-card-bg, var(--card-bg, #ffffff)));border-left:1px solid var(--talos-right-panel-border, var(--talos-border-color, var(--border-color, #e2e8f0)));box-sizing:border-box;overflow:hidden;transition:width .3s cubic-bezier(.16,1,.3,1),max-width .3s cubic-bezier(.16,1,.3,1),opacity .25s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility .3s,border-left-color .3s}:host.is-overlay{position:absolute;top:0;right:0;bottom:0;z-index:40;width:var(--panel-width, 380px);box-shadow:-8px 0 24px #00000026;transform:translate(100%);opacity:0;visibility:hidden;pointer-events:none}:host.is-overlay.is-open{transform:translate(0);opacity:1;visibility:visible;pointer-events:auto}:host.is-inline{position:relative;height:100%;z-index:10;flex-shrink:0;width:0;max-width:0;opacity:0;visibility:hidden;pointer-events:none;border-left-color:transparent}:host.is-inline.is-open{width:var(--panel-width, 380px);max-width:var(--panel-width, 380px);opacity:1;visibility:visible;pointer-events:auto;border-left-color:var(--talos-right-panel-border, var(--right-panel-border, #e2e8f0))}.side-panel-inner{display:flex;flex-direction:column;width:var(--panel-width, 380px);height:100%;box-sizing:border-box}.side-panel-inner .side-panel-header{height:60px;min-height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--talos-right-panel-border, var(--right-panel-border, #e2e8f0))}.side-panel-inner .side-panel-header .side-panel-title{margin:0;font-size:16px;font-weight:600;color:var(--talos-text-color, var(--panel-title-color, #0f172a))}.side-panel-inner .side-panel-body{flex:1;overflow-y:auto;padding:20px}\n"] }]
+                    }, template: "<div class=\"side-panel-inner\">\n  <div class=\"side-panel-header\">\n    <h3 class=\"side-panel-title\">\n      {{ title() }}\n    </h3>\n    <button type=\"button\" talosButton variant=\"ghost\" size=\"sm\" [iconOnly]=\"true\" class=\"side-panel-close-btn\"\n      (click)=\"onClose()\" aria-label=\"Close details panel\">\n      <svg lucideX [size]=\"16\"></svg>\n    </button>\n  </div>\n  <div class=\"side-panel-body\">\n    @if (component()) {\n    <ng-container *ngComponentOutlet=\"component()!; inputs: componentInputs()\" />\n    }\n    <ng-content />\n  </div>\n</div>", styles: [":host{display:flex;flex-direction:column;background:var(--talos-right-panel-bg, var(--talos-card-bg, var(--card-bg, #ffffff)));border-left:1px solid var(--talos-right-panel-border, var(--talos-border-color, var(--border-color, #e2e8f0)));box-sizing:border-box;overflow:hidden;transition:width .3s cubic-bezier(.16,1,.3,1),max-width .3s cubic-bezier(.16,1,.3,1),opacity .25s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility .3s,border-left-color .3s}:host.is-overlay{position:absolute;top:0;right:0;bottom:0;z-index:40;width:var(--panel-width, 380px);box-shadow:-8px 0 24px #00000026;transform:translate(100%);opacity:0;visibility:hidden;pointer-events:none}:host.is-overlay.is-open{transform:translate(0);opacity:1;visibility:visible;pointer-events:auto}:host.is-inline{position:relative;height:100%;z-index:10;flex-shrink:0;width:0;max-width:0;opacity:0;visibility:hidden;pointer-events:none;border-left-color:transparent}:host.is-inline.is-open{width:var(--panel-width, 380px);max-width:var(--panel-width, 380px);opacity:1;visibility:visible;pointer-events:auto;border-left-color:var(--talos-right-panel-border, var(--right-panel-border, #e2e8f0))}.side-panel-inner{display:flex;flex-direction:column;width:var(--panel-width, 380px);height:100%;box-sizing:border-box}.side-panel-inner .side-panel-header{height:60px;min-height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--talos-right-panel-border, var(--right-panel-border, #e2e8f0))}.side-panel-inner .side-panel-header .side-panel-title{margin:0;font-size:16px;font-weight:600;color:var(--talos-text-color, var(--panel-title-color, #0f172a))}.side-panel-inner .side-panel-body{flex:1;overflow-y:auto;padding:20px}@media(max-width:768px){:host.is-overlay{position:absolute;inset:0;width:100%!important;max-width:100%!important;height:100%!important;z-index:50}:host.is-inline.is-open{position:absolute;inset:0;width:100%!important;max-width:100%!important;height:100%!important;z-index:50;box-shadow:0 10px 25px -5px #00000040}.side-panel-inner{width:100%!important;max-width:100%!important;height:100%}}\n"] }]
         }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: false }] }], componentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentInputs", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
 
 class MainLayoutComponent {
@@ -154,7 +155,7 @@ class MainLayoutComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MainLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: MainLayoutComponent, isStandalone: true, selector: "talos-main-layout", host: { properties: { "class.left-nav-collapsed": "layoutService.isLeftNavCollapsed()", "class.right-panel-open": "layoutService.isRightPanelOpen()", "class.right-panel-inline": "layoutService.isRightPanelInline()", "class.main-content-expanded": "layoutService.isMainContentExpanded()", "class.blur-backdrop": "layoutService.shouldBlurMainContent()" }, classAttribute: "talos-main-layout-host" }, ngImport: i0, template: "<!-- Top Header Slot (Spanning 100% full width across top of viewport) -->\n<ng-content select=\"talos-top-nav, app-header, header, [top-nav], [header]\" />\n\n<div class=\"layout-body-wrapper\">\n  <!-- Side Nav Slot (Accepts talos-side-nav, app-side-nav, or elements with [side-nav]) -->\n  <ng-content select=\"talos-side-nav, app-side-nav, [side-nav]\" />\n\n  <!-- Main Content Container Area -->\n  <div class=\"main-content-wrapper\">\n    <main class=\"main-content-container\" role=\"main\">\n      <ng-content />\n    </main>\n\n    <!-- Optional Blur Backdrop Overlay -->\n    @if (layoutService.shouldBlurMainContent()) {\n    <div class=\"main-backdrop-overlay\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n    }\n  </div>\n\n  <!-- Dynamic Right Side Panel Drawer Component -->\n  <talos-side-panel [isOpen]=\"layoutService.isRightPanelOpen()\"\n    [title]=\"layoutService.rightPanelOptions().title ?? 'Details'\"\n    [width]=\"layoutService.rightPanelOptions().width ?? '380px'\"\n    [mode]=\"layoutService.rightPanelOptions().mode ?? 'overlay'\" [component]=\"layoutService.rightPanelComponent()\"\n    [componentInputs]=\"layoutService.rightPanelInputs()\" (close)=\"layoutService.closeRightPanel()\" />\n</div>", styles: [":host{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden;box-sizing:border-box;--sidebar-width: 260px;--sidebar-collapsed-width: 64px;--right-panel-default-width: 380px;--main-padding: 24px;--main-padding-expanded: 8px}:host.main-content-expanded{--main-padding: var(--main-padding-expanded)}:host:has(.is-fullscreen) .top-nav-bar,:host:has(.is-fullscreen) ::ng-deep talos-top-nav,:host:has(.is-fullscreen) ::ng-deep .talos-top-nav-host{z-index:1}:host:has(.is-fullscreen) .layout-body-wrapper{z-index:100000;overflow:visible}.top-nav-bar{height:60px;min-height:60px;display:flex;align-items:center;padding:0 20px;background:var(--talos-header-bg, var(--header-bg, #ffffff));border-bottom:1px solid var(--talos-header-border-color, var(--header-border-color, #e2e8f0));z-index:20}.layout-body-wrapper{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.main-content-wrapper{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.main-content-container{flex:1;padding:var(--main-padding);transition:padding .25s cubic-bezier(.4,0,.2,1),filter .25s cubic-bezier(.4,0,.2,1);overflow-y:auto}:host.blur-backdrop .main-content-container{filter:blur(4px);pointer-events:none;-webkit-user-select:none;user-select:none}.main-backdrop-overlay{position:absolute;inset:0;background:#0f172a33;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:30;cursor:pointer;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: SidePanelComponent, selector: "talos-side-panel", inputs: ["isOpen", "title", "width", "mode", "component", "componentInputs"], outputs: ["close"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: MainLayoutComponent, isStandalone: true, selector: "talos-main-layout", host: { properties: { "class.left-nav-collapsed": "layoutService.isLeftNavCollapsed()", "class.right-panel-open": "layoutService.isRightPanelOpen()", "class.right-panel-inline": "layoutService.isRightPanelInline()", "class.main-content-expanded": "layoutService.isMainContentExpanded()", "class.blur-backdrop": "layoutService.shouldBlurMainContent()" }, classAttribute: "talos-main-layout-host" }, ngImport: i0, template: "<!-- Top Header Slot (Spanning 100% full width across top of viewport) -->\n<ng-content select=\"talos-top-nav, app-header, header, [top-nav], [header]\" />\n\n<div class=\"layout-body-wrapper\">\n  <!-- Side Nav Slot (Accepts talos-side-nav, app-side-nav, or elements with [side-nav]) -->\n  <ng-content select=\"talos-side-nav, app-side-nav, [side-nav]\" />\n\n  <!-- Mobile Sidebar Overlay Backdrop -->\n  @if (!layoutService.isLeftNavCollapsed()) {\n  <div class=\"mobile-sidebar-backdrop\" (click)=\"layoutService.setLeftNavCollapsed(true)\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Main Content Container Area -->\n  <div class=\"main-content-wrapper\">\n    <main class=\"main-content-container\" role=\"main\">\n      <ng-content />\n    </main>\n\n    <!-- Optional Blur Backdrop Overlay -->\n    @if (layoutService.shouldBlurMainContent()) {\n    <div class=\"main-backdrop-overlay\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n    }\n  </div>\n\n  <!-- Dynamic Right Side Panel Drawer Component -->\n  <talos-side-panel [isOpen]=\"layoutService.isRightPanelOpen()\"\n    [title]=\"layoutService.rightPanelOptions().title ?? 'Details'\"\n    [width]=\"layoutService.rightPanelOptions().width ?? '380px'\"\n    [mode]=\"layoutService.rightPanelOptions().mode ?? 'overlay'\" [component]=\"layoutService.rightPanelComponent()\"\n    [componentInputs]=\"layoutService.rightPanelInputs()\" (close)=\"layoutService.closeRightPanel()\" />\n</div>", styles: [":host{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100vw;overflow:hidden;box-sizing:border-box;--sidebar-width: 260px;--sidebar-collapsed-width: 64px;--right-panel-default-width: 380px;--main-padding: 24px;--main-padding-expanded: 8px}@media(max-width:768px){:host{--main-padding: 12px}}:host.main-content-expanded{--main-padding: var(--main-padding-expanded)}:host:has(.is-fullscreen) .top-nav-bar,:host:has(.is-fullscreen) ::ng-deep talos-top-nav,:host:has(.is-fullscreen) ::ng-deep .talos-top-nav-host{z-index:1}:host:has(.is-fullscreen) .layout-body-wrapper{z-index:100000;overflow:visible}.top-nav-bar{height:60px;min-height:60px;display:flex;align-items:center;padding:0 20px;background:var(--talos-header-bg, var(--header-bg, #ffffff));border-bottom:1px solid var(--talos-header-border-color, var(--header-border-color, #e2e8f0));z-index:20}@media(max-width:640px){.top-nav-bar{padding:0 12px}}.layout-body-wrapper{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.mobile-sidebar-backdrop{display:none}@media(max-width:768px){.mobile-sidebar-backdrop{display:block;position:fixed;inset:60px 0 0;background:#0f172a73;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:85;animation:fadeIn .2s ease-out;cursor:pointer}}.main-content-wrapper{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.main-content-container{flex:1;width:100%;box-sizing:border-box;padding:var(--main-padding);transition:padding .25s cubic-bezier(.4,0,.2,1),filter .25s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden}:host.blur-backdrop .main-content-container{filter:blur(4px);pointer-events:none;-webkit-user-select:none;user-select:none}.main-backdrop-overlay{position:absolute;inset:0;background:#0f172a33;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:30;cursor:pointer;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: SidePanelComponent, selector: "talos-side-panel", inputs: ["isOpen", "title", "width", "mode", "component", "componentInputs"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MainLayoutComponent, decorators: [{
             type: Component,
@@ -165,7 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[class.right-panel-inline]': 'layoutService.isRightPanelInline()',
                         '[class.main-content-expanded]': 'layoutService.isMainContentExpanded()',
                         '[class.blur-backdrop]': 'layoutService.shouldBlurMainContent()'
-                    }, template: "<!-- Top Header Slot (Spanning 100% full width across top of viewport) -->\n<ng-content select=\"talos-top-nav, app-header, header, [top-nav], [header]\" />\n\n<div class=\"layout-body-wrapper\">\n  <!-- Side Nav Slot (Accepts talos-side-nav, app-side-nav, or elements with [side-nav]) -->\n  <ng-content select=\"talos-side-nav, app-side-nav, [side-nav]\" />\n\n  <!-- Main Content Container Area -->\n  <div class=\"main-content-wrapper\">\n    <main class=\"main-content-container\" role=\"main\">\n      <ng-content />\n    </main>\n\n    <!-- Optional Blur Backdrop Overlay -->\n    @if (layoutService.shouldBlurMainContent()) {\n    <div class=\"main-backdrop-overlay\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n    }\n  </div>\n\n  <!-- Dynamic Right Side Panel Drawer Component -->\n  <talos-side-panel [isOpen]=\"layoutService.isRightPanelOpen()\"\n    [title]=\"layoutService.rightPanelOptions().title ?? 'Details'\"\n    [width]=\"layoutService.rightPanelOptions().width ?? '380px'\"\n    [mode]=\"layoutService.rightPanelOptions().mode ?? 'overlay'\" [component]=\"layoutService.rightPanelComponent()\"\n    [componentInputs]=\"layoutService.rightPanelInputs()\" (close)=\"layoutService.closeRightPanel()\" />\n</div>", styles: [":host{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden;box-sizing:border-box;--sidebar-width: 260px;--sidebar-collapsed-width: 64px;--right-panel-default-width: 380px;--main-padding: 24px;--main-padding-expanded: 8px}:host.main-content-expanded{--main-padding: var(--main-padding-expanded)}:host:has(.is-fullscreen) .top-nav-bar,:host:has(.is-fullscreen) ::ng-deep talos-top-nav,:host:has(.is-fullscreen) ::ng-deep .talos-top-nav-host{z-index:1}:host:has(.is-fullscreen) .layout-body-wrapper{z-index:100000;overflow:visible}.top-nav-bar{height:60px;min-height:60px;display:flex;align-items:center;padding:0 20px;background:var(--talos-header-bg, var(--header-bg, #ffffff));border-bottom:1px solid var(--talos-header-border-color, var(--header-border-color, #e2e8f0));z-index:20}.layout-body-wrapper{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.main-content-wrapper{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.main-content-container{flex:1;padding:var(--main-padding);transition:padding .25s cubic-bezier(.4,0,.2,1),filter .25s cubic-bezier(.4,0,.2,1);overflow-y:auto}:host.blur-backdrop .main-content-container{filter:blur(4px);pointer-events:none;-webkit-user-select:none;user-select:none}.main-backdrop-overlay{position:absolute;inset:0;background:#0f172a33;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:30;cursor:pointer;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+                    }, template: "<!-- Top Header Slot (Spanning 100% full width across top of viewport) -->\n<ng-content select=\"talos-top-nav, app-header, header, [top-nav], [header]\" />\n\n<div class=\"layout-body-wrapper\">\n  <!-- Side Nav Slot (Accepts talos-side-nav, app-side-nav, or elements with [side-nav]) -->\n  <ng-content select=\"talos-side-nav, app-side-nav, [side-nav]\" />\n\n  <!-- Mobile Sidebar Overlay Backdrop -->\n  @if (!layoutService.isLeftNavCollapsed()) {\n  <div class=\"mobile-sidebar-backdrop\" (click)=\"layoutService.setLeftNavCollapsed(true)\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Main Content Container Area -->\n  <div class=\"main-content-wrapper\">\n    <main class=\"main-content-container\" role=\"main\">\n      <ng-content />\n    </main>\n\n    <!-- Optional Blur Backdrop Overlay -->\n    @if (layoutService.shouldBlurMainContent()) {\n    <div class=\"main-backdrop-overlay\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n    }\n  </div>\n\n  <!-- Dynamic Right Side Panel Drawer Component -->\n  <talos-side-panel [isOpen]=\"layoutService.isRightPanelOpen()\"\n    [title]=\"layoutService.rightPanelOptions().title ?? 'Details'\"\n    [width]=\"layoutService.rightPanelOptions().width ?? '380px'\"\n    [mode]=\"layoutService.rightPanelOptions().mode ?? 'overlay'\" [component]=\"layoutService.rightPanelComponent()\"\n    [componentInputs]=\"layoutService.rightPanelInputs()\" (close)=\"layoutService.closeRightPanel()\" />\n</div>", styles: [":host{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100vw;overflow:hidden;box-sizing:border-box;--sidebar-width: 260px;--sidebar-collapsed-width: 64px;--right-panel-default-width: 380px;--main-padding: 24px;--main-padding-expanded: 8px}@media(max-width:768px){:host{--main-padding: 12px}}:host.main-content-expanded{--main-padding: var(--main-padding-expanded)}:host:has(.is-fullscreen) .top-nav-bar,:host:has(.is-fullscreen) ::ng-deep talos-top-nav,:host:has(.is-fullscreen) ::ng-deep .talos-top-nav-host{z-index:1}:host:has(.is-fullscreen) .layout-body-wrapper{z-index:100000;overflow:visible}.top-nav-bar{height:60px;min-height:60px;display:flex;align-items:center;padding:0 20px;background:var(--talos-header-bg, var(--header-bg, #ffffff));border-bottom:1px solid var(--talos-header-border-color, var(--header-border-color, #e2e8f0));z-index:20}@media(max-width:640px){.top-nav-bar{padding:0 12px}}.layout-body-wrapper{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.mobile-sidebar-backdrop{display:none}@media(max-width:768px){.mobile-sidebar-backdrop{display:block;position:fixed;inset:60px 0 0;background:#0f172a73;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:85;animation:fadeIn .2s ease-out;cursor:pointer}}.main-content-wrapper{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.main-content-container{flex:1;width:100%;box-sizing:border-box;padding:var(--main-padding);transition:padding .25s cubic-bezier(.4,0,.2,1),filter .25s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden}:host.blur-backdrop .main-content-container{filter:blur(4px);pointer-events:none;-webkit-user-select:none;user-select:none}.main-backdrop-overlay{position:absolute;inset:0;background:#0f172a33;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:30;cursor:pointer;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
         }] });
 
 class TalosCardTitleDirective {
@@ -1059,6 +1060,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }], 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 TalosThemeMorphIconComponent {
+    /** Target theme mode: 'system' | 'light' | 'dark' */
+    mode = input('system', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Icon dimension in pixels (defaults to 16px for balanced optical sizing) */
+    size = input(16, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Effective mode */
+    effectiveMode = computed(() => this.mode() || 'system', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosThemeMorphIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: TalosThemeMorphIconComponent, isStandalone: true, selector: "talos-theme-morph-icon", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width.px": "size()", "style.height.px": "size()", "style.--morph-size.px": "size()" }, classAttribute: "talos-theme-morph-icon-host" }, ngImport: i0, template: `
+    <span class="talos-theme-morph-container" [attr.data-mode]="effectiveMode()">
+      <span class="morph-icon-slot mode-system" [class.is-active]="effectiveMode() === 'system'">
+        <svg lucideMonitor [size]="size()"></svg>
+      </span>
+      <span class="morph-icon-slot mode-dark" [class.is-active]="effectiveMode() === 'dark'">
+        <svg lucideMoon [size]="size()"></svg>
+      </span>
+      <span class="morph-icon-slot mode-light" [class.is-active]="effectiveMode() === 'light'">
+        <svg lucideSun [size]="size()"></svg>
+      </span>
+    </span>
+  `, isInline: true, styles: [".talos-theme-morph-icon-host{display:inline-flex;align-items:center;justify-content:center;position:relative;line-height:0;vertical-align:middle;pointer-events:none;-webkit-user-select:none;user-select:none;width:var(--morph-size, 16px);height:var(--morph-size, 16px);min-width:var(--morph-size, 16px);min-height:var(--morph-size, 16px);box-sizing:border-box;overflow:visible}.talos-theme-morph-container{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;overflow:visible}.talos-theme-morph-container .morph-icon-slot{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(.2) rotate(90deg);opacity:0;visibility:hidden;display:flex;align-items:center;justify-content:center;pointer-events:none;will-change:transform,opacity;box-sizing:border-box;transition:transform .38s cubic-bezier(.34,1.45,.64,1),opacity .22s ease,visibility .38s step-end}.talos-theme-morph-container .morph-icon-slot svg,.talos-theme-morph-container .morph-icon-slot lucide-icon,.talos-theme-morph-container .morph-icon-slot i-lucide,.talos-theme-morph-container .morph-icon-slot .lucide{display:block;width:100%;height:100%;color:currentColor}.talos-theme-morph-container .morph-icon-slot.is-active{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1;visibility:visible;pointer-events:auto;transition:transform .42s cubic-bezier(.34,1.45,.64,1),opacity .28s ease,visibility 0s linear}.talos-theme-morph-container .morph-icon-slot.mode-system.is-active{transform:translate(-50%,-50%) scale(1) rotate(0)}.talos-theme-morph-container[data-mode=system] .morph-icon-slot.mode-dark,.talos-theme-morph-container[data-mode=system] .morph-icon-slot.mode-light{transform:translate(-50%,-50%) scale(.2) rotate(-90deg)}.talos-theme-morph-container[data-mode=dark] .morph-icon-slot.mode-system{transform:translate(-50%,-50%) scale(.2) rotate(90deg)}.talos-theme-morph-container[data-mode=dark] .morph-icon-slot.mode-light{transform:translate(-50%,-50%) scale(.2) rotate(-90deg)}.talos-theme-morph-container[data-mode=light] .morph-icon-slot.mode-system,.talos-theme-morph-container[data-mode=light] .morph-icon-slot.mode-dark{transform:translate(-50%,-50%) scale(.2) rotate(90deg)}\n"], dependencies: [{ kind: "component", type: LucideMonitor, selector: "svg[lucideMonitor]" }, { kind: "component", type: LucideMoon, selector: "svg[lucideMoon]" }, { kind: "component", type: LucideSun, selector: "svg[lucideSun]" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosThemeMorphIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-theme-morph-icon', imports: [LucideMonitor, LucideMoon, LucideSun], template: `
+    <span class="talos-theme-morph-container" [attr.data-mode]="effectiveMode()">
+      <span class="morph-icon-slot mode-system" [class.is-active]="effectiveMode() === 'system'">
+        <svg lucideMonitor [size]="size()"></svg>
+      </span>
+      <span class="morph-icon-slot mode-dark" [class.is-active]="effectiveMode() === 'dark'">
+        <svg lucideMoon [size]="size()"></svg>
+      </span>
+      <span class="morph-icon-slot mode-light" [class.is-active]="effectiveMode() === 'light'">
+        <svg lucideSun [size]="size()"></svg>
+      </span>
+    </span>
+  `, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'talos-theme-morph-icon-host',
+                        '[style.width.px]': 'size()',
+                        '[style.height.px]': 'size()',
+                        '[style.--morph-size.px]': 'size()'
+                    }, styles: [".talos-theme-morph-icon-host{display:inline-flex;align-items:center;justify-content:center;position:relative;line-height:0;vertical-align:middle;pointer-events:none;-webkit-user-select:none;user-select:none;width:var(--morph-size, 16px);height:var(--morph-size, 16px);min-width:var(--morph-size, 16px);min-height:var(--morph-size, 16px);box-sizing:border-box;overflow:visible}.talos-theme-morph-container{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;overflow:visible}.talos-theme-morph-container .morph-icon-slot{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(.2) rotate(90deg);opacity:0;visibility:hidden;display:flex;align-items:center;justify-content:center;pointer-events:none;will-change:transform,opacity;box-sizing:border-box;transition:transform .38s cubic-bezier(.34,1.45,.64,1),opacity .22s ease,visibility .38s step-end}.talos-theme-morph-container .morph-icon-slot svg,.talos-theme-morph-container .morph-icon-slot lucide-icon,.talos-theme-morph-container .morph-icon-slot i-lucide,.talos-theme-morph-container .morph-icon-slot .lucide{display:block;width:100%;height:100%;color:currentColor}.talos-theme-morph-container .morph-icon-slot.is-active{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1;visibility:visible;pointer-events:auto;transition:transform .42s cubic-bezier(.34,1.45,.64,1),opacity .28s ease,visibility 0s linear}.talos-theme-morph-container .morph-icon-slot.mode-system.is-active{transform:translate(-50%,-50%) scale(1) rotate(0)}.talos-theme-morph-container[data-mode=system] .morph-icon-slot.mode-dark,.talos-theme-morph-container[data-mode=system] .morph-icon-slot.mode-light{transform:translate(-50%,-50%) scale(.2) rotate(-90deg)}.talos-theme-morph-container[data-mode=dark] .morph-icon-slot.mode-system{transform:translate(-50%,-50%) scale(.2) rotate(90deg)}.talos-theme-morph-container[data-mode=dark] .morph-icon-slot.mode-light{transform:translate(-50%,-50%) scale(.2) rotate(-90deg)}.talos-theme-morph-container[data-mode=light] .morph-icon-slot.mode-system,.talos-theme-morph-container[data-mode=light] .morph-icon-slot.mode-dark{transform:translate(-50%,-50%) scale(.2) rotate(90deg)}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
 class TalosNavThemeToggleComponent {
     layoutService = inject(LayoutService$1, { optional: true });
     /** Explicit 3-way theme mode: 'system' | 'light' | 'dark' */
@@ -1067,9 +1115,15 @@ class TalosNavThemeToggleComponent {
     /** 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 */ []));
+    /** Optional explicit collapsed state override */
+    collapsed = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Icon size in pixels */
+    iconSize = input(16, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    /** Tooltip position */
+    tooltipPosition = input('right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
     /** Label shown for system mode */
     systemLabel = input('System Mode', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "systemLabel" }] : /* istanbul ignore next */ []));
@@ -1079,15 +1133,23 @@ class TalosNavThemeToggleComponent {
     /** Label shown for dark mode */
     darkLabel = input('Dark Mode', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "darkLabel" }] : /* istanbul ignore next */ []));
-    /** Optional custom tooltip text when collapsed */
+    /** Optional custom tooltip text override */
     tooltip = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
-    /** Output event when the toggle is clicked */
+    /** Output event when theme is toggled or clicked */
     themeToggle = output();
-    /** Output event with next theme mode ('system' | 'light' | 'dark') */
+    /** Output event with selected theme mode ('system' | 'light' | 'dark') */
     themeModeChange = output();
     /** Output event with next dark mode state */
     isDarkModeChange = output();
+    /** 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 */ []));
     /** Computed effective theme mode */
     effectiveMode = computed(() => {
         const mode = this.themeMode();
@@ -1119,17 +1181,28 @@ class TalosNavThemeToggleComponent {
     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}`;
+        return `Current theme: ${current}. Click to switch to ${nextModeName}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
-    /** Computed tooltip for collapsed sidebar state */
+    /** Computed tooltip */
     computedTooltip = computed(() => {
-        const isCollapsed = this.layoutService?.isLeftNavCollapsed() ?? false;
-        if (!isCollapsed)
-            return null;
-        return this.tooltip() || `Theme: ${this.currentModeLabel()}`;
+        if (this.tooltip() !== undefined) {
+            return this.tooltip() || '';
+        }
+        const current = this.currentModeLabel();
+        const nextModeName = this.nextMode() === 'system' ? this.systemLabel() : this.nextMode() === 'dark' ? this.darkLabel() : this.lightLabel();
+        return `Theme: ${current} (Click for ${nextModeName})`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedTooltip" }] : /* istanbul ignore next */ []));
+    /** Set mode directly */
+    setMode(mode) {
+        if (this.effectiveMode() === mode)
+            return;
+        this.themeToggle.emit();
+        this.themeModeChange.emit(mode);
+        this.isDarkModeChange.emit(mode === 'dark');
+    }
+    /** Cycle to next mode */
     handleToggle() {
         const next = this.nextMode();
         this.themeToggle.emit();
@@ -1137,75 +1210,39 @@ class TalosNavThemeToggleComponent {
         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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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 }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", 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": "isCollapsed()" }, 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">
+      [talosTooltip]="computedTooltip()"
+      [tooltipPosition]="tooltipPosition()">
       <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>
+        <talos-theme-morph-icon [mode]="effectiveMode()" [size]="iconSize()" />
       </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$1, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }] });
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center}.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:36px;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;box-sizing:border-box;padding:0;margin:0 auto;transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.theme-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));border-color:var(--talos-primary-color, var(--primary-color, #2563eb));color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:0 1px 3px #00000014}.theme-toggle-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--talos-primary-color, #2563eb)}.theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;color:currentColor;transition:transform .2s cubic-bezier(.4,0,.2,1);position:relative}.theme-toggle-btn .theme-toggle-icon talos-theme-morph-icon,.theme-toggle-btn .theme-toggle-icon svg,.theme-toggle-btn .theme-toggle-icon lucide-icon{width:16px;height:16px}.theme-toggle-btn:active .theme-toggle-icon{transform:scale(.88)}:host-context(.is-collapsed),:host(.is-collapsed){display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;margin:0 auto!important}:host-context(.is-collapsed) .theme-toggle-btn,:host(.is-collapsed) .theme-toggle-btn{width:38px!important;height:36px!important;margin:0 auto!important}\n"], dependencies: [{ kind: "component", type: TalosThemeMorphIconComponent, selector: "talos-theme-morph-icon", inputs: ["mode", "size"] }, { kind: "directive", type: TalosTooltipDirective$1, 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$1], template: `
+            args: [{ selector: 'talos-nav-theme-toggle', imports: [TalosThemeMorphIconComponent, TalosTooltipDirective$1], template: `
     <button
       type="button"
       class="theme-toggle-btn"
       (click)="handleToggle()"
       [attr.aria-label]="computedAriaLabel()"
-      [talosTooltip]="computedTooltip() || ''"
-      [tooltipDisabled]="!layoutService?.isLeftNavCollapsed()"
-      tooltipPosition="right">
+      [talosTooltip]="computedTooltip()"
+      [tooltipPosition]="tooltipPosition()">
       <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>
+        <talos-theme-morph-icon [mode]="effectiveMode()" [size]="iconSize()" />
       </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.is-collapsed]': 'isCollapsed()'
+                    }, styles: [":host{display:inline-flex;align-items:center;justify-content:center}.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:36px;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;box-sizing:border-box;padding:0;margin:0 auto;transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.theme-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));border-color:var(--talos-primary-color, var(--primary-color, #2563eb));color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:0 1px 3px #00000014}.theme-toggle-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--talos-primary-color, #2563eb)}.theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;color:currentColor;transition:transform .2s cubic-bezier(.4,0,.2,1);position:relative}.theme-toggle-btn .theme-toggle-icon talos-theme-morph-icon,.theme-toggle-btn .theme-toggle-icon svg,.theme-toggle-btn .theme-toggle-icon lucide-icon{width:16px;height:16px}.theme-toggle-btn:active .theme-toggle-icon{transform:scale(.88)}:host-context(.is-collapsed),:host(.is-collapsed){display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;margin:0 auto!important}:host-context(.is-collapsed) .theme-toggle-btn,:host(.is-collapsed) .theme-toggle-btn{width:38px!important;height:36px!important;margin:0 auto!important}\n"] }]
+        }], propDecorators: { themeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeMode", required: false }] }], isDarkMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDarkMode", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", 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$1, { optional: true });
@@ -1319,7 +1356,7 @@ class SideNavComponent {
         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$1, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }], encapsulation: i0.ViewEncapsulation.None });
+    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  <!-- Mobile Close Header Bar (Visible on mobile <= 768px when side nav is 100% full screen) -->\n  <div class=\"side-nav-mobile-close-bar\">\n    <span class=\"mobile-close-title\">Components</span>\n    <button type=\"button\" class=\"mobile-close-btn\" (click)=\"toggleCollapse()\" aria-label=\"Close menu\">\n      <svg lucideX [size]=\"18\"></svg>\n    </button>\n  </div>\n\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'\" 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()\" [active]=\"(item.id && activeItemId() === item.id) || !!item.active\"\n          (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()\" [active]=\"item.id ? activeItemId() === item.id : !!item.active\"\n            (itemClick)=\"selectItem(item)\" />\n          }\n        </ul>\n        }\n\n        <!-- User Profile Card -->\n        @if (userProfile(); as profile) {\n        <div class=\"user-profile-card\" [talosTooltip]=\"profile.name + ' (' + profile.email + ')'\"\n          [tooltipDisabled]=\"!isCollapsed()\" 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 Actions Bar (Collapse + Theme Toggle) -->\n        <div class=\"footer-actions-row\">\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'\" [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\n          @if (showThemeToggle()) {\n          <talos-nav-theme-toggle [themeMode]=\"themeMode()\" [isDarkMode]=\"isDarkMode()\"\n            (themeToggle)=\"themeToggle.emit()\" (themeModeChange)=\"themeModeChange.emit($event)\" />\n          }\n        </div>\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)}:root[data-theme=dark] :host .side-nav-mobile-close-bar,:root.dark :host .side-nav-mobile-close-bar,[data-theme=dark] :host .side-nav-mobile-close-bar,[data-mode=dark] :host .side-nav-mobile-close-bar,.dark :host .side-nav-mobile-close-bar,.dark-theme :host .side-nav-mobile-close-bar,:host.dark-theme .side-nav-mobile-close-bar,talos-side-nav.dark-theme .side-nav-mobile-close-bar,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar{background:#090d16;border-color:#ffffff14}:root[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-title,:root.dark :host .side-nav-mobile-close-bar .mobile-close-title,[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-title,[data-mode=dark] :host .side-nav-mobile-close-bar .mobile-close-title,.dark :host .side-nav-mobile-close-bar .mobile-close-title,.dark-theme :host .side-nav-mobile-close-bar .mobile-close-title,:host.dark-theme .side-nav-mobile-close-bar .mobile-close-title,talos-side-nav.dark-theme .side-nav-mobile-close-bar .mobile-close-title,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar .mobile-close-title{color:#f8fafc}:root[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn,:root.dark :host .side-nav-mobile-close-bar .mobile-close-btn,[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn,[data-mode=dark] :host .side-nav-mobile-close-bar .mobile-close-btn,.dark :host .side-nav-mobile-close-bar .mobile-close-btn,.dark-theme :host .side-nav-mobile-close-bar .mobile-close-btn,:host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn,talos-side-nav.dark-theme .side-nav-mobile-close-bar .mobile-close-btn,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn:hover,:root.dark :host .side-nav-mobile-close-bar .mobile-close-btn:hover,[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn:hover,[data-mode=dark] :host .side-nav-mobile-close-bar .mobile-close-btn:hover,.dark :host .side-nav-mobile-close-bar .mobile-close-btn:hover,.dark-theme :host .side-nav-mobile-close-bar .mobile-close-btn:hover,:host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn:hover,talos-side-nav.dark-theme .side-nav-mobile-close-bar .mobile-close-btn:hover,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn:hover{background:#131d31;color:#f8fafc;border-color:#fff3}: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 talos-nav-theme-toggle,:host.is-collapsed .talos-nav-theme-toggle-host,talos-side-nav.is-collapsed talos-nav-theme-toggle,talos-side-nav.is-collapsed .talos-nav-theme-toggle-host,.talos-side-nav-host.is-collapsed talos-nav-theme-toggle,.talos-side-nav-host.is-collapsed .talos-nav-theme-toggle-host{display:flex;justify-content:center;align-items:center;width:100%;margin:0 auto}: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-actions-row,talos-side-nav.is-collapsed .footer-actions-row,.talos-side-nav-host.is-collapsed .footer-actions-row{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;width:100%}:host.is-collapsed .footer-actions-row .footer-collapse-bar,talos-side-nav.is-collapsed .footer-actions-row .footer-collapse-bar,.talos-side-nav-host.is-collapsed .footer-actions-row .footer-collapse-bar{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto;flex:none}:host.is-collapsed .footer-actions-row talos-nav-theme-toggle,:host.is-collapsed .footer-actions-row .talos-nav-theme-toggle-host,talos-side-nav.is-collapsed .footer-actions-row talos-nav-theme-toggle,talos-side-nav.is-collapsed .footer-actions-row .talos-nav-theme-toggle-host,.talos-side-nav-host.is-collapsed .footer-actions-row talos-nav-theme-toggle,.talos-side-nav-host.is-collapsed .footer-actions-row .talos-nav-theme-toggle-host{display:flex;justify-content:center;align-items:center;width:100%;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-mobile-close-bar{display:none}.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}.footer-actions-row{display:flex;align-items:center;gap:8px;width:100%}.footer-actions-row .footer-collapse-bar{flex:1;min-width:0}.footer-actions-row talos-nav-theme-toggle,.footer-actions-row .talos-nav-theme-toggle-host{flex-shrink:0}.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}@media(max-width:768px){:host,talos-side-nav,.talos-side-nav-host{position:fixed;inset:60px 0 0;width:100vw!important;max-width:100vw!important;width:100%!important;height:calc(100vh - 60px);height:calc(100dvh - 60px);z-index:90;background:var(--talos-nav-bg, var(--nav-bg, #ffffff));box-shadow:none;transform:translate(0);visibility:visible;pointer-events:auto;transition:transform .25s cubic-bezier(.4,0,.2,1),visibility .25s cubic-bezier(.4,0,.2,1)}:host.is-collapsed,talos-side-nav.is-collapsed,.talos-side-nav-host.is-collapsed{width:100vw!important;max-width:100vw!important;width:100%!important;transform:translate(-100%)!important;visibility:hidden!important;pointer-events:none!important;box-shadow:none!important}:host .side-nav-mobile-close-bar,talos-side-nav .side-nav-mobile-close-bar,.talos-side-nav-host .side-nav-mobile-close-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));background:var(--talos-nav-bg, var(--nav-bg, #ffffff));flex-shrink:0}:host .side-nav-mobile-close-bar .mobile-close-title,talos-side-nav .side-nav-mobile-close-bar .mobile-close-title,.talos-side-nav-host .side-nav-mobile-close-bar .mobile-close-title{font-size:14px;font-weight:600;color:var(--talos-text-color, var(--text-color, #0f172a));letter-spacing:-.01em}:host .side-nav-mobile-close-bar .mobile-close-btn,talos-side-nav .side-nav-mobile-close-bar .mobile-close-btn,.talos-side-nav-host .side-nav-mobile-close-bar .mobile-close-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;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}:host .side-nav-mobile-close-bar .mobile-close-btn:hover,talos-side-nav .side-nav-mobile-close-bar .mobile-close-btn:hover,.talos-side-nav-host .side-nav-mobile-close-bar .mobile-close-btn:hover{background:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-text-color, var(--text-color, #0f172a));border-color:var(--talos-primary, #3b82f6)}:host .side-nav-header,talos-side-nav .side-nav-header,.talos-side-nav-host .side-nav-header{display:none}:host .side-nav-body,talos-side-nav .side-nav-body,.talos-side-nav-host .side-nav-body{padding:16px}:host .nav-link,talos-side-nav .nav-link,.talos-side-nav-host .nav-link{height:42px;padding:0 12px;font-size:14px}:host .nav-link .nav-label,talos-side-nav .nav-link .nav-label,.talos-side-nav-host .nav-link .nav-label{max-width:none}:host .theme-toggle-label,:host .user-info,talos-side-nav .theme-toggle-label,talos-side-nav .user-info,.talos-side-nav-host .theme-toggle-label,.talos-side-nav-host .user-info{max-width:none}:host .footer-collapse-bar,talos-side-nav .footer-collapse-bar,.talos-side-nav-host .footer-collapse-bar{display:none!important}}\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: LucideX, selector: "svg[lucideX]" }, { 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", "collapsed", "iconSize", "tooltipPosition", "systemLabel", "lightLabel", "darkLabel", "tooltip"], outputs: ["themeToggle", "themeModeChange", "isDarkModeChange"] }, { kind: "directive", type: TalosTooltipDirective$1, 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,
@@ -1330,6 +1367,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         LucideChevronsUpDown,
                         LucidePanelLeftOpen,
                         LucidePanelLeftClose,
+                        LucideX,
                         TalosNavGroupComponent,
                         TalosNavItemComponent,
                         TalosNavThemeToggleComponent,
@@ -1341,7 +1379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[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"] }]
+                    }, template: "<div class=\"side-nav-inner\">\n  <!-- Mobile Close Header Bar (Visible on mobile <= 768px when side nav is 100% full screen) -->\n  <div class=\"side-nav-mobile-close-bar\">\n    <span class=\"mobile-close-title\">Components</span>\n    <button type=\"button\" class=\"mobile-close-btn\" (click)=\"toggleCollapse()\" aria-label=\"Close menu\">\n      <svg lucideX [size]=\"18\"></svg>\n    </button>\n  </div>\n\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'\" 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()\" [active]=\"(item.id && activeItemId() === item.id) || !!item.active\"\n          (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()\" [active]=\"item.id ? activeItemId() === item.id : !!item.active\"\n            (itemClick)=\"selectItem(item)\" />\n          }\n        </ul>\n        }\n\n        <!-- User Profile Card -->\n        @if (userProfile(); as profile) {\n        <div class=\"user-profile-card\" [talosTooltip]=\"profile.name + ' (' + profile.email + ')'\"\n          [tooltipDisabled]=\"!isCollapsed()\" 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 Actions Bar (Collapse + Theme Toggle) -->\n        <div class=\"footer-actions-row\">\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'\" [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\n          @if (showThemeToggle()) {\n          <talos-nav-theme-toggle [themeMode]=\"themeMode()\" [isDarkMode]=\"isDarkMode()\"\n            (themeToggle)=\"themeToggle.emit()\" (themeModeChange)=\"themeModeChange.emit($event)\" />\n          }\n        </div>\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)}:root[data-theme=dark] :host .side-nav-mobile-close-bar,:root.dark :host .side-nav-mobile-close-bar,[data-theme=dark] :host .side-nav-mobile-close-bar,[data-mode=dark] :host .side-nav-mobile-close-bar,.dark :host .side-nav-mobile-close-bar,.dark-theme :host .side-nav-mobile-close-bar,:host.dark-theme .side-nav-mobile-close-bar,talos-side-nav.dark-theme .side-nav-mobile-close-bar,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar{background:#090d16;border-color:#ffffff14}:root[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-title,:root.dark :host .side-nav-mobile-close-bar .mobile-close-title,[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-title,[data-mode=dark] :host .side-nav-mobile-close-bar .mobile-close-title,.dark :host .side-nav-mobile-close-bar .mobile-close-title,.dark-theme :host .side-nav-mobile-close-bar .mobile-close-title,:host.dark-theme .side-nav-mobile-close-bar .mobile-close-title,talos-side-nav.dark-theme .side-nav-mobile-close-bar .mobile-close-title,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar .mobile-close-title{color:#f8fafc}:root[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn,:root.dark :host .side-nav-mobile-close-bar .mobile-close-btn,[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn,[data-mode=dark] :host .side-nav-mobile-close-bar .mobile-close-btn,.dark :host .side-nav-mobile-close-bar .mobile-close-btn,.dark-theme :host .side-nav-mobile-close-bar .mobile-close-btn,:host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn,talos-side-nav.dark-theme .side-nav-mobile-close-bar .mobile-close-btn,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn:hover,:root.dark :host .side-nav-mobile-close-bar .mobile-close-btn:hover,[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn:hover,[data-mode=dark] :host .side-nav-mobile-close-bar .mobile-close-btn:hover,.dark :host .side-nav-mobile-close-bar .mobile-close-btn:hover,.dark-theme :host .side-nav-mobile-close-bar .mobile-close-btn:hover,:host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn:hover,talos-side-nav.dark-theme .side-nav-mobile-close-bar .mobile-close-btn:hover,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn:hover{background:#131d31;color:#f8fafc;border-color:#fff3}: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 talos-nav-theme-toggle,:host.is-collapsed .talos-nav-theme-toggle-host,talos-side-nav.is-collapsed talos-nav-theme-toggle,talos-side-nav.is-collapsed .talos-nav-theme-toggle-host,.talos-side-nav-host.is-collapsed talos-nav-theme-toggle,.talos-side-nav-host.is-collapsed .talos-nav-theme-toggle-host{display:flex;justify-content:center;align-items:center;width:100%;margin:0 auto}: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-actions-row,talos-side-nav.is-collapsed .footer-actions-row,.talos-side-nav-host.is-collapsed .footer-actions-row{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;width:100%}:host.is-collapsed .footer-actions-row .footer-collapse-bar,talos-side-nav.is-collapsed .footer-actions-row .footer-collapse-bar,.talos-side-nav-host.is-collapsed .footer-actions-row .footer-collapse-bar{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto;flex:none}:host.is-collapsed .footer-actions-row talos-nav-theme-toggle,:host.is-collapsed .footer-actions-row .talos-nav-theme-toggle-host,talos-side-nav.is-collapsed .footer-actions-row talos-nav-theme-toggle,talos-side-nav.is-collapsed .footer-actions-row .talos-nav-theme-toggle-host,.talos-side-nav-host.is-collapsed .footer-actions-row talos-nav-theme-toggle,.talos-side-nav-host.is-collapsed .footer-actions-row .talos-nav-theme-toggle-host{display:flex;justify-content:center;align-items:center;width:100%;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-mobile-close-bar{display:none}.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}.footer-actions-row{display:flex;align-items:center;gap:8px;width:100%}.footer-actions-row .footer-collapse-bar{flex:1;min-width:0}.footer-actions-row talos-nav-theme-toggle,.footer-actions-row .talos-nav-theme-toggle-host{flex-shrink:0}.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}@media(max-width:768px){:host,talos-side-nav,.talos-side-nav-host{position:fixed;inset:60px 0 0;width:100vw!important;max-width:100vw!important;width:100%!important;height:calc(100vh - 60px);height:calc(100dvh - 60px);z-index:90;background:var(--talos-nav-bg, var(--nav-bg, #ffffff));box-shadow:none;transform:translate(0);visibility:visible;pointer-events:auto;transition:transform .25s cubic-bezier(.4,0,.2,1),visibility .25s cubic-bezier(.4,0,.2,1)}:host.is-collapsed,talos-side-nav.is-collapsed,.talos-side-nav-host.is-collapsed{width:100vw!important;max-width:100vw!important;width:100%!important;transform:translate(-100%)!important;visibility:hidden!important;pointer-events:none!important;box-shadow:none!important}:host .side-nav-mobile-close-bar,talos-side-nav .side-nav-mobile-close-bar,.talos-side-nav-host .side-nav-mobile-close-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));background:var(--talos-nav-bg, var(--nav-bg, #ffffff));flex-shrink:0}:host .side-nav-mobile-close-bar .mobile-close-title,talos-side-nav .side-nav-mobile-close-bar .mobile-close-title,.talos-side-nav-host .side-nav-mobile-close-bar .mobile-close-title{font-size:14px;font-weight:600;color:var(--talos-text-color, var(--text-color, #0f172a));letter-spacing:-.01em}:host .side-nav-mobile-close-bar .mobile-close-btn,talos-side-nav .side-nav-mobile-close-bar .mobile-close-btn,.talos-side-nav-host .side-nav-mobile-close-bar .mobile-close-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;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}:host .side-nav-mobile-close-bar .mobile-close-btn:hover,talos-side-nav .side-nav-mobile-close-bar .mobile-close-btn:hover,.talos-side-nav-host .side-nav-mobile-close-bar .mobile-close-btn:hover{background:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-text-color, var(--text-color, #0f172a));border-color:var(--talos-primary, #3b82f6)}:host .side-nav-header,talos-side-nav .side-nav-header,.talos-side-nav-host .side-nav-header{display:none}:host .side-nav-body,talos-side-nav .side-nav-body,.talos-side-nav-host .side-nav-body{padding:16px}:host .nav-link,talos-side-nav .nav-link,.talos-side-nav-host .nav-link{height:42px;padding:0 12px;font-size:14px}:host .nav-link .nav-label,talos-side-nav .nav-link .nav-label,.talos-side-nav-host .nav-link .nav-label{max-width:none}:host .theme-toggle-label,:host .user-info,talos-side-nav .theme-toggle-label,talos-side-nav .user-info,.talos-side-nav-host .theme-toggle-label,.talos-side-nav-host .user-info{max-width:none}:host .footer-collapse-bar,talos-side-nav .footer-collapse-bar,.talos-side-nav-host .footer-collapse-bar{display:none!important}}\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 {
@@ -1478,6 +1516,15 @@ class TopNavComponent {
     /** Track whether user profile dropdown menu is open */
     isUserDropdownOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isUserDropdownOpen" }] : /* istanbul ignore next */ []));
+    /** Track whether mobile hamburger navigation sheet is open */
+    isMobileMenuOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMobileMenuOpen" }] : /* istanbul ignore next */ []));
+    toggleMobileMenu() {
+        this.isMobileMenuOpen.update((v) => !v);
+    }
+    closeMobileMenu() {
+        this.isMobileMenuOpen.set(false);
+    }
     /** Computed effective theme mode */
     effectiveThemeMode = computed(() => {
         const mode = this.themeMode();
@@ -1618,6 +1665,7 @@ class TopNavComponent {
     closeAllDropdowns() {
         this.openDropdownId.set(null);
         this.isUserDropdownOpen.set(false);
+        this.isMobileMenuOpen.set(false);
     }
     /** Dismiss dropdowns when clicking outside the component */
     onDocumentClick(event) {
@@ -1627,7 +1675,7 @@ class TopNavComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TopNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TopNavComponent, isStandalone: true, selector: "talos-top-nav, [talos-top-nav], [talosTopNav]", inputs: { brandTitle: { classPropertyName: "brandTitle", publicName: "brandTitle", isSignal: true, isRequired: false, transformFunction: null }, brandSubtitle: { classPropertyName: "brandSubtitle", publicName: "brandSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandBadge: { classPropertyName: "brandBadge", publicName: "brandBadge", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, brandRoute: { classPropertyName: "brandRoute", publicName: "brandRoute", isSignal: true, isRequired: false, transformFunction: null }, brandUrl: { classPropertyName: "brandUrl", publicName: "brandUrl", isSignal: true, isRequired: false, transformFunction: null }, showBrand: { classPropertyName: "showBrand", publicName: "showBrand", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, logoComponent: { classPropertyName: "logoComponent", publicName: "logoComponent", isSignal: true, isRequired: false, transformFunction: null }, logoComponentInputs: { classPropertyName: "logoComponentInputs", publicName: "logoComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, logoTemplate: { classPropertyName: "logoTemplate", publicName: "logoTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showThemeToggle: { classPropertyName: "showThemeToggle", publicName: "showThemeToggle", isSignal: true, isRequired: false, transformFunction: null }, themeMode: { classPropertyName: "themeMode", publicName: "themeMode", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, glass: { classPropertyName: "glass", publicName: "glass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leftComponent: { classPropertyName: "leftComponent", publicName: "leftComponent", isSignal: true, isRequired: false, transformFunction: null }, leftComponentInputs: { classPropertyName: "leftComponentInputs", publicName: "leftComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, leftTemplate: { classPropertyName: "leftTemplate", publicName: "leftTemplate", isSignal: true, isRequired: false, transformFunction: null }, centerComponent: { classPropertyName: "centerComponent", publicName: "centerComponent", isSignal: true, isRequired: false, transformFunction: null }, centerComponentInputs: { classPropertyName: "centerComponentInputs", publicName: "centerComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, centerTemplate: { classPropertyName: "centerTemplate", publicName: "centerTemplate", isSignal: true, isRequired: false, transformFunction: null }, rightComponent: { classPropertyName: "rightComponent", publicName: "rightComponent", isSignal: true, isRequired: false, transformFunction: null }, rightComponentInputs: { classPropertyName: "rightComponentInputs", publicName: "rightComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, rightTemplate: { classPropertyName: "rightTemplate", publicName: "rightTemplate", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemId: "activeItemIdChange", sidebarCollapsed: "sidebarCollapsedChange", itemClick: "itemClick", actionClick: "actionClick", userClick: "userClick", themeToggle: "themeToggle", themeModeChange: "themeModeChange", searchChange: "searchChange", sidebarToggleClick: "sidebarToggleClick", brandClick: "brandClick" }, host: { attributes: { "role": "banner" }, listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "closeAllDropdowns()" }, properties: { "class.is-sticky": "sticky()", "class.is-glass": "glass()", "class.is-bordered": "bordered()", "class.size-sm": "size() === \"sm\"", "class.size-md": "size() === \"md\"", "class.size-lg": "size() === \"lg\"", "class.dark-theme": "isDarkMode()", "attr.data-theme": "isDarkMode() ? \"dark\" : \"light\"" }, classAttribute: "talos-top-nav-host" }, ngImport: i0, template: "<div class=\"talos-top-nav-inner\">\n  <!-- Left Section: Toggle, Brand, Logo -->\n  <div class=\"top-nav-left\">\n    @if (leftComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: leftComponentInputs()\" />\n    } @else if (leftTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-left]\">\n      <!-- Sidebar Collapse Toggle Button -->\n      @if (showSidebarToggle()) {\n      <ng-content select=\"[top-nav-toggle]\">\n        <button type=\"button\" class=\"nav-toggle-btn\" (click)=\"toggleSidebar()\"\n          [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\">\n          @if (isSidebarCollapsed()) {\n          <svg lucidePanelLeftOpen [size]=\"18\"></svg>\n          } @else {\n          <svg lucidePanelLeftClose [size]=\"18\"></svg>\n          }\n        </button>\n      </ng-content>\n      }\n\n      <!-- Brand / Logo Area -->\n      @if (showLogo() || showBrand()) {\n      <div class=\"brand-container\" (click)=\"handleBrandClick()\"\n        [attr.tabindex]=\"(brandRoute() || brandUrl()) ? 0 : null\"\n        [attr.role]=\"(brandRoute() || brandUrl()) ? 'link' : null\">\n        @if (showLogo()) {\n        <div class=\"brand-logo-wrapper\">\n          @if (logoComponent(); as comp) {\n          <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n          } @else if (logoTemplate(); as tmpl) {\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n          <ng-content select=\"[top-nav-logo]\" />\n          }\n        </div>\n        }\n\n        @if (showBrand()) {\n        <ng-content select=\"[top-nav-brand]\">\n          <div class=\"brand-text-group\">\n            <div class=\"brand-title-row\">\n              @if (brandIcon(); as iconComp) {\n              <span class=\"brand-icon\">\n                <ng-container *ngComponentOutlet=\"iconComp\" />\n              </span>\n              }\n              <span class=\"brand-title\">{{ brandTitle() }}</span>\n              @if (brandBadge(); as badge) {\n              <span class=\"brand-badge\">{{ badge }}</span>\n              }\n            </div>\n            @if (brandSubtitle(); as subtitle) {\n            <span class=\"brand-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </ng-content>\n        }\n      </div>\n      }\n    </ng-content>\n    }\n  </div>\n\n  <!-- Center Section: Navigation Links & Search -->\n  <div class=\"top-nav-center\">\n    @if (centerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: centerComponentInputs()\" />\n    } @else if (centerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-center]\">\n      <!-- Direct Navigation Items -->\n      @if (items().length > 0) {\n      <nav class=\"nav-links-bar\" aria-label=\"Main Navigation\">\n        @for (item of items(); track item.id || item.label) {\n        @if (item.children && item.children.length > 0) {\n        <!-- Item with Dropdown Menu -->\n        <div class=\"nav-item-dropdown-container\" [class.is-open]=\"openDropdownId() === (item.id || item.label)\">\n          <button type=\"button\" class=\"nav-link-btn has-dropdown\"\n            [class.is-active]=\"activeItemId() === item.id || !!item.active\" [disabled]=\"item.disabled ?? false\"\n            [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"openDropdownId() === (item.id || item.label)\"\n            (click)=\"toggleDropdown(item.id || item.label, $event)\">\n            @if (item.icon; as itemIcon) {\n            <span class=\"nav-link-icon\">\n              <ng-container *ngComponentOutlet=\"itemIcon\" />\n            </span>\n            }\n            <span class=\"nav-link-label\">{{ item.label }}</span>\n            @if (item.badge) {\n            <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n              {{ item.badge }}\n            </span>\n            }\n            <svg lucideChevronDown class=\"dropdown-chevron\" [size]=\"14\"></svg>\n          </button>\n\n          <!-- Dropdown Panel -->\n          @if (openDropdownId() === (item.id || item.label)) {\n          <div class=\"top-nav-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n            @if (item.dropdownTemplate; as customTmpl) {\n            <ng-container *ngTemplateOutlet=\"customTmpl\" />\n            } @else {\n            <ul class=\"dropdown-menu-list\">\n              @for (child of item.children; track child.id || child.label) {\n              @if (child.divider) {\n              <li class=\"dropdown-divider\" role=\"separator\"></li>\n              }\n              <li role=\"none\">\n                <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                  [class.is-active]=\"activeItemId() === child.id || !!child.active\" [disabled]=\"child.disabled ?? false\"\n                  (click)=\"selectChildItem(child, item, $event)\">\n                  @if (child.icon; as childIcon) {\n                  <span class=\"dropdown-item-icon\">\n                    <ng-container *ngComponentOutlet=\"childIcon\" />\n                  </span>\n                  }\n                  <div class=\"dropdown-item-content\">\n                    <span class=\"dropdown-item-label\">{{ child.label }}</span>\n                    @if (child.description) {\n                    <span class=\"dropdown-item-desc\">{{ child.description }}</span>\n                    }\n                  </div>\n                  @if (child.badge) {\n                  <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (child.badgeVariant ?? 'subtle')\">\n                    {{ child.badge }}\n                  </span>\n                  }\n                </button>\n              </li>\n              }\n            </ul>\n            }\n          </div>\n          }\n        </div>\n        } @else {\n        <!-- Standard Single Nav Link -->\n        <button type=\"button\" class=\"nav-link-btn\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n          [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event)\">\n          @if (item.icon; as itemIcon) {\n          <span class=\"nav-link-icon\">\n            <ng-container *ngComponentOutlet=\"itemIcon\" />\n          </span>\n          }\n          <span class=\"nav-link-label\">{{ item.label }}</span>\n          @if (item.badge) {\n          <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n            {{ item.badge }}\n          </span>\n          }\n        </button>\n        }\n        }\n      </nav>\n      }\n\n      <!-- Search Input Slot -->\n      @if (showSearch()) {\n      <div class=\"search-bar-wrapper\">\n        <svg lucideSearch class=\"search-icon\" [size]=\"15\"></svg>\n        <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n          (input)=\"onSearchInput($event)\" />\n      </div>\n      }\n\n      <!-- Custom projected center content -->\n      <ng-content select=\"[top-nav-links]\" />\n      <ng-content />\n    </ng-content>\n    }\n  </div>\n\n  <!-- Right Section: Actions, Theme Toggle, User Profile -->\n  <div class=\"top-nav-right\">\n    @if (rightComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: rightComponentInputs()\" />\n    } @else if (rightTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-right]\">\n      <!-- Action Buttons -->\n      @if (actions().length > 0) {\n      <div class=\"actions-group\">\n        @for (action of actions(); track action.id || action.label || $index) {\n        <button type=\"button\" class=\"action-btn\" [class.has-label]=\"action.showLabel && !!action.label\"\n          [disabled]=\"action.disabled ?? false\" [attr.aria-label]=\"action.label || 'Action'\"\n          [talosTooltip]=\"action.showLabel ? '' : (action.label || '')\" (click)=\"handleActionClick(action, $event)\">\n          @if (action.icon; as actIcon) {\n          <span class=\"action-btn-icon\">\n            <ng-container *ngComponentOutlet=\"actIcon\" />\n          </span>\n          }\n          @if (action.showLabel && action.label) {\n          <span class=\"action-btn-label\">{{ action.label }}</span>\n          }\n          @if (action.badge) {\n          <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n            {{ action.badge }}\n          </span>\n          }\n        </button>\n        }\n      </div>\n      }\n\n      <ng-content select=\"[top-nav-actions]\" />\n\n      <!-- 3-Way System/Light/Dark Theme Toggle -->\n      @if (showThemeToggle()) {\n      <button type=\"button\" class=\"theme-toggle-btn\" (click)=\"handleThemeToggle()\"\n        [attr.aria-label]=\"themeToggleAriaLabel()\"\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$1, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TopNavComponent, isStandalone: true, selector: "talos-top-nav, [talos-top-nav], [talosTopNav]", inputs: { brandTitle: { classPropertyName: "brandTitle", publicName: "brandTitle", isSignal: true, isRequired: false, transformFunction: null }, brandSubtitle: { classPropertyName: "brandSubtitle", publicName: "brandSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandBadge: { classPropertyName: "brandBadge", publicName: "brandBadge", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, brandRoute: { classPropertyName: "brandRoute", publicName: "brandRoute", isSignal: true, isRequired: false, transformFunction: null }, brandUrl: { classPropertyName: "brandUrl", publicName: "brandUrl", isSignal: true, isRequired: false, transformFunction: null }, showBrand: { classPropertyName: "showBrand", publicName: "showBrand", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, logoComponent: { classPropertyName: "logoComponent", publicName: "logoComponent", isSignal: true, isRequired: false, transformFunction: null }, logoComponentInputs: { classPropertyName: "logoComponentInputs", publicName: "logoComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, logoTemplate: { classPropertyName: "logoTemplate", publicName: "logoTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showThemeToggle: { classPropertyName: "showThemeToggle", publicName: "showThemeToggle", isSignal: true, isRequired: false, transformFunction: null }, themeMode: { classPropertyName: "themeMode", publicName: "themeMode", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, glass: { classPropertyName: "glass", publicName: "glass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leftComponent: { classPropertyName: "leftComponent", publicName: "leftComponent", isSignal: true, isRequired: false, transformFunction: null }, leftComponentInputs: { classPropertyName: "leftComponentInputs", publicName: "leftComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, leftTemplate: { classPropertyName: "leftTemplate", publicName: "leftTemplate", isSignal: true, isRequired: false, transformFunction: null }, centerComponent: { classPropertyName: "centerComponent", publicName: "centerComponent", isSignal: true, isRequired: false, transformFunction: null }, centerComponentInputs: { classPropertyName: "centerComponentInputs", publicName: "centerComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, centerTemplate: { classPropertyName: "centerTemplate", publicName: "centerTemplate", isSignal: true, isRequired: false, transformFunction: null }, rightComponent: { classPropertyName: "rightComponent", publicName: "rightComponent", isSignal: true, isRequired: false, transformFunction: null }, rightComponentInputs: { classPropertyName: "rightComponentInputs", publicName: "rightComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, rightTemplate: { classPropertyName: "rightTemplate", publicName: "rightTemplate", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemId: "activeItemIdChange", sidebarCollapsed: "sidebarCollapsedChange", itemClick: "itemClick", actionClick: "actionClick", userClick: "userClick", themeToggle: "themeToggle", themeModeChange: "themeModeChange", searchChange: "searchChange", sidebarToggleClick: "sidebarToggleClick", brandClick: "brandClick" }, host: { attributes: { "role": "banner" }, listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "closeAllDropdowns()" }, properties: { "class.is-sticky": "sticky()", "class.is-glass": "glass()", "class.is-bordered": "bordered()", "class.size-sm": "size() === \"sm\"", "class.size-md": "size() === \"md\"", "class.size-lg": "size() === \"lg\"", "class.dark-theme": "isDarkMode()", "attr.data-theme": "isDarkMode() ? \"dark\" : \"light\"" }, classAttribute: "talos-top-nav-host" }, ngImport: i0, template: "<div class=\"talos-top-nav-inner\">\n  <!-- Left Section: Toggle, Brand, Logo -->\n  <div class=\"top-nav-left\">\n    @if (leftComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: leftComponentInputs()\" />\n    } @else if (leftTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-left]\">\n      <!-- Sidebar Collapse Toggle Button -->\n      @if (showSidebarToggle()) {\n      <ng-content select=\"[top-nav-toggle]\">\n        <button type=\"button\" class=\"nav-toggle-btn\" (click)=\"toggleSidebar()\"\n          [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\">\n          @if (isSidebarCollapsed()) {\n          <svg lucidePanelLeftOpen [size]=\"18\"></svg>\n          } @else {\n          <svg lucidePanelLeftClose [size]=\"18\"></svg>\n          }\n        </button>\n      </ng-content>\n      }\n\n      <!-- Brand / Logo Area -->\n      @if (showLogo() || showBrand()) {\n      <div class=\"brand-container\" (click)=\"handleBrandClick()\"\n        [attr.tabindex]=\"(brandRoute() || brandUrl()) ? 0 : null\"\n        [attr.role]=\"(brandRoute() || brandUrl()) ? 'link' : null\">\n        @if (showLogo()) {\n        <div class=\"brand-logo-wrapper\">\n          @if (logoComponent(); as comp) {\n          <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n          } @else if (logoTemplate(); as tmpl) {\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n          <ng-content select=\"[top-nav-logo]\" />\n          }\n        </div>\n        }\n\n        @if (showBrand()) {\n        <ng-content select=\"[top-nav-brand]\">\n          <div class=\"brand-text-group\">\n            <div class=\"brand-title-row\">\n              @if (brandIcon(); as iconComp) {\n              <span class=\"brand-icon\">\n                <ng-container *ngComponentOutlet=\"iconComp\" />\n              </span>\n              }\n              <span class=\"brand-title\">{{ brandTitle() }}</span>\n              @if (brandBadge(); as badge) {\n              <span class=\"brand-badge\">{{ badge }}</span>\n              }\n            </div>\n            @if (brandSubtitle(); as subtitle) {\n            <span class=\"brand-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </ng-content>\n        }\n      </div>\n      }\n    </ng-content>\n    }\n  </div>\n\n  <!-- Center Section: Navigation Links & Search -->\n  <div class=\"top-nav-center\">\n    @if (centerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: centerComponentInputs()\" />\n    } @else if (centerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-center]\">\n      <!-- Direct Navigation Items -->\n      @if (items().length > 0) {\n      <nav class=\"nav-links-bar\" aria-label=\"Main Navigation\">\n        @for (item of items(); track item.id || item.label) {\n        @if (item.children && item.children.length > 0) {\n        <!-- Item with Dropdown Menu -->\n        <div class=\"nav-item-dropdown-container\" [class.is-open]=\"openDropdownId() === (item.id || item.label)\">\n          <button type=\"button\" class=\"nav-link-btn has-dropdown\"\n            [class.is-active]=\"activeItemId() === item.id || !!item.active\" [disabled]=\"item.disabled ?? false\"\n            [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"openDropdownId() === (item.id || item.label)\"\n            (click)=\"toggleDropdown(item.id || item.label, $event)\">\n            @if (item.icon; as itemIcon) {\n            <span class=\"nav-link-icon\">\n              <ng-container *ngComponentOutlet=\"itemIcon\" />\n            </span>\n            }\n            <span class=\"nav-link-label\">{{ item.label }}</span>\n            @if (item.badge) {\n            <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n              {{ item.badge }}\n            </span>\n            }\n            <svg lucideChevronDown class=\"dropdown-chevron\" [size]=\"14\"></svg>\n          </button>\n\n          <!-- Dropdown Panel -->\n          @if (openDropdownId() === (item.id || item.label)) {\n          <div class=\"top-nav-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n            @if (item.dropdownTemplate; as customTmpl) {\n            <ng-container *ngTemplateOutlet=\"customTmpl\" />\n            } @else {\n            <ul class=\"dropdown-menu-list\">\n              @for (child of item.children; track child.id || child.label) {\n              @if (child.divider) {\n              <li class=\"dropdown-divider\" role=\"separator\"></li>\n              }\n              <li role=\"none\">\n                <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                  [class.is-active]=\"activeItemId() === child.id || !!child.active\" [disabled]=\"child.disabled ?? false\"\n                  (click)=\"selectChildItem(child, item, $event)\">\n                  @if (child.icon; as childIcon) {\n                  <span class=\"dropdown-item-icon\">\n                    <ng-container *ngComponentOutlet=\"childIcon\" />\n                  </span>\n                  }\n                  <div class=\"dropdown-item-content\">\n                    <span class=\"dropdown-item-label\">{{ child.label }}</span>\n                    @if (child.description) {\n                    <span class=\"dropdown-item-desc\">{{ child.description }}</span>\n                    }\n                  </div>\n                  @if (child.badge) {\n                  <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (child.badgeVariant ?? 'subtle')\">\n                    {{ child.badge }}\n                  </span>\n                  }\n                </button>\n              </li>\n              }\n            </ul>\n            }\n          </div>\n          }\n        </div>\n        } @else {\n        <!-- Standard Single Nav Link -->\n        <button type=\"button\" class=\"nav-link-btn\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n          [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event)\">\n          @if (item.icon; as itemIcon) {\n          <span class=\"nav-link-icon\">\n            <ng-container *ngComponentOutlet=\"itemIcon\" />\n          </span>\n          }\n          <span class=\"nav-link-label\">{{ item.label }}</span>\n          @if (item.badge) {\n          <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n            {{ item.badge }}\n          </span>\n          }\n        </button>\n        }\n        }\n      </nav>\n      }\n\n      <!-- Search Input Slot -->\n      @if (showSearch()) {\n      <div class=\"search-bar-wrapper\">\n        <svg lucideSearch class=\"search-icon\" [size]=\"15\"></svg>\n        <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n          (input)=\"onSearchInput($event)\" />\n      </div>\n      }\n\n      <!-- Custom projected center content -->\n      <ng-content select=\"[top-nav-links]\" />\n      <ng-content />\n    </ng-content>\n    }\n  </div>\n\n  <!-- Right Section: Actions, Theme Toggle, User Profile -->\n  <div class=\"top-nav-right\">\n    @if (rightComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: rightComponentInputs()\" />\n    } @else if (rightTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-right]\">\n      <!-- Action Buttons -->\n      @if (actions().length > 0) {\n      <div class=\"actions-group\">\n        @for (action of actions(); track action.id || action.label || $index) {\n        <button type=\"button\" class=\"action-btn\" [class.has-label]=\"action.showLabel && !!action.label\"\n          [disabled]=\"action.disabled ?? false\" [attr.aria-label]=\"action.label || 'Action'\"\n          [talosTooltip]=\"action.showLabel ? '' : (action.label || '')\" (click)=\"handleActionClick(action, $event)\">\n          @if (action.icon; as actIcon) {\n          <span class=\"action-btn-icon\">\n            <ng-container *ngComponentOutlet=\"actIcon\" />\n          </span>\n          }\n          @if (action.showLabel && action.label) {\n          <span class=\"action-btn-label\">{{ action.label }}</span>\n          }\n          @if (action.badge) {\n          <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n            {{ action.badge }}\n          </span>\n          }\n        </button>\n        }\n      </div>\n      }\n\n      <ng-content select=\"[top-nav-actions]\" />\n\n      <!-- 3-Way System/Light/Dark Theme Toggle -->\n      @if (showThemeToggle()) {\n      <button type=\"button\" class=\"theme-toggle-btn\" (click)=\"handleThemeToggle()\"\n        [attr.aria-label]=\"themeToggleAriaLabel()\" [talosTooltip]=\"themeToggleTooltip()\">\n        <talos-theme-morph-icon [mode]=\"effectiveThemeMode()\" [size]=\"16\" />\n      </button>\n      }\n\n      <!-- User Profile & User Dropdown Menu -->\n      @if (userProfile(); as user) {\n      <div class=\"user-profile-container\" [class.is-open]=\"isUserDropdownOpen()\">\n        <button type=\"button\" class=\"user-profile-btn\" [attr.aria-haspopup]=\"'true'\"\n          [attr.aria-expanded]=\"isUserDropdownOpen()\" (click)=\"toggleUserDropdown($event)\">\n          <div class=\"user-avatar-circle\">\n            @if (user.avatarUrl) {\n            <img [src]=\"user.avatarUrl\" [alt]=\"user.name\" class=\"user-avatar-img\" />\n            } @else {\n            <span class=\"avatar-initials\">{{ user.name.charAt(0) }}</span>\n            }\n          </div>\n          <div class=\"user-profile-meta\">\n            <span class=\"user-name-text\">{{ user.name }}</span>\n            @if (user.role) {\n            <span class=\"user-role-text\">{{ user.role }}</span>\n            }\n          </div>\n          @if (user.menuItems && user.menuItems.length > 0) {\n          <svg lucideChevronDown class=\"user-dropdown-chevron\" [size]=\"13\"></svg>\n          }\n        </button>\n\n        <!-- User Dropdown Panel -->\n        @if (isUserDropdownOpen() && user.menuItems && user.menuItems.length > 0) {\n        <div class=\"top-nav-dropdown-menu user-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n          <div class=\"user-menu-header\">\n            <span class=\"user-menu-header-name\">{{ user.name }}</span>\n            @if (user.email) {\n            <span class=\"user-menu-header-email\">{{ user.email }}</span>\n            }\n          </div>\n          <div class=\"dropdown-divider\" role=\"separator\"></div>\n          <ul class=\"dropdown-menu-list\">\n            @for (menuItem of user.menuItems; track menuItem.id || menuItem.label) {\n            @if (menuItem.divider) {\n            <li class=\"dropdown-divider\" role=\"separator\"></li>\n            }\n            <li role=\"none\">\n              <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                [class.is-active]=\"activeItemId() === menuItem.id || !!menuItem.active\"\n                [disabled]=\"menuItem.disabled ?? false\" (click)=\"selectItem(menuItem, $event)\">\n                @if (menuItem.icon; as menuIcon) {\n                <span class=\"dropdown-item-icon\">\n                  <ng-container *ngComponentOutlet=\"menuIcon\" />\n                </span>\n                }\n                <div class=\"dropdown-item-content\">\n                  <span class=\"dropdown-item-label\">{{ menuItem.label }}</span>\n                  @if (menuItem.description) {\n                  <span class=\"dropdown-item-desc\">{{ menuItem.description }}</span>\n                  }\n                </div>\n                @if (menuItem.badge) {\n                <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (menuItem.badgeVariant ?? 'subtle')\">\n                  {{ menuItem.badge }}\n                </span>\n                }\n              </button>\n            </li>\n            }\n          </ul>\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Mobile Top Nav Hamburger Toggle Button -->\n      @if (items().length > 0 || actions().length > 0) {\n      <button type=\"button\" class=\"top-nav-mobile-hamburger-btn\" (click)=\"toggleMobileMenu()\"\n        [class.is-open]=\"isMobileMenuOpen()\" [attr.aria-expanded]=\"isMobileMenuOpen()\"\n        [attr.aria-label]=\"isMobileMenuOpen() ? 'Close navigation menu' : 'Open navigation menu'\">\n        @if (isMobileMenuOpen()) {\n        <svg lucideX [size]=\"20\"></svg>\n        } @else {\n        <svg lucideMenu [size]=\"20\"></svg>\n        }\n      </button>\n      }\n\n      <ng-content select=\"[top-nav-user]\" />\n    </ng-content>\n    }\n  </div>\n</div>\n\n<!-- Mobile Top Navigation Expanding Sheet (Expands Downwards from Top) -->\n@if (isMobileMenuOpen()) {\n<div class=\"top-nav-mobile-sheet\" role=\"navigation\" aria-label=\"Mobile Navigation\" (click)=\"$event.stopPropagation()\">\n  @if (showSearch()) {\n  <div class=\"mobile-search-bar\">\n    <svg lucideSearch class=\"search-icon\" [size]=\"16\"></svg>\n    <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n      (input)=\"onSearchInput($event)\" />\n  </div>\n  }\n\n  @if (items().length > 0) {\n  <nav class=\"mobile-nav-links-list\" aria-label=\"Mobile Main Navigation\">\n    @for (item of items(); track item.id || item.label) {\n    <button type=\"button\" class=\"mobile-nav-link-btn\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n      [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event); closeMobileMenu()\">\n      @if (item.icon; as itemIcon) {\n      <span class=\"nav-link-icon\">\n        <ng-container *ngComponentOutlet=\"itemIcon\" />\n      </span>\n      }\n      <span class=\"nav-link-label\">{{ item.label }}</span>\n      @if (item.badge) {\n      <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n        {{ item.badge }}\n      </span>\n      }\n    </button>\n    }\n  </nav>\n  }\n\n  @if (actions().length > 0) {\n  <div class=\"mobile-sheet-actions\">\n    @for (action of actions(); track action.id || action.label || $index) {\n    <button type=\"button\" class=\"mobile-action-btn\" [disabled]=\"action.disabled ?? false\"\n      (click)=\"handleActionClick(action, $event); closeMobileMenu()\">\n      @if (action.icon; as actIcon) {\n      <span class=\"action-btn-icon\">\n        <ng-container *ngComponentOutlet=\"actIcon\" />\n      </span>\n      }\n      @if (action.label) {\n      <span class=\"action-btn-label\">{{ action.label }}</span>\n      }\n      @if (action.badge) {\n      <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n        {{ action.badge }}\n      </span>\n      }\n    </button>\n    }\n  </div>\n  }\n</div>\n\n<!-- Backdrop for Top Nav Mobile Sheet -->\n<div class=\"top-nav-mobile-backdrop\" (click)=\"closeMobileMenu()\" aria-hidden=\"true\"></div>\n}", styles: [":host,talos-top-nav,.talos-top-nav-host{display:block;width:100%;box-sizing:border-box;z-index:50;position:relative;overflow:visible;container-type:inline-size;container-name:topnav;--talos-top-nav-height: 60px;--talos-top-nav-bg: var(--talos-header-bg, var(--talos-bg-surface, #ffffff));--talos-top-nav-border: var(--talos-header-border-color, var(--talos-border-default, #e2e8f0));--talos-top-nav-text: var(--talos-text-primary, #0f172a);--talos-top-nav-muted: var(--talos-text-muted, #64748b);--talos-top-nav-hover-bg: var(--talos-nav-hover-bg, rgba(0, 0, 0, .04));--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, #eff6ff);--talos-top-nav-active-text: var(--talos-primary-text, #1d4ed8);--talos-top-nav-dropdown-bg: var(--talos-bg-surface, #ffffff);--talos-top-nav-dropdown-border: var(--talos-border-default, #e2e8f0);--talos-top-nav-dropdown-shadow: var(--talos-shadow-dropdown, 0 10px 25px -5px rgba(0, 0, 0, .08))}:host.size-sm,talos-top-nav.size-sm,.talos-top-nav-host.size-sm{--talos-top-nav-height: 48px}:host.size-md,talos-top-nav.size-md,.talos-top-nav-host.size-md{--talos-top-nav-height: 60px}:host.size-lg,talos-top-nav.size-lg,.talos-top-nav-host.size-lg{--talos-top-nav-height: 72px}:host.is-sticky,talos-top-nav.is-sticky,.talos-top-nav-host.is-sticky{position:sticky;top:0;z-index:50}:host.is-bordered,talos-top-nav.is-bordered,.talos-top-nav-host.is-bordered{border-bottom:1px solid var(--talos-top-nav-border)}:host.is-glass,talos-top-nav.is-glass,.talos-top-nav-host.is-glass{--talos-top-nav-bg: rgba(255, 255, 255, .85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:root[data-theme=dark] talos-top-nav,:root.dark talos-top-nav,[data-theme=dark] talos-top-nav,[data-mode=dark] talos-top-nav,.dark talos-top-nav,.dark-theme talos-top-nav{--talos-top-nav-bg: var(--talos-header-bg, #090d16);--talos-top-nav-border: var(--talos-header-border-color, rgba(255, 255, 255, .08));--talos-top-nav-text: #f8fafc;--talos-top-nav-muted: #94a3b8;--talos-top-nav-hover-bg: rgba(255, 255, 255, .06);--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));--talos-top-nav-active-text: #ffffff;--talos-top-nav-dropdown-bg: #0f172a;--talos-top-nav-dropdown-border: rgba(255, 255, 255, .1);--talos-top-nav-dropdown-shadow: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08)}:root[data-theme=dark] :host.is-glass,:root.dark :host.is-glass,[data-theme=dark] :host.is-glass,[data-mode=dark] :host.is-glass,.dark :host.is-glass,.dark-theme :host.is-glass,:root[data-theme=dark] talos-top-nav.is-glass,:root.dark talos-top-nav.is-glass,[data-theme=dark] talos-top-nav.is-glass,[data-mode=dark] talos-top-nav.is-glass,.dark talos-top-nav.is-glass,.dark-theme talos-top-nav.is-glass{--talos-top-nav-bg: rgba(9, 13, 22, .85)}.talos-top-nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--talos-top-nav-height);padding:0 20px;background:var(--talos-top-nav-bg);box-sizing:border-box;gap:12px;position:relative;overflow:visible}@media(max-width:640px){.talos-top-nav-inner{padding:0 10px;gap:6px}}.top-nav-left{display:flex;align-items:center;gap:10px;flex-shrink:0}.nav-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0}.nav-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.brand-container{display:flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer}.brand-logo-wrapper{display:inline-flex;align-items:center;justify-content:center}.brand-text-group{display:flex;flex-direction:column;line-height:1.2}.brand-title-row{display:flex;align-items:center;gap:6px}.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff)));color:var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb)));border:1px solid var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2));flex-shrink:0;transition:all .2s ease}.brand-icon svg,.brand-icon i-lucide,.brand-icon .lucide{width:15px;height:15px;display:block}.brand-title{font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:var(--talos-top-nav-text);white-space:nowrap}.brand-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:6px;font-size:.625rem;font-weight:600;letter-spacing:.02em;background:var(--talos-top-nav-brand-badge-bg, var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff))));color:var(--talos-top-nav-brand-badge-color, var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb))));border:1px solid var(--talos-top-nav-brand-badge-border, var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2)));white-space:nowrap}.brand-subtitle{font-size:.6875rem;color:var(--talos-top-nav-muted);white-space:nowrap}.top-nav-center{display:flex;align-items:center;gap:10px;flex:1;min-width:0;justify-content:flex-start;overflow:visible;position:relative}.nav-links-bar{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;flex-shrink:0;overflow:visible;position:relative}.nav-item-dropdown-container{position:relative;display:inline-flex;overflow:visible}.nav-link-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;height:32px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;text-decoration:none;flex-shrink:0}.nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.nav-link-btn[disabled]{opacity:.5;cursor:not-allowed}.nav-link-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.nav-link-btn .dropdown-chevron{transition:transform .2s ease;opacity:.7}.nav-link-btn.has-dropdown{padding-right:6px}.nav-item-dropdown-container.is-open .nav-link-btn .dropdown-chevron{transform:rotate(180deg)}.nav-link-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.nav-link-icon svg,.nav-link-icon i-lucide,.nav-link-icon .lucide{width:15px;height:15px;display:block}.nav-link-badge,.dropdown-item-badge,.action-badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:9999px;font-size:.625rem;font-weight:600;line-height:1.2}.nav-link-badge.badge-primary,.dropdown-item-badge.badge-primary,.action-badge.badge-primary{background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2563eb))}.nav-link-badge.badge-secondary,.dropdown-item-badge.badge-secondary,.action-badge.badge-secondary{background:#64748b1f;color:var(--text-muted, #64748b)}.nav-link-badge.badge-success,.dropdown-item-badge.badge-success,.action-badge.badge-success{background:#22c55e1f;color:#16a34a}.nav-link-badge.badge-warning,.dropdown-item-badge.badge-warning,.action-badge.badge-warning{background:#eab3081f;color:#ca8a04}.nav-link-badge.badge-danger,.dropdown-item-badge.badge-danger,.action-badge.badge-danger{background:#ef44441f;color:#dc2626}.nav-link-badge.badge-subtle,.dropdown-item-badge.badge-subtle,.action-badge.badge-subtle{background:#0000000d;color:var(--talos-top-nav-muted)}.top-nav-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;max-width:320px;background:var(--talos-top-nav-dropdown-bg);border:1px solid var(--talos-top-nav-dropdown-border);border-radius:10px;box-shadow:var(--talos-top-nav-dropdown-shadow);padding:6px;z-index:1050;animation:dropdownFadeSlide .18s cubic-bezier(.16,1,.3,1);box-sizing:border-box}.top-nav-dropdown-menu.user-dropdown-menu{right:0;left:auto;min-width:240px}@keyframes dropdownFadeSlide{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.dropdown-divider{height:1px;background:var(--talos-top-nav-dropdown-border);margin:4px 0}.dropdown-menu-item{width:100%;display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;border:none;background:transparent;color:var(--talos-top-nav-text);font-size:.8125rem;font-weight:500;text-align:left;cursor:pointer;transition:all .12s ease;box-sizing:border-box}.dropdown-menu-item:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-primary-color, var(--talos-top-nav-text))}.dropdown-menu-item.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.dropdown-menu-item[disabled]{opacity:.45;cursor:not-allowed}.dropdown-menu-item:focus-visible{outline:none;background:var(--talos-top-nav-hover-bg)}.dropdown-item-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-top-nav-muted);flex-shrink:0;width:16px;height:16px}.dropdown-item-icon svg,.dropdown-item-icon i-lucide,.dropdown-item-icon .lucide{width:15px;height:15px;display:block}.dropdown-item-content{display:flex;flex-direction:column;flex:1;min-width:0}.dropdown-item-label{font-weight:500;color:var(--talos-top-nav-text)}.dropdown-item-desc{font-size:.6875rem;color:var(--talos-top-nav-muted);margin-top:1px}.search-bar-wrapper{display:flex;align-items:center;position:relative;flex:0 1 180px;min-width:100px;max-width:220px}.search-icon{position:absolute;left:9px;color:var(--talos-top-nav-muted);pointer-events:none}.top-nav-search-input{width:100%;height:30px;padding:0 8px 0 28px;border-radius:6px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text);font-size:.75rem;transition:all .15s ease}.top-nav-search-input::placeholder{color:var(--talos-top-nav-muted)}.top-nav-search-input:focus{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));background:var(--talos-top-nav-dropdown-bg);box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.top-nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.actions-group{display:flex;align-items:center;gap:3px}.action-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;gap:6px}.action-btn.has-label{width:auto;padding:0 10px;font-size:.8125rem;font-weight:500}.action-btn .action-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.action-btn .action-btn-icon svg,.action-btn .action-btn-icon i-lucide,.action-btn .action-btn-icon .lucide{width:15px;height:15px;display:block}.action-btn .action-btn-label{font-size:.8125rem;font-weight:500;white-space:nowrap}.action-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.action-btn[disabled]{opacity:.5;cursor:not-allowed}.action-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.action-btn .action-badge{position:absolute;top:2px;right:2px;padding:1px 4px;font-size:.5625rem}.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;position:relative}.theme-toggle-btn talos-theme-morph-icon,.theme-toggle-btn svg{width:16px;height:16px;display:block}.theme-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.theme-toggle-btn:active{transform:scale(.9)}.theme-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-container{position:relative;display:inline-flex;flex-shrink:0}.user-profile-btn{display:flex;align-items:center;gap:7px;padding:3px 7px 3px 3px;border-radius:9999px;border:1px solid var(--talos-top-nav-border);background:transparent;cursor:pointer;transition:all .15s ease}.user-profile-btn:hover{background:var(--talos-top-nav-hover-bg)}.user-profile-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-btn .user-dropdown-chevron{color:var(--talos-top-nav-muted);transition:transform .2s ease}.user-profile-container.is-open .user-dropdown-chevron{transform:rotate(180deg)}.user-avatar-circle{width:26px;height:26px;border-radius:50%;background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2592eb));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;overflow:hidden;flex-shrink:0}.user-avatar-img{width:100%;height:100%;object-fit:cover}.user-profile-meta{display:flex;flex-direction:column;text-align:left;line-height:1.15}.user-name-text{font-size:.75rem;font-weight:600;color:var(--talos-top-nav-text);white-space:nowrap}.user-role-text{font-size:.625rem;color:var(--talos-top-nav-muted);white-space:nowrap}.user-menu-header{padding:8px 10px 6px;display:flex;flex-direction:column;gap:2px}.user-menu-header-name{font-size:.8125rem;font-weight:600;color:var(--talos-top-nav-text)}.user-menu-header-email{font-size:.6875rem;color:var(--talos-top-nav-muted)}@container topnav (max-width: 840px){.brand-subtitle,.user-role-text{display:none}}@container topnav (max-width: 640px){.brand-badge,.user-profile-meta{display:none}.search-bar-wrapper{max-width:130px}.action-btn.has-label .action-btn-label{display:none}.nav-links-bar{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}.nav-links-bar::-webkit-scrollbar{display:none}}@container topnav (max-width: 480px){.search-bar-wrapper{display:none}.brand-title{font-size:.9375rem}}@media(max-width:480px){.top-nav-dropdown-menu{max-width:calc(100vw - 24px);right:0;left:auto}}.top-nav-mobile-hamburger-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);cursor:pointer;transition:all .15s ease;flex-shrink:0}.top-nav-mobile-hamburger-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-hamburger-btn.is-open{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-sheet{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;width:100vw;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);background:var(--talos-top-nav-bg);border-bottom:1px solid var(--talos-top-nav-border);box-shadow:0 20px 35px -5px #00000040;z-index:95;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.875rem;overflow-y:auto;box-sizing:border-box;animation:topNavSheetSlideDown .25s cubic-bezier(.16,1,.3,1)}@keyframes topNavSheetSlideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.top-nav-mobile-backdrop{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;bottom:0;background:#0f172a73;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:94;animation:fadeIn .2s ease-out}.mobile-nav-links-list{display:flex;flex-direction:column;gap:.375rem;width:100%}.mobile-nav-link-btn{display:flex;align-items:center;width:100%;height:42px;padding:0 1rem;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .15s ease;gap:.75rem;text-align:left;box-sizing:border-box}.mobile-nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.mobile-nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-subtle-border, rgba(37, 99, 235, .25))}.mobile-nav-link-btn .nav-link-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.mobile-nav-link-btn .nav-link-label{flex:1}.mobile-sheet-actions{display:flex;align-items:center;gap:.75rem;padding-top:.75rem;border-top:1px solid var(--talos-top-nav-border);flex-wrap:wrap}.mobile-sheet-actions .mobile-action-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s ease}.mobile-sheet-actions .mobile-action-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}@media(max-width:768px){.top-nav-center .nav-links-bar{display:none}.top-nav-mobile-hamburger-btn{display:inline-flex}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucidePanelLeftOpen, selector: "svg[lucidePanelLeftOpen], svg[lucideSidebarOpen]" }, { kind: "component", type: LucidePanelLeftClose, selector: "svg[lucidePanelLeftClose], svg[lucideSidebarClose]" }, { kind: "component", type: LucideSearch, selector: "svg[lucideSearch]" }, { kind: "component", type: LucideMenu, selector: "svg[lucideMenu]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "directive", type: TalosTooltipDirective$1, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "component", type: TalosThemeMorphIconComponent, selector: "talos-theme-morph-icon", inputs: ["mode", "size"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TopNavComponent, decorators: [{
             type: Component,
@@ -1638,10 +1686,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         LucidePanelLeftOpen,
                         LucidePanelLeftClose,
                         LucideSearch,
-                        LucideSun,
-                        LucideMoon,
-                        LucideMonitor,
-                        TalosTooltipDirective$1
+                        LucideMenu,
+                        LucideX,
+                        TalosTooltipDirective$1,
+                        TalosThemeMorphIconComponent
                     ], encapsulation: ViewEncapsulation.None, host: {
                         'class': 'talos-top-nav-host',
                         '[class.is-sticky]': 'sticky()',
@@ -1655,7 +1703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         'role': 'banner',
                         '(document:click)': 'onDocumentClick($event)',
                         '(document:keydown.escape)': 'closeAllDropdowns()'
-                    }, template: "<div class=\"talos-top-nav-inner\">\n  <!-- Left Section: Toggle, Brand, Logo -->\n  <div class=\"top-nav-left\">\n    @if (leftComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: leftComponentInputs()\" />\n    } @else if (leftTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-left]\">\n      <!-- Sidebar Collapse Toggle Button -->\n      @if (showSidebarToggle()) {\n      <ng-content select=\"[top-nav-toggle]\">\n        <button type=\"button\" class=\"nav-toggle-btn\" (click)=\"toggleSidebar()\"\n          [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\">\n          @if (isSidebarCollapsed()) {\n          <svg lucidePanelLeftOpen [size]=\"18\"></svg>\n          } @else {\n          <svg lucidePanelLeftClose [size]=\"18\"></svg>\n          }\n        </button>\n      </ng-content>\n      }\n\n      <!-- Brand / Logo Area -->\n      @if (showLogo() || showBrand()) {\n      <div class=\"brand-container\" (click)=\"handleBrandClick()\"\n        [attr.tabindex]=\"(brandRoute() || brandUrl()) ? 0 : null\"\n        [attr.role]=\"(brandRoute() || brandUrl()) ? 'link' : null\">\n        @if (showLogo()) {\n        <div class=\"brand-logo-wrapper\">\n          @if (logoComponent(); as comp) {\n          <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n          } @else if (logoTemplate(); as tmpl) {\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n          <ng-content select=\"[top-nav-logo]\" />\n          }\n        </div>\n        }\n\n        @if (showBrand()) {\n        <ng-content select=\"[top-nav-brand]\">\n          <div class=\"brand-text-group\">\n            <div class=\"brand-title-row\">\n              @if (brandIcon(); as iconComp) {\n              <span class=\"brand-icon\">\n                <ng-container *ngComponentOutlet=\"iconComp\" />\n              </span>\n              }\n              <span class=\"brand-title\">{{ brandTitle() }}</span>\n              @if (brandBadge(); as badge) {\n              <span class=\"brand-badge\">{{ badge }}</span>\n              }\n            </div>\n            @if (brandSubtitle(); as subtitle) {\n            <span class=\"brand-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </ng-content>\n        }\n      </div>\n      }\n    </ng-content>\n    }\n  </div>\n\n  <!-- Center Section: Navigation Links & Search -->\n  <div class=\"top-nav-center\">\n    @if (centerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: centerComponentInputs()\" />\n    } @else if (centerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-center]\">\n      <!-- Direct Navigation Items -->\n      @if (items().length > 0) {\n      <nav class=\"nav-links-bar\" aria-label=\"Main Navigation\">\n        @for (item of items(); track item.id || item.label) {\n        @if (item.children && item.children.length > 0) {\n        <!-- Item with Dropdown Menu -->\n        <div class=\"nav-item-dropdown-container\" [class.is-open]=\"openDropdownId() === (item.id || item.label)\">\n          <button type=\"button\" class=\"nav-link-btn has-dropdown\"\n            [class.is-active]=\"activeItemId() === item.id || !!item.active\" [disabled]=\"item.disabled ?? false\"\n            [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"openDropdownId() === (item.id || item.label)\"\n            (click)=\"toggleDropdown(item.id || item.label, $event)\">\n            @if (item.icon; as itemIcon) {\n            <span class=\"nav-link-icon\">\n              <ng-container *ngComponentOutlet=\"itemIcon\" />\n            </span>\n            }\n            <span class=\"nav-link-label\">{{ item.label }}</span>\n            @if (item.badge) {\n            <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n              {{ item.badge }}\n            </span>\n            }\n            <svg lucideChevronDown class=\"dropdown-chevron\" [size]=\"14\"></svg>\n          </button>\n\n          <!-- Dropdown Panel -->\n          @if (openDropdownId() === (item.id || item.label)) {\n          <div class=\"top-nav-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n            @if (item.dropdownTemplate; as customTmpl) {\n            <ng-container *ngTemplateOutlet=\"customTmpl\" />\n            } @else {\n            <ul class=\"dropdown-menu-list\">\n              @for (child of item.children; track child.id || child.label) {\n              @if (child.divider) {\n              <li class=\"dropdown-divider\" role=\"separator\"></li>\n              }\n              <li role=\"none\">\n                <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                  [class.is-active]=\"activeItemId() === child.id || !!child.active\" [disabled]=\"child.disabled ?? false\"\n                  (click)=\"selectChildItem(child, item, $event)\">\n                  @if (child.icon; as childIcon) {\n                  <span class=\"dropdown-item-icon\">\n                    <ng-container *ngComponentOutlet=\"childIcon\" />\n                  </span>\n                  }\n                  <div class=\"dropdown-item-content\">\n                    <span class=\"dropdown-item-label\">{{ child.label }}</span>\n                    @if (child.description) {\n                    <span class=\"dropdown-item-desc\">{{ child.description }}</span>\n                    }\n                  </div>\n                  @if (child.badge) {\n                  <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (child.badgeVariant ?? 'subtle')\">\n                    {{ child.badge }}\n                  </span>\n                  }\n                </button>\n              </li>\n              }\n            </ul>\n            }\n          </div>\n          }\n        </div>\n        } @else {\n        <!-- Standard Single Nav Link -->\n        <button type=\"button\" class=\"nav-link-btn\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n          [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event)\">\n          @if (item.icon; as itemIcon) {\n          <span class=\"nav-link-icon\">\n            <ng-container *ngComponentOutlet=\"itemIcon\" />\n          </span>\n          }\n          <span class=\"nav-link-label\">{{ item.label }}</span>\n          @if (item.badge) {\n          <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n            {{ item.badge }}\n          </span>\n          }\n        </button>\n        }\n        }\n      </nav>\n      }\n\n      <!-- Search Input Slot -->\n      @if (showSearch()) {\n      <div class=\"search-bar-wrapper\">\n        <svg lucideSearch class=\"search-icon\" [size]=\"15\"></svg>\n        <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n          (input)=\"onSearchInput($event)\" />\n      </div>\n      }\n\n      <!-- Custom projected center content -->\n      <ng-content select=\"[top-nav-links]\" />\n      <ng-content />\n    </ng-content>\n    }\n  </div>\n\n  <!-- Right Section: Actions, Theme Toggle, User Profile -->\n  <div class=\"top-nav-right\">\n    @if (rightComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: rightComponentInputs()\" />\n    } @else if (rightTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-right]\">\n      <!-- Action Buttons -->\n      @if (actions().length > 0) {\n      <div class=\"actions-group\">\n        @for (action of actions(); track action.id || action.label || $index) {\n        <button type=\"button\" class=\"action-btn\" [class.has-label]=\"action.showLabel && !!action.label\"\n          [disabled]=\"action.disabled ?? false\" [attr.aria-label]=\"action.label || 'Action'\"\n          [talosTooltip]=\"action.showLabel ? '' : (action.label || '')\" (click)=\"handleActionClick(action, $event)\">\n          @if (action.icon; as actIcon) {\n          <span class=\"action-btn-icon\">\n            <ng-container *ngComponentOutlet=\"actIcon\" />\n          </span>\n          }\n          @if (action.showLabel && action.label) {\n          <span class=\"action-btn-label\">{{ action.label }}</span>\n          }\n          @if (action.badge) {\n          <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n            {{ action.badge }}\n          </span>\n          }\n        </button>\n        }\n      </div>\n      }\n\n      <ng-content select=\"[top-nav-actions]\" />\n\n      <!-- 3-Way System/Light/Dark Theme Toggle -->\n      @if (showThemeToggle()) {\n      <button type=\"button\" class=\"theme-toggle-btn\" (click)=\"handleThemeToggle()\"\n        [attr.aria-label]=\"themeToggleAriaLabel()\"\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"] }]
+                    }, template: "<div class=\"talos-top-nav-inner\">\n  <!-- Left Section: Toggle, Brand, Logo -->\n  <div class=\"top-nav-left\">\n    @if (leftComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: leftComponentInputs()\" />\n    } @else if (leftTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-left]\">\n      <!-- Sidebar Collapse Toggle Button -->\n      @if (showSidebarToggle()) {\n      <ng-content select=\"[top-nav-toggle]\">\n        <button type=\"button\" class=\"nav-toggle-btn\" (click)=\"toggleSidebar()\"\n          [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\">\n          @if (isSidebarCollapsed()) {\n          <svg lucidePanelLeftOpen [size]=\"18\"></svg>\n          } @else {\n          <svg lucidePanelLeftClose [size]=\"18\"></svg>\n          }\n        </button>\n      </ng-content>\n      }\n\n      <!-- Brand / Logo Area -->\n      @if (showLogo() || showBrand()) {\n      <div class=\"brand-container\" (click)=\"handleBrandClick()\"\n        [attr.tabindex]=\"(brandRoute() || brandUrl()) ? 0 : null\"\n        [attr.role]=\"(brandRoute() || brandUrl()) ? 'link' : null\">\n        @if (showLogo()) {\n        <div class=\"brand-logo-wrapper\">\n          @if (logoComponent(); as comp) {\n          <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n          } @else if (logoTemplate(); as tmpl) {\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n          <ng-content select=\"[top-nav-logo]\" />\n          }\n        </div>\n        }\n\n        @if (showBrand()) {\n        <ng-content select=\"[top-nav-brand]\">\n          <div class=\"brand-text-group\">\n            <div class=\"brand-title-row\">\n              @if (brandIcon(); as iconComp) {\n              <span class=\"brand-icon\">\n                <ng-container *ngComponentOutlet=\"iconComp\" />\n              </span>\n              }\n              <span class=\"brand-title\">{{ brandTitle() }}</span>\n              @if (brandBadge(); as badge) {\n              <span class=\"brand-badge\">{{ badge }}</span>\n              }\n            </div>\n            @if (brandSubtitle(); as subtitle) {\n            <span class=\"brand-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </ng-content>\n        }\n      </div>\n      }\n    </ng-content>\n    }\n  </div>\n\n  <!-- Center Section: Navigation Links & Search -->\n  <div class=\"top-nav-center\">\n    @if (centerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: centerComponentInputs()\" />\n    } @else if (centerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-center]\">\n      <!-- Direct Navigation Items -->\n      @if (items().length > 0) {\n      <nav class=\"nav-links-bar\" aria-label=\"Main Navigation\">\n        @for (item of items(); track item.id || item.label) {\n        @if (item.children && item.children.length > 0) {\n        <!-- Item with Dropdown Menu -->\n        <div class=\"nav-item-dropdown-container\" [class.is-open]=\"openDropdownId() === (item.id || item.label)\">\n          <button type=\"button\" class=\"nav-link-btn has-dropdown\"\n            [class.is-active]=\"activeItemId() === item.id || !!item.active\" [disabled]=\"item.disabled ?? false\"\n            [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"openDropdownId() === (item.id || item.label)\"\n            (click)=\"toggleDropdown(item.id || item.label, $event)\">\n            @if (item.icon; as itemIcon) {\n            <span class=\"nav-link-icon\">\n              <ng-container *ngComponentOutlet=\"itemIcon\" />\n            </span>\n            }\n            <span class=\"nav-link-label\">{{ item.label }}</span>\n            @if (item.badge) {\n            <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n              {{ item.badge }}\n            </span>\n            }\n            <svg lucideChevronDown class=\"dropdown-chevron\" [size]=\"14\"></svg>\n          </button>\n\n          <!-- Dropdown Panel -->\n          @if (openDropdownId() === (item.id || item.label)) {\n          <div class=\"top-nav-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n            @if (item.dropdownTemplate; as customTmpl) {\n            <ng-container *ngTemplateOutlet=\"customTmpl\" />\n            } @else {\n            <ul class=\"dropdown-menu-list\">\n              @for (child of item.children; track child.id || child.label) {\n              @if (child.divider) {\n              <li class=\"dropdown-divider\" role=\"separator\"></li>\n              }\n              <li role=\"none\">\n                <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                  [class.is-active]=\"activeItemId() === child.id || !!child.active\" [disabled]=\"child.disabled ?? false\"\n                  (click)=\"selectChildItem(child, item, $event)\">\n                  @if (child.icon; as childIcon) {\n                  <span class=\"dropdown-item-icon\">\n                    <ng-container *ngComponentOutlet=\"childIcon\" />\n                  </span>\n                  }\n                  <div class=\"dropdown-item-content\">\n                    <span class=\"dropdown-item-label\">{{ child.label }}</span>\n                    @if (child.description) {\n                    <span class=\"dropdown-item-desc\">{{ child.description }}</span>\n                    }\n                  </div>\n                  @if (child.badge) {\n                  <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (child.badgeVariant ?? 'subtle')\">\n                    {{ child.badge }}\n                  </span>\n                  }\n                </button>\n              </li>\n              }\n            </ul>\n            }\n          </div>\n          }\n        </div>\n        } @else {\n        <!-- Standard Single Nav Link -->\n        <button type=\"button\" class=\"nav-link-btn\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n          [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event)\">\n          @if (item.icon; as itemIcon) {\n          <span class=\"nav-link-icon\">\n            <ng-container *ngComponentOutlet=\"itemIcon\" />\n          </span>\n          }\n          <span class=\"nav-link-label\">{{ item.label }}</span>\n          @if (item.badge) {\n          <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n            {{ item.badge }}\n          </span>\n          }\n        </button>\n        }\n        }\n      </nav>\n      }\n\n      <!-- Search Input Slot -->\n      @if (showSearch()) {\n      <div class=\"search-bar-wrapper\">\n        <svg lucideSearch class=\"search-icon\" [size]=\"15\"></svg>\n        <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n          (input)=\"onSearchInput($event)\" />\n      </div>\n      }\n\n      <!-- Custom projected center content -->\n      <ng-content select=\"[top-nav-links]\" />\n      <ng-content />\n    </ng-content>\n    }\n  </div>\n\n  <!-- Right Section: Actions, Theme Toggle, User Profile -->\n  <div class=\"top-nav-right\">\n    @if (rightComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: rightComponentInputs()\" />\n    } @else if (rightTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-right]\">\n      <!-- Action Buttons -->\n      @if (actions().length > 0) {\n      <div class=\"actions-group\">\n        @for (action of actions(); track action.id || action.label || $index) {\n        <button type=\"button\" class=\"action-btn\" [class.has-label]=\"action.showLabel && !!action.label\"\n          [disabled]=\"action.disabled ?? false\" [attr.aria-label]=\"action.label || 'Action'\"\n          [talosTooltip]=\"action.showLabel ? '' : (action.label || '')\" (click)=\"handleActionClick(action, $event)\">\n          @if (action.icon; as actIcon) {\n          <span class=\"action-btn-icon\">\n            <ng-container *ngComponentOutlet=\"actIcon\" />\n          </span>\n          }\n          @if (action.showLabel && action.label) {\n          <span class=\"action-btn-label\">{{ action.label }}</span>\n          }\n          @if (action.badge) {\n          <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n            {{ action.badge }}\n          </span>\n          }\n        </button>\n        }\n      </div>\n      }\n\n      <ng-content select=\"[top-nav-actions]\" />\n\n      <!-- 3-Way System/Light/Dark Theme Toggle -->\n      @if (showThemeToggle()) {\n      <button type=\"button\" class=\"theme-toggle-btn\" (click)=\"handleThemeToggle()\"\n        [attr.aria-label]=\"themeToggleAriaLabel()\" [talosTooltip]=\"themeToggleTooltip()\">\n        <talos-theme-morph-icon [mode]=\"effectiveThemeMode()\" [size]=\"16\" />\n      </button>\n      }\n\n      <!-- User Profile & User Dropdown Menu -->\n      @if (userProfile(); as user) {\n      <div class=\"user-profile-container\" [class.is-open]=\"isUserDropdownOpen()\">\n        <button type=\"button\" class=\"user-profile-btn\" [attr.aria-haspopup]=\"'true'\"\n          [attr.aria-expanded]=\"isUserDropdownOpen()\" (click)=\"toggleUserDropdown($event)\">\n          <div class=\"user-avatar-circle\">\n            @if (user.avatarUrl) {\n            <img [src]=\"user.avatarUrl\" [alt]=\"user.name\" class=\"user-avatar-img\" />\n            } @else {\n            <span class=\"avatar-initials\">{{ user.name.charAt(0) }}</span>\n            }\n          </div>\n          <div class=\"user-profile-meta\">\n            <span class=\"user-name-text\">{{ user.name }}</span>\n            @if (user.role) {\n            <span class=\"user-role-text\">{{ user.role }}</span>\n            }\n          </div>\n          @if (user.menuItems && user.menuItems.length > 0) {\n          <svg lucideChevronDown class=\"user-dropdown-chevron\" [size]=\"13\"></svg>\n          }\n        </button>\n\n        <!-- User Dropdown Panel -->\n        @if (isUserDropdownOpen() && user.menuItems && user.menuItems.length > 0) {\n        <div class=\"top-nav-dropdown-menu user-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n          <div class=\"user-menu-header\">\n            <span class=\"user-menu-header-name\">{{ user.name }}</span>\n            @if (user.email) {\n            <span class=\"user-menu-header-email\">{{ user.email }}</span>\n            }\n          </div>\n          <div class=\"dropdown-divider\" role=\"separator\"></div>\n          <ul class=\"dropdown-menu-list\">\n            @for (menuItem of user.menuItems; track menuItem.id || menuItem.label) {\n            @if (menuItem.divider) {\n            <li class=\"dropdown-divider\" role=\"separator\"></li>\n            }\n            <li role=\"none\">\n              <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                [class.is-active]=\"activeItemId() === menuItem.id || !!menuItem.active\"\n                [disabled]=\"menuItem.disabled ?? false\" (click)=\"selectItem(menuItem, $event)\">\n                @if (menuItem.icon; as menuIcon) {\n                <span class=\"dropdown-item-icon\">\n                  <ng-container *ngComponentOutlet=\"menuIcon\" />\n                </span>\n                }\n                <div class=\"dropdown-item-content\">\n                  <span class=\"dropdown-item-label\">{{ menuItem.label }}</span>\n                  @if (menuItem.description) {\n                  <span class=\"dropdown-item-desc\">{{ menuItem.description }}</span>\n                  }\n                </div>\n                @if (menuItem.badge) {\n                <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (menuItem.badgeVariant ?? 'subtle')\">\n                  {{ menuItem.badge }}\n                </span>\n                }\n              </button>\n            </li>\n            }\n          </ul>\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Mobile Top Nav Hamburger Toggle Button -->\n      @if (items().length > 0 || actions().length > 0) {\n      <button type=\"button\" class=\"top-nav-mobile-hamburger-btn\" (click)=\"toggleMobileMenu()\"\n        [class.is-open]=\"isMobileMenuOpen()\" [attr.aria-expanded]=\"isMobileMenuOpen()\"\n        [attr.aria-label]=\"isMobileMenuOpen() ? 'Close navigation menu' : 'Open navigation menu'\">\n        @if (isMobileMenuOpen()) {\n        <svg lucideX [size]=\"20\"></svg>\n        } @else {\n        <svg lucideMenu [size]=\"20\"></svg>\n        }\n      </button>\n      }\n\n      <ng-content select=\"[top-nav-user]\" />\n    </ng-content>\n    }\n  </div>\n</div>\n\n<!-- Mobile Top Navigation Expanding Sheet (Expands Downwards from Top) -->\n@if (isMobileMenuOpen()) {\n<div class=\"top-nav-mobile-sheet\" role=\"navigation\" aria-label=\"Mobile Navigation\" (click)=\"$event.stopPropagation()\">\n  @if (showSearch()) {\n  <div class=\"mobile-search-bar\">\n    <svg lucideSearch class=\"search-icon\" [size]=\"16\"></svg>\n    <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n      (input)=\"onSearchInput($event)\" />\n  </div>\n  }\n\n  @if (items().length > 0) {\n  <nav class=\"mobile-nav-links-list\" aria-label=\"Mobile Main Navigation\">\n    @for (item of items(); track item.id || item.label) {\n    <button type=\"button\" class=\"mobile-nav-link-btn\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n      [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event); closeMobileMenu()\">\n      @if (item.icon; as itemIcon) {\n      <span class=\"nav-link-icon\">\n        <ng-container *ngComponentOutlet=\"itemIcon\" />\n      </span>\n      }\n      <span class=\"nav-link-label\">{{ item.label }}</span>\n      @if (item.badge) {\n      <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n        {{ item.badge }}\n      </span>\n      }\n    </button>\n    }\n  </nav>\n  }\n\n  @if (actions().length > 0) {\n  <div class=\"mobile-sheet-actions\">\n    @for (action of actions(); track action.id || action.label || $index) {\n    <button type=\"button\" class=\"mobile-action-btn\" [disabled]=\"action.disabled ?? false\"\n      (click)=\"handleActionClick(action, $event); closeMobileMenu()\">\n      @if (action.icon; as actIcon) {\n      <span class=\"action-btn-icon\">\n        <ng-container *ngComponentOutlet=\"actIcon\" />\n      </span>\n      }\n      @if (action.label) {\n      <span class=\"action-btn-label\">{{ action.label }}</span>\n      }\n      @if (action.badge) {\n      <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n        {{ action.badge }}\n      </span>\n      }\n    </button>\n    }\n  </div>\n  }\n</div>\n\n<!-- Backdrop for Top Nav Mobile Sheet -->\n<div class=\"top-nav-mobile-backdrop\" (click)=\"closeMobileMenu()\" aria-hidden=\"true\"></div>\n}", styles: [":host,talos-top-nav,.talos-top-nav-host{display:block;width:100%;box-sizing:border-box;z-index:50;position:relative;overflow:visible;container-type:inline-size;container-name:topnav;--talos-top-nav-height: 60px;--talos-top-nav-bg: var(--talos-header-bg, var(--talos-bg-surface, #ffffff));--talos-top-nav-border: var(--talos-header-border-color, var(--talos-border-default, #e2e8f0));--talos-top-nav-text: var(--talos-text-primary, #0f172a);--talos-top-nav-muted: var(--talos-text-muted, #64748b);--talos-top-nav-hover-bg: var(--talos-nav-hover-bg, rgba(0, 0, 0, .04));--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, #eff6ff);--talos-top-nav-active-text: var(--talos-primary-text, #1d4ed8);--talos-top-nav-dropdown-bg: var(--talos-bg-surface, #ffffff);--talos-top-nav-dropdown-border: var(--talos-border-default, #e2e8f0);--talos-top-nav-dropdown-shadow: var(--talos-shadow-dropdown, 0 10px 25px -5px rgba(0, 0, 0, .08))}:host.size-sm,talos-top-nav.size-sm,.talos-top-nav-host.size-sm{--talos-top-nav-height: 48px}:host.size-md,talos-top-nav.size-md,.talos-top-nav-host.size-md{--talos-top-nav-height: 60px}:host.size-lg,talos-top-nav.size-lg,.talos-top-nav-host.size-lg{--talos-top-nav-height: 72px}:host.is-sticky,talos-top-nav.is-sticky,.talos-top-nav-host.is-sticky{position:sticky;top:0;z-index:50}:host.is-bordered,talos-top-nav.is-bordered,.talos-top-nav-host.is-bordered{border-bottom:1px solid var(--talos-top-nav-border)}:host.is-glass,talos-top-nav.is-glass,.talos-top-nav-host.is-glass{--talos-top-nav-bg: rgba(255, 255, 255, .85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:root[data-theme=dark] talos-top-nav,:root.dark talos-top-nav,[data-theme=dark] talos-top-nav,[data-mode=dark] talos-top-nav,.dark talos-top-nav,.dark-theme talos-top-nav{--talos-top-nav-bg: var(--talos-header-bg, #090d16);--talos-top-nav-border: var(--talos-header-border-color, rgba(255, 255, 255, .08));--talos-top-nav-text: #f8fafc;--talos-top-nav-muted: #94a3b8;--talos-top-nav-hover-bg: rgba(255, 255, 255, .06);--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));--talos-top-nav-active-text: #ffffff;--talos-top-nav-dropdown-bg: #0f172a;--talos-top-nav-dropdown-border: rgba(255, 255, 255, .1);--talos-top-nav-dropdown-shadow: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08)}:root[data-theme=dark] :host.is-glass,:root.dark :host.is-glass,[data-theme=dark] :host.is-glass,[data-mode=dark] :host.is-glass,.dark :host.is-glass,.dark-theme :host.is-glass,:root[data-theme=dark] talos-top-nav.is-glass,:root.dark talos-top-nav.is-glass,[data-theme=dark] talos-top-nav.is-glass,[data-mode=dark] talos-top-nav.is-glass,.dark talos-top-nav.is-glass,.dark-theme talos-top-nav.is-glass{--talos-top-nav-bg: rgba(9, 13, 22, .85)}.talos-top-nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--talos-top-nav-height);padding:0 20px;background:var(--talos-top-nav-bg);box-sizing:border-box;gap:12px;position:relative;overflow:visible}@media(max-width:640px){.talos-top-nav-inner{padding:0 10px;gap:6px}}.top-nav-left{display:flex;align-items:center;gap:10px;flex-shrink:0}.nav-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0}.nav-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.brand-container{display:flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer}.brand-logo-wrapper{display:inline-flex;align-items:center;justify-content:center}.brand-text-group{display:flex;flex-direction:column;line-height:1.2}.brand-title-row{display:flex;align-items:center;gap:6px}.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff)));color:var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb)));border:1px solid var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2));flex-shrink:0;transition:all .2s ease}.brand-icon svg,.brand-icon i-lucide,.brand-icon .lucide{width:15px;height:15px;display:block}.brand-title{font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:var(--talos-top-nav-text);white-space:nowrap}.brand-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:6px;font-size:.625rem;font-weight:600;letter-spacing:.02em;background:var(--talos-top-nav-brand-badge-bg, var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff))));color:var(--talos-top-nav-brand-badge-color, var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb))));border:1px solid var(--talos-top-nav-brand-badge-border, var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2)));white-space:nowrap}.brand-subtitle{font-size:.6875rem;color:var(--talos-top-nav-muted);white-space:nowrap}.top-nav-center{display:flex;align-items:center;gap:10px;flex:1;min-width:0;justify-content:flex-start;overflow:visible;position:relative}.nav-links-bar{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;flex-shrink:0;overflow:visible;position:relative}.nav-item-dropdown-container{position:relative;display:inline-flex;overflow:visible}.nav-link-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;height:32px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;text-decoration:none;flex-shrink:0}.nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.nav-link-btn[disabled]{opacity:.5;cursor:not-allowed}.nav-link-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.nav-link-btn .dropdown-chevron{transition:transform .2s ease;opacity:.7}.nav-link-btn.has-dropdown{padding-right:6px}.nav-item-dropdown-container.is-open .nav-link-btn .dropdown-chevron{transform:rotate(180deg)}.nav-link-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.nav-link-icon svg,.nav-link-icon i-lucide,.nav-link-icon .lucide{width:15px;height:15px;display:block}.nav-link-badge,.dropdown-item-badge,.action-badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:9999px;font-size:.625rem;font-weight:600;line-height:1.2}.nav-link-badge.badge-primary,.dropdown-item-badge.badge-primary,.action-badge.badge-primary{background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2563eb))}.nav-link-badge.badge-secondary,.dropdown-item-badge.badge-secondary,.action-badge.badge-secondary{background:#64748b1f;color:var(--text-muted, #64748b)}.nav-link-badge.badge-success,.dropdown-item-badge.badge-success,.action-badge.badge-success{background:#22c55e1f;color:#16a34a}.nav-link-badge.badge-warning,.dropdown-item-badge.badge-warning,.action-badge.badge-warning{background:#eab3081f;color:#ca8a04}.nav-link-badge.badge-danger,.dropdown-item-badge.badge-danger,.action-badge.badge-danger{background:#ef44441f;color:#dc2626}.nav-link-badge.badge-subtle,.dropdown-item-badge.badge-subtle,.action-badge.badge-subtle{background:#0000000d;color:var(--talos-top-nav-muted)}.top-nav-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;max-width:320px;background:var(--talos-top-nav-dropdown-bg);border:1px solid var(--talos-top-nav-dropdown-border);border-radius:10px;box-shadow:var(--talos-top-nav-dropdown-shadow);padding:6px;z-index:1050;animation:dropdownFadeSlide .18s cubic-bezier(.16,1,.3,1);box-sizing:border-box}.top-nav-dropdown-menu.user-dropdown-menu{right:0;left:auto;min-width:240px}@keyframes dropdownFadeSlide{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.dropdown-divider{height:1px;background:var(--talos-top-nav-dropdown-border);margin:4px 0}.dropdown-menu-item{width:100%;display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;border:none;background:transparent;color:var(--talos-top-nav-text);font-size:.8125rem;font-weight:500;text-align:left;cursor:pointer;transition:all .12s ease;box-sizing:border-box}.dropdown-menu-item:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-primary-color, var(--talos-top-nav-text))}.dropdown-menu-item.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.dropdown-menu-item[disabled]{opacity:.45;cursor:not-allowed}.dropdown-menu-item:focus-visible{outline:none;background:var(--talos-top-nav-hover-bg)}.dropdown-item-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-top-nav-muted);flex-shrink:0;width:16px;height:16px}.dropdown-item-icon svg,.dropdown-item-icon i-lucide,.dropdown-item-icon .lucide{width:15px;height:15px;display:block}.dropdown-item-content{display:flex;flex-direction:column;flex:1;min-width:0}.dropdown-item-label{font-weight:500;color:var(--talos-top-nav-text)}.dropdown-item-desc{font-size:.6875rem;color:var(--talos-top-nav-muted);margin-top:1px}.search-bar-wrapper{display:flex;align-items:center;position:relative;flex:0 1 180px;min-width:100px;max-width:220px}.search-icon{position:absolute;left:9px;color:var(--talos-top-nav-muted);pointer-events:none}.top-nav-search-input{width:100%;height:30px;padding:0 8px 0 28px;border-radius:6px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text);font-size:.75rem;transition:all .15s ease}.top-nav-search-input::placeholder{color:var(--talos-top-nav-muted)}.top-nav-search-input:focus{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));background:var(--talos-top-nav-dropdown-bg);box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.top-nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.actions-group{display:flex;align-items:center;gap:3px}.action-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;gap:6px}.action-btn.has-label{width:auto;padding:0 10px;font-size:.8125rem;font-weight:500}.action-btn .action-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.action-btn .action-btn-icon svg,.action-btn .action-btn-icon i-lucide,.action-btn .action-btn-icon .lucide{width:15px;height:15px;display:block}.action-btn .action-btn-label{font-size:.8125rem;font-weight:500;white-space:nowrap}.action-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.action-btn[disabled]{opacity:.5;cursor:not-allowed}.action-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.action-btn .action-badge{position:absolute;top:2px;right:2px;padding:1px 4px;font-size:.5625rem}.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;position:relative}.theme-toggle-btn talos-theme-morph-icon,.theme-toggle-btn svg{width:16px;height:16px;display:block}.theme-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.theme-toggle-btn:active{transform:scale(.9)}.theme-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-container{position:relative;display:inline-flex;flex-shrink:0}.user-profile-btn{display:flex;align-items:center;gap:7px;padding:3px 7px 3px 3px;border-radius:9999px;border:1px solid var(--talos-top-nav-border);background:transparent;cursor:pointer;transition:all .15s ease}.user-profile-btn:hover{background:var(--talos-top-nav-hover-bg)}.user-profile-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-btn .user-dropdown-chevron{color:var(--talos-top-nav-muted);transition:transform .2s ease}.user-profile-container.is-open .user-dropdown-chevron{transform:rotate(180deg)}.user-avatar-circle{width:26px;height:26px;border-radius:50%;background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2592eb));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;overflow:hidden;flex-shrink:0}.user-avatar-img{width:100%;height:100%;object-fit:cover}.user-profile-meta{display:flex;flex-direction:column;text-align:left;line-height:1.15}.user-name-text{font-size:.75rem;font-weight:600;color:var(--talos-top-nav-text);white-space:nowrap}.user-role-text{font-size:.625rem;color:var(--talos-top-nav-muted);white-space:nowrap}.user-menu-header{padding:8px 10px 6px;display:flex;flex-direction:column;gap:2px}.user-menu-header-name{font-size:.8125rem;font-weight:600;color:var(--talos-top-nav-text)}.user-menu-header-email{font-size:.6875rem;color:var(--talos-top-nav-muted)}@container topnav (max-width: 840px){.brand-subtitle,.user-role-text{display:none}}@container topnav (max-width: 640px){.brand-badge,.user-profile-meta{display:none}.search-bar-wrapper{max-width:130px}.action-btn.has-label .action-btn-label{display:none}.nav-links-bar{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}.nav-links-bar::-webkit-scrollbar{display:none}}@container topnav (max-width: 480px){.search-bar-wrapper{display:none}.brand-title{font-size:.9375rem}}@media(max-width:480px){.top-nav-dropdown-menu{max-width:calc(100vw - 24px);right:0;left:auto}}.top-nav-mobile-hamburger-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);cursor:pointer;transition:all .15s ease;flex-shrink:0}.top-nav-mobile-hamburger-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-hamburger-btn.is-open{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-sheet{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;width:100vw;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);background:var(--talos-top-nav-bg);border-bottom:1px solid var(--talos-top-nav-border);box-shadow:0 20px 35px -5px #00000040;z-index:95;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.875rem;overflow-y:auto;box-sizing:border-box;animation:topNavSheetSlideDown .25s cubic-bezier(.16,1,.3,1)}@keyframes topNavSheetSlideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.top-nav-mobile-backdrop{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;bottom:0;background:#0f172a73;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:94;animation:fadeIn .2s ease-out}.mobile-nav-links-list{display:flex;flex-direction:column;gap:.375rem;width:100%}.mobile-nav-link-btn{display:flex;align-items:center;width:100%;height:42px;padding:0 1rem;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .15s ease;gap:.75rem;text-align:left;box-sizing:border-box}.mobile-nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.mobile-nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-subtle-border, rgba(37, 99, 235, .25))}.mobile-nav-link-btn .nav-link-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.mobile-nav-link-btn .nav-link-label{flex:1}.mobile-sheet-actions{display:flex;align-items:center;gap:.75rem;padding-top:.75rem;border-top:1px solid var(--talos-top-nav-border);flex-wrap:wrap}.mobile-sheet-actions .mobile-action-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s ease}.mobile-sheet-actions .mobile-action-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}@media(max-width:768px){.top-nav-center .nav-links-bar{display:none}.top-nav-mobile-hamburger-btn{display:inline-flex}}\n"] }]
         }], 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 {
@@ -2677,7 +2725,7 @@ class TalosButtonDirective {
         el.style.setProperty('--ripple-y', `${y}px`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: TalosButtonDirective, isStandalone: true, selector: "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, spinning: { classPropertyName: "spinning", publicName: "spinning", isSignal: true, isRequired: false, transformFunction: null }, popping: { classPropertyName: "popping", publicName: "popping", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "class.talos-btn-primary": "variant() === \"primary\"", "class.talos-btn-secondary": "variant() === \"secondary\"", "class.talos-btn-outline": "variant() === \"outline\"", "class.talos-btn-ghost": "variant() === \"ghost\" || variant() === \"subtle\"", "class.talos-btn-danger": "variant() === \"danger\"", "class.talos-btn-success": "variant() === \"success\"", "class.talos-btn-link": "variant() === \"link\"", "class.talos-btn-sm": "size() === \"sm\"", "class.talos-btn-md": "size() === \"md\"", "class.talos-btn-lg": "size() === \"lg\"", "class.talos-btn-icon": "iconOnly()", "class.talos-btn-full": "fullWidth()", "class.talos-btn-pill": "pill()", "class.is-loading": "loading()", "class.talos-anim-spin": "animation() === \"spin\" || spinning()", "class.talos-anim-spin-once": "animation() === \"spin-once\"", "class.talos-anim-pop": "animation() === \"pop\" || popping()", "class.talos-anim-shake": "animation() === \"shake\"", "class.talos-anim-pulse": "animation() === \"pulse\"", "class.talos-anim-bounce": "animation() === \"bounce\"", "class.talos-feedback-success": "feedback() === \"success\"", "class.talos-feedback-error": "feedback() === \"error\"", "attr.disabled": "(disabled() || loading()) ? true : null", "attr.aria-disabled": "(disabled() || loading()) ? \"true\" : null" }, classAttribute: "talos-btn" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: TalosButtonDirective, isStandalone: true, selector: "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, spinning: { classPropertyName: "spinning", publicName: "spinning", isSignal: true, isRequired: false, transformFunction: null }, popping: { classPropertyName: "popping", publicName: "popping", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "class.talos-btn-primary": "variant() === \"primary\"", "class.talos-btn-secondary": "variant() === \"secondary\"", "class.talos-btn-outline": "variant() === \"outline\"", "class.talos-btn-ghost": "variant() === \"ghost\" || variant() === \"subtle\"", "class.talos-btn-danger": "variant() === \"danger\"", "class.talos-btn-success": "variant() === \"success\"", "class.talos-btn-link": "variant() === \"link\"", "class.talos-btn-xs": "size() === \"xs\"", "class.talos-btn-sm": "size() === \"sm\"", "class.talos-btn-md": "size() === \"md\"", "class.talos-btn-lg": "size() === \"lg\"", "class.talos-btn-icon": "iconOnly()", "class.talos-btn-full": "fullWidth()", "class.talos-btn-pill": "pill()", "class.is-loading": "loading()", "class.talos-anim-spin": "animation() === \"spin\" || spinning()", "class.talos-anim-spin-once": "animation() === \"spin-once\"", "class.talos-anim-pop": "animation() === \"pop\" || popping()", "class.talos-anim-shake": "animation() === \"shake\"", "class.talos-anim-pulse": "animation() === \"pulse\"", "class.talos-anim-bounce": "animation() === \"bounce\"", "class.talos-feedback-success": "feedback() === \"success\"", "class.talos-feedback-error": "feedback() === \"error\"", "attr.disabled": "(disabled() || loading()) ? true : null", "attr.aria-disabled": "(disabled() || loading()) ? \"true\" : null" }, classAttribute: "talos-btn" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosButtonDirective, decorators: [{
             type: Directive,
@@ -2692,6 +2740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[class.talos-btn-danger]': 'variant() === "danger"',
                         '[class.talos-btn-success]': 'variant() === "success"',
                         '[class.talos-btn-link]': 'variant() === "link"',
+                        '[class.talos-btn-xs]': 'size() === "xs"',
                         '[class.talos-btn-sm]': 'size() === "sm"',
                         '[class.talos-btn-md]': 'size() === "md"',
                         '[class.talos-btn-lg]': 'size() === "lg"',
@@ -2762,6 +2811,9 @@ class TalosButtonGroupComponent {
     /** Apply fully rounded pill shape */
     pill = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pill" }] : /* istanbul ignore next */ []));
+    /** Allow mouse wheel vertical scrolling to translate to horizontal scrolling when overflowing on hover */
+    mouseWheelScroll = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mouseWheelScroll" }] : /* istanbul ignore next */ []));
     /** Disable all buttons in group */
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -2878,8 +2930,24 @@ class TalosButtonGroupComponent {
             focusableButtons[targetIndex].focus();
         }
     }
+    onWheel(event) {
+        if (!this.mouseWheelScroll() || this.orientation() !== 'horizontal')
+            return;
+        const el = this.elementRef.nativeElement;
+        if (el.scrollWidth > el.clientWidth) {
+            if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+                const maxScrollLeft = el.scrollWidth - el.clientWidth;
+                const canScrollLeft = el.scrollLeft > 0 && event.deltaY < 0;
+                const canScrollRight = el.scrollLeft < maxScrollLeft && event.deltaY > 0;
+                if (canScrollLeft || canScrollRight) {
+                    event.preventDefault();
+                    el.scrollLeft += event.deltaY;
+                }
+            }
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: TalosButtonGroupComponent, isStandalone: true, selector: "talos-button-group", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "keydown": "onKeydown($event)", "click": "onClick($event)" }, properties: { "class.talos-button-group-horizontal": "orientation() === \"horizontal\"", "class.talos-button-group-vertical": "orientation() === \"vertical\"", "class.talos-button-group-attached": "variant() === \"attached\"", "class.talos-button-group-segmented": "variant() === \"segmented\" || variant() === \"pill\"", "class.talos-button-group-outline": "variant() === \"outline\"", "class.talos-button-group-subtle": "variant() === \"subtle\"", "class.talos-button-group-pill": "pill() || variant() === \"pill\"", "class.talos-button-group-sm": "size() === \"sm\"", "class.talos-button-group-md": "size() === \"md\"", "class.talos-button-group-lg": "size() === \"lg\"", "attr.role": "selectionMode() !== \"none\" ? \"radiogroup\" : \"group\"", "attr.aria-orientation": "orientation()" }, classAttribute: "talos-button-group" }, queries: [{ propertyName: "items", predicate: TalosButtonGroupItemDirective, descendants: true, isSignal: true }, { propertyName: "buttons", predicate: TalosButtonDirective$1, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: TalosButtonGroupComponent, isStandalone: true, selector: "talos-button-group", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, mouseWheelScroll: { classPropertyName: "mouseWheelScroll", publicName: "mouseWheelScroll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "keydown": "onKeydown($event)", "click": "onClick($event)", "wheel": "onWheel($event)" }, properties: { "class.talos-button-group-horizontal": "orientation() === \"horizontal\"", "class.talos-button-group-vertical": "orientation() === \"vertical\"", "class.talos-button-group-attached": "variant() === \"attached\"", "class.talos-button-group-segmented": "variant() === \"segmented\" || variant() === \"pill\" || variant() === \"subtle\" || variant() === \"glow\"", "class.talos-button-group-outline": "variant() === \"outline\"", "class.talos-button-group-subtle": "variant() === \"subtle\"", "class.talos-button-group-glow": "variant() === \"glow\"", "class.talos-button-group-pill": "pill() || variant() === \"pill\"", "class.talos-button-group-sm": "size() === \"sm\"", "class.talos-button-group-md": "size() === \"md\"", "class.talos-button-group-lg": "size() === \"lg\"", "attr.role": "selectionMode() !== \"none\" ? \"radiogroup\" : \"group\"", "attr.aria-orientation": "orientation()" }, classAttribute: "talos-button-group" }, queries: [{ propertyName: "items", predicate: TalosButtonGroupItemDirective, descendants: true, isSignal: true }, { propertyName: "buttons", predicate: TalosButtonDirective$1, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosButtonGroupComponent, decorators: [{
             type: Component,
@@ -2891,9 +2959,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[class.talos-button-group-horizontal]': 'orientation() === "horizontal"',
                         '[class.talos-button-group-vertical]': 'orientation() === "vertical"',
                         '[class.talos-button-group-attached]': 'variant() === "attached"',
-                        '[class.talos-button-group-segmented]': 'variant() === "segmented" || variant() === "pill"',
+                        '[class.talos-button-group-segmented]': 'variant() === "segmented" || variant() === "pill" || variant() === "subtle" || variant() === "glow"',
                         '[class.talos-button-group-outline]': 'variant() === "outline"',
                         '[class.talos-button-group-subtle]': 'variant() === "subtle"',
+                        '[class.talos-button-group-glow]': 'variant() === "glow"',
                         '[class.talos-button-group-pill]': 'pill() || variant() === "pill"',
                         '[class.talos-button-group-sm]': 'size() === "sm"',
                         '[class.talos-button-group-md]': 'size() === "md"',
@@ -2901,10 +2970,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[attr.role]': 'selectionMode() !== "none" ? "radiogroup" : "group"',
                         '[attr.aria-orientation]': 'orientation()',
                         '(keydown)': 'onKeydown($event)',
-                        '(click)': 'onClick($event)'
+                        '(click)': 'onClick($event)',
+                        '(wheel)': 'onWheel($event)'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pill", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TalosButtonGroupItemDirective), { ...{ descendants: true }, isSignal: true }] }], buttons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TalosButtonDirective$1), { ...{ descendants: true }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pill", required: false }] }], mouseWheelScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "mouseWheelScroll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TalosButtonGroupItemDirective), { ...{ descendants: true }, isSignal: true }] }], buttons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TalosButtonDirective$1), { ...{ descendants: true }, isSignal: true }] }] } });
 
 class TalosButtonGroupModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -8585,7 +8655,7 @@ class TalosHeatmapComponent {
         URL.revokeObjectURL(url);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosHeatmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosHeatmapComponent, isStandalone: true, selector: "talos-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, metrics: { classPropertyName: "metrics", publicName: "metrics", isSignal: true, isRequired: false, transformFunction: null }, selectedMetricId: { classPropertyName: "selectedMetricId", publicName: "selectedMetricId", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: false, transformFunction: null }, swapAxes: { classPropertyName: "swapAxes", publicName: "swapAxes", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, hoursRange: { classPropertyName: "hoursRange", publicName: "hoursRange", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, days: { classPropertyName: "days", publicName: "days", isSignal: true, isRequired: false, transformFunction: null }, colorScheme: { classPropertyName: "colorScheme", publicName: "colorScheme", isSignal: true, isRequired: false, transformFunction: null }, customColorStops: { classPropertyName: "customColorStops", publicName: "customColorStops", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, cellShape: { classPropertyName: "cellShape", publicName: "cellShape", isSignal: true, isRequired: false, transformFunction: null }, cellSize: { classPropertyName: "cellSize", publicName: "cellSize", isSignal: true, isRequired: false, transformFunction: null }, fitWidth: { classPropertyName: "fitWidth", publicName: "fitWidth", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showRefresh: { classPropertyName: "showRefresh", publicName: "showRefresh", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, showSwapAxes: { classPropertyName: "showSwapAxes", publicName: "showSwapAxes", isSignal: true, isRequired: false, transformFunction: null }, showIntervalToggle: { classPropertyName: "showIntervalToggle", publicName: "showIntervalToggle", isSignal: true, isRequired: false, transformFunction: null }, showDateRangePicker: { classPropertyName: "showDateRangePicker", publicName: "showDateRangePicker", isSignal: true, isRequired: false, transformFunction: null }, dateRangePresets: { classPropertyName: "dateRangePresets", publicName: "dateRangePresets", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedMetricId: "selectedMetricIdChange", interval: "intervalChange", dateRange: "dateRangeChange", swapAxes: "swapAxesChange", cellClick: "cellClick", cellHover: "cellHover", timeRangeChange: "timeRangeChange", refresh: "refresh", metricChange: "metricChange", export: "export" }, host: { properties: { "class.talos-heatmap-expanded": "isExpanded()", "class.talos-heatmap-loading": "loading()", "class.talos-heatmap-sm": "cellSize() === \"sm\"", "class.talos-heatmap-md": "cellSize() === \"md\"", "class.talos-heatmap-lg": "cellSize() === \"lg\"", "class.talos-heatmap-pill": "cellShape() === \"pill\"", "class.talos-heatmap-rounded": "cellShape() === \"rounded\"", "class.talos-heatmap-square": "cellShape() === \"square\"", "class.talos-heatmap-fit-width": "isFitWidth()", "class.talos-heatmap-compact-square": "!isFitWidth()", "class.talos-heatmap-swapped-axes": "swapAxes()", "attr.role": "\"region\"", "attr.aria-label": "title()" }, classAttribute: "talos-heatmap" }, ngImport: i0, template: "<div class=\"talos-heatmap-container\">\n  <!-- Header Toolbar -->\n  @if (showToolbar()) {\n  <div class=\"talos-heatmap-header\">\n    <div class=\"talos-heatmap-title-area\">\n      <h3 class=\"talos-heatmap-title\">{{ title() }}</h3>\n    </div>\n\n    <div class=\"talos-heatmap-actions\">\n      <!-- Interval Selector Toggle (Hour vs Day) -->\n      @if (showIntervalToggle()) {\n      <div class=\"talos-heatmap-interval-group\" role=\"radiogroup\" aria-label=\"Time Interval\">\n        <button type=\"button\" class=\"talos-heatmap-interval-btn\" [class.is-active]=\"interval() === 'hour'\"\n          (click)=\"setInterval('hour')\" role=\"radio\" [attr.aria-checked]=\"interval() === 'hour'\">\n          <svg lucideClock [size]=\"13\"></svg>\n          <span>Hour</span>\n        </button>\n        <button type=\"button\" class=\"talos-heatmap-interval-btn\" [class.is-active]=\"interval() === 'day'\"\n          (click)=\"setInterval('day')\" role=\"radio\" [attr.aria-checked]=\"interval() === 'day'\">\n          <svg lucideCalendar [size]=\"13\"></svg>\n          <span>Day</span>\n        </button>\n      </div>\n      }\n\n      <!-- Date Range Picker Integration -->\n      @if (showDateRangePicker()) {\n      <div class=\"talos-heatmap-daterange-box\">\n        <talos-date-range-picker size=\"sm\" [ngModel]=\"dateRange()\" (rangeChange)=\"onDateRangePickerChange($event)\"\n          [presets]=\"dateRangePresets()\" placeholder=\"Select date range\" />\n      </div>\n      }\n\n      <!-- Metric Dropdown Selector -->\n      @if (metrics().length > 0) {\n      <div class=\"talos-heatmap-dropdown-wrapper\">\n        <button type=\"button\" class=\"talos-heatmap-dropdown-btn\" [class.is-open]=\"isMetricDropdownOpen()\"\n          (click)=\"toggleMetricDropdown($event)\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"isMetricDropdownOpen()\">\n          <span class=\"talos-heatmap-dropdown-label\">{{ currentMetric()?.label || 'Select metric' }}</span>\n          <svg lucideChevronDown [size]=\"14\" class=\"talos-heatmap-dropdown-icon\"></svg>\n        </button>\n\n        @if (isMetricDropdownOpen()) {\n        <div class=\"talos-heatmap-menu\" role=\"listbox\">\n          @for (m of metrics(); track m.id) {\n          <button type=\"button\" class=\"talos-heatmap-menu-item\" [class.is-selected]=\"m.id === currentMetric()?.id\"\n            (click)=\"selectMetric(m)\" role=\"option\" [attr.aria-selected]=\"m.id === currentMetric()?.id\">\n            <span>{{ m.label }}</span>\n            @if (m.id === currentMetric()?.id) {\n            <svg lucideCheck [size]=\"14\" class=\"talos-heatmap-check-icon\"></svg>\n            }\n          </button>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Refresh Button -->\n      @if (showRefresh()) {\n      <button type=\"button\" class=\"talos-heatmap-icon-btn\" [class.is-spinning]=\"loading()\" (click)=\"onRefreshClick()\"\n        title=\"Refresh data\" aria-label=\"Refresh data\">\n        <svg lucideRefreshCw [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n      </button>\n      }\n\n      <!-- Export Dropdown Button -->\n      @if (showExport()) {\n      <div class=\"talos-heatmap-dropdown-wrapper\">\n        <button type=\"button\" class=\"talos-heatmap-icon-btn\" (click)=\"toggleExportDropdown($event)\" title=\"Export data\"\n          aria-label=\"Export data\">\n          <svg lucideUpload [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n        </button>\n\n        @if (isExportDropdownOpen()) {\n        <div class=\"talos-heatmap-menu talos-heatmap-export-menu\" role=\"menu\">\n          <button type=\"button\" class=\"talos-heatmap-menu-item\" (click)=\"triggerExport('csv')\" role=\"menuitem\">\n            <svg lucideFileSpreadsheet [size]=\"14\" class=\"talos-heatmap-menu-icon\"></svg>\n            <span>Export to CSV</span>\n          </button>\n          <button type=\"button\" class=\"talos-heatmap-menu-item\" (click)=\"triggerExport('json')\" role=\"menuitem\">\n            <svg lucideFileJson [size]=\"14\" class=\"talos-heatmap-menu-icon\"></svg>\n            <span>Export to JSON</span>\n          </button>\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Swap Axes Button -->\n      @if (showSwapAxes()) {\n      <button type=\"button\" class=\"talos-heatmap-icon-btn\" [class.is-active]=\"swapAxes()\" (click)=\"toggleSwapAxes()\"\n        [title]=\"swapAxes() ? 'Reset axis orientation' : 'Swap axes (Days / Hours)'\"\n        [attr.aria-label]=\"swapAxes() ? 'Reset axis orientation' : 'Swap axes (Days / Hours)'\">\n        <svg lucideArrowLeftRight [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n      </button>\n      }\n\n      <!-- Fullscreen / Expand Button -->\n      @if (showExpand()) {\n      <button type=\"button\" class=\"talos-heatmap-icon-btn\" (click)=\"toggleExpand()\"\n        [title]=\"isExpanded() ? 'Minimize' : 'Expand'\" [aria-label]=\"isExpanded() ? 'Minimize' : 'Expand'\">\n        @if (isExpanded()) {\n        <svg lucideMinimize2 [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n        } @else {\n        <svg lucideMaximize2 [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n        }\n      </button>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Heatmap Matrix Grid Wrapper -->\n  <div class=\"talos-heatmap-body\" [class.is-loading]=\"loading()\">\n    <!-- Grid Table -->\n    <div class=\"talos-heatmap-grid\" role=\"grid\" [attr.aria-rowcount]=\"gridRows().length + 1\"\n      [attr.aria-colcount]=\"columnHeaders().length + 1\">\n      <!-- Column Headers -->\n      <div class=\"talos-heatmap-row talos-heatmap-header-row\" role=\"row\" aria-rowindex=\"1\">\n        <div class=\"talos-heatmap-corner-cell\" role=\"columnheader\"></div>\n        @for (col of columnHeaders(); track col.key; let colIdx = $index) {\n        <div class=\"talos-heatmap-col-header\" role=\"columnheader\" [attr.aria-colindex]=\"colIdx + 2\">\n          {{ col.label }}\n        </div>\n        }\n      </div>\n\n      <!-- Data Rows -->\n      @for (row of gridRows(); track row.key; let rowIdx = $index) {\n      <div class=\"talos-heatmap-row\" role=\"row\" [attr.aria-rowindex]=\"rowIdx + 2\">\n        <!-- Row Header (Hour or Week Range) -->\n        <div class=\"talos-heatmap-row-header\" role=\"rowheader\" aria-colindex=\"1\" [title]=\"row.label\">\n          {{ row.label }}\n        </div>\n\n        <!-- Heatmap Cells -->\n        @for (cell of row.cells; track cell.id; let colIdx = $index) {\n        <div class=\"talos-heatmap-cell-wrapper\" role=\"gridcell\" [attr.aria-colindex]=\"colIdx + 2\"\n          [attr.aria-label]=\"cell.tooltipText\" tabindex=\"0\" [attr.data-cell-coord]=\"rowIdx + '_' + colIdx\"\n          [talosTooltip]=\"cell.tooltipText\" (mouseenter)=\"onCellMouseEnter(cell)\" (mouseleave)=\"onCellMouseLeave()\"\n          (click)=\"onCellClick(cell, $event)\" (keydown)=\"onKeydown($event, colIdx, rowIdx)\">\n          <div class=\"talos-heatmap-pill\" [style.background-color]=\"cell.backgroundColor\" [style.color]=\"cell.textColor\"\n            [class.has-value]=\"cell.value > 0\">\n            @if (showValues()) {\n            <span class=\"talos-heatmap-cell-value\">{{ cell.formattedValue }}</span>\n            }\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    <!-- Loading Skeleton Shimmer Overlay -->\n    @if (loading()) {\n    <div class=\"talos-heatmap-loading-overlay\" aria-hidden=\"true\">\n      <div class=\"talos-heatmap-loading-spinner-box\">\n        <svg lucideRefreshCw [size]=\"16\" class=\"talos-heatmap-loading-spinner\"></svg>\n        <span>Loading data...</span>\n      </div>\n    </div>\n    }\n  </div>\n\n  <!-- Bottom Legend Bar -->\n  @if (showLegend()) {\n  <div class=\"talos-heatmap-legend\">\n    <span class=\"talos-heatmap-legend-bound\">{{ computedScaleBounds().min }}</span>\n    <div class=\"talos-heatmap-legend-bar\" [style.background]=\"legendGradientCss()\" aria-hidden=\"true\"></div>\n    <span class=\"talos-heatmap-legend-bound\">{{ computedScaleBounds().max }}</span>\n  </div>\n  }\n</div>", styles: [":host{display:block;font-family:inherit;--talos-heatmap-bg: var(--talos-card-bg, var(--talos-bg-surface, #ffffff));--talos-heatmap-text: var(--talos-text-color, #0f172a);--talos-heatmap-muted: var(--talos-text-muted, #64748b);--talos-heatmap-border: var(--talos-border-color, #e2e8f0);--talos-heatmap-hover-bg: var(--talos-primary-light, #f1f5f9);--talos-heatmap-cell-height: 28px;--talos-heatmap-cell-radius: 9999px;--talos-heatmap-row-header-width: 68px;--talos-heatmap-cell-font-size: .85rem;--talos-heatmap-gap: 6px;--talos-heatmap-square-size: 32px}:host(.talos-heatmap-sm){--talos-heatmap-cell-height: 22px;--talos-heatmap-row-header-width: 56px;--talos-heatmap-cell-font-size: .72rem;--talos-heatmap-square-size: 24px;--talos-heatmap-gap: 4px}:host(.talos-heatmap-md){--talos-heatmap-cell-height: 28px;--talos-heatmap-row-header-width: 68px;--talos-heatmap-cell-font-size: .82rem;--talos-heatmap-square-size: 32px;--talos-heatmap-gap: 6px}:host(.talos-heatmap-lg){--talos-heatmap-cell-height: 36px;--talos-heatmap-row-header-width: 80px;--talos-heatmap-cell-font-size: .92rem;--talos-heatmap-square-size: 40px;--talos-heatmap-gap: 8px}:host(.talos-heatmap-square){--talos-heatmap-cell-radius: 6px}:host(.talos-heatmap-rounded){--talos-heatmap-cell-radius: 8px}:host(.talos-heatmap-pill){--talos-heatmap-cell-radius: 9999px}:host(.talos-heatmap-expanded){position:fixed;inset:16px;z-index:1000;background:var(--talos-heatmap-bg);box-shadow:0 25px 50px -12px #00000059;border-radius:16px;padding:24px;overflow:auto;border:1px solid var(--talos-heatmap-border)}.talos-heatmap-container{display:flex;flex-direction:column;background:var(--talos-heatmap-bg);border-radius:12px;position:relative;width:100%}.talos-heatmap-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}.talos-heatmap-title{margin:0;font-size:1.15rem;font-weight:700;color:var(--talos-heatmap-text);letter-spacing:-.015em}.talos-heatmap-actions{display:flex;align-items:center;gap:8px;position:relative;flex-wrap:wrap}.talos-heatmap-interval-group{display:inline-flex;align-items:center;padding:2px;background:var(--talos-bg-color, #f1f5f9);border-radius:8px;border:1px solid var(--talos-heatmap-border);gap:2px}.talos-heatmap-interval-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:.78rem;font-weight:600;color:var(--talos-heatmap-muted);background:transparent;border:none;border-radius:6px;cursor:pointer;outline:none;transition:all .15s ease}.talos-heatmap-interval-btn:hover{color:var(--talos-heatmap-text)}.talos-heatmap-interval-btn.is-active{background:var(--talos-card-bg, #ffffff);color:var(--talos-primary-color, #4338ca);box-shadow:0 1px 3px #00000014}.talos-heatmap-daterange-box{min-width:220px}.talos-heatmap-dropdown-wrapper{position:relative}.talos-heatmap-dropdown-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:.85rem;font-weight:500;color:var(--talos-heatmap-text);background:var(--talos-bg-color, #f8fafc);border:1px solid var(--talos-heatmap-border);border-radius:8px;cursor:pointer;outline:none;transition:all .15s ease}.talos-heatmap-dropdown-btn:hover{background:var(--talos-primary-light, #f1f5f9);border-color:var(--talos-border-hover, #cbd5e1)}.talos-heatmap-dropdown-btn.is-open{background:var(--talos-primary-light-hover, #e2e8f0);border-color:var(--talos-border-hover, #94a3b8)}.talos-heatmap-dropdown-btn .talos-heatmap-dropdown-icon{width:14px;height:14px;color:var(--talos-heatmap-muted)}.talos-heatmap-icon-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-heatmap-muted);cursor:pointer;outline:none;transition:all .15s ease}.talos-heatmap-icon-btn:hover{background:var(--talos-heatmap-hover-bg);color:var(--talos-heatmap-text)}.talos-heatmap-icon-btn.is-active{background:var(--talos-primary-light, #e0e7ff);color:var(--talos-primary-color, #4338ca);border-color:var(--talos-border-color, #c7d2fe)}.talos-heatmap-icon-btn:active{transform:scale(.95)}.talos-heatmap-icon-btn.is-spinning .talos-heatmap-action-icon{animation:talos-heatmap-spin .8s linear infinite}.talos-heatmap-icon-btn .talos-heatmap-action-icon{width:16px;height:16px}@keyframes talos-heatmap-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.talos-heatmap-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:50;min-width:170px;background:var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));border:1px solid var(--talos-dropdown-border, var(--talos-heatmap-border));border-radius:10px;box-shadow:var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .12), 0 8px 10px -6px rgba(0, 0, 0, .08));padding:4px;display:flex;flex-direction:column;gap:2px;animation:talos-heatmap-menu-fade .15s cubic-bezier(.16,1,.3,1)}@keyframes talos-heatmap-menu-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.talos-heatmap-menu-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:7px 10px;font-size:.82rem;font-weight:500;color:var(--talos-heatmap-text);background:transparent;border:none;border-radius:6px;text-align:left;cursor:pointer;transition:background .12s ease}.talos-heatmap-menu-item:hover{background:var(--talos-dropdown-hover-bg, #f1f5f9)}.talos-heatmap-menu-item.is-selected{font-weight:600;color:var(--talos-primary-color, #4338ca)}.talos-heatmap-menu-item .talos-heatmap-check-icon{width:14px;height:14px;color:var(--talos-primary-color, #4338ca)}.talos-heatmap-menu-item .talos-heatmap-menu-icon{width:14px;height:14px;color:var(--talos-heatmap-muted)}.talos-heatmap-body{position:relative;width:100%;overflow-x:auto;padding-bottom:8px}.talos-heatmap-body.is-loading{pointer-events:none;-webkit-user-select:none;user-select:none}.talos-heatmap-grid{display:flex;flex-direction:column;gap:var(--talos-heatmap-gap);width:100%}.talos-heatmap-row{display:flex;align-items:center;gap:var(--talos-heatmap-gap);width:100%}.talos-heatmap-header-row{margin-bottom:2px}.talos-heatmap-corner-cell{width:var(--talos-heatmap-row-header-width);flex-shrink:0}.talos-heatmap-row-header{width:var(--talos-heatmap-row-header-width);flex-shrink:0;text-align:right;padding-right:12px;font-size:.82rem;font-weight:500;color:var(--talos-heatmap-muted);-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(.talos-heatmap-fit-width) .talos-heatmap-grid{min-width:440px;width:100%}:host(.talos-heatmap-fit-width) .talos-heatmap-col-header{flex:1;text-align:center;font-size:.82rem;font-weight:600;color:var(--talos-heatmap-muted);-webkit-user-select:none;user-select:none;letter-spacing:.01em}:host(.talos-heatmap-fit-width) .talos-heatmap-cell-wrapper{flex:1;height:var(--talos-heatmap-cell-height);position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border-radius:var(--talos-heatmap-cell-radius);transition:transform .15s ease}:host(.talos-heatmap-fit-width) .talos-heatmap-cell-wrapper:focus-visible{box-shadow:0 0 0 2px #4338ca,0 0 0 4px #4338ca40;z-index:5}:host(.talos-heatmap-compact-square) .talos-heatmap-grid{min-width:auto;width:max-content}:host(.talos-heatmap-compact-square) .talos-heatmap-col-header{width:var(--talos-heatmap-square-size);flex:0 0 var(--talos-heatmap-square-size);text-align:center;font-size:.78rem;font-weight:600;color:var(--talos-heatmap-muted);-webkit-user-select:none;user-select:none;letter-spacing:.01em}:host(.talos-heatmap-compact-square) .talos-heatmap-cell-wrapper{width:var(--talos-heatmap-square-size);height:var(--talos-heatmap-square-size);flex:0 0 var(--talos-heatmap-square-size);aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border-radius:var(--talos-heatmap-cell-radius);transition:transform .15s ease}:host(.talos-heatmap-compact-square) .talos-heatmap-cell-wrapper:focus-visible{box-shadow:0 0 0 2px #4338ca,0 0 0 4px #4338ca40;z-index:5}.talos-heatmap-pill{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:var(--talos-heatmap-cell-radius);font-size:var(--talos-heatmap-cell-font-size);font-weight:600;line-height:1;-webkit-user-select:none;user-select:none;box-shadow:inset 0 0 0 1px #0000000a;transition:transform .15s cubic-bezier(.16,1,.3,1),box-shadow .15s ease,filter .15s ease}.talos-heatmap-pill:not(.has-value){box-shadow:inset 0 0 0 1px #e2e8f0e6}.talos-heatmap-cell-wrapper:hover .talos-heatmap-pill{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 14px -2px #00000024,0 2px 4px -1px #0000000f;filter:brightness(1.03);z-index:2}.talos-heatmap-cell-wrapper:active .talos-heatmap-pill{transform:translateY(0) scale(.96)}.talos-heatmap-cell-value{display:inline-block;text-align:center}.talos-heatmap-loading-overlay{position:absolute;inset:0;background:var(--talos-loading-overlay-bg, rgba(255, 255, 255, .75));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:40;border-radius:8px;animation:talos-heatmap-fade-in .2s ease}@keyframes talos-heatmap-fade-in{0%{opacity:0}to{opacity:1}}.talos-heatmap-loading-spinner-box{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-heatmap-border);border-radius:8px;box-shadow:0 4px 12px #00000014;font-size:.85rem;font-weight:500;color:var(--talos-heatmap-text)}.talos-heatmap-loading-spinner-box .talos-heatmap-loading-spinner{width:16px;height:16px;color:var(--talos-primary-color, #4338ca);animation:talos-heatmap-spin .8s linear infinite}.talos-heatmap-legend{display:flex;align-items:center;gap:12px;margin-top:18px;padding-left:var(--talos-heatmap-row-header-width)}.talos-heatmap-legend-bound{font-size:.82rem;font-weight:600;color:var(--talos-heatmap-muted);min-width:12px}.talos-heatmap-legend-bar{height:8px;width:130px;border-radius:9999px;box-shadow:inset 0 1px 2px #00000014}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DateRangePickerComponent$1, selector: "talos-date-range-picker", inputs: ["placeholder", "label", "floatingLabel", "floating", "required", "disabled", "clearable", "size", "displayFormat", "valueFormat", "showTime", "use24Hour", "showSeconds", "minuteStep", "minDate", "maxDate", "minSpan", "maxSpan", "firstDayOfWeek", "presets", "presetType", "filterDate"], outputs: ["rangeChange", "opened", "closed"] }, { kind: "directive", type: TalosTooltipDirective$1, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "component", type: LucideRefreshCw, selector: "svg[lucideRefreshCw]" }, { kind: "component", type: LucideUpload, selector: "svg[lucideUpload]" }, { kind: "component", type: LucideMaximize2, selector: "svg[lucideMaximize2]" }, { kind: "component", type: LucideMinimize2, selector: "svg[lucideMinimize2]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }, { kind: "component", type: LucideFileSpreadsheet, selector: "svg[lucideFileSpreadsheet]" }, { kind: "component", type: LucideFileJson, selector: "svg[lucideFileBraces], svg[lucideFileJson]" }, { kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "component", type: LucideClock, selector: "svg[lucideClock]" }, { kind: "component", type: LucideArrowLeftRight, selector: "svg[lucideArrowLeftRight]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosHeatmapComponent, isStandalone: true, selector: "talos-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, metrics: { classPropertyName: "metrics", publicName: "metrics", isSignal: true, isRequired: false, transformFunction: null }, selectedMetricId: { classPropertyName: "selectedMetricId", publicName: "selectedMetricId", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: false, transformFunction: null }, swapAxes: { classPropertyName: "swapAxes", publicName: "swapAxes", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, hoursRange: { classPropertyName: "hoursRange", publicName: "hoursRange", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, days: { classPropertyName: "days", publicName: "days", isSignal: true, isRequired: false, transformFunction: null }, colorScheme: { classPropertyName: "colorScheme", publicName: "colorScheme", isSignal: true, isRequired: false, transformFunction: null }, customColorStops: { classPropertyName: "customColorStops", publicName: "customColorStops", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, cellShape: { classPropertyName: "cellShape", publicName: "cellShape", isSignal: true, isRequired: false, transformFunction: null }, cellSize: { classPropertyName: "cellSize", publicName: "cellSize", isSignal: true, isRequired: false, transformFunction: null }, fitWidth: { classPropertyName: "fitWidth", publicName: "fitWidth", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showRefresh: { classPropertyName: "showRefresh", publicName: "showRefresh", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, showSwapAxes: { classPropertyName: "showSwapAxes", publicName: "showSwapAxes", isSignal: true, isRequired: false, transformFunction: null }, showIntervalToggle: { classPropertyName: "showIntervalToggle", publicName: "showIntervalToggle", isSignal: true, isRequired: false, transformFunction: null }, showDateRangePicker: { classPropertyName: "showDateRangePicker", publicName: "showDateRangePicker", isSignal: true, isRequired: false, transformFunction: null }, dateRangePresets: { classPropertyName: "dateRangePresets", publicName: "dateRangePresets", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedMetricId: "selectedMetricIdChange", interval: "intervalChange", dateRange: "dateRangeChange", swapAxes: "swapAxesChange", cellClick: "cellClick", cellHover: "cellHover", timeRangeChange: "timeRangeChange", refresh: "refresh", metricChange: "metricChange", export: "export" }, host: { properties: { "class.talos-heatmap-expanded": "isExpanded()", "class.talos-heatmap-loading": "loading()", "class.talos-heatmap-sm": "cellSize() === \"sm\"", "class.talos-heatmap-md": "cellSize() === \"md\"", "class.talos-heatmap-lg": "cellSize() === \"lg\"", "class.talos-heatmap-pill": "cellShape() === \"pill\"", "class.talos-heatmap-rounded": "cellShape() === \"rounded\"", "class.talos-heatmap-square": "cellShape() === \"square\"", "class.talos-heatmap-fit-width": "isFitWidth()", "class.talos-heatmap-compact-square": "!isFitWidth()", "class.talos-heatmap-swapped-axes": "swapAxes()", "attr.role": "\"region\"", "attr.aria-label": "title()" }, classAttribute: "talos-heatmap" }, ngImport: i0, template: "<div class=\"talos-heatmap-container\">\n  <!-- Header Toolbar -->\n  @if (showToolbar()) {\n  <div class=\"talos-heatmap-header\">\n    <div class=\"talos-heatmap-title-area\">\n      <h3 class=\"talos-heatmap-title\">{{ title() }}</h3>\n    </div>\n\n    <div class=\"talos-heatmap-actions\">\n      <!-- Interval Selector Toggle (Hour vs Day) -->\n      @if (showIntervalToggle()) {\n      <div class=\"talos-heatmap-interval-group\" role=\"radiogroup\" aria-label=\"Time Interval\">\n        <button type=\"button\" class=\"talos-heatmap-interval-btn\" [class.is-active]=\"interval() === 'hour'\"\n          (click)=\"setInterval('hour')\" role=\"radio\" [attr.aria-checked]=\"interval() === 'hour'\">\n          <svg lucideClock [size]=\"13\"></svg>\n          <span>Hour</span>\n        </button>\n        <button type=\"button\" class=\"talos-heatmap-interval-btn\" [class.is-active]=\"interval() === 'day'\"\n          (click)=\"setInterval('day')\" role=\"radio\" [attr.aria-checked]=\"interval() === 'day'\">\n          <svg lucideCalendar [size]=\"13\"></svg>\n          <span>Day</span>\n        </button>\n      </div>\n      }\n\n      <!-- Date Range Picker Integration -->\n      @if (showDateRangePicker()) {\n      <div class=\"talos-heatmap-daterange-box\">\n        <talos-date-range-picker size=\"sm\" [ngModel]=\"dateRange()\" (rangeChange)=\"onDateRangePickerChange($event)\"\n          [presets]=\"dateRangePresets()\" placeholder=\"Select date range\" />\n      </div>\n      }\n\n      <!-- Metric Dropdown Selector -->\n      @if (metrics().length > 0) {\n      <div class=\"talos-heatmap-dropdown-wrapper\">\n        <button type=\"button\" class=\"talos-heatmap-dropdown-btn\" [class.is-open]=\"isMetricDropdownOpen()\"\n          (click)=\"toggleMetricDropdown($event)\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"isMetricDropdownOpen()\">\n          <span class=\"talos-heatmap-dropdown-label\">{{ currentMetric()?.label || 'Select metric' }}</span>\n          <svg lucideChevronDown [size]=\"14\" class=\"talos-heatmap-dropdown-icon\"></svg>\n        </button>\n\n        @if (isMetricDropdownOpen()) {\n        <div class=\"talos-heatmap-menu\" role=\"listbox\">\n          @for (m of metrics(); track m.id) {\n          <button type=\"button\" class=\"talos-heatmap-menu-item\" [class.is-selected]=\"m.id === currentMetric()?.id\"\n            (click)=\"selectMetric(m)\" role=\"option\" [attr.aria-selected]=\"m.id === currentMetric()?.id\">\n            <span>{{ m.label }}</span>\n            @if (m.id === currentMetric()?.id) {\n            <svg lucideCheck [size]=\"14\" class=\"talos-heatmap-check-icon\"></svg>\n            }\n          </button>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Refresh Button -->\n      @if (showRefresh()) {\n      <button type=\"button\" class=\"talos-heatmap-icon-btn\" [class.is-spinning]=\"loading()\" (click)=\"onRefreshClick()\"\n        title=\"Refresh data\" aria-label=\"Refresh data\">\n        <svg lucideRefreshCw [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n      </button>\n      }\n\n      <!-- Export Dropdown Button -->\n      @if (showExport()) {\n      <div class=\"talos-heatmap-dropdown-wrapper\">\n        <button type=\"button\" class=\"talos-heatmap-icon-btn\" (click)=\"toggleExportDropdown($event)\" title=\"Export data\"\n          aria-label=\"Export data\">\n          <svg lucideUpload [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n        </button>\n\n        @if (isExportDropdownOpen()) {\n        <div class=\"talos-heatmap-menu talos-heatmap-export-menu\" role=\"menu\">\n          <button type=\"button\" class=\"talos-heatmap-menu-item\" (click)=\"triggerExport('csv')\" role=\"menuitem\">\n            <svg lucideFileSpreadsheet [size]=\"14\" class=\"talos-heatmap-menu-icon\"></svg>\n            <span>Export to CSV</span>\n          </button>\n          <button type=\"button\" class=\"talos-heatmap-menu-item\" (click)=\"triggerExport('json')\" role=\"menuitem\">\n            <svg lucideFileJson [size]=\"14\" class=\"talos-heatmap-menu-icon\"></svg>\n            <span>Export to JSON</span>\n          </button>\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Swap Axes Button -->\n      @if (showSwapAxes()) {\n      <button type=\"button\" class=\"talos-heatmap-icon-btn\" [class.is-active]=\"swapAxes()\" (click)=\"toggleSwapAxes()\"\n        [title]=\"swapAxes() ? 'Reset axis orientation' : 'Swap axes (Days / Hours)'\"\n        [attr.aria-label]=\"swapAxes() ? 'Reset axis orientation' : 'Swap axes (Days / Hours)'\">\n        <svg lucideArrowLeftRight [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n      </button>\n      }\n\n      <!-- Fullscreen / Expand Button -->\n      @if (showExpand()) {\n      <button type=\"button\" class=\"talos-heatmap-icon-btn\" (click)=\"toggleExpand()\"\n        [title]=\"isExpanded() ? 'Minimize' : 'Expand'\" [aria-label]=\"isExpanded() ? 'Minimize' : 'Expand'\">\n        @if (isExpanded()) {\n        <svg lucideMinimize2 [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n        } @else {\n        <svg lucideMaximize2 [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n        }\n      </button>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Heatmap Matrix Grid Wrapper -->\n  <div class=\"talos-heatmap-body\" [class.is-loading]=\"loading()\">\n    <!-- Grid Table -->\n    <div class=\"talos-heatmap-grid\" role=\"grid\" [attr.aria-rowcount]=\"gridRows().length + 1\"\n      [attr.aria-colcount]=\"columnHeaders().length + 1\">\n      <!-- Column Headers -->\n      <div class=\"talos-heatmap-row talos-heatmap-header-row\" role=\"row\" aria-rowindex=\"1\">\n        <div class=\"talos-heatmap-corner-cell\" role=\"columnheader\"></div>\n        @for (col of columnHeaders(); track col.key; let colIdx = $index) {\n        <div class=\"talos-heatmap-col-header\" role=\"columnheader\" [attr.aria-colindex]=\"colIdx + 2\">\n          {{ col.label }}\n        </div>\n        }\n      </div>\n\n      <!-- Data Rows -->\n      @for (row of gridRows(); track row.key; let rowIdx = $index) {\n      <div class=\"talos-heatmap-row\" role=\"row\" [attr.aria-rowindex]=\"rowIdx + 2\">\n        <!-- Row Header (Hour or Week Range) -->\n        <div class=\"talos-heatmap-row-header\" role=\"rowheader\" aria-colindex=\"1\" [title]=\"row.label\">\n          {{ row.label }}\n        </div>\n\n        <!-- Heatmap Cells -->\n        @for (cell of row.cells; track cell.id; let colIdx = $index) {\n        <div class=\"talos-heatmap-cell-wrapper\" role=\"gridcell\" [attr.aria-colindex]=\"colIdx + 2\"\n          [attr.aria-label]=\"cell.tooltipText\" tabindex=\"0\" [attr.data-cell-coord]=\"rowIdx + '_' + colIdx\"\n          [talosTooltip]=\"cell.tooltipText\" (mouseenter)=\"onCellMouseEnter(cell)\" (mouseleave)=\"onCellMouseLeave()\"\n          (click)=\"onCellClick(cell, $event)\" (keydown)=\"onKeydown($event, colIdx, rowIdx)\">\n          <div class=\"talos-heatmap-pill\" [style.background-color]=\"cell.backgroundColor\" [style.color]=\"cell.textColor\"\n            [class.has-value]=\"cell.value > 0\">\n            @if (showValues()) {\n            <span class=\"talos-heatmap-cell-value\">{{ cell.formattedValue }}</span>\n            }\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    <!-- Loading Skeleton Shimmer Overlay -->\n    @if (loading()) {\n    <div class=\"talos-heatmap-loading-overlay\" aria-hidden=\"true\">\n      <div class=\"talos-heatmap-loading-spinner-box\">\n        <svg lucideRefreshCw [size]=\"16\" class=\"talos-heatmap-loading-spinner\"></svg>\n        <span>Loading data...</span>\n      </div>\n    </div>\n    }\n  </div>\n\n  <!-- Bottom Legend Bar -->\n  @if (showLegend()) {\n  <div class=\"talos-heatmap-legend\">\n    <span class=\"talos-heatmap-legend-bound\">{{ computedScaleBounds().min }}</span>\n    <div class=\"talos-heatmap-legend-bar\" [style.background]=\"legendGradientCss()\" aria-hidden=\"true\"></div>\n    <span class=\"talos-heatmap-legend-bound\">{{ computedScaleBounds().max }}</span>\n  </div>\n  }\n</div>", styles: [":host{display:block;font-family:inherit;--talos-heatmap-bg: var(--talos-card-bg, var(--talos-bg-surface, #ffffff));--talos-heatmap-text: var(--talos-text-color, #0f172a);--talos-heatmap-muted: var(--talos-text-muted, #64748b);--talos-heatmap-border: var(--talos-border-color, #e2e8f0);--talos-heatmap-hover-bg: var(--talos-primary-light, #f1f5f9);--talos-heatmap-cell-height: 28px;--talos-heatmap-cell-radius: 9999px;--talos-heatmap-row-header-width: 68px;--talos-heatmap-cell-font-size: .85rem;--talos-heatmap-gap: 6px;--talos-heatmap-square-size: 32px}:host(.talos-heatmap-sm){--talos-heatmap-cell-height: 22px;--talos-heatmap-row-header-width: 56px;--talos-heatmap-cell-font-size: .72rem;--talos-heatmap-square-size: 24px;--talos-heatmap-gap: 4px}:host(.talos-heatmap-md){--talos-heatmap-cell-height: 28px;--talos-heatmap-row-header-width: 68px;--talos-heatmap-cell-font-size: .82rem;--talos-heatmap-square-size: 32px;--talos-heatmap-gap: 6px}:host(.talos-heatmap-lg){--talos-heatmap-cell-height: 36px;--talos-heatmap-row-header-width: 80px;--talos-heatmap-cell-font-size: .92rem;--talos-heatmap-square-size: 40px;--talos-heatmap-gap: 8px}:host(.talos-heatmap-square){--talos-heatmap-cell-radius: 6px}:host(.talos-heatmap-rounded){--talos-heatmap-cell-radius: 8px}:host(.talos-heatmap-pill){--talos-heatmap-cell-radius: 9999px}:host(.talos-heatmap-expanded){position:fixed;inset:16px;z-index:1000;background:var(--talos-heatmap-bg);box-shadow:0 25px 50px -12px #00000059;border-radius:16px;padding:24px;overflow:auto;border:1px solid var(--talos-heatmap-border)}.talos-heatmap-container{display:flex;flex-direction:column;background:var(--talos-heatmap-bg);border-radius:12px;position:relative;width:100%}.talos-heatmap-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}.talos-heatmap-title{margin:0;font-size:1.15rem;font-weight:700;color:var(--talos-heatmap-text);letter-spacing:-.015em}.talos-heatmap-actions{display:flex;align-items:center;gap:8px;position:relative;flex-wrap:wrap}.talos-heatmap-interval-group{display:inline-flex;align-items:center;padding:2px;background:var(--talos-bg-color, #f1f5f9);border-radius:8px;border:1px solid var(--talos-heatmap-border);gap:2px}.talos-heatmap-interval-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:.78rem;font-weight:600;color:var(--talos-heatmap-muted);background:transparent;border:none;border-radius:6px;cursor:pointer;outline:none;transition:all .15s ease}.talos-heatmap-interval-btn:hover{color:var(--talos-heatmap-text)}.talos-heatmap-interval-btn.is-active{background:var(--talos-card-bg, #ffffff);color:var(--talos-primary-color, #4338ca);box-shadow:0 1px 3px #00000014}.talos-heatmap-daterange-box{min-width:220px}.talos-heatmap-dropdown-wrapper{position:relative}.talos-heatmap-dropdown-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:.85rem;font-weight:500;color:var(--talos-heatmap-text);background:var(--talos-bg-color, #f8fafc);border:1px solid var(--talos-heatmap-border);border-radius:8px;cursor:pointer;outline:none;transition:all .15s ease}.talos-heatmap-dropdown-btn:hover{background:var(--talos-primary-light, #f1f5f9);border-color:var(--talos-border-hover, #cbd5e1)}.talos-heatmap-dropdown-btn.is-open{background:var(--talos-primary-light-hover, #e2e8f0);border-color:var(--talos-border-hover, #94a3b8)}.talos-heatmap-dropdown-btn .talos-heatmap-dropdown-icon{width:14px;height:14px;color:var(--talos-heatmap-muted)}.talos-heatmap-icon-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-heatmap-muted);cursor:pointer;outline:none;transition:all .15s ease}.talos-heatmap-icon-btn:hover{background:var(--talos-heatmap-hover-bg);color:var(--talos-heatmap-text)}.talos-heatmap-icon-btn.is-active{background:var(--talos-primary-light, #e0e7ff);color:var(--talos-primary-color, #4338ca);border-color:var(--talos-border-color, #c7d2fe)}.talos-heatmap-icon-btn:active{transform:scale(.95)}.talos-heatmap-icon-btn.is-spinning .talos-heatmap-action-icon{animation:talos-heatmap-spin .8s linear infinite}.talos-heatmap-icon-btn .talos-heatmap-action-icon{width:16px;height:16px}@keyframes talos-heatmap-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.talos-heatmap-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:50;min-width:170px;background:var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));border:1px solid var(--talos-dropdown-border, var(--talos-heatmap-border));border-radius:10px;box-shadow:var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .12), 0 8px 10px -6px rgba(0, 0, 0, .08));padding:4px;display:flex;flex-direction:column;gap:2px;animation:talos-heatmap-menu-fade .15s cubic-bezier(.16,1,.3,1)}@keyframes talos-heatmap-menu-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.talos-heatmap-menu-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:7px 10px;font-size:.82rem;font-weight:500;color:var(--talos-heatmap-text);background:transparent;border:none;border-radius:6px;text-align:left;cursor:pointer;transition:background .12s ease}.talos-heatmap-menu-item:hover{background:var(--talos-dropdown-hover-bg, #f1f5f9)}.talos-heatmap-menu-item.is-selected{font-weight:600;color:var(--talos-primary-color, #4338ca)}.talos-heatmap-menu-item .talos-heatmap-check-icon{width:14px;height:14px;color:var(--talos-primary-color, #4338ca)}.talos-heatmap-menu-item .talos-heatmap-menu-icon{width:14px;height:14px;color:var(--talos-heatmap-muted)}.talos-heatmap-body{position:relative;width:100%;overflow-x:auto;padding-bottom:8px}.talos-heatmap-body.is-loading{pointer-events:none;-webkit-user-select:none;user-select:none}.talos-heatmap-grid{display:flex;flex-direction:column;gap:var(--talos-heatmap-gap);width:100%}.talos-heatmap-row{display:flex;align-items:center;gap:var(--talos-heatmap-gap);width:100%}.talos-heatmap-header-row{margin-bottom:2px}.talos-heatmap-corner-cell{width:var(--talos-heatmap-row-header-width);flex-shrink:0}.talos-heatmap-row-header{width:var(--talos-heatmap-row-header-width);flex-shrink:0;text-align:right;padding-right:12px;font-size:.82rem;font-weight:500;color:var(--talos-heatmap-muted);-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(.talos-heatmap-fit-width) .talos-heatmap-grid{min-width:440px;width:100%}:host(.talos-heatmap-fit-width) .talos-heatmap-col-header{flex:1;text-align:center;font-size:.82rem;font-weight:600;color:var(--talos-heatmap-muted);-webkit-user-select:none;user-select:none;letter-spacing:.01em}:host(.talos-heatmap-fit-width) .talos-heatmap-cell-wrapper{flex:1;height:var(--talos-heatmap-cell-height);position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border-radius:var(--talos-heatmap-cell-radius);transition:transform .15s ease}:host(.talos-heatmap-fit-width) .talos-heatmap-cell-wrapper:focus-visible{box-shadow:0 0 0 2px #4338ca,0 0 0 4px #4338ca40;z-index:5}:host(.talos-heatmap-compact-square) .talos-heatmap-grid{min-width:auto;width:max-content}:host(.talos-heatmap-compact-square) .talos-heatmap-col-header{width:var(--talos-heatmap-square-size);flex:0 0 var(--talos-heatmap-square-size);text-align:center;font-size:.78rem;font-weight:600;color:var(--talos-heatmap-muted);-webkit-user-select:none;user-select:none;letter-spacing:.01em}:host(.talos-heatmap-compact-square) .talos-heatmap-cell-wrapper{width:var(--talos-heatmap-square-size);height:var(--talos-heatmap-square-size);flex:0 0 var(--talos-heatmap-square-size);aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border-radius:var(--talos-heatmap-cell-radius);transition:transform .15s ease}:host(.talos-heatmap-compact-square) .talos-heatmap-cell-wrapper:focus-visible{box-shadow:0 0 0 2px #4338ca,0 0 0 4px #4338ca40;z-index:5}.talos-heatmap-pill{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:var(--talos-heatmap-cell-radius);font-size:var(--talos-heatmap-cell-font-size);font-weight:600;line-height:1;-webkit-user-select:none;user-select:none;box-shadow:inset 0 0 0 1px #0000000a;transition:transform .15s cubic-bezier(.16,1,.3,1),box-shadow .15s ease,filter .15s ease}.talos-heatmap-pill:not(.has-value){box-shadow:inset 0 0 0 1px #e2e8f0e6}.talos-heatmap-cell-wrapper:hover .talos-heatmap-pill{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 14px -2px #00000024,0 2px 4px -1px #0000000f;filter:brightness(1.03);z-index:2}.talos-heatmap-cell-wrapper:active .talos-heatmap-pill{transform:translateY(0) scale(.96)}.talos-heatmap-cell-value{display:inline-block;text-align:center}.talos-heatmap-loading-overlay{position:absolute;inset:0;background:var(--talos-loading-overlay-bg, rgba(255, 255, 255, .75));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:40;border-radius:8px;animation:talos-heatmap-fade-in .2s ease}@keyframes talos-heatmap-fade-in{0%{opacity:0}to{opacity:1}}.talos-heatmap-loading-spinner-box{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-heatmap-border);border-radius:8px;box-shadow:0 4px 12px #00000014;font-size:.85rem;font-weight:500;color:var(--talos-heatmap-text)}.talos-heatmap-loading-spinner-box .talos-heatmap-loading-spinner{width:16px;height:16px;color:var(--talos-primary-color, #4338ca);animation:talos-heatmap-spin .8s linear infinite}.talos-heatmap-legend{display:flex;align-items:center;gap:12px;margin-top:18px;padding-left:var(--talos-heatmap-row-header-width)}.talos-heatmap-legend-bound{font-size:.82rem;font-weight:600;color:var(--talos-heatmap-muted);min-width:12px}.talos-heatmap-legend-bar{height:8px;width:130px;border-radius:9999px;box-shadow:inset 0 1px 2px #00000014}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DateRangePickerComponent$1, selector: "talos-date-range-picker", inputs: ["placeholder", "label", "floatingLabel", "floating", "required", "disabled", "clearable", "size", "displayFormat", "valueFormat", "showTime", "use24Hour", "showSeconds", "minuteStep", "minDate", "maxDate", "minSpan", "maxSpan", "firstDayOfWeek", "presets", "presetType", "filterDate"], outputs: ["rangeChange", "opened", "closed"] }, { kind: "directive", type: TalosTooltipDirective$1, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "component", type: LucideRefreshCw, selector: "svg[lucideRefreshCw]" }, { kind: "component", type: LucideUpload, selector: "svg[lucideUpload]" }, { kind: "component", type: LucideMaximize2, selector: "svg[lucideMaximize2]" }, { kind: "component", type: LucideMinimize2, selector: "svg[lucideMinimize2]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }, { kind: "component", type: LucideFileSpreadsheet, selector: "svg[lucideFileSpreadsheet]" }, { kind: "component", type: LucideFileJson, selector: "svg[lucideFileBraces], svg[lucideFileJson]" }, { kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "component", type: LucideClock, selector: "svg[lucideClock]" }, { kind: "component", type: LucideArrowLeftRight, selector: "svg[lucideArrowLeftRight]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosHeatmapComponent, decorators: [{
             type: Component,
@@ -9707,7 +9777,7 @@ class TalosRangeInputComponent {
                 useExisting: forwardRef(() => TalosRangeInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "trackContainerRef", first: true, predicate: ["sliderTrackContainer"], descendants: true, isSignal: true }, { propertyName: "thumb0Ref", first: true, predicate: ["thumb0"], descendants: true, isSignal: true }, { propertyName: "thumb1Ref", first: true, predicate: ["thumb1"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"talos-range-wrapper\" [class.is-disabled]=\"effectiveDisabled()\" [class.is-readonly]=\"readonly()\"\n  [class.is-invalid]=\"effectiveInvalid()\" [class.is-range]=\"isDualRange()\" [class.size-sm]=\"size() === 'sm'\"\n  [class.size-md]=\"size() === 'md'\" [class.size-lg]=\"size() === 'lg'\" [class.variant-primary]=\"variant() === 'primary'\"\n  [class.variant-secondary]=\"variant() === 'secondary'\" [class.variant-success]=\"variant() === 'success'\"\n  [class.variant-warning]=\"variant() === 'warning'\" [class.variant-danger]=\"variant() === 'danger'\"\n  [class.variant-info]=\"variant() === 'info'\">\n  <!-- Header: Label, Hint & Optional Value Display / Synchronized Number Inputs -->\n  @if (label() || hint() || showValueBadge() || showInputs()) {\n  <div class=\"talos-range-header\">\n    <div class=\"talos-range-label-group\" [class.is-floating-label]=\"isFloatingMode()\">\n      @if (label()) {\n      <label class=\"talos-range-label\" [class.is-floated]=\"isFloatingMode()\" [attr.for]=\"elementId() + '-thumb-0'\">\n        {{ label() }}\n      </label>\n      }\n      @if (hint()) {\n      <span class=\"talos-range-hint\">{{ hint() }}</span>\n      }\n    </div>\n\n    @if (showInputs()) {\n    <div class=\"talos-range-inputs-group\">\n      @if (isDualRange()) {\n      <div class=\"talos-range-number-box\">\n        @if (prefix()) {\n        <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n        }\n        <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num-0'\" [min]=\"min()\"\n          [max]=\"endValue()\" [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"startValue()\"\n          (change)=\"onNumberInputChange(0, $event)\" (keydown.enter)=\"onNumberInputChange(0, $event)\" />\n        @if (suffix()) {\n        <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n        }\n      </div>\n      <span class=\"talos-range-inputs-separator\">\u2013</span>\n      <div class=\"talos-range-number-box\">\n        @if (prefix()) {\n        <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n        }\n        <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num-1'\" [min]=\"startValue()\"\n          [max]=\"max()\" [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"endValue()\"\n          (change)=\"onNumberInputChange(1, $event)\" (keydown.enter)=\"onNumberInputChange(1, $event)\" />\n        @if (suffix()) {\n        <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n        }\n      </div>\n      } @else {\n      <div class=\"talos-range-number-box\">\n        @if (prefix()) {\n        <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n        }\n        <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num'\" [min]=\"min()\" [max]=\"max()\"\n          [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"startValue()\"\n          (change)=\"onNumberInputChange(0, $event)\" (keydown.enter)=\"onNumberInputChange(0, $event)\" />\n        @if (suffix()) {\n        <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n        }\n      </div>\n      }\n    </div>\n    } @else if (showValueBadge()) {\n    <div class=\"talos-range-value-badge\">\n      @if (isDualRange()) {\n      <span>{{ formatDisplayValue(startValue()) }} \u2013 {{ formatDisplayValue(endValue()) }}</span>\n      } @else {\n      <span>{{ formatDisplayValue(startValue()) }}</span>\n      }\n    </div>\n    }\n  </div>\n  }\n\n  <!-- Range Slider Container (Track, Fills, Ticks, Thumbs) -->\n  <div #sliderTrackContainer class=\"talos-range-slider\" [class.is-active]=\"isDragging()\"\n    (pointerdown)=\"onTrackPointerDown($event)\">\n    <!-- Background Track -->\n    <div class=\"talos-range-track\">\n      <!-- Active Filled Range Segment -->\n      <div class=\"talos-range-fill\" [style.left.%]=\"fillLeftPercent()\" [style.width.%]=\"fillWidthPercent()\"></div>\n\n      <!-- Tick Marks -->\n      @if (ticks().length > 0 && (showTicks() || marks())) {\n      <div class=\"talos-range-ticks\">\n        @for (tick of ticks(); track tick.value) {\n        <div class=\"talos-range-tick\" [class.is-active]=\"tick.active\" [style.left.%]=\"tick.percent\"\n          (click)=\"onTickClick(tick, $event)\"></div>\n        }\n      </div>\n      }\n    </div>\n\n    <!-- Thumb 0 (Primary or Lower Bound Handle) -->\n    <div #thumb0 class=\"talos-range-thumb\" [class.is-focused]=\"focusedThumb() === 0\"\n      [class.is-dragging]=\"draggingThumb() === 0\" [class.is-tooltip-visible]=\"isTooltipVisible(0)\"\n      [style.left.%]=\"thumb0Percent()\" tabindex=\"0\" role=\"slider\" [attr.id]=\"elementId() + '-thumb-0'\"\n      [attr.aria-label]=\"isDualRange() ? ariaLabelStart() : ariaLabel()\" [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"isDualRange() ? endValue() : max()\" [attr.aria-valuenow]=\"startValue()\"\n      [attr.aria-valuetext]=\"formatDisplayValue(startValue())\"\n      [attr.aria-disabled]=\"effectiveDisabled() ? 'true' : null\" (pointerdown)=\"onThumbPointerDown(0, $event)\"\n      (keydown)=\"onThumbKeyDown(0, $event)\" (focus)=\"onThumbFocus(0)\" (blur)=\"onThumbBlur(0)\"\n      (mouseenter)=\"onThumbMouseEnter(0)\" (mouseleave)=\"onThumbMouseLeave(0)\">\n      <!-- Floating Value Tooltip -->\n      @if (showTooltip() !== 'none') {\n      <div class=\"talos-range-tooltip\" [class.visible]=\"isTooltipVisible(0)\">\n        {{ formatDisplayValue(startValue()) }}\n      </div>\n      }\n    </div>\n\n    <!-- Thumb 1 (Upper Bound Handle for Dual Range) -->\n    @if (isDualRange()) {\n    <div #thumb1 class=\"talos-range-thumb\" [class.is-focused]=\"focusedThumb() === 1\"\n      [class.is-dragging]=\"draggingThumb() === 1\" [class.is-tooltip-visible]=\"isTooltipVisible(1)\"\n      [style.left.%]=\"thumb1Percent()\" tabindex=\"0\" role=\"slider\" [attr.id]=\"elementId() + '-thumb-1'\"\n      [attr.aria-label]=\"ariaLabelEnd()\" [attr.aria-valuemin]=\"startValue()\" [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"endValue()\" [attr.aria-valuetext]=\"formatDisplayValue(endValue())\"\n      [attr.aria-disabled]=\"effectiveDisabled() ? 'true' : null\" (pointerdown)=\"onThumbPointerDown(1, $event)\"\n      (keydown)=\"onThumbKeyDown(1, $event)\" (focus)=\"onThumbFocus(1)\" (blur)=\"onThumbBlur(1)\"\n      (mouseenter)=\"onThumbMouseEnter(1)\" (mouseleave)=\"onThumbMouseLeave(1)\">\n      <!-- Floating Value Tooltip -->\n      @if (showTooltip() !== 'none') {\n      <div class=\"talos-range-tooltip\" [class.visible]=\"isTooltipVisible(1)\">\n        {{ formatDisplayValue(endValue()) }}\n      </div>\n      }\n    </div>\n    }\n  </div>\n\n  <!-- Interval / Step Labels under track -->\n  @if (labels().length > 0 && (showIntervals() || showLabels() || marks())) {\n  <div class=\"talos-range-labels\">\n    @for (item of labels(); track item.value) {\n    <span class=\"talos-range-label-item\" [class.is-active]=\"item.active\" [style.left.%]=\"item.percent\"\n      (click)=\"onLabelClick(item, $event)\">\n      {{ item.label }}\n    </span>\n    }\n  </div>\n  }\n</div>", styles: [":root{--talos-font-sans: \"Inter\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--talos-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--talos-font-display: var(--talos-font-sans);--talos-radius-none: 0px;--talos-radius-xs: .125rem;--talos-radius-sm: .25rem;--talos-radius-md: .375rem;--talos-radius-lg: .5rem;--talos-radius-xl: .75rem;--talos-radius-2xl: 1rem;--talos-radius-full: 9999px;--talos-height-sm: 2rem;--talos-height-md: 2.25rem;--talos-height-lg: 2.625rem;--talos-font-size-2xs: .6875rem;--talos-font-size-xs: .75rem;--talos-font-size-sm: .8125rem;--talos-font-size-base: .875rem;--talos-font-size-md: .875rem;--talos-font-size-lg: 1rem;--talos-font-size-xl: 1.125rem;--talos-font-size-2xl: 1.25rem;--talos-font-size-3xl: 1.5rem;--talos-font-size-4xl: 1.875rem;--talos-font-size-5xl: 2.25rem;--talos-font-weight-light: 300;--talos-font-weight-regular: 400;--talos-font-weight-medium: 500;--talos-font-weight-semibold: 600;--talos-font-weight-bold: 700;--talos-font-weight-extrabold: 800;--talos-line-height-none: 1;--talos-line-height-tight: 1.25;--talos-line-height-snug: 1.375;--talos-line-height-normal: 1.5;--talos-line-height-relaxed: 1.625;--talos-line-height-loose: 2;--talos-control-padding-x: .625rem;--talos-control-font-size: var(--talos-font-size-sm);--talos-control-height: var(--talos-height-md);--talos-border-radius: var(--talos-radius-md);--talos-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--talos-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .08), 0 1px 2px -1px rgba(0, 0, 0, .05);--talos-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04);--talos-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04);--talos-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .05);--talos-shadow-dialog: var(--talos-shadow-xl);--talos-shadow-dropdown: 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04);--talos-transition: .18s cubic-bezier(.4, 0, .2, 1);--talos-transition-slow: .28s cubic-bezier(.4, 0, .2, 1);--talos-bg-canvas: #f8fafc;--talos-bg-surface: #ffffff;--talos-bg-subtle: #f1f5f9;--talos-bg-overlay: rgba(15, 23, 42, .5);--talos-border-subtle: #f1f5f9;--talos-border-default: #cbd5e1;--talos-border-hover: #94a3b8;--talos-border-focus: #2563eb;--talos-focus-ring: 0 0 0 3px rgba(37, 99, 235, .18);--talos-text-primary: #0f172a;--talos-text-secondary: #334155;--talos-text-muted: #64748b;--talos-text-inverse: #ffffff;--talos-bg-color: var(--talos-bg-canvas);--talos-card-bg: var(--talos-bg-surface);--talos-card-bg-subtle: var(--talos-bg-subtle);--talos-border-color: var(--talos-border-default);--talos-text-color: var(--talos-text-primary);--talos-error-color: #ef4444;--talos-warning-color: #d97706;--talos-success-color: #16a34a;--bg-color: var(--talos-bg-canvas);--bg-subtle: var(--talos-bg-subtle);--card-bg: var(--talos-bg-surface);--card-bg-subtle: var(--talos-bg-subtle);--border-color: var(--talos-border-default);--border-hover: var(--talos-border-hover);--border-focus: var(--talos-border-focus);--text-color: var(--talos-text-primary);--text-muted: var(--talos-text-muted);--primary-color: var(--talos-primary);--primary-hover: var(--talos-primary-hover);--primary-active: var(--talos-primary-active);--primary-light: var(--talos-primary-subtle-bg);--primary-light-hover: var(--talos-primary-subtle-bg-hover);--talos-primary: #2563eb;--talos-primary-hover: #1d4ed8;--talos-primary-active: #1e40af;--talos-primary-subtle-bg: #eff6ff;--talos-primary-subtle-bg-hover: #dbeafe;--talos-primary-subtle-border: #bfdbfe;--talos-primary-text: #1e40af;--talos-primary-solid-bg: #2563eb;--talos-primary-solid-text: #ffffff;--talos-primary-color: var(--talos-primary);--talos-primary-light: var(--talos-primary-subtle-bg);--talos-primary-light-hover: var(--talos-primary-subtle-bg-hover);--talos-neutral: #475569;--talos-neutral-hover: #334155;--talos-neutral-active: #1e293b;--talos-neutral-subtle-bg: #f8fafc;--talos-neutral-subtle-bg-hover: #f1f5f9;--talos-neutral-subtle-border: #e2e8f0;--talos-neutral-text: #334155;--talos-neutral-solid-bg: #475569;--talos-neutral-solid-text: #ffffff;--talos-success: #16a34a;--talos-success-hover: #15803d;--talos-success-active: #166534;--talos-success-subtle-bg: #f0fdf4;--talos-success-subtle-bg-hover: #dcfce7;--talos-success-subtle-border: #bbf7d0;--talos-success-text: #166534;--talos-success-solid-bg: #16a34a;--talos-success-solid-text: #ffffff;--talos-warning: #d97706;--talos-warning-hover: #b45309;--talos-warning-active: #92400e;--talos-warning-subtle-bg: #fffbeb;--talos-warning-subtle-bg-hover: #fef3c7;--talos-warning-subtle-border: #fde68a;--talos-warning-text: #92400e;--talos-warning-solid-bg: #d97706;--talos-warning-solid-text: #ffffff;--talos-danger: #ef4444;--talos-danger-hover: #dc2626;--talos-danger-active: #b91c1c;--talos-danger-subtle-bg: #fef2f2;--talos-danger-subtle-bg-hover: #fee2e2;--talos-danger-subtle-border: #fecaca;--talos-danger-text: #991b1b;--talos-danger-solid-bg: #dc2626;--talos-danger-solid-text: #ffffff;--talos-info: #0284c7;--talos-info-hover: #0369a1;--talos-info-active: #075985;--talos-info-subtle-bg: #f0f9ff;--talos-info-subtle-bg-hover: #e0f2fe;--talos-info-subtle-border: #bae6fd;--talos-info-text: #0369a1;--talos-info-solid-bg: #0284c7;--talos-info-solid-text: #ffffff;--talos-purple: #7c3aed;--talos-purple-hover: #6d28d9;--talos-purple-active: #5b21b6;--talos-purple-subtle-bg: #f5f3ff;--talos-purple-subtle-bg-hover: #ede9fe;--talos-purple-subtle-border: #ddd6fe;--talos-purple-text: #6d28d9;--talos-purple-solid-bg: #7c3aed;--talos-purple-solid-text: #ffffff;--talos-input-bg: var(--talos-bg-surface);--talos-input-border: var(--talos-border-default);--talos-input-border-hover: var(--talos-border-hover);--talos-input-border-focus: var(--talos-border-focus);--talos-input-color: var(--talos-text-primary);--talos-input-placeholder-color: var(--talos-text-muted);--talos-input-disabled-bg: var(--talos-bg-subtle);--talos-input-disabled-border: var(--talos-border-default);--talos-input-disabled-color: var(--talos-text-muted);--talos-input-radius: var(--talos-radius-md);--talos-input-height: var(--talos-height-md);--talos-affix-btn-size-sm: 1.375rem;--talos-affix-btn-size-md: 1.5rem;--talos-affix-btn-size-lg: 1.75rem;--talos-affix-btn-radius: var(--talos-radius-sm, .25rem);--talos-affix-btn-icon-size-sm: .8125rem;--talos-affix-btn-icon-size-md: .875rem;--talos-affix-btn-icon-size-lg: 1rem;--talos-affix-btn-color: var(--talos-text-muted, #64748b);--talos-affix-btn-hover-color: var(--talos-text-color, #0f172a);--talos-affix-btn-hover-bg: var(--talos-btn-ghost-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));--talos-affix-btn-active-bg: var(--talos-btn-ghost-active-bg, rgba(148, 163, 184, .25));--talos-sidebar-width: 260px;--talos-sidebar-collapsed-width: 68px;--talos-nav-bg: var(--talos-bg-surface);--talos-nav-border-color: var(--talos-border-subtle);--talos-active-nav-bg: var(--talos-primary-subtle-bg);--talos-active-nav-text: var(--talos-primary);--talos-nav-hover-bg: var(--talos-bg-subtle);--talos-nav-hover-text: var(--talos-text-primary);--talos-avatar-bg: var(--talos-primary-subtle-bg);--talos-avatar-text: var(--talos-primary-text);--talos-badge-bg: var(--talos-primary-subtle-bg);--talos-badge-text: var(--talos-primary-text);--talos-header-bg: var(--talos-bg-surface);--talos-header-border-color: var(--talos-border-subtle);--talos-right-panel-bg: var(--talos-bg-surface);--talos-right-panel-border: var(--talos-border-subtle);--talos-loading-overlay-bg: rgba(255, 255, 255, .75);--talos-dropdown-bg: var(--talos-bg-surface);--talos-dropdown-border: var(--talos-border-default);--talos-dropdown-shadow: var(--talos-shadow-dropdown);--talos-dropdown-hover-bg: var(--talos-bg-subtle);--talos-dropdown-selected-bg: var(--talos-primary-subtle-bg);--talos-btn-font-family: inherit;--talos-btn-border-radius: var(--talos-radius-md);--talos-btn-font-weight: 600;--talos-btn-transition: background-color var(--talos-transition), border-color var(--talos-transition), color var(--talos-transition), box-shadow var(--talos-transition), opacity var(--talos-transition);--talos-btn-ripple-color: rgba(255, 255, 255, .35);--talos-btn-primary-bg: var(--talos-primary-solid-bg);--talos-btn-primary-hover: var(--talos-primary-hover);--talos-btn-primary-active: var(--talos-primary-active);--talos-btn-primary-text: var(--talos-primary-solid-text);--talos-btn-secondary-bg: var(--talos-neutral-solid-bg);--talos-btn-secondary-hover: var(--talos-neutral-hover);--talos-btn-secondary-active: var(--talos-neutral-active);--talos-btn-secondary-text: var(--talos-neutral-solid-text);--talos-btn-outline-bg: transparent;--talos-btn-outline-border: var(--talos-border-default);--talos-btn-outline-hover-bg: var(--talos-bg-subtle);--talos-btn-outline-hover-border: var(--talos-border-hover);--talos-btn-outline-text: var(--talos-text-secondary);--talos-btn-ghost-bg: transparent;--talos-btn-ghost-text: var(--talos-text-muted);--talos-btn-ghost-hover-bg: var(--talos-bg-subtle);--talos-btn-ghost-hover-text: var(--talos-text-primary);--talos-btn-ghost-active-bg: var(--talos-neutral-subtle-bg-hover);--talos-btn-danger-bg: var(--talos-danger-solid-bg);--talos-btn-danger-hover: var(--talos-danger-hover);--talos-btn-danger-active: var(--talos-danger-active);--talos-btn-danger-text: var(--talos-danger-solid-text);--talos-btn-success-bg: var(--talos-success-solid-bg);--talos-btn-success-hover: var(--talos-success-hover);--talos-btn-success-active: var(--talos-success-active);--talos-btn-success-text: var(--talos-success-solid-text);--talos-btn-height-sm: var(--talos-height-sm);--talos-btn-height-md: var(--talos-height-md);--talos-btn-height-lg: var(--talos-height-lg);--talos-btn-padding-x-sm: .625rem;--talos-btn-padding-x-md: .875rem;--talos-btn-padding-x-lg: 1.125rem;--talos-btn-font-size-sm: var(--talos-font-size-xs);--talos-btn-font-size-md: var(--talos-font-size-sm);--talos-btn-font-size-lg: var(--talos-font-size-md);--talos-category-bar-gap: 2px;--talos-category-bar-track-bg: var(--talos-bg-subtle);--talos-category-bar-border-radius: var(--talos-radius-md);--talos-category-bar-height-xs: .25rem;--talos-category-bar-height-sm: .375rem;--talos-category-bar-height-md: .5rem;--talos-category-bar-height-lg: .75rem;--talos-category-bar-marker-ring: var(--talos-bg-surface);--talos-range-track-bg: var(--talos-border-default);--talos-range-track-fill: var(--talos-primary);--talos-range-track-disabled-bg: var(--talos-border-subtle);--talos-range-track-disabled-fill: var(--talos-text-muted);--talos-range-track-height-sm: .25rem;--talos-range-track-height-md: .375rem;--talos-range-track-height-lg: .5rem;--talos-range-thumb-size-sm: 1rem;--talos-range-thumb-size-md: 1.25rem;--talos-range-thumb-size-lg: 1.5rem;--talos-range-thumb-bg: var(--talos-bg-surface);--talos-range-thumb-border: var(--talos-primary);--talos-range-thumb-shadow: var(--talos-shadow-sm);--talos-range-thumb-hover-shadow: 0 0 0 4px rgba(37, 99, 235, .15);--talos-range-thumb-active-shadow: 0 0 0 6px rgba(37, 99, 235, .25);--talos-range-tick-color: var(--talos-text-muted);--talos-range-tick-active-color: #ffffff;--talos-range-tick-label-color: var(--talos-text-muted);--talos-range-tooltip-bg: #0f172a;--talos-range-tooltip-text: #ffffff;--talos-toggle-track-bg: var(--talos-border-default);--talos-toggle-track-bg-hover: var(--talos-border-hover);--talos-toggle-thumb-bg: var(--talos-bg-surface);--talos-snackbar-bg: var(--talos-bg-surface);--talos-snackbar-text: var(--talos-text-primary);--talos-snackbar-border: var(--talos-border-default);--talos-snackbar-border-radius: var(--talos-radius-lg);--talos-dialog-bg: var(--talos-bg-surface);--talos-dialog-border: var(--talos-border-default);--talos-dialog-radius: var(--talos-radius-xl);--talos-dialog-shadow: var(--talos-shadow-dialog);--talos-dialog-backdrop-bg: var(--talos-bg-overlay);--talos-dialog-backdrop-blur-bg: rgba(15, 23, 42, .35);--talos-dialog-title-color: var(--talos-text-primary);--talos-dialog-subtitle-color: var(--talos-text-muted);--talos-tooltip-bg: #0f172a;--talos-tooltip-text: #ffffff;--talos-dropzone-bg: var(--talos-bg-surface);--talos-dropzone-hover-bg: var(--talos-bg-subtle);--talos-dropzone-drag-bg: var(--talos-primary-subtle-bg);--talos-dropzone-border: var(--talos-border-default);--talos-dropzone-hover-border: var(--talos-border-hover);--talos-dropzone-drag-border: var(--talos-primary);--talos-dropzone-radius: var(--talos-radius-lg);--talos-dropzone-text: var(--talos-text-primary);--talos-dropzone-subtext: var(--talos-text-muted);--talos-dropzone-icon-color: var(--talos-primary);--talos-dropzone-file-bg: var(--talos-bg-surface);--talos-dropzone-file-border: var(--talos-border-default);--talos-rating-fill-warning: var(--talos-warning);--talos-rating-fill-primary: var(--talos-primary);--talos-rating-fill-danger: var(--talos-danger);--talos-rating-fill-success: var(--talos-success);--talos-rating-fill-purple: var(--talos-purple);--talos-rating-unfilled: var(--talos-border-default);--talos-rating-size-sm: 1.125rem;--talos-rating-size-md: 1.375rem;--talos-rating-size-lg: 1.75rem;--talos-rating-size-xl: 2.25rem}:root[data-theme=dark],:root.dark,[data-theme=dark],[data-mode=dark],.dark,.dark-theme{--talos-bg-canvas: #090d16;--talos-bg-surface: #0f172a;--talos-bg-subtle: #131d31;--talos-bg-overlay: rgba(3, 7, 18, .75);--talos-border-subtle: rgba(255, 255, 255, .06);--talos-border-default: rgba(255, 255, 255, .1);--talos-border-hover: rgba(255, 255, 255, .2);--talos-border-focus: #3b82f6;--talos-focus-ring: 0 0 0 3px rgba(59, 130, 246, .35);--talos-text-primary: #f8fafc;--talos-text-secondary: #e2e8f0;--talos-text-muted: #94a3b8;--talos-text-inverse: #090d16;--talos-shadow-dropdown: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);--talos-shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .1);--talos-primary: #3b82f6;--talos-primary-hover: #60a5fa;--talos-primary-active: #2563eb;--talos-primary-subtle-bg: rgba(59, 130, 246, .16);--talos-primary-subtle-bg-hover: rgba(59, 130, 246, .26);--talos-primary-subtle-border: rgba(59, 130, 246, .35);--talos-primary-text: #93c5fd;--talos-primary-solid-bg: #2563eb;--talos-primary-solid-text: #ffffff;--talos-neutral: #94a3b8;--talos-neutral-hover: #cbd5e1;--talos-neutral-active: #f1f5f9;--talos-neutral-subtle-bg: rgba(148, 163, 184, .12);--talos-neutral-subtle-bg-hover: rgba(148, 163, 184, .2);--talos-neutral-subtle-border: rgba(148, 163, 184, .25);--talos-neutral-text: #e2e8f0;--talos-neutral-solid-bg: #334155;--talos-neutral-solid-text: #f8fafc;--talos-success: #22c55e;--talos-success-hover: #4ade80;--talos-success-active: #16a34a;--talos-success-subtle-bg: rgba(34, 197, 94, .16);--talos-success-subtle-bg-hover: rgba(34, 197, 94, .26);--talos-success-subtle-border: rgba(34, 197, 94, .35);--talos-success-text: #86efac;--talos-success-solid-bg: #16a34a;--talos-success-solid-text: #ffffff;--talos-warning: #f59e0b;--talos-warning-hover: #fbbf24;--talos-warning-active: #d97706;--talos-warning-subtle-bg: rgba(245, 158, 11, .16);--talos-warning-subtle-bg-hover: rgba(245, 158, 11, .26);--talos-warning-subtle-border: rgba(245, 158, 11, .35);--talos-warning-text: #fde047;--talos-warning-solid-bg: #d97706;--talos-warning-solid-text: #ffffff;--talos-danger: #ef4444;--talos-danger-hover: #f87171;--talos-danger-active: #dc2626;--talos-danger-subtle-bg: rgba(239, 68, 68, .16);--talos-danger-subtle-bg-hover: rgba(239, 68, 68, .26);--talos-danger-subtle-border: rgba(239, 68, 68, .35);--talos-danger-text: #fca5a5;--talos-danger-solid-bg: #dc2626;--talos-danger-solid-text: #ffffff;--talos-info: #0ea5e9;--talos-info-hover: #38bdf8;--talos-info-active: #0284c7;--talos-info-subtle-bg: rgba(14, 165, 233, .16);--talos-info-subtle-bg-hover: rgba(14, 165, 233, .26);--talos-info-subtle-border: rgba(14, 165, 233, .35);--talos-info-text: #7dd3fc;--talos-info-solid-bg: #0284c7;--talos-info-solid-text: #ffffff;--talos-purple: #8b5cf6;--talos-purple-hover: #a78bfa;--talos-purple-active: #7c3aed;--talos-purple-subtle-bg: rgba(139, 92, 246, .16);--talos-purple-subtle-bg-hover: rgba(139, 92, 246, .26);--talos-purple-subtle-border: rgba(139, 92, 246, .35);--talos-purple-text: #c4b5fd;--talos-purple-solid-bg: #7c3aed;--talos-purple-solid-text: #ffffff;--talos-tooltip-bg: #1e293b;--talos-tooltip-text: #f8fafc;--talos-range-tooltip-bg: #1e293b;--talos-range-tooltip-text: #f8fafc;--talos-range-tick-active-color: #f8fafc;--talos-loading-overlay-bg: rgba(9, 13, 22, .8);--talos-range-thumb-shadow: 0 2px 4px rgba(0, 0, 0, .5)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not(.light){--talos-bg-canvas: #090d16;--talos-bg-surface: #0f172a;--talos-bg-subtle: #131d31;--talos-bg-overlay: rgba(3, 7, 18, .75);--talos-border-subtle: rgba(255, 255, 255, .06);--talos-border-default: rgba(255, 255, 255, .1);--talos-border-hover: rgba(255, 255, 255, .2);--talos-border-focus: #3b82f6;--talos-focus-ring: 0 0 0 3px rgba(59, 130, 246, .35);--talos-text-primary: #f8fafc;--talos-text-secondary: #e2e8f0;--talos-text-muted: #94a3b8;--talos-text-inverse: #090d16;--talos-primary: #3b82f6;--talos-primary-hover: #60a5fa;--talos-primary-active: #2563eb;--talos-primary-subtle-bg: rgba(59, 130, 246, .16);--talos-primary-subtle-bg-hover: rgba(59, 130, 246, .26);--talos-primary-subtle-border: rgba(59, 130, 246, .35);--talos-primary-text: #93c5fd;--talos-neutral: #94a3b8;--talos-neutral-hover: #cbd5e1;--talos-neutral-active: #f1f5f9;--talos-neutral-subtle-bg: rgba(148, 163, 184, .12);--talos-neutral-subtle-bg-hover: rgba(148, 163, 184, .2);--talos-neutral-subtle-border: rgba(148, 163, 184, .25);--talos-neutral-text: #e2e8f0;--talos-success: #22c55e;--talos-success-hover: #4ade80;--talos-success-active: #16a34a;--talos-success-subtle-bg: rgba(34, 197, 94, .16);--talos-success-subtle-bg-hover: rgba(34, 197, 94, .26);--talos-success-subtle-border: rgba(34, 197, 94, .35);--talos-success-text: #86efac;--talos-warning: #f59e0b;--talos-warning-hover: #fbbf24;--talos-warning-active: #d97706;--talos-warning-subtle-bg: rgba(245, 158, 11, .16);--talos-warning-subtle-bg-hover: rgba(245, 158, 11, .26);--talos-warning-subtle-border: rgba(245, 158, 11, .35);--talos-warning-text: #fde047;--talos-danger: #ef4444;--talos-danger-hover: #f87171;--talos-danger-active: #dc2626;--talos-danger-subtle-bg: rgba(239, 68, 68, .16);--talos-danger-subtle-bg-hover: rgba(239, 68, 68, .26);--talos-danger-subtle-border: rgba(239, 68, 68, .35);--talos-danger-text: #fca5a5;--talos-info: #0ea5e9;--talos-info-hover: #38bdf8;--talos-info-active: #0284c7;--talos-info-subtle-bg: rgba(14, 165, 233, .16);--talos-info-subtle-bg-hover: rgba(14, 165, 233, .26);--talos-info-subtle-border: rgba(14, 165, 233, .35);--talos-info-text: #7dd3fc;--talos-purple: #8b5cf6;--talos-purple-hover: #a78bfa;--talos-purple-active: #7c3aed;--talos-purple-subtle-bg: rgba(139, 92, 246, .16);--talos-purple-subtle-bg-hover: rgba(139, 92, 246, .26);--talos-purple-subtle-border: rgba(139, 92, 246, .35);--talos-purple-text: #c4b5fd;--talos-tooltip-bg: #1e293b;--talos-tooltip-text: #f8fafc;--talos-range-tooltip-bg: #1e293b;--talos-range-tooltip-text: #f8fafc;--talos-range-tick-active-color: #f8fafc}}:host{display:block;width:100%;box-sizing:border-box}.talos-range-wrapper{display:flex;flex-direction:column;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none;font-family:inherit;--range-accent: var(--talos-range-track-fill, var(--talos-primary-color));--range-accent-hover: var(--talos-primary-hover, #1d4ed8);--range-focus-glow: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--range-track-h: var(--talos-range-track-height-md, .375rem);--range-thumb-d: var(--talos-range-thumb-size-md, 1.25rem);--range-thumb-border-width: 2px;--range-tick-w: 2px;--range-tick-h: 8px;--range-font-size: var(--talos-control-font-size, .8125rem)}.talos-range-wrapper.size-sm{--range-track-h: var(--talos-range-track-height-sm, .25rem);--range-thumb-d: var(--talos-range-thumb-size-sm, 1rem);--range-font-size: .75rem;--range-tick-h: 6px}.talos-range-wrapper.size-lg{--range-track-h: var(--talos-range-track-height-lg, .5rem);--range-thumb-d: var(--talos-range-thumb-size-lg, 1.5rem);--range-font-size: .875rem;--range-tick-h: 10px}.talos-range-wrapper.variant-primary{--range-accent: var(--talos-primary-color, #2563eb);--range-accent-hover: var(--talos-primary-hover, #1d4ed8);--range-focus-glow: 0 0 0 3px rgba(37, 99, 235, .2)}.talos-range-wrapper.variant-secondary{--range-accent: #475569;--range-accent-hover: #334155;--range-focus-glow: 0 0 0 3px rgba(71, 85, 105, .2)}.talos-range-wrapper.variant-success{--range-accent: #16a34a;--range-accent-hover: #15803d;--range-focus-glow: 0 0 0 3px rgba(22, 163, 74, .2)}.talos-range-wrapper.variant-warning{--range-accent: #d97706;--range-accent-hover: #b45309;--range-focus-glow: 0 0 0 3px rgba(217, 119, 6, .2)}.talos-range-wrapper.variant-danger{--range-accent: var(--talos-error-color, #ef4444);--range-accent-hover: #dc2626;--range-focus-glow: 0 0 0 3px rgba(239, 68, 68, .2)}.talos-range-wrapper.variant-info{--range-accent: #0284c7;--range-accent-hover: #0369a1;--range-focus-glow: 0 0 0 3px rgba(2, 132, 199, .2)}.talos-range-wrapper.is-invalid{--range-accent: var(--talos-error-color, #ef4444);--range-focus-glow: 0 0 0 3px rgba(239, 68, 68, .25)}.talos-range-wrapper.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.talos-range-wrapper.is-disabled .talos-range-thumb{cursor:not-allowed;border-color:var(--talos-range-track-disabled-fill, #94a3b8);background-color:var(--talos-range-track-disabled-bg, #cbd5e1);box-shadow:none}.talos-range-wrapper.is-disabled .talos-range-fill{background-color:var(--talos-range-track-disabled-fill, #94a3b8)}.talos-range-wrapper.is-readonly .talos-range-slider,.talos-range-wrapper.is-readonly .talos-range-thumb{cursor:default}.talos-range-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}.talos-range-label-group{display:flex;flex-direction:column;gap:.125rem}.talos-range-label{font-size:var(--range-font-size);font-weight:600;color:var(--talos-text-color, #0f172a)}.talos-range-hint{font-size:.75rem;color:var(--talos-text-muted, #64748b)}.talos-range-value-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;font-size:.75rem;font-weight:600;border-radius:var(--talos-border-radius, .375rem);background-color:var(--talos-primary-light, #eff6ff);color:var(--range-accent)}.talos-range-inputs-group{display:flex;align-items:center;gap:.375rem}.talos-range-inputs-separator{color:var(--talos-text-muted, #64748b);font-weight:500}.talos-range-number-box{display:inline-flex;align-items:center;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-border-radius, .375rem);padding:0 .375rem;height:1.875rem;transition:border-color .15s ease,box-shadow .15s ease}.talos-range-number-box:focus-within{border-color:var(--range-accent);box-shadow:var(--range-focus-glow)}.talos-range-input-affix{font-size:.75rem;color:var(--talos-text-muted, #64748b);-webkit-user-select:none;user-select:none}.talos-range-number-input{width:3.5rem;border:none;background:transparent;padding:.125rem .25rem;font-size:.8125rem;font-weight:500;color:var(--talos-text-color, #0f172a);text-align:right;outline:none;font-family:inherit}.talos-range-number-input::-webkit-inner-spin-button,.talos-range-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.talos-range-number-input{-moz-appearance:textfield}.talos-range-slider{position:relative;width:100%;height:calc(var(--range-thumb-d) + .5rem);display:flex;align-items:center;cursor:pointer;touch-action:none;padding:0 calc(var(--range-thumb-d) / 2);box-sizing:border-box}.talos-range-slider.is-active{cursor:grabbing}.talos-range-track{position:relative;width:100%;height:var(--range-track-h);background-color:var(--talos-range-track-bg, #e2e8f0);border-radius:9999px;overflow:visible}.talos-range-fill{position:absolute;top:0;bottom:0;background-color:var(--range-accent);border-radius:9999px;transition:background-color .18s ease;pointer-events:none}.talos-range-ticks{position:absolute;inset:0;pointer-events:none}.talos-range-tick{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--range-tick-w);height:var(--range-tick-h);background-color:var(--talos-range-tick-color, #94a3b8);border-radius:1px;pointer-events:auto;cursor:pointer;transition:transform .15s ease,background-color .15s ease}.talos-range-tick.is-active{background-color:var(--talos-range-tick-active-color, #ffffff);box-shadow:0 0 2px #0000004d}.talos-range-tick:hover{transform:translate(-50%,-50%) scale(1.4)}.talos-range-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--range-thumb-d);height:var(--range-thumb-d);background-color:var(--talos-range-thumb-bg, #ffffff);border:var(--range-thumb-border-width) solid var(--range-accent);border-radius:50%;box-shadow:var(--talos-range-thumb-shadow, 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08));cursor:grab;outline:none;box-sizing:border-box;transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .12s cubic-bezier(.4,0,.2,1),border-color .12s cubic-bezier(.4,0,.2,1);z-index:2}.talos-range-thumb:hover{box-shadow:var(--talos-range-thumb-hover-shadow, 0 0 0 4px rgba(37, 99, 235, .15));transform:translate(-50%,-50%) scale(1.08)}.talos-range-thumb.is-focused,.talos-range-thumb:focus-visible{box-shadow:var(--range-focus-glow);transform:translate(-50%,-50%) scale(1.12);z-index:3}.talos-range-thumb.is-dragging{cursor:grabbing;box-shadow:var(--talos-range-thumb-active-shadow, 0 0 0 6px rgba(37, 99, 235, .25));transform:translate(-50%,-50%) scale(1.16);z-index:4}.talos-range-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);background-color:var(--talos-range-tooltip-bg, #1e293b);color:var(--talos-range-tooltip-text, #ffffff);font-size:.6875rem;font-weight:600;padding:.1875rem .4375rem;border-radius:.25rem;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s ease;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;z-index:10}.talos-range-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:4px;border-style:solid;border-color:var(--talos-range-tooltip-bg, #1e293b) transparent transparent transparent}.talos-range-tooltip.visible{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.talos-range-labels{position:relative;width:100%;margin-top:.25rem;height:1.125rem;padding:0 calc(var(--range-thumb-d) / 2);box-sizing:border-box}.talos-range-label-item{position:absolute;top:0;transform:translate(-50%);font-size:.6875rem;color:var(--talos-range-tick-label-color, var(--talos-text-muted, #64748b));white-space:nowrap;cursor:pointer;transition:color .15s ease,font-weight .15s ease}.talos-range-label-item.is-active{color:var(--range-accent);font-weight:600}.talos-range-label-item:hover{color:var(--talos-text-color, #0f172a)}\n"] });
+        ], viewQueries: [{ propertyName: "trackContainerRef", first: true, predicate: ["sliderTrackContainer"], descendants: true, isSignal: true }, { propertyName: "thumb0Ref", first: true, predicate: ["thumb0"], descendants: true, isSignal: true }, { propertyName: "thumb1Ref", first: true, predicate: ["thumb1"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"talos-range-wrapper\" [class.is-disabled]=\"effectiveDisabled()\" [class.is-readonly]=\"readonly()\"\n  [class.is-invalid]=\"effectiveInvalid()\" [class.is-range]=\"isDualRange()\" [class.size-sm]=\"size() === 'sm'\"\n  [class.size-md]=\"size() === 'md'\" [class.size-lg]=\"size() === 'lg'\" [class.variant-primary]=\"variant() === 'primary'\"\n  [class.variant-secondary]=\"variant() === 'secondary'\" [class.variant-success]=\"variant() === 'success'\"\n  [class.variant-warning]=\"variant() === 'warning'\" [class.variant-danger]=\"variant() === 'danger'\"\n  [class.variant-info]=\"variant() === 'info'\">\n  <!-- Header: Label, Hint & Optional Value Display / Synchronized Number Inputs -->\n  @if (label() || hint() || showValueBadge() || showInputs()) {\n  <div class=\"talos-range-header\">\n    <div class=\"talos-range-label-group\" [class.is-floating-label]=\"isFloatingMode()\">\n      @if (label()) {\n      <label class=\"talos-range-label\" [class.is-floated]=\"isFloatingMode()\" [attr.for]=\"elementId() + '-thumb-0'\">\n        {{ label() }}\n      </label>\n      }\n      @if (hint()) {\n      <span class=\"talos-range-hint\">{{ hint() }}</span>\n      }\n    </div>\n\n    @if (showInputs()) {\n    <div class=\"talos-range-inputs-group\">\n      @if (isDualRange()) {\n      <div class=\"talos-range-number-box\">\n        @if (prefix()) {\n        <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n        }\n        <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num-0'\" [min]=\"min()\"\n          [max]=\"endValue()\" [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"startValue()\"\n          (change)=\"onNumberInputChange(0, $event)\" (keydown.enter)=\"onNumberInputChange(0, $event)\" />\n        @if (suffix()) {\n        <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n        }\n      </div>\n      <span class=\"talos-range-inputs-separator\">\u2013</span>\n      <div class=\"talos-range-number-box\">\n        @if (prefix()) {\n        <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n        }\n        <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num-1'\" [min]=\"startValue()\"\n          [max]=\"max()\" [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"endValue()\"\n          (change)=\"onNumberInputChange(1, $event)\" (keydown.enter)=\"onNumberInputChange(1, $event)\" />\n        @if (suffix()) {\n        <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n        }\n      </div>\n      } @else {\n      <div class=\"talos-range-number-box\">\n        @if (prefix()) {\n        <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n        }\n        <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num'\" [min]=\"min()\" [max]=\"max()\"\n          [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"startValue()\"\n          (change)=\"onNumberInputChange(0, $event)\" (keydown.enter)=\"onNumberInputChange(0, $event)\" />\n        @if (suffix()) {\n        <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n        }\n      </div>\n      }\n    </div>\n    } @else if (showValueBadge()) {\n    <div class=\"talos-range-value-badge\">\n      @if (isDualRange()) {\n      <span>{{ formatDisplayValue(startValue()) }} \u2013 {{ formatDisplayValue(endValue()) }}</span>\n      } @else {\n      <span>{{ formatDisplayValue(startValue()) }}</span>\n      }\n    </div>\n    }\n  </div>\n  }\n\n  <!-- Range Slider Container (Track, Fills, Ticks, Thumbs) -->\n  <div #sliderTrackContainer class=\"talos-range-slider\" [class.is-active]=\"isDragging()\"\n    (pointerdown)=\"onTrackPointerDown($event)\">\n    <!-- Background Track -->\n    <div class=\"talos-range-track\">\n      <!-- Active Filled Range Segment -->\n      <div class=\"talos-range-fill\" [style.left.%]=\"fillLeftPercent()\" [style.width.%]=\"fillWidthPercent()\"></div>\n\n      <!-- Tick Marks -->\n      @if (ticks().length > 0 && (showTicks() || marks())) {\n      <div class=\"talos-range-ticks\">\n        @for (tick of ticks(); track tick.value) {\n        <div class=\"talos-range-tick\" [class.is-active]=\"tick.active\" [style.left.%]=\"tick.percent\"\n          (click)=\"onTickClick(tick, $event)\"></div>\n        }\n      </div>\n      }\n    </div>\n\n    <!-- Thumb 0 (Primary or Lower Bound Handle) -->\n    <div #thumb0 class=\"talos-range-thumb\" [class.is-focused]=\"focusedThumb() === 0\"\n      [class.is-dragging]=\"draggingThumb() === 0\" [class.is-tooltip-visible]=\"isTooltipVisible(0)\"\n      [style.left.%]=\"thumb0Percent()\" tabindex=\"0\" role=\"slider\" [attr.id]=\"elementId() + '-thumb-0'\"\n      [attr.aria-label]=\"isDualRange() ? ariaLabelStart() : ariaLabel()\" [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"isDualRange() ? endValue() : max()\" [attr.aria-valuenow]=\"startValue()\"\n      [attr.aria-valuetext]=\"formatDisplayValue(startValue())\"\n      [attr.aria-disabled]=\"effectiveDisabled() ? 'true' : null\" (pointerdown)=\"onThumbPointerDown(0, $event)\"\n      (keydown)=\"onThumbKeyDown(0, $event)\" (focus)=\"onThumbFocus(0)\" (blur)=\"onThumbBlur(0)\"\n      (mouseenter)=\"onThumbMouseEnter(0)\" (mouseleave)=\"onThumbMouseLeave(0)\">\n      <!-- Floating Value Tooltip -->\n      @if (showTooltip() !== 'none') {\n      <div class=\"talos-range-tooltip\" [class.visible]=\"isTooltipVisible(0)\">\n        {{ formatDisplayValue(startValue()) }}\n      </div>\n      }\n    </div>\n\n    <!-- Thumb 1 (Upper Bound Handle for Dual Range) -->\n    @if (isDualRange()) {\n    <div #thumb1 class=\"talos-range-thumb\" [class.is-focused]=\"focusedThumb() === 1\"\n      [class.is-dragging]=\"draggingThumb() === 1\" [class.is-tooltip-visible]=\"isTooltipVisible(1)\"\n      [style.left.%]=\"thumb1Percent()\" tabindex=\"0\" role=\"slider\" [attr.id]=\"elementId() + '-thumb-1'\"\n      [attr.aria-label]=\"ariaLabelEnd()\" [attr.aria-valuemin]=\"startValue()\" [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"endValue()\" [attr.aria-valuetext]=\"formatDisplayValue(endValue())\"\n      [attr.aria-disabled]=\"effectiveDisabled() ? 'true' : null\" (pointerdown)=\"onThumbPointerDown(1, $event)\"\n      (keydown)=\"onThumbKeyDown(1, $event)\" (focus)=\"onThumbFocus(1)\" (blur)=\"onThumbBlur(1)\"\n      (mouseenter)=\"onThumbMouseEnter(1)\" (mouseleave)=\"onThumbMouseLeave(1)\">\n      <!-- Floating Value Tooltip -->\n      @if (showTooltip() !== 'none') {\n      <div class=\"talos-range-tooltip\" [class.visible]=\"isTooltipVisible(1)\">\n        {{ formatDisplayValue(endValue()) }}\n      </div>\n      }\n    </div>\n    }\n  </div>\n\n  <!-- Interval / Step Labels under track -->\n  @if (labels().length > 0 && (showIntervals() || showLabels() || marks())) {\n  <div class=\"talos-range-labels\">\n    @for (item of labels(); track item.value) {\n    <span class=\"talos-range-label-item\" [class.is-active]=\"item.active\" [style.left.%]=\"item.percent\"\n      (click)=\"onLabelClick(item, $event)\">\n      {{ item.label }}\n    </span>\n    }\n  </div>\n  }\n</div>", styles: [":root{--talos-font-sans: \"Inter\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--talos-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--talos-font-display: var(--talos-font-sans);--talos-radius-none: 0px;--talos-radius-xs: .125rem;--talos-radius-sm: .25rem;--talos-radius-md: .375rem;--talos-radius-lg: .5rem;--talos-radius-xl: .75rem;--talos-radius-2xl: 1rem;--talos-radius-full: 9999px;--talos-height-xs: 1.625rem;--talos-height-sm: 2rem;--talos-height-md: 2.25rem;--talos-height-lg: 2.625rem;--talos-font-size-2xs: .6875rem;--talos-font-size-xs: .75rem;--talos-font-size-sm: .8125rem;--talos-font-size-base: .875rem;--talos-font-size-md: .875rem;--talos-font-size-lg: 1rem;--talos-font-size-xl: 1.125rem;--talos-font-size-2xl: 1.25rem;--talos-font-size-3xl: 1.5rem;--talos-font-size-4xl: 1.875rem;--talos-font-size-5xl: 2.25rem;--talos-font-weight-light: 300;--talos-font-weight-regular: 400;--talos-font-weight-medium: 500;--talos-font-weight-semibold: 600;--talos-font-weight-bold: 700;--talos-font-weight-extrabold: 800;--talos-line-height-none: 1;--talos-line-height-tight: 1.25;--talos-line-height-snug: 1.375;--talos-line-height-normal: 1.5;--talos-line-height-relaxed: 1.625;--talos-line-height-loose: 2;--talos-control-padding-x: .625rem;--talos-control-font-size: var(--talos-font-size-sm);--talos-control-height: var(--talos-height-md);--talos-border-radius: var(--talos-radius-md);--talos-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--talos-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .08), 0 1px 2px -1px rgba(0, 0, 0, .05);--talos-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04);--talos-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04);--talos-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .05);--talos-shadow-dialog: var(--talos-shadow-xl);--talos-shadow-dropdown: 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04);--talos-transition: .18s cubic-bezier(.4, 0, .2, 1);--talos-transition-slow: .28s cubic-bezier(.4, 0, .2, 1);--talos-bg-canvas: #f8fafc;--talos-bg-surface: #ffffff;--talos-bg-subtle: #f1f5f9;--talos-bg-overlay: rgba(15, 23, 42, .5);--talos-border-subtle: #f1f5f9;--talos-border-default: #cbd5e1;--talos-border-hover: #94a3b8;--talos-border-focus: #2563eb;--talos-focus-ring: 0 0 0 3px rgba(37, 99, 235, .18);--talos-text-primary: #0f172a;--talos-text-secondary: #334155;--talos-text-muted: #64748b;--talos-text-inverse: #ffffff;--talos-bg-color: var(--talos-bg-canvas);--talos-card-bg: var(--talos-bg-surface);--talos-card-bg-subtle: var(--talos-bg-subtle);--talos-border-color: var(--talos-border-default);--talos-text-color: var(--talos-text-primary);--talos-error-color: #ef4444;--talos-warning-color: #d97706;--talos-success-color: #16a34a;--bg-color: var(--talos-bg-canvas);--bg-subtle: var(--talos-bg-subtle);--card-bg: var(--talos-bg-surface);--card-bg-subtle: var(--talos-bg-subtle);--border-color: var(--talos-border-default);--border-hover: var(--talos-border-hover);--border-focus: var(--talos-border-focus);--text-color: var(--talos-text-primary);--text-muted: var(--talos-text-muted);--primary-color: var(--talos-primary);--primary-hover: var(--talos-primary-hover);--primary-active: var(--talos-primary-active);--primary-light: var(--talos-primary-subtle-bg);--primary-light-hover: var(--talos-primary-subtle-bg-hover);--talos-primary: #2563eb;--talos-primary-hover: #1d4ed8;--talos-primary-active: #1e40af;--talos-primary-subtle-bg: #eff6ff;--talos-primary-subtle-bg-hover: #dbeafe;--talos-primary-subtle-border: #bfdbfe;--talos-primary-text: #1e40af;--talos-primary-solid-bg: #2563eb;--talos-primary-solid-text: #ffffff;--talos-primary-color: var(--talos-primary);--talos-primary-light: var(--talos-primary-subtle-bg);--talos-primary-light-hover: var(--talos-primary-subtle-bg-hover);--talos-neutral: #475569;--talos-neutral-hover: #334155;--talos-neutral-active: #1e293b;--talos-neutral-subtle-bg: #f8fafc;--talos-neutral-subtle-bg-hover: #f1f5f9;--talos-neutral-subtle-border: #e2e8f0;--talos-neutral-text: #334155;--talos-neutral-solid-bg: #475569;--talos-neutral-solid-text: #ffffff;--talos-success: #16a34a;--talos-success-hover: #15803d;--talos-success-active: #166534;--talos-success-subtle-bg: #f0fdf4;--talos-success-subtle-bg-hover: #dcfce7;--talos-success-subtle-border: #bbf7d0;--talos-success-text: #166534;--talos-success-solid-bg: #16a34a;--talos-success-solid-text: #ffffff;--talos-warning: #d97706;--talos-warning-hover: #b45309;--talos-warning-active: #92400e;--talos-warning-subtle-bg: #fffbeb;--talos-warning-subtle-bg-hover: #fef3c7;--talos-warning-subtle-border: #fde68a;--talos-warning-text: #92400e;--talos-warning-solid-bg: #d97706;--talos-warning-solid-text: #ffffff;--talos-danger: #ef4444;--talos-danger-hover: #dc2626;--talos-danger-active: #b91c1c;--talos-danger-subtle-bg: #fef2f2;--talos-danger-subtle-bg-hover: #fee2e2;--talos-danger-subtle-border: #fecaca;--talos-danger-text: #991b1b;--talos-danger-solid-bg: #dc2626;--talos-danger-solid-text: #ffffff;--talos-info: #0284c7;--talos-info-hover: #0369a1;--talos-info-active: #075985;--talos-info-subtle-bg: #f0f9ff;--talos-info-subtle-bg-hover: #e0f2fe;--talos-info-subtle-border: #bae6fd;--talos-info-text: #0369a1;--talos-info-solid-bg: #0284c7;--talos-info-solid-text: #ffffff;--talos-purple: #7c3aed;--talos-purple-hover: #6d28d9;--talos-purple-active: #5b21b6;--talos-purple-subtle-bg: #f5f3ff;--talos-purple-subtle-bg-hover: #ede9fe;--talos-purple-subtle-border: #ddd6fe;--talos-purple-text: #6d28d9;--talos-purple-solid-bg: #7c3aed;--talos-purple-solid-text: #ffffff;--talos-input-bg: var(--talos-bg-surface);--talos-input-border: var(--talos-border-default);--talos-input-border-hover: var(--talos-border-hover);--talos-input-border-focus: var(--talos-border-focus);--talos-input-color: var(--talos-text-primary);--talos-input-placeholder-color: var(--talos-text-muted);--talos-input-disabled-bg: var(--talos-bg-subtle);--talos-input-disabled-border: var(--talos-border-default);--talos-input-disabled-color: var(--talos-text-muted);--talos-input-radius: var(--talos-radius-md);--talos-input-height: var(--talos-height-md);--talos-affix-btn-size-sm: 1.375rem;--talos-affix-btn-size-md: 1.5rem;--talos-affix-btn-size-lg: 1.75rem;--talos-affix-btn-radius: var(--talos-radius-sm, .25rem);--talos-affix-btn-icon-size-sm: .8125rem;--talos-affix-btn-icon-size-md: .875rem;--talos-affix-btn-icon-size-lg: 1rem;--talos-affix-btn-color: var(--talos-text-muted, #64748b);--talos-affix-btn-hover-color: var(--talos-text-color, #0f172a);--talos-affix-btn-hover-bg: var(--talos-btn-ghost-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));--talos-affix-btn-active-bg: var(--talos-btn-ghost-active-bg, rgba(148, 163, 184, .25));--talos-sidebar-width: 260px;--talos-sidebar-collapsed-width: 68px;--talos-nav-bg: var(--talos-bg-surface);--talos-nav-border-color: var(--talos-border-subtle);--talos-active-nav-bg: var(--talos-primary-subtle-bg);--talos-active-nav-text: var(--talos-primary);--talos-nav-hover-bg: var(--talos-bg-subtle);--talos-nav-hover-text: var(--talos-text-primary);--talos-avatar-bg: var(--talos-primary-subtle-bg);--talos-avatar-text: var(--talos-primary-text);--talos-badge-bg: var(--talos-primary-subtle-bg);--talos-badge-text: var(--talos-primary-text);--talos-header-bg: var(--talos-bg-surface);--talos-header-border-color: var(--talos-border-subtle);--talos-right-panel-bg: var(--talos-bg-surface);--talos-right-panel-border: var(--talos-border-subtle);--talos-loading-overlay-bg: rgba(255, 255, 255, .75);--talos-dropdown-bg: var(--talos-bg-surface);--talos-dropdown-border: var(--talos-border-default);--talos-dropdown-shadow: var(--talos-shadow-dropdown);--talos-dropdown-hover-bg: var(--talos-bg-subtle);--talos-dropdown-selected-bg: var(--talos-primary-subtle-bg);--talos-btn-font-family: inherit;--talos-btn-border-radius: var(--talos-radius-md);--talos-btn-font-weight: 600;--talos-btn-transition: background-color var(--talos-transition), border-color var(--talos-transition), color var(--talos-transition), box-shadow var(--talos-transition), opacity var(--talos-transition);--talos-btn-ripple-color: rgba(255, 255, 255, .35);--talos-btn-primary-bg: var(--talos-primary-solid-bg);--talos-btn-primary-hover: var(--talos-primary-hover);--talos-btn-primary-active: var(--talos-primary-active);--talos-btn-primary-text: var(--talos-primary-solid-text);--talos-btn-secondary-bg: var(--talos-neutral-solid-bg);--talos-btn-secondary-hover: var(--talos-neutral-hover);--talos-btn-secondary-active: var(--talos-neutral-active);--talos-btn-secondary-text: var(--talos-neutral-solid-text);--talos-btn-outline-bg: transparent;--talos-btn-outline-border: var(--talos-border-default);--talos-btn-outline-hover-bg: var(--talos-bg-subtle);--talos-btn-outline-hover-border: var(--talos-border-hover);--talos-btn-outline-text: var(--talos-text-secondary);--talos-btn-ghost-bg: transparent;--talos-btn-ghost-text: var(--talos-text-muted);--talos-btn-ghost-hover-bg: var(--talos-bg-subtle);--talos-btn-ghost-hover-text: var(--talos-text-primary);--talos-btn-ghost-active-bg: var(--talos-neutral-subtle-bg-hover);--talos-btn-danger-bg: var(--talos-danger-solid-bg);--talos-btn-danger-hover: var(--talos-danger-hover);--talos-btn-danger-active: var(--talos-danger-active);--talos-btn-danger-text: var(--talos-danger-solid-text);--talos-btn-success-bg: var(--talos-success-solid-bg);--talos-btn-success-hover: var(--talos-success-hover);--talos-btn-success-active: var(--talos-success-active);--talos-btn-success-text: var(--talos-success-solid-text);--talos-btn-height-xs: var(--talos-height-xs, 1.625rem);--talos-btn-height-sm: var(--talos-height-sm);--talos-btn-height-md: var(--talos-height-md);--talos-btn-height-lg: var(--talos-height-lg);--talos-btn-padding-x-xs: .5rem;--talos-btn-padding-x-sm: .625rem;--talos-btn-padding-x-md: .875rem;--talos-btn-padding-x-lg: 1.125rem;--talos-btn-font-size-xs: var(--talos-font-size-2xs, .6875rem);--talos-btn-font-size-sm: var(--talos-font-size-xs);--talos-btn-font-size-md: var(--talos-font-size-sm);--talos-btn-font-size-lg: var(--talos-font-size-md);--talos-category-bar-gap: 2px;--talos-category-bar-track-bg: var(--talos-bg-subtle);--talos-category-bar-border-radius: var(--talos-radius-md);--talos-category-bar-height-xs: .25rem;--talos-category-bar-height-sm: .375rem;--talos-category-bar-height-md: .5rem;--talos-category-bar-height-lg: .75rem;--talos-category-bar-marker-ring: var(--talos-bg-surface);--talos-range-track-bg: var(--talos-border-default);--talos-range-track-fill: var(--talos-primary);--talos-range-track-disabled-bg: var(--talos-border-subtle);--talos-range-track-disabled-fill: var(--talos-text-muted);--talos-range-track-height-sm: .25rem;--talos-range-track-height-md: .375rem;--talos-range-track-height-lg: .5rem;--talos-range-thumb-size-sm: 1rem;--talos-range-thumb-size-md: 1.25rem;--talos-range-thumb-size-lg: 1.5rem;--talos-range-thumb-bg: var(--talos-bg-surface);--talos-range-thumb-border: var(--talos-primary);--talos-range-thumb-shadow: var(--talos-shadow-sm);--talos-range-thumb-hover-shadow: 0 0 0 4px rgba(37, 99, 235, .15);--talos-range-thumb-active-shadow: 0 0 0 6px rgba(37, 99, 235, .25);--talos-range-tick-color: var(--talos-text-muted);--talos-range-tick-active-color: #ffffff;--talos-range-tick-label-color: var(--talos-text-muted);--talos-range-tooltip-bg: #0f172a;--talos-range-tooltip-text: #ffffff;--talos-toggle-track-bg: var(--talos-border-default);--talos-toggle-track-bg-hover: var(--talos-border-hover);--talos-toggle-thumb-bg: var(--talos-bg-surface);--talos-snackbar-bg: var(--talos-bg-surface);--talos-snackbar-text: var(--talos-text-primary);--talos-snackbar-border: var(--talos-border-default);--talos-snackbar-border-radius: var(--talos-radius-lg);--talos-dialog-bg: var(--talos-bg-surface);--talos-dialog-border: var(--talos-border-default);--talos-dialog-radius: var(--talos-radius-xl);--talos-dialog-shadow: var(--talos-shadow-dialog);--talos-dialog-backdrop-bg: var(--talos-bg-overlay);--talos-dialog-backdrop-blur-bg: rgba(15, 23, 42, .35);--talos-dialog-title-color: var(--talos-text-primary);--talos-dialog-subtitle-color: var(--talos-text-muted);--talos-tooltip-bg: #0f172a;--talos-tooltip-text: #ffffff;--talos-dropzone-bg: var(--talos-bg-surface);--talos-dropzone-hover-bg: var(--talos-bg-subtle);--talos-dropzone-drag-bg: var(--talos-primary-subtle-bg);--talos-dropzone-border: var(--talos-border-default);--talos-dropzone-hover-border: var(--talos-border-hover);--talos-dropzone-drag-border: var(--talos-primary);--talos-dropzone-radius: var(--talos-radius-lg);--talos-dropzone-text: var(--talos-text-primary);--talos-dropzone-subtext: var(--talos-text-muted);--talos-dropzone-icon-color: var(--talos-primary);--talos-dropzone-file-bg: var(--talos-bg-surface);--talos-dropzone-file-border: var(--talos-border-default);--talos-rating-fill-warning: var(--talos-warning);--talos-rating-fill-primary: var(--talos-primary);--talos-rating-fill-danger: var(--talos-danger);--talos-rating-fill-success: var(--talos-success);--talos-rating-fill-purple: var(--talos-purple);--talos-rating-unfilled: var(--talos-border-default);--talos-rating-size-sm: 1.125rem;--talos-rating-size-md: 1.375rem;--talos-rating-size-lg: 1.75rem;--talos-rating-size-xl: 2.25rem}:root[data-theme=dark],:root.dark,[data-theme=dark],[data-mode=dark],.dark,.dark-theme{--talos-bg-canvas: #090d16;--talos-bg-surface: #0f172a;--talos-bg-subtle: #131d31;--talos-bg-overlay: rgba(3, 7, 18, .75);--talos-border-subtle: rgba(255, 255, 255, .06);--talos-border-default: rgba(255, 255, 255, .1);--talos-border-hover: rgba(255, 255, 255, .2);--talos-border-focus: #3b82f6;--talos-focus-ring: 0 0 0 3px rgba(59, 130, 246, .35);--talos-text-primary: #f8fafc;--talos-text-secondary: #e2e8f0;--talos-text-muted: #94a3b8;--talos-text-inverse: #090d16;--talos-shadow-dropdown: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);--talos-shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .1);--talos-primary: #3b82f6;--talos-primary-hover: #60a5fa;--talos-primary-active: #2563eb;--talos-primary-subtle-bg: rgba(59, 130, 246, .16);--talos-primary-subtle-bg-hover: rgba(59, 130, 246, .26);--talos-primary-subtle-border: rgba(59, 130, 246, .35);--talos-primary-text: #93c5fd;--talos-primary-solid-bg: #2563eb;--talos-primary-solid-text: #ffffff;--talos-neutral: #94a3b8;--talos-neutral-hover: #cbd5e1;--talos-neutral-active: #f1f5f9;--talos-neutral-subtle-bg: rgba(148, 163, 184, .12);--talos-neutral-subtle-bg-hover: rgba(148, 163, 184, .2);--talos-neutral-subtle-border: rgba(148, 163, 184, .25);--talos-neutral-text: #e2e8f0;--talos-neutral-solid-bg: #334155;--talos-neutral-solid-text: #f8fafc;--talos-success: #22c55e;--talos-success-hover: #4ade80;--talos-success-active: #16a34a;--talos-success-subtle-bg: rgba(34, 197, 94, .16);--talos-success-subtle-bg-hover: rgba(34, 197, 94, .26);--talos-success-subtle-border: rgba(34, 197, 94, .35);--talos-success-text: #86efac;--talos-success-solid-bg: #16a34a;--talos-success-solid-text: #ffffff;--talos-warning: #f59e0b;--talos-warning-hover: #fbbf24;--talos-warning-active: #d97706;--talos-warning-subtle-bg: rgba(245, 158, 11, .16);--talos-warning-subtle-bg-hover: rgba(245, 158, 11, .26);--talos-warning-subtle-border: rgba(245, 158, 11, .35);--talos-warning-text: #fde047;--talos-warning-solid-bg: #d97706;--talos-warning-solid-text: #ffffff;--talos-danger: #ef4444;--talos-danger-hover: #f87171;--talos-danger-active: #dc2626;--talos-danger-subtle-bg: rgba(239, 68, 68, .16);--talos-danger-subtle-bg-hover: rgba(239, 68, 68, .26);--talos-danger-subtle-border: rgba(239, 68, 68, .35);--talos-danger-text: #fca5a5;--talos-danger-solid-bg: #dc2626;--talos-danger-solid-text: #ffffff;--talos-info: #0ea5e9;--talos-info-hover: #38bdf8;--talos-info-active: #0284c7;--talos-info-subtle-bg: rgba(14, 165, 233, .16);--talos-info-subtle-bg-hover: rgba(14, 165, 233, .26);--talos-info-subtle-border: rgba(14, 165, 233, .35);--talos-info-text: #7dd3fc;--talos-info-solid-bg: #0284c7;--talos-info-solid-text: #ffffff;--talos-purple: #8b5cf6;--talos-purple-hover: #a78bfa;--talos-purple-active: #7c3aed;--talos-purple-subtle-bg: rgba(139, 92, 246, .16);--talos-purple-subtle-bg-hover: rgba(139, 92, 246, .26);--talos-purple-subtle-border: rgba(139, 92, 246, .35);--talos-purple-text: #c4b5fd;--talos-purple-solid-bg: #7c3aed;--talos-purple-solid-text: #ffffff;--talos-tooltip-bg: #1e293b;--talos-tooltip-text: #f8fafc;--talos-range-tooltip-bg: #1e293b;--talos-range-tooltip-text: #f8fafc;--talos-range-tick-active-color: #f8fafc;--talos-loading-overlay-bg: rgba(9, 13, 22, .8);--talos-range-thumb-shadow: 0 2px 4px rgba(0, 0, 0, .5)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not(.light){--talos-bg-canvas: #090d16;--talos-bg-surface: #0f172a;--talos-bg-subtle: #131d31;--talos-bg-overlay: rgba(3, 7, 18, .75);--talos-border-subtle: rgba(255, 255, 255, .06);--talos-border-default: rgba(255, 255, 255, .1);--talos-border-hover: rgba(255, 255, 255, .2);--talos-border-focus: #3b82f6;--talos-focus-ring: 0 0 0 3px rgba(59, 130, 246, .35);--talos-text-primary: #f8fafc;--talos-text-secondary: #e2e8f0;--talos-text-muted: #94a3b8;--talos-text-inverse: #090d16;--talos-primary: #3b82f6;--talos-primary-hover: #60a5fa;--talos-primary-active: #2563eb;--talos-primary-subtle-bg: rgba(59, 130, 246, .16);--talos-primary-subtle-bg-hover: rgba(59, 130, 246, .26);--talos-primary-subtle-border: rgba(59, 130, 246, .35);--talos-primary-text: #93c5fd;--talos-neutral: #94a3b8;--talos-neutral-hover: #cbd5e1;--talos-neutral-active: #f1f5f9;--talos-neutral-subtle-bg: rgba(148, 163, 184, .12);--talos-neutral-subtle-bg-hover: rgba(148, 163, 184, .2);--talos-neutral-subtle-border: rgba(148, 163, 184, .25);--talos-neutral-text: #e2e8f0;--talos-success: #22c55e;--talos-success-hover: #4ade80;--talos-success-active: #16a34a;--talos-success-subtle-bg: rgba(34, 197, 94, .16);--talos-success-subtle-bg-hover: rgba(34, 197, 94, .26);--talos-success-subtle-border: rgba(34, 197, 94, .35);--talos-success-text: #86efac;--talos-warning: #f59e0b;--talos-warning-hover: #fbbf24;--talos-warning-active: #d97706;--talos-warning-subtle-bg: rgba(245, 158, 11, .16);--talos-warning-subtle-bg-hover: rgba(245, 158, 11, .26);--talos-warning-subtle-border: rgba(245, 158, 11, .35);--talos-warning-text: #fde047;--talos-danger: #ef4444;--talos-danger-hover: #f87171;--talos-danger-active: #dc2626;--talos-danger-subtle-bg: rgba(239, 68, 68, .16);--talos-danger-subtle-bg-hover: rgba(239, 68, 68, .26);--talos-danger-subtle-border: rgba(239, 68, 68, .35);--talos-danger-text: #fca5a5;--talos-info: #0ea5e9;--talos-info-hover: #38bdf8;--talos-info-active: #0284c7;--talos-info-subtle-bg: rgba(14, 165, 233, .16);--talos-info-subtle-bg-hover: rgba(14, 165, 233, .26);--talos-info-subtle-border: rgba(14, 165, 233, .35);--talos-info-text: #7dd3fc;--talos-purple: #8b5cf6;--talos-purple-hover: #a78bfa;--talos-purple-active: #7c3aed;--talos-purple-subtle-bg: rgba(139, 92, 246, .16);--talos-purple-subtle-bg-hover: rgba(139, 92, 246, .26);--talos-purple-subtle-border: rgba(139, 92, 246, .35);--talos-purple-text: #c4b5fd;--talos-tooltip-bg: #1e293b;--talos-tooltip-text: #f8fafc;--talos-range-tooltip-bg: #1e293b;--talos-range-tooltip-text: #f8fafc;--talos-range-tick-active-color: #f8fafc}}:host{display:block;width:100%;box-sizing:border-box}.talos-range-wrapper{display:flex;flex-direction:column;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none;font-family:inherit;--range-accent: var(--talos-range-track-fill, var(--talos-primary-color));--range-accent-hover: var(--talos-primary-hover, #1d4ed8);--range-focus-glow: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--range-track-h: var(--talos-range-track-height-md, .375rem);--range-thumb-d: var(--talos-range-thumb-size-md, 1.25rem);--range-thumb-border-width: 2px;--range-tick-w: 2px;--range-tick-h: 8px;--range-font-size: var(--talos-control-font-size, .8125rem)}.talos-range-wrapper.size-sm{--range-track-h: var(--talos-range-track-height-sm, .25rem);--range-thumb-d: var(--talos-range-thumb-size-sm, 1rem);--range-font-size: .75rem;--range-tick-h: 6px}.talos-range-wrapper.size-lg{--range-track-h: var(--talos-range-track-height-lg, .5rem);--range-thumb-d: var(--talos-range-thumb-size-lg, 1.5rem);--range-font-size: .875rem;--range-tick-h: 10px}.talos-range-wrapper.variant-primary{--range-accent: var(--talos-primary-color, #2563eb);--range-accent-hover: var(--talos-primary-hover, #1d4ed8);--range-focus-glow: 0 0 0 3px rgba(37, 99, 235, .2)}.talos-range-wrapper.variant-secondary{--range-accent: #475569;--range-accent-hover: #334155;--range-focus-glow: 0 0 0 3px rgba(71, 85, 105, .2)}.talos-range-wrapper.variant-success{--range-accent: #16a34a;--range-accent-hover: #15803d;--range-focus-glow: 0 0 0 3px rgba(22, 163, 74, .2)}.talos-range-wrapper.variant-warning{--range-accent: #d97706;--range-accent-hover: #b45309;--range-focus-glow: 0 0 0 3px rgba(217, 119, 6, .2)}.talos-range-wrapper.variant-danger{--range-accent: var(--talos-error-color, #ef4444);--range-accent-hover: #dc2626;--range-focus-glow: 0 0 0 3px rgba(239, 68, 68, .2)}.talos-range-wrapper.variant-info{--range-accent: #0284c7;--range-accent-hover: #0369a1;--range-focus-glow: 0 0 0 3px rgba(2, 132, 199, .2)}.talos-range-wrapper.is-invalid{--range-accent: var(--talos-error-color, #ef4444);--range-focus-glow: 0 0 0 3px rgba(239, 68, 68, .25)}.talos-range-wrapper.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.talos-range-wrapper.is-disabled .talos-range-thumb{cursor:not-allowed;border-color:var(--talos-range-track-disabled-fill, #94a3b8);background-color:var(--talos-range-track-disabled-bg, #cbd5e1);box-shadow:none}.talos-range-wrapper.is-disabled .talos-range-fill{background-color:var(--talos-range-track-disabled-fill, #94a3b8)}.talos-range-wrapper.is-readonly .talos-range-slider,.talos-range-wrapper.is-readonly .talos-range-thumb{cursor:default}.talos-range-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}.talos-range-label-group{display:flex;flex-direction:column;gap:.125rem}.talos-range-label{font-size:var(--range-font-size);font-weight:600;color:var(--talos-text-color, #0f172a)}.talos-range-hint{font-size:.75rem;color:var(--talos-text-muted, #64748b)}.talos-range-value-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;font-size:.75rem;font-weight:600;border-radius:var(--talos-border-radius, .375rem);background-color:var(--talos-primary-light, #eff6ff);color:var(--range-accent)}.talos-range-inputs-group{display:flex;align-items:center;gap:.375rem}.talos-range-inputs-separator{color:var(--talos-text-muted, #64748b);font-weight:500}.talos-range-number-box{display:inline-flex;align-items:center;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-border-radius, .375rem);padding:0 .375rem;height:1.875rem;transition:border-color .15s ease,box-shadow .15s ease}.talos-range-number-box:focus-within{border-color:var(--range-accent);box-shadow:var(--range-focus-glow)}.talos-range-input-affix{font-size:.75rem;color:var(--talos-text-muted, #64748b);-webkit-user-select:none;user-select:none}.talos-range-number-input{width:3.5rem;border:none;background:transparent;padding:.125rem .25rem;font-size:.8125rem;font-weight:500;color:var(--talos-text-color, #0f172a);text-align:right;outline:none;font-family:inherit}.talos-range-number-input::-webkit-inner-spin-button,.talos-range-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.talos-range-number-input{-moz-appearance:textfield}.talos-range-slider{position:relative;width:100%;height:calc(var(--range-thumb-d) + .5rem);display:flex;align-items:center;cursor:pointer;touch-action:none;padding:0 calc(var(--range-thumb-d) / 2);box-sizing:border-box}.talos-range-slider.is-active{cursor:grabbing}.talos-range-track{position:relative;width:100%;height:var(--range-track-h);background-color:var(--talos-range-track-bg, #e2e8f0);border-radius:9999px;overflow:visible}.talos-range-fill{position:absolute;top:0;bottom:0;background-color:var(--range-accent);border-radius:9999px;transition:background-color .18s ease;pointer-events:none}.talos-range-ticks{position:absolute;inset:0;pointer-events:none}.talos-range-tick{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--range-tick-w);height:var(--range-tick-h);background-color:var(--talos-range-tick-color, #94a3b8);border-radius:1px;pointer-events:auto;cursor:pointer;transition:transform .15s ease,background-color .15s ease}.talos-range-tick.is-active{background-color:var(--talos-range-tick-active-color, #ffffff);box-shadow:0 0 2px #0000004d}.talos-range-tick:hover{transform:translate(-50%,-50%) scale(1.4)}.talos-range-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--range-thumb-d);height:var(--range-thumb-d);background-color:var(--talos-range-thumb-bg, #ffffff);border:var(--range-thumb-border-width) solid var(--range-accent);border-radius:50%;box-shadow:var(--talos-range-thumb-shadow, 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08));cursor:grab;outline:none;box-sizing:border-box;transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .12s cubic-bezier(.4,0,.2,1),border-color .12s cubic-bezier(.4,0,.2,1);z-index:2}.talos-range-thumb:hover{box-shadow:var(--talos-range-thumb-hover-shadow, 0 0 0 4px rgba(37, 99, 235, .15));transform:translate(-50%,-50%) scale(1.08)}.talos-range-thumb.is-focused,.talos-range-thumb:focus-visible{box-shadow:var(--range-focus-glow);transform:translate(-50%,-50%) scale(1.12);z-index:3}.talos-range-thumb.is-dragging{cursor:grabbing;box-shadow:var(--talos-range-thumb-active-shadow, 0 0 0 6px rgba(37, 99, 235, .25));transform:translate(-50%,-50%) scale(1.16);z-index:4}.talos-range-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);background-color:var(--talos-range-tooltip-bg, #1e293b);color:var(--talos-range-tooltip-text, #ffffff);font-size:.6875rem;font-weight:600;padding:.1875rem .4375rem;border-radius:.25rem;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s ease;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;z-index:10}.talos-range-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:4px;border-style:solid;border-color:var(--talos-range-tooltip-bg, #1e293b) transparent transparent transparent}.talos-range-tooltip.visible{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.talos-range-labels{position:relative;width:100%;margin-top:.25rem;height:1.125rem;padding:0 calc(var(--range-thumb-d) / 2);box-sizing:border-box}.talos-range-label-item{position:absolute;top:0;transform:translate(-50%);font-size:.6875rem;color:var(--talos-range-tick-label-color, var(--talos-text-muted, #64748b));white-space:nowrap;cursor:pointer;transition:color .15s ease,font-weight .15s ease}.talos-range-label-item.is-active{color:var(--range-accent);font-weight:600}.talos-range-label-item:hover{color:var(--talos-text-color, #0f172a)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosRangeInputComponent, decorators: [{
             type: Component,
@@ -9722,7 +9792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[class.talos-range-disabled]': 'effectiveDisabled()',
                         '[class.talos-range-invalid]': 'effectiveInvalid()',
                         '[class.is-floating]': 'isFloatingMode()'
-                    }, template: "<div class=\"talos-range-wrapper\" [class.is-disabled]=\"effectiveDisabled()\" [class.is-readonly]=\"readonly()\"\n  [class.is-invalid]=\"effectiveInvalid()\" [class.is-range]=\"isDualRange()\" [class.size-sm]=\"size() === 'sm'\"\n  [class.size-md]=\"size() === 'md'\" [class.size-lg]=\"size() === 'lg'\" [class.variant-primary]=\"variant() === 'primary'\"\n  [class.variant-secondary]=\"variant() === 'secondary'\" [class.variant-success]=\"variant() === 'success'\"\n  [class.variant-warning]=\"variant() === 'warning'\" [class.variant-danger]=\"variant() === 'danger'\"\n  [class.variant-info]=\"variant() === 'info'\">\n  <!-- Header: Label, Hint & Optional Value Display / Synchronized Number Inputs -->\n  @if (label() || hint() || showValueBadge() || showInputs()) {\n  <div class=\"talos-range-header\">\n    <div class=\"talos-range-label-group\" [class.is-floating-label]=\"isFloatingMode()\">\n      @if (label()) {\n      <label class=\"talos-range-label\" [class.is-floated]=\"isFloatingMode()\" [attr.for]=\"elementId() + '-thumb-0'\">\n        {{ label() }}\n      </label>\n      }\n      @if (hint()) {\n      <span class=\"talos-range-hint\">{{ hint() }}</span>\n      }\n    </div>\n\n    @if (showInputs()) {\n    <div class=\"talos-range-inputs-group\">\n      @if (isDualRange()) {\n      <div class=\"talos-range-number-box\">\n        @if (prefix()) {\n        <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n        }\n        <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num-0'\" [min]=\"min()\"\n          [max]=\"endValue()\" [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"startValue()\"\n          (change)=\"onNumberInputChange(0, $event)\" (keydown.enter)=\"onNumberInputChange(0, $event)\" />\n        @if (suffix()) {\n        <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n        }\n      </div>\n      <span class=\"talos-range-inputs-separator\">\u2013</span>\n      <div class=\"talos-range-number-box\">\n        @if (prefix()) {\n        <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n        }\n        <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num-1'\" [min]=\"startValue()\"\n          [max]=\"max()\" [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"endValue()\"\n          (change)=\"onNumberInputChange(1, $event)\" (keydown.enter)=\"onNumberInputChange(1, $event)\" />\n        @if (suffix()) {\n        <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n        }\n      </div>\n      } @else {\n      <div class=\"talos-range-number-box\">\n        @if (prefix()) {\n        <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n        }\n        <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num'\" [min]=\"min()\" [max]=\"max()\"\n          [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"startValue()\"\n          (change)=\"onNumberInputChange(0, $event)\" (keydown.enter)=\"onNumberInputChange(0, $event)\" />\n        @if (suffix()) {\n        <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n        }\n      </div>\n      }\n    </div>\n    } @else if (showValueBadge()) {\n    <div class=\"talos-range-value-badge\">\n      @if (isDualRange()) {\n      <span>{{ formatDisplayValue(startValue()) }} \u2013 {{ formatDisplayValue(endValue()) }}</span>\n      } @else {\n      <span>{{ formatDisplayValue(startValue()) }}</span>\n      }\n    </div>\n    }\n  </div>\n  }\n\n  <!-- Range Slider Container (Track, Fills, Ticks, Thumbs) -->\n  <div #sliderTrackContainer class=\"talos-range-slider\" [class.is-active]=\"isDragging()\"\n    (pointerdown)=\"onTrackPointerDown($event)\">\n    <!-- Background Track -->\n    <div class=\"talos-range-track\">\n      <!-- Active Filled Range Segment -->\n      <div class=\"talos-range-fill\" [style.left.%]=\"fillLeftPercent()\" [style.width.%]=\"fillWidthPercent()\"></div>\n\n      <!-- Tick Marks -->\n      @if (ticks().length > 0 && (showTicks() || marks())) {\n      <div class=\"talos-range-ticks\">\n        @for (tick of ticks(); track tick.value) {\n        <div class=\"talos-range-tick\" [class.is-active]=\"tick.active\" [style.left.%]=\"tick.percent\"\n          (click)=\"onTickClick(tick, $event)\"></div>\n        }\n      </div>\n      }\n    </div>\n\n    <!-- Thumb 0 (Primary or Lower Bound Handle) -->\n    <div #thumb0 class=\"talos-range-thumb\" [class.is-focused]=\"focusedThumb() === 0\"\n      [class.is-dragging]=\"draggingThumb() === 0\" [class.is-tooltip-visible]=\"isTooltipVisible(0)\"\n      [style.left.%]=\"thumb0Percent()\" tabindex=\"0\" role=\"slider\" [attr.id]=\"elementId() + '-thumb-0'\"\n      [attr.aria-label]=\"isDualRange() ? ariaLabelStart() : ariaLabel()\" [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"isDualRange() ? endValue() : max()\" [attr.aria-valuenow]=\"startValue()\"\n      [attr.aria-valuetext]=\"formatDisplayValue(startValue())\"\n      [attr.aria-disabled]=\"effectiveDisabled() ? 'true' : null\" (pointerdown)=\"onThumbPointerDown(0, $event)\"\n      (keydown)=\"onThumbKeyDown(0, $event)\" (focus)=\"onThumbFocus(0)\" (blur)=\"onThumbBlur(0)\"\n      (mouseenter)=\"onThumbMouseEnter(0)\" (mouseleave)=\"onThumbMouseLeave(0)\">\n      <!-- Floating Value Tooltip -->\n      @if (showTooltip() !== 'none') {\n      <div class=\"talos-range-tooltip\" [class.visible]=\"isTooltipVisible(0)\">\n        {{ formatDisplayValue(startValue()) }}\n      </div>\n      }\n    </div>\n\n    <!-- Thumb 1 (Upper Bound Handle for Dual Range) -->\n    @if (isDualRange()) {\n    <div #thumb1 class=\"talos-range-thumb\" [class.is-focused]=\"focusedThumb() === 1\"\n      [class.is-dragging]=\"draggingThumb() === 1\" [class.is-tooltip-visible]=\"isTooltipVisible(1)\"\n      [style.left.%]=\"thumb1Percent()\" tabindex=\"0\" role=\"slider\" [attr.id]=\"elementId() + '-thumb-1'\"\n      [attr.aria-label]=\"ariaLabelEnd()\" [attr.aria-valuemin]=\"startValue()\" [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"endValue()\" [attr.aria-valuetext]=\"formatDisplayValue(endValue())\"\n      [attr.aria-disabled]=\"effectiveDisabled() ? 'true' : null\" (pointerdown)=\"onThumbPointerDown(1, $event)\"\n      (keydown)=\"onThumbKeyDown(1, $event)\" (focus)=\"onThumbFocus(1)\" (blur)=\"onThumbBlur(1)\"\n      (mouseenter)=\"onThumbMouseEnter(1)\" (mouseleave)=\"onThumbMouseLeave(1)\">\n      <!-- Floating Value Tooltip -->\n      @if (showTooltip() !== 'none') {\n      <div class=\"talos-range-tooltip\" [class.visible]=\"isTooltipVisible(1)\">\n        {{ formatDisplayValue(endValue()) }}\n      </div>\n      }\n    </div>\n    }\n  </div>\n\n  <!-- Interval / Step Labels under track -->\n  @if (labels().length > 0 && (showIntervals() || showLabels() || marks())) {\n  <div class=\"talos-range-labels\">\n    @for (item of labels(); track item.value) {\n    <span class=\"talos-range-label-item\" [class.is-active]=\"item.active\" [style.left.%]=\"item.percent\"\n      (click)=\"onLabelClick(item, $event)\">\n      {{ item.label }}\n    </span>\n    }\n  </div>\n  }\n</div>", styles: [":root{--talos-font-sans: \"Inter\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--talos-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--talos-font-display: var(--talos-font-sans);--talos-radius-none: 0px;--talos-radius-xs: .125rem;--talos-radius-sm: .25rem;--talos-radius-md: .375rem;--talos-radius-lg: .5rem;--talos-radius-xl: .75rem;--talos-radius-2xl: 1rem;--talos-radius-full: 9999px;--talos-height-sm: 2rem;--talos-height-md: 2.25rem;--talos-height-lg: 2.625rem;--talos-font-size-2xs: .6875rem;--talos-font-size-xs: .75rem;--talos-font-size-sm: .8125rem;--talos-font-size-base: .875rem;--talos-font-size-md: .875rem;--talos-font-size-lg: 1rem;--talos-font-size-xl: 1.125rem;--talos-font-size-2xl: 1.25rem;--talos-font-size-3xl: 1.5rem;--talos-font-size-4xl: 1.875rem;--talos-font-size-5xl: 2.25rem;--talos-font-weight-light: 300;--talos-font-weight-regular: 400;--talos-font-weight-medium: 500;--talos-font-weight-semibold: 600;--talos-font-weight-bold: 700;--talos-font-weight-extrabold: 800;--talos-line-height-none: 1;--talos-line-height-tight: 1.25;--talos-line-height-snug: 1.375;--talos-line-height-normal: 1.5;--talos-line-height-relaxed: 1.625;--talos-line-height-loose: 2;--talos-control-padding-x: .625rem;--talos-control-font-size: var(--talos-font-size-sm);--talos-control-height: var(--talos-height-md);--talos-border-radius: var(--talos-radius-md);--talos-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--talos-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .08), 0 1px 2px -1px rgba(0, 0, 0, .05);--talos-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04);--talos-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04);--talos-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .05);--talos-shadow-dialog: var(--talos-shadow-xl);--talos-shadow-dropdown: 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04);--talos-transition: .18s cubic-bezier(.4, 0, .2, 1);--talos-transition-slow: .28s cubic-bezier(.4, 0, .2, 1);--talos-bg-canvas: #f8fafc;--talos-bg-surface: #ffffff;--talos-bg-subtle: #f1f5f9;--talos-bg-overlay: rgba(15, 23, 42, .5);--talos-border-subtle: #f1f5f9;--talos-border-default: #cbd5e1;--talos-border-hover: #94a3b8;--talos-border-focus: #2563eb;--talos-focus-ring: 0 0 0 3px rgba(37, 99, 235, .18);--talos-text-primary: #0f172a;--talos-text-secondary: #334155;--talos-text-muted: #64748b;--talos-text-inverse: #ffffff;--talos-bg-color: var(--talos-bg-canvas);--talos-card-bg: var(--talos-bg-surface);--talos-card-bg-subtle: var(--talos-bg-subtle);--talos-border-color: var(--talos-border-default);--talos-text-color: var(--talos-text-primary);--talos-error-color: #ef4444;--talos-warning-color: #d97706;--talos-success-color: #16a34a;--bg-color: var(--talos-bg-canvas);--bg-subtle: var(--talos-bg-subtle);--card-bg: var(--talos-bg-surface);--card-bg-subtle: var(--talos-bg-subtle);--border-color: var(--talos-border-default);--border-hover: var(--talos-border-hover);--border-focus: var(--talos-border-focus);--text-color: var(--talos-text-primary);--text-muted: var(--talos-text-muted);--primary-color: var(--talos-primary);--primary-hover: var(--talos-primary-hover);--primary-active: var(--talos-primary-active);--primary-light: var(--talos-primary-subtle-bg);--primary-light-hover: var(--talos-primary-subtle-bg-hover);--talos-primary: #2563eb;--talos-primary-hover: #1d4ed8;--talos-primary-active: #1e40af;--talos-primary-subtle-bg: #eff6ff;--talos-primary-subtle-bg-hover: #dbeafe;--talos-primary-subtle-border: #bfdbfe;--talos-primary-text: #1e40af;--talos-primary-solid-bg: #2563eb;--talos-primary-solid-text: #ffffff;--talos-primary-color: var(--talos-primary);--talos-primary-light: var(--talos-primary-subtle-bg);--talos-primary-light-hover: var(--talos-primary-subtle-bg-hover);--talos-neutral: #475569;--talos-neutral-hover: #334155;--talos-neutral-active: #1e293b;--talos-neutral-subtle-bg: #f8fafc;--talos-neutral-subtle-bg-hover: #f1f5f9;--talos-neutral-subtle-border: #e2e8f0;--talos-neutral-text: #334155;--talos-neutral-solid-bg: #475569;--talos-neutral-solid-text: #ffffff;--talos-success: #16a34a;--talos-success-hover: #15803d;--talos-success-active: #166534;--talos-success-subtle-bg: #f0fdf4;--talos-success-subtle-bg-hover: #dcfce7;--talos-success-subtle-border: #bbf7d0;--talos-success-text: #166534;--talos-success-solid-bg: #16a34a;--talos-success-solid-text: #ffffff;--talos-warning: #d97706;--talos-warning-hover: #b45309;--talos-warning-active: #92400e;--talos-warning-subtle-bg: #fffbeb;--talos-warning-subtle-bg-hover: #fef3c7;--talos-warning-subtle-border: #fde68a;--talos-warning-text: #92400e;--talos-warning-solid-bg: #d97706;--talos-warning-solid-text: #ffffff;--talos-danger: #ef4444;--talos-danger-hover: #dc2626;--talos-danger-active: #b91c1c;--talos-danger-subtle-bg: #fef2f2;--talos-danger-subtle-bg-hover: #fee2e2;--talos-danger-subtle-border: #fecaca;--talos-danger-text: #991b1b;--talos-danger-solid-bg: #dc2626;--talos-danger-solid-text: #ffffff;--talos-info: #0284c7;--talos-info-hover: #0369a1;--talos-info-active: #075985;--talos-info-subtle-bg: #f0f9ff;--talos-info-subtle-bg-hover: #e0f2fe;--talos-info-subtle-border: #bae6fd;--talos-info-text: #0369a1;--talos-info-solid-bg: #0284c7;--talos-info-solid-text: #ffffff;--talos-purple: #7c3aed;--talos-purple-hover: #6d28d9;--talos-purple-active: #5b21b6;--talos-purple-subtle-bg: #f5f3ff;--talos-purple-subtle-bg-hover: #ede9fe;--talos-purple-subtle-border: #ddd6fe;--talos-purple-text: #6d28d9;--talos-purple-solid-bg: #7c3aed;--talos-purple-solid-text: #ffffff;--talos-input-bg: var(--talos-bg-surface);--talos-input-border: var(--talos-border-default);--talos-input-border-hover: var(--talos-border-hover);--talos-input-border-focus: var(--talos-border-focus);--talos-input-color: var(--talos-text-primary);--talos-input-placeholder-color: var(--talos-text-muted);--talos-input-disabled-bg: var(--talos-bg-subtle);--talos-input-disabled-border: var(--talos-border-default);--talos-input-disabled-color: var(--talos-text-muted);--talos-input-radius: var(--talos-radius-md);--talos-input-height: var(--talos-height-md);--talos-affix-btn-size-sm: 1.375rem;--talos-affix-btn-size-md: 1.5rem;--talos-affix-btn-size-lg: 1.75rem;--talos-affix-btn-radius: var(--talos-radius-sm, .25rem);--talos-affix-btn-icon-size-sm: .8125rem;--talos-affix-btn-icon-size-md: .875rem;--talos-affix-btn-icon-size-lg: 1rem;--talos-affix-btn-color: var(--talos-text-muted, #64748b);--talos-affix-btn-hover-color: var(--talos-text-color, #0f172a);--talos-affix-btn-hover-bg: var(--talos-btn-ghost-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));--talos-affix-btn-active-bg: var(--talos-btn-ghost-active-bg, rgba(148, 163, 184, .25));--talos-sidebar-width: 260px;--talos-sidebar-collapsed-width: 68px;--talos-nav-bg: var(--talos-bg-surface);--talos-nav-border-color: var(--talos-border-subtle);--talos-active-nav-bg: var(--talos-primary-subtle-bg);--talos-active-nav-text: var(--talos-primary);--talos-nav-hover-bg: var(--talos-bg-subtle);--talos-nav-hover-text: var(--talos-text-primary);--talos-avatar-bg: var(--talos-primary-subtle-bg);--talos-avatar-text: var(--talos-primary-text);--talos-badge-bg: var(--talos-primary-subtle-bg);--talos-badge-text: var(--talos-primary-text);--talos-header-bg: var(--talos-bg-surface);--talos-header-border-color: var(--talos-border-subtle);--talos-right-panel-bg: var(--talos-bg-surface);--talos-right-panel-border: var(--talos-border-subtle);--talos-loading-overlay-bg: rgba(255, 255, 255, .75);--talos-dropdown-bg: var(--talos-bg-surface);--talos-dropdown-border: var(--talos-border-default);--talos-dropdown-shadow: var(--talos-shadow-dropdown);--talos-dropdown-hover-bg: var(--talos-bg-subtle);--talos-dropdown-selected-bg: var(--talos-primary-subtle-bg);--talos-btn-font-family: inherit;--talos-btn-border-radius: var(--talos-radius-md);--talos-btn-font-weight: 600;--talos-btn-transition: background-color var(--talos-transition), border-color var(--talos-transition), color var(--talos-transition), box-shadow var(--talos-transition), opacity var(--talos-transition);--talos-btn-ripple-color: rgba(255, 255, 255, .35);--talos-btn-primary-bg: var(--talos-primary-solid-bg);--talos-btn-primary-hover: var(--talos-primary-hover);--talos-btn-primary-active: var(--talos-primary-active);--talos-btn-primary-text: var(--talos-primary-solid-text);--talos-btn-secondary-bg: var(--talos-neutral-solid-bg);--talos-btn-secondary-hover: var(--talos-neutral-hover);--talos-btn-secondary-active: var(--talos-neutral-active);--talos-btn-secondary-text: var(--talos-neutral-solid-text);--talos-btn-outline-bg: transparent;--talos-btn-outline-border: var(--talos-border-default);--talos-btn-outline-hover-bg: var(--talos-bg-subtle);--talos-btn-outline-hover-border: var(--talos-border-hover);--talos-btn-outline-text: var(--talos-text-secondary);--talos-btn-ghost-bg: transparent;--talos-btn-ghost-text: var(--talos-text-muted);--talos-btn-ghost-hover-bg: var(--talos-bg-subtle);--talos-btn-ghost-hover-text: var(--talos-text-primary);--talos-btn-ghost-active-bg: var(--talos-neutral-subtle-bg-hover);--talos-btn-danger-bg: var(--talos-danger-solid-bg);--talos-btn-danger-hover: var(--talos-danger-hover);--talos-btn-danger-active: var(--talos-danger-active);--talos-btn-danger-text: var(--talos-danger-solid-text);--talos-btn-success-bg: var(--talos-success-solid-bg);--talos-btn-success-hover: var(--talos-success-hover);--talos-btn-success-active: var(--talos-success-active);--talos-btn-success-text: var(--talos-success-solid-text);--talos-btn-height-sm: var(--talos-height-sm);--talos-btn-height-md: var(--talos-height-md);--talos-btn-height-lg: var(--talos-height-lg);--talos-btn-padding-x-sm: .625rem;--talos-btn-padding-x-md: .875rem;--talos-btn-padding-x-lg: 1.125rem;--talos-btn-font-size-sm: var(--talos-font-size-xs);--talos-btn-font-size-md: var(--talos-font-size-sm);--talos-btn-font-size-lg: var(--talos-font-size-md);--talos-category-bar-gap: 2px;--talos-category-bar-track-bg: var(--talos-bg-subtle);--talos-category-bar-border-radius: var(--talos-radius-md);--talos-category-bar-height-xs: .25rem;--talos-category-bar-height-sm: .375rem;--talos-category-bar-height-md: .5rem;--talos-category-bar-height-lg: .75rem;--talos-category-bar-marker-ring: var(--talos-bg-surface);--talos-range-track-bg: var(--talos-border-default);--talos-range-track-fill: var(--talos-primary);--talos-range-track-disabled-bg: var(--talos-border-subtle);--talos-range-track-disabled-fill: var(--talos-text-muted);--talos-range-track-height-sm: .25rem;--talos-range-track-height-md: .375rem;--talos-range-track-height-lg: .5rem;--talos-range-thumb-size-sm: 1rem;--talos-range-thumb-size-md: 1.25rem;--talos-range-thumb-size-lg: 1.5rem;--talos-range-thumb-bg: var(--talos-bg-surface);--talos-range-thumb-border: var(--talos-primary);--talos-range-thumb-shadow: var(--talos-shadow-sm);--talos-range-thumb-hover-shadow: 0 0 0 4px rgba(37, 99, 235, .15);--talos-range-thumb-active-shadow: 0 0 0 6px rgba(37, 99, 235, .25);--talos-range-tick-color: var(--talos-text-muted);--talos-range-tick-active-color: #ffffff;--talos-range-tick-label-color: var(--talos-text-muted);--talos-range-tooltip-bg: #0f172a;--talos-range-tooltip-text: #ffffff;--talos-toggle-track-bg: var(--talos-border-default);--talos-toggle-track-bg-hover: var(--talos-border-hover);--talos-toggle-thumb-bg: var(--talos-bg-surface);--talos-snackbar-bg: var(--talos-bg-surface);--talos-snackbar-text: var(--talos-text-primary);--talos-snackbar-border: var(--talos-border-default);--talos-snackbar-border-radius: var(--talos-radius-lg);--talos-dialog-bg: var(--talos-bg-surface);--talos-dialog-border: var(--talos-border-default);--talos-dialog-radius: var(--talos-radius-xl);--talos-dialog-shadow: var(--talos-shadow-dialog);--talos-dialog-backdrop-bg: var(--talos-bg-overlay);--talos-dialog-backdrop-blur-bg: rgba(15, 23, 42, .35);--talos-dialog-title-color: var(--talos-text-primary);--talos-dialog-subtitle-color: var(--talos-text-muted);--talos-tooltip-bg: #0f172a;--talos-tooltip-text: #ffffff;--talos-dropzone-bg: var(--talos-bg-surface);--talos-dropzone-hover-bg: var(--talos-bg-subtle);--talos-dropzone-drag-bg: var(--talos-primary-subtle-bg);--talos-dropzone-border: var(--talos-border-default);--talos-dropzone-hover-border: var(--talos-border-hover);--talos-dropzone-drag-border: var(--talos-primary);--talos-dropzone-radius: var(--talos-radius-lg);--talos-dropzone-text: var(--talos-text-primary);--talos-dropzone-subtext: var(--talos-text-muted);--talos-dropzone-icon-color: var(--talos-primary);--talos-dropzone-file-bg: var(--talos-bg-surface);--talos-dropzone-file-border: var(--talos-border-default);--talos-rating-fill-warning: var(--talos-warning);--talos-rating-fill-primary: var(--talos-primary);--talos-rating-fill-danger: var(--talos-danger);--talos-rating-fill-success: var(--talos-success);--talos-rating-fill-purple: var(--talos-purple);--talos-rating-unfilled: var(--talos-border-default);--talos-rating-size-sm: 1.125rem;--talos-rating-size-md: 1.375rem;--talos-rating-size-lg: 1.75rem;--talos-rating-size-xl: 2.25rem}:root[data-theme=dark],:root.dark,[data-theme=dark],[data-mode=dark],.dark,.dark-theme{--talos-bg-canvas: #090d16;--talos-bg-surface: #0f172a;--talos-bg-subtle: #131d31;--talos-bg-overlay: rgba(3, 7, 18, .75);--talos-border-subtle: rgba(255, 255, 255, .06);--talos-border-default: rgba(255, 255, 255, .1);--talos-border-hover: rgba(255, 255, 255, .2);--talos-border-focus: #3b82f6;--talos-focus-ring: 0 0 0 3px rgba(59, 130, 246, .35);--talos-text-primary: #f8fafc;--talos-text-secondary: #e2e8f0;--talos-text-muted: #94a3b8;--talos-text-inverse: #090d16;--talos-shadow-dropdown: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);--talos-shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .1);--talos-primary: #3b82f6;--talos-primary-hover: #60a5fa;--talos-primary-active: #2563eb;--talos-primary-subtle-bg: rgba(59, 130, 246, .16);--talos-primary-subtle-bg-hover: rgba(59, 130, 246, .26);--talos-primary-subtle-border: rgba(59, 130, 246, .35);--talos-primary-text: #93c5fd;--talos-primary-solid-bg: #2563eb;--talos-primary-solid-text: #ffffff;--talos-neutral: #94a3b8;--talos-neutral-hover: #cbd5e1;--talos-neutral-active: #f1f5f9;--talos-neutral-subtle-bg: rgba(148, 163, 184, .12);--talos-neutral-subtle-bg-hover: rgba(148, 163, 184, .2);--talos-neutral-subtle-border: rgba(148, 163, 184, .25);--talos-neutral-text: #e2e8f0;--talos-neutral-solid-bg: #334155;--talos-neutral-solid-text: #f8fafc;--talos-success: #22c55e;--talos-success-hover: #4ade80;--talos-success-active: #16a34a;--talos-success-subtle-bg: rgba(34, 197, 94, .16);--talos-success-subtle-bg-hover: rgba(34, 197, 94, .26);--talos-success-subtle-border: rgba(34, 197, 94, .35);--talos-success-text: #86efac;--talos-success-solid-bg: #16a34a;--talos-success-solid-text: #ffffff;--talos-warning: #f59e0b;--talos-warning-hover: #fbbf24;--talos-warning-active: #d97706;--talos-warning-subtle-bg: rgba(245, 158, 11, .16);--talos-warning-subtle-bg-hover: rgba(245, 158, 11, .26);--talos-warning-subtle-border: rgba(245, 158, 11, .35);--talos-warning-text: #fde047;--talos-warning-solid-bg: #d97706;--talos-warning-solid-text: #ffffff;--talos-danger: #ef4444;--talos-danger-hover: #f87171;--talos-danger-active: #dc2626;--talos-danger-subtle-bg: rgba(239, 68, 68, .16);--talos-danger-subtle-bg-hover: rgba(239, 68, 68, .26);--talos-danger-subtle-border: rgba(239, 68, 68, .35);--talos-danger-text: #fca5a5;--talos-danger-solid-bg: #dc2626;--talos-danger-solid-text: #ffffff;--talos-info: #0ea5e9;--talos-info-hover: #38bdf8;--talos-info-active: #0284c7;--talos-info-subtle-bg: rgba(14, 165, 233, .16);--talos-info-subtle-bg-hover: rgba(14, 165, 233, .26);--talos-info-subtle-border: rgba(14, 165, 233, .35);--talos-info-text: #7dd3fc;--talos-info-solid-bg: #0284c7;--talos-info-solid-text: #ffffff;--talos-purple: #8b5cf6;--talos-purple-hover: #a78bfa;--talos-purple-active: #7c3aed;--talos-purple-subtle-bg: rgba(139, 92, 246, .16);--talos-purple-subtle-bg-hover: rgba(139, 92, 246, .26);--talos-purple-subtle-border: rgba(139, 92, 246, .35);--talos-purple-text: #c4b5fd;--talos-purple-solid-bg: #7c3aed;--talos-purple-solid-text: #ffffff;--talos-tooltip-bg: #1e293b;--talos-tooltip-text: #f8fafc;--talos-range-tooltip-bg: #1e293b;--talos-range-tooltip-text: #f8fafc;--talos-range-tick-active-color: #f8fafc;--talos-loading-overlay-bg: rgba(9, 13, 22, .8);--talos-range-thumb-shadow: 0 2px 4px rgba(0, 0, 0, .5)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not(.light){--talos-bg-canvas: #090d16;--talos-bg-surface: #0f172a;--talos-bg-subtle: #131d31;--talos-bg-overlay: rgba(3, 7, 18, .75);--talos-border-subtle: rgba(255, 255, 255, .06);--talos-border-default: rgba(255, 255, 255, .1);--talos-border-hover: rgba(255, 255, 255, .2);--talos-border-focus: #3b82f6;--talos-focus-ring: 0 0 0 3px rgba(59, 130, 246, .35);--talos-text-primary: #f8fafc;--talos-text-secondary: #e2e8f0;--talos-text-muted: #94a3b8;--talos-text-inverse: #090d16;--talos-primary: #3b82f6;--talos-primary-hover: #60a5fa;--talos-primary-active: #2563eb;--talos-primary-subtle-bg: rgba(59, 130, 246, .16);--talos-primary-subtle-bg-hover: rgba(59, 130, 246, .26);--talos-primary-subtle-border: rgba(59, 130, 246, .35);--talos-primary-text: #93c5fd;--talos-neutral: #94a3b8;--talos-neutral-hover: #cbd5e1;--talos-neutral-active: #f1f5f9;--talos-neutral-subtle-bg: rgba(148, 163, 184, .12);--talos-neutral-subtle-bg-hover: rgba(148, 163, 184, .2);--talos-neutral-subtle-border: rgba(148, 163, 184, .25);--talos-neutral-text: #e2e8f0;--talos-success: #22c55e;--talos-success-hover: #4ade80;--talos-success-active: #16a34a;--talos-success-subtle-bg: rgba(34, 197, 94, .16);--talos-success-subtle-bg-hover: rgba(34, 197, 94, .26);--talos-success-subtle-border: rgba(34, 197, 94, .35);--talos-success-text: #86efac;--talos-warning: #f59e0b;--talos-warning-hover: #fbbf24;--talos-warning-active: #d97706;--talos-warning-subtle-bg: rgba(245, 158, 11, .16);--talos-warning-subtle-bg-hover: rgba(245, 158, 11, .26);--talos-warning-subtle-border: rgba(245, 158, 11, .35);--talos-warning-text: #fde047;--talos-danger: #ef4444;--talos-danger-hover: #f87171;--talos-danger-active: #dc2626;--talos-danger-subtle-bg: rgba(239, 68, 68, .16);--talos-danger-subtle-bg-hover: rgba(239, 68, 68, .26);--talos-danger-subtle-border: rgba(239, 68, 68, .35);--talos-danger-text: #fca5a5;--talos-info: #0ea5e9;--talos-info-hover: #38bdf8;--talos-info-active: #0284c7;--talos-info-subtle-bg: rgba(14, 165, 233, .16);--talos-info-subtle-bg-hover: rgba(14, 165, 233, .26);--talos-info-subtle-border: rgba(14, 165, 233, .35);--talos-info-text: #7dd3fc;--talos-purple: #8b5cf6;--talos-purple-hover: #a78bfa;--talos-purple-active: #7c3aed;--talos-purple-subtle-bg: rgba(139, 92, 246, .16);--talos-purple-subtle-bg-hover: rgba(139, 92, 246, .26);--talos-purple-subtle-border: rgba(139, 92, 246, .35);--talos-purple-text: #c4b5fd;--talos-tooltip-bg: #1e293b;--talos-tooltip-text: #f8fafc;--talos-range-tooltip-bg: #1e293b;--talos-range-tooltip-text: #f8fafc;--talos-range-tick-active-color: #f8fafc}}:host{display:block;width:100%;box-sizing:border-box}.talos-range-wrapper{display:flex;flex-direction:column;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none;font-family:inherit;--range-accent: var(--talos-range-track-fill, var(--talos-primary-color));--range-accent-hover: var(--talos-primary-hover, #1d4ed8);--range-focus-glow: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--range-track-h: var(--talos-range-track-height-md, .375rem);--range-thumb-d: var(--talos-range-thumb-size-md, 1.25rem);--range-thumb-border-width: 2px;--range-tick-w: 2px;--range-tick-h: 8px;--range-font-size: var(--talos-control-font-size, .8125rem)}.talos-range-wrapper.size-sm{--range-track-h: var(--talos-range-track-height-sm, .25rem);--range-thumb-d: var(--talos-range-thumb-size-sm, 1rem);--range-font-size: .75rem;--range-tick-h: 6px}.talos-range-wrapper.size-lg{--range-track-h: var(--talos-range-track-height-lg, .5rem);--range-thumb-d: var(--talos-range-thumb-size-lg, 1.5rem);--range-font-size: .875rem;--range-tick-h: 10px}.talos-range-wrapper.variant-primary{--range-accent: var(--talos-primary-color, #2563eb);--range-accent-hover: var(--talos-primary-hover, #1d4ed8);--range-focus-glow: 0 0 0 3px rgba(37, 99, 235, .2)}.talos-range-wrapper.variant-secondary{--range-accent: #475569;--range-accent-hover: #334155;--range-focus-glow: 0 0 0 3px rgba(71, 85, 105, .2)}.talos-range-wrapper.variant-success{--range-accent: #16a34a;--range-accent-hover: #15803d;--range-focus-glow: 0 0 0 3px rgba(22, 163, 74, .2)}.talos-range-wrapper.variant-warning{--range-accent: #d97706;--range-accent-hover: #b45309;--range-focus-glow: 0 0 0 3px rgba(217, 119, 6, .2)}.talos-range-wrapper.variant-danger{--range-accent: var(--talos-error-color, #ef4444);--range-accent-hover: #dc2626;--range-focus-glow: 0 0 0 3px rgba(239, 68, 68, .2)}.talos-range-wrapper.variant-info{--range-accent: #0284c7;--range-accent-hover: #0369a1;--range-focus-glow: 0 0 0 3px rgba(2, 132, 199, .2)}.talos-range-wrapper.is-invalid{--range-accent: var(--talos-error-color, #ef4444);--range-focus-glow: 0 0 0 3px rgba(239, 68, 68, .25)}.talos-range-wrapper.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.talos-range-wrapper.is-disabled .talos-range-thumb{cursor:not-allowed;border-color:var(--talos-range-track-disabled-fill, #94a3b8);background-color:var(--talos-range-track-disabled-bg, #cbd5e1);box-shadow:none}.talos-range-wrapper.is-disabled .talos-range-fill{background-color:var(--talos-range-track-disabled-fill, #94a3b8)}.talos-range-wrapper.is-readonly .talos-range-slider,.talos-range-wrapper.is-readonly .talos-range-thumb{cursor:default}.talos-range-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}.talos-range-label-group{display:flex;flex-direction:column;gap:.125rem}.talos-range-label{font-size:var(--range-font-size);font-weight:600;color:var(--talos-text-color, #0f172a)}.talos-range-hint{font-size:.75rem;color:var(--talos-text-muted, #64748b)}.talos-range-value-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;font-size:.75rem;font-weight:600;border-radius:var(--talos-border-radius, .375rem);background-color:var(--talos-primary-light, #eff6ff);color:var(--range-accent)}.talos-range-inputs-group{display:flex;align-items:center;gap:.375rem}.talos-range-inputs-separator{color:var(--talos-text-muted, #64748b);font-weight:500}.talos-range-number-box{display:inline-flex;align-items:center;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-border-radius, .375rem);padding:0 .375rem;height:1.875rem;transition:border-color .15s ease,box-shadow .15s ease}.talos-range-number-box:focus-within{border-color:var(--range-accent);box-shadow:var(--range-focus-glow)}.talos-range-input-affix{font-size:.75rem;color:var(--talos-text-muted, #64748b);-webkit-user-select:none;user-select:none}.talos-range-number-input{width:3.5rem;border:none;background:transparent;padding:.125rem .25rem;font-size:.8125rem;font-weight:500;color:var(--talos-text-color, #0f172a);text-align:right;outline:none;font-family:inherit}.talos-range-number-input::-webkit-inner-spin-button,.talos-range-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.talos-range-number-input{-moz-appearance:textfield}.talos-range-slider{position:relative;width:100%;height:calc(var(--range-thumb-d) + .5rem);display:flex;align-items:center;cursor:pointer;touch-action:none;padding:0 calc(var(--range-thumb-d) / 2);box-sizing:border-box}.talos-range-slider.is-active{cursor:grabbing}.talos-range-track{position:relative;width:100%;height:var(--range-track-h);background-color:var(--talos-range-track-bg, #e2e8f0);border-radius:9999px;overflow:visible}.talos-range-fill{position:absolute;top:0;bottom:0;background-color:var(--range-accent);border-radius:9999px;transition:background-color .18s ease;pointer-events:none}.talos-range-ticks{position:absolute;inset:0;pointer-events:none}.talos-range-tick{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--range-tick-w);height:var(--range-tick-h);background-color:var(--talos-range-tick-color, #94a3b8);border-radius:1px;pointer-events:auto;cursor:pointer;transition:transform .15s ease,background-color .15s ease}.talos-range-tick.is-active{background-color:var(--talos-range-tick-active-color, #ffffff);box-shadow:0 0 2px #0000004d}.talos-range-tick:hover{transform:translate(-50%,-50%) scale(1.4)}.talos-range-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--range-thumb-d);height:var(--range-thumb-d);background-color:var(--talos-range-thumb-bg, #ffffff);border:var(--range-thumb-border-width) solid var(--range-accent);border-radius:50%;box-shadow:var(--talos-range-thumb-shadow, 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08));cursor:grab;outline:none;box-sizing:border-box;transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .12s cubic-bezier(.4,0,.2,1),border-color .12s cubic-bezier(.4,0,.2,1);z-index:2}.talos-range-thumb:hover{box-shadow:var(--talos-range-thumb-hover-shadow, 0 0 0 4px rgba(37, 99, 235, .15));transform:translate(-50%,-50%) scale(1.08)}.talos-range-thumb.is-focused,.talos-range-thumb:focus-visible{box-shadow:var(--range-focus-glow);transform:translate(-50%,-50%) scale(1.12);z-index:3}.talos-range-thumb.is-dragging{cursor:grabbing;box-shadow:var(--talos-range-thumb-active-shadow, 0 0 0 6px rgba(37, 99, 235, .25));transform:translate(-50%,-50%) scale(1.16);z-index:4}.talos-range-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);background-color:var(--talos-range-tooltip-bg, #1e293b);color:var(--talos-range-tooltip-text, #ffffff);font-size:.6875rem;font-weight:600;padding:.1875rem .4375rem;border-radius:.25rem;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s ease;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;z-index:10}.talos-range-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:4px;border-style:solid;border-color:var(--talos-range-tooltip-bg, #1e293b) transparent transparent transparent}.talos-range-tooltip.visible{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.talos-range-labels{position:relative;width:100%;margin-top:.25rem;height:1.125rem;padding:0 calc(var(--range-thumb-d) / 2);box-sizing:border-box}.talos-range-label-item{position:absolute;top:0;transform:translate(-50%);font-size:.6875rem;color:var(--talos-range-tick-label-color, var(--talos-text-muted, #64748b));white-space:nowrap;cursor:pointer;transition:color .15s ease,font-weight .15s ease}.talos-range-label-item.is-active{color:var(--range-accent);font-weight:600}.talos-range-label-item:hover{color:var(--talos-text-color, #0f172a)}\n"] }]
+                    }, template: "<div class=\"talos-range-wrapper\" [class.is-disabled]=\"effectiveDisabled()\" [class.is-readonly]=\"readonly()\"\n  [class.is-invalid]=\"effectiveInvalid()\" [class.is-range]=\"isDualRange()\" [class.size-sm]=\"size() === 'sm'\"\n  [class.size-md]=\"size() === 'md'\" [class.size-lg]=\"size() === 'lg'\" [class.variant-primary]=\"variant() === 'primary'\"\n  [class.variant-secondary]=\"variant() === 'secondary'\" [class.variant-success]=\"variant() === 'success'\"\n  [class.variant-warning]=\"variant() === 'warning'\" [class.variant-danger]=\"variant() === 'danger'\"\n  [class.variant-info]=\"variant() === 'info'\">\n  <!-- Header: Label, Hint & Optional Value Display / Synchronized Number Inputs -->\n  @if (label() || hint() || showValueBadge() || showInputs()) {\n  <div class=\"talos-range-header\">\n    <div class=\"talos-range-label-group\" [class.is-floating-label]=\"isFloatingMode()\">\n      @if (label()) {\n      <label class=\"talos-range-label\" [class.is-floated]=\"isFloatingMode()\" [attr.for]=\"elementId() + '-thumb-0'\">\n        {{ label() }}\n      </label>\n      }\n      @if (hint()) {\n      <span class=\"talos-range-hint\">{{ hint() }}</span>\n      }\n    </div>\n\n    @if (showInputs()) {\n    <div class=\"talos-range-inputs-group\">\n      @if (isDualRange()) {\n      <div class=\"talos-range-number-box\">\n        @if (prefix()) {\n        <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n        }\n        <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num-0'\" [min]=\"min()\"\n          [max]=\"endValue()\" [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"startValue()\"\n          (change)=\"onNumberInputChange(0, $event)\" (keydown.enter)=\"onNumberInputChange(0, $event)\" />\n        @if (suffix()) {\n        <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n        }\n      </div>\n      <span class=\"talos-range-inputs-separator\">\u2013</span>\n      <div class=\"talos-range-number-box\">\n        @if (prefix()) {\n        <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n        }\n        <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num-1'\" [min]=\"startValue()\"\n          [max]=\"max()\" [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"endValue()\"\n          (change)=\"onNumberInputChange(1, $event)\" (keydown.enter)=\"onNumberInputChange(1, $event)\" />\n        @if (suffix()) {\n        <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n        }\n      </div>\n      } @else {\n      <div class=\"talos-range-number-box\">\n        @if (prefix()) {\n        <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n        }\n        <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num'\" [min]=\"min()\" [max]=\"max()\"\n          [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"startValue()\"\n          (change)=\"onNumberInputChange(0, $event)\" (keydown.enter)=\"onNumberInputChange(0, $event)\" />\n        @if (suffix()) {\n        <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n        }\n      </div>\n      }\n    </div>\n    } @else if (showValueBadge()) {\n    <div class=\"talos-range-value-badge\">\n      @if (isDualRange()) {\n      <span>{{ formatDisplayValue(startValue()) }} \u2013 {{ formatDisplayValue(endValue()) }}</span>\n      } @else {\n      <span>{{ formatDisplayValue(startValue()) }}</span>\n      }\n    </div>\n    }\n  </div>\n  }\n\n  <!-- Range Slider Container (Track, Fills, Ticks, Thumbs) -->\n  <div #sliderTrackContainer class=\"talos-range-slider\" [class.is-active]=\"isDragging()\"\n    (pointerdown)=\"onTrackPointerDown($event)\">\n    <!-- Background Track -->\n    <div class=\"talos-range-track\">\n      <!-- Active Filled Range Segment -->\n      <div class=\"talos-range-fill\" [style.left.%]=\"fillLeftPercent()\" [style.width.%]=\"fillWidthPercent()\"></div>\n\n      <!-- Tick Marks -->\n      @if (ticks().length > 0 && (showTicks() || marks())) {\n      <div class=\"talos-range-ticks\">\n        @for (tick of ticks(); track tick.value) {\n        <div class=\"talos-range-tick\" [class.is-active]=\"tick.active\" [style.left.%]=\"tick.percent\"\n          (click)=\"onTickClick(tick, $event)\"></div>\n        }\n      </div>\n      }\n    </div>\n\n    <!-- Thumb 0 (Primary or Lower Bound Handle) -->\n    <div #thumb0 class=\"talos-range-thumb\" [class.is-focused]=\"focusedThumb() === 0\"\n      [class.is-dragging]=\"draggingThumb() === 0\" [class.is-tooltip-visible]=\"isTooltipVisible(0)\"\n      [style.left.%]=\"thumb0Percent()\" tabindex=\"0\" role=\"slider\" [attr.id]=\"elementId() + '-thumb-0'\"\n      [attr.aria-label]=\"isDualRange() ? ariaLabelStart() : ariaLabel()\" [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"isDualRange() ? endValue() : max()\" [attr.aria-valuenow]=\"startValue()\"\n      [attr.aria-valuetext]=\"formatDisplayValue(startValue())\"\n      [attr.aria-disabled]=\"effectiveDisabled() ? 'true' : null\" (pointerdown)=\"onThumbPointerDown(0, $event)\"\n      (keydown)=\"onThumbKeyDown(0, $event)\" (focus)=\"onThumbFocus(0)\" (blur)=\"onThumbBlur(0)\"\n      (mouseenter)=\"onThumbMouseEnter(0)\" (mouseleave)=\"onThumbMouseLeave(0)\">\n      <!-- Floating Value Tooltip -->\n      @if (showTooltip() !== 'none') {\n      <div class=\"talos-range-tooltip\" [class.visible]=\"isTooltipVisible(0)\">\n        {{ formatDisplayValue(startValue()) }}\n      </div>\n      }\n    </div>\n\n    <!-- Thumb 1 (Upper Bound Handle for Dual Range) -->\n    @if (isDualRange()) {\n    <div #thumb1 class=\"talos-range-thumb\" [class.is-focused]=\"focusedThumb() === 1\"\n      [class.is-dragging]=\"draggingThumb() === 1\" [class.is-tooltip-visible]=\"isTooltipVisible(1)\"\n      [style.left.%]=\"thumb1Percent()\" tabindex=\"0\" role=\"slider\" [attr.id]=\"elementId() + '-thumb-1'\"\n      [attr.aria-label]=\"ariaLabelEnd()\" [attr.aria-valuemin]=\"startValue()\" [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"endValue()\" [attr.aria-valuetext]=\"formatDisplayValue(endValue())\"\n      [attr.aria-disabled]=\"effectiveDisabled() ? 'true' : null\" (pointerdown)=\"onThumbPointerDown(1, $event)\"\n      (keydown)=\"onThumbKeyDown(1, $event)\" (focus)=\"onThumbFocus(1)\" (blur)=\"onThumbBlur(1)\"\n      (mouseenter)=\"onThumbMouseEnter(1)\" (mouseleave)=\"onThumbMouseLeave(1)\">\n      <!-- Floating Value Tooltip -->\n      @if (showTooltip() !== 'none') {\n      <div class=\"talos-range-tooltip\" [class.visible]=\"isTooltipVisible(1)\">\n        {{ formatDisplayValue(endValue()) }}\n      </div>\n      }\n    </div>\n    }\n  </div>\n\n  <!-- Interval / Step Labels under track -->\n  @if (labels().length > 0 && (showIntervals() || showLabels() || marks())) {\n  <div class=\"talos-range-labels\">\n    @for (item of labels(); track item.value) {\n    <span class=\"talos-range-label-item\" [class.is-active]=\"item.active\" [style.left.%]=\"item.percent\"\n      (click)=\"onLabelClick(item, $event)\">\n      {{ item.label }}\n    </span>\n    }\n  </div>\n  }\n</div>", styles: [":root{--talos-font-sans: \"Inter\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--talos-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--talos-font-display: var(--talos-font-sans);--talos-radius-none: 0px;--talos-radius-xs: .125rem;--talos-radius-sm: .25rem;--talos-radius-md: .375rem;--talos-radius-lg: .5rem;--talos-radius-xl: .75rem;--talos-radius-2xl: 1rem;--talos-radius-full: 9999px;--talos-height-xs: 1.625rem;--talos-height-sm: 2rem;--talos-height-md: 2.25rem;--talos-height-lg: 2.625rem;--talos-font-size-2xs: .6875rem;--talos-font-size-xs: .75rem;--talos-font-size-sm: .8125rem;--talos-font-size-base: .875rem;--talos-font-size-md: .875rem;--talos-font-size-lg: 1rem;--talos-font-size-xl: 1.125rem;--talos-font-size-2xl: 1.25rem;--talos-font-size-3xl: 1.5rem;--talos-font-size-4xl: 1.875rem;--talos-font-size-5xl: 2.25rem;--talos-font-weight-light: 300;--talos-font-weight-regular: 400;--talos-font-weight-medium: 500;--talos-font-weight-semibold: 600;--talos-font-weight-bold: 700;--talos-font-weight-extrabold: 800;--talos-line-height-none: 1;--talos-line-height-tight: 1.25;--talos-line-height-snug: 1.375;--talos-line-height-normal: 1.5;--talos-line-height-relaxed: 1.625;--talos-line-height-loose: 2;--talos-control-padding-x: .625rem;--talos-control-font-size: var(--talos-font-size-sm);--talos-control-height: var(--talos-height-md);--talos-border-radius: var(--talos-radius-md);--talos-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--talos-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .08), 0 1px 2px -1px rgba(0, 0, 0, .05);--talos-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04);--talos-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04);--talos-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .05);--talos-shadow-dialog: var(--talos-shadow-xl);--talos-shadow-dropdown: 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04);--talos-transition: .18s cubic-bezier(.4, 0, .2, 1);--talos-transition-slow: .28s cubic-bezier(.4, 0, .2, 1);--talos-bg-canvas: #f8fafc;--talos-bg-surface: #ffffff;--talos-bg-subtle: #f1f5f9;--talos-bg-overlay: rgba(15, 23, 42, .5);--talos-border-subtle: #f1f5f9;--talos-border-default: #cbd5e1;--talos-border-hover: #94a3b8;--talos-border-focus: #2563eb;--talos-focus-ring: 0 0 0 3px rgba(37, 99, 235, .18);--talos-text-primary: #0f172a;--talos-text-secondary: #334155;--talos-text-muted: #64748b;--talos-text-inverse: #ffffff;--talos-bg-color: var(--talos-bg-canvas);--talos-card-bg: var(--talos-bg-surface);--talos-card-bg-subtle: var(--talos-bg-subtle);--talos-border-color: var(--talos-border-default);--talos-text-color: var(--talos-text-primary);--talos-error-color: #ef4444;--talos-warning-color: #d97706;--talos-success-color: #16a34a;--bg-color: var(--talos-bg-canvas);--bg-subtle: var(--talos-bg-subtle);--card-bg: var(--talos-bg-surface);--card-bg-subtle: var(--talos-bg-subtle);--border-color: var(--talos-border-default);--border-hover: var(--talos-border-hover);--border-focus: var(--talos-border-focus);--text-color: var(--talos-text-primary);--text-muted: var(--talos-text-muted);--primary-color: var(--talos-primary);--primary-hover: var(--talos-primary-hover);--primary-active: var(--talos-primary-active);--primary-light: var(--talos-primary-subtle-bg);--primary-light-hover: var(--talos-primary-subtle-bg-hover);--talos-primary: #2563eb;--talos-primary-hover: #1d4ed8;--talos-primary-active: #1e40af;--talos-primary-subtle-bg: #eff6ff;--talos-primary-subtle-bg-hover: #dbeafe;--talos-primary-subtle-border: #bfdbfe;--talos-primary-text: #1e40af;--talos-primary-solid-bg: #2563eb;--talos-primary-solid-text: #ffffff;--talos-primary-color: var(--talos-primary);--talos-primary-light: var(--talos-primary-subtle-bg);--talos-primary-light-hover: var(--talos-primary-subtle-bg-hover);--talos-neutral: #475569;--talos-neutral-hover: #334155;--talos-neutral-active: #1e293b;--talos-neutral-subtle-bg: #f8fafc;--talos-neutral-subtle-bg-hover: #f1f5f9;--talos-neutral-subtle-border: #e2e8f0;--talos-neutral-text: #334155;--talos-neutral-solid-bg: #475569;--talos-neutral-solid-text: #ffffff;--talos-success: #16a34a;--talos-success-hover: #15803d;--talos-success-active: #166534;--talos-success-subtle-bg: #f0fdf4;--talos-success-subtle-bg-hover: #dcfce7;--talos-success-subtle-border: #bbf7d0;--talos-success-text: #166534;--talos-success-solid-bg: #16a34a;--talos-success-solid-text: #ffffff;--talos-warning: #d97706;--talos-warning-hover: #b45309;--talos-warning-active: #92400e;--talos-warning-subtle-bg: #fffbeb;--talos-warning-subtle-bg-hover: #fef3c7;--talos-warning-subtle-border: #fde68a;--talos-warning-text: #92400e;--talos-warning-solid-bg: #d97706;--talos-warning-solid-text: #ffffff;--talos-danger: #ef4444;--talos-danger-hover: #dc2626;--talos-danger-active: #b91c1c;--talos-danger-subtle-bg: #fef2f2;--talos-danger-subtle-bg-hover: #fee2e2;--talos-danger-subtle-border: #fecaca;--talos-danger-text: #991b1b;--talos-danger-solid-bg: #dc2626;--talos-danger-solid-text: #ffffff;--talos-info: #0284c7;--talos-info-hover: #0369a1;--talos-info-active: #075985;--talos-info-subtle-bg: #f0f9ff;--talos-info-subtle-bg-hover: #e0f2fe;--talos-info-subtle-border: #bae6fd;--talos-info-text: #0369a1;--talos-info-solid-bg: #0284c7;--talos-info-solid-text: #ffffff;--talos-purple: #7c3aed;--talos-purple-hover: #6d28d9;--talos-purple-active: #5b21b6;--talos-purple-subtle-bg: #f5f3ff;--talos-purple-subtle-bg-hover: #ede9fe;--talos-purple-subtle-border: #ddd6fe;--talos-purple-text: #6d28d9;--talos-purple-solid-bg: #7c3aed;--talos-purple-solid-text: #ffffff;--talos-input-bg: var(--talos-bg-surface);--talos-input-border: var(--talos-border-default);--talos-input-border-hover: var(--talos-border-hover);--talos-input-border-focus: var(--talos-border-focus);--talos-input-color: var(--talos-text-primary);--talos-input-placeholder-color: var(--talos-text-muted);--talos-input-disabled-bg: var(--talos-bg-subtle);--talos-input-disabled-border: var(--talos-border-default);--talos-input-disabled-color: var(--talos-text-muted);--talos-input-radius: var(--talos-radius-md);--talos-input-height: var(--talos-height-md);--talos-affix-btn-size-sm: 1.375rem;--talos-affix-btn-size-md: 1.5rem;--talos-affix-btn-size-lg: 1.75rem;--talos-affix-btn-radius: var(--talos-radius-sm, .25rem);--talos-affix-btn-icon-size-sm: .8125rem;--talos-affix-btn-icon-size-md: .875rem;--talos-affix-btn-icon-size-lg: 1rem;--talos-affix-btn-color: var(--talos-text-muted, #64748b);--talos-affix-btn-hover-color: var(--talos-text-color, #0f172a);--talos-affix-btn-hover-bg: var(--talos-btn-ghost-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));--talos-affix-btn-active-bg: var(--talos-btn-ghost-active-bg, rgba(148, 163, 184, .25));--talos-sidebar-width: 260px;--talos-sidebar-collapsed-width: 68px;--talos-nav-bg: var(--talos-bg-surface);--talos-nav-border-color: var(--talos-border-subtle);--talos-active-nav-bg: var(--talos-primary-subtle-bg);--talos-active-nav-text: var(--talos-primary);--talos-nav-hover-bg: var(--talos-bg-subtle);--talos-nav-hover-text: var(--talos-text-primary);--talos-avatar-bg: var(--talos-primary-subtle-bg);--talos-avatar-text: var(--talos-primary-text);--talos-badge-bg: var(--talos-primary-subtle-bg);--talos-badge-text: var(--talos-primary-text);--talos-header-bg: var(--talos-bg-surface);--talos-header-border-color: var(--talos-border-subtle);--talos-right-panel-bg: var(--talos-bg-surface);--talos-right-panel-border: var(--talos-border-subtle);--talos-loading-overlay-bg: rgba(255, 255, 255, .75);--talos-dropdown-bg: var(--talos-bg-surface);--talos-dropdown-border: var(--talos-border-default);--talos-dropdown-shadow: var(--talos-shadow-dropdown);--talos-dropdown-hover-bg: var(--talos-bg-subtle);--talos-dropdown-selected-bg: var(--talos-primary-subtle-bg);--talos-btn-font-family: inherit;--talos-btn-border-radius: var(--talos-radius-md);--talos-btn-font-weight: 600;--talos-btn-transition: background-color var(--talos-transition), border-color var(--talos-transition), color var(--talos-transition), box-shadow var(--talos-transition), opacity var(--talos-transition);--talos-btn-ripple-color: rgba(255, 255, 255, .35);--talos-btn-primary-bg: var(--talos-primary-solid-bg);--talos-btn-primary-hover: var(--talos-primary-hover);--talos-btn-primary-active: var(--talos-primary-active);--talos-btn-primary-text: var(--talos-primary-solid-text);--talos-btn-secondary-bg: var(--talos-neutral-solid-bg);--talos-btn-secondary-hover: var(--talos-neutral-hover);--talos-btn-secondary-active: var(--talos-neutral-active);--talos-btn-secondary-text: var(--talos-neutral-solid-text);--talos-btn-outline-bg: transparent;--talos-btn-outline-border: var(--talos-border-default);--talos-btn-outline-hover-bg: var(--talos-bg-subtle);--talos-btn-outline-hover-border: var(--talos-border-hover);--talos-btn-outline-text: var(--talos-text-secondary);--talos-btn-ghost-bg: transparent;--talos-btn-ghost-text: var(--talos-text-muted);--talos-btn-ghost-hover-bg: var(--talos-bg-subtle);--talos-btn-ghost-hover-text: var(--talos-text-primary);--talos-btn-ghost-active-bg: var(--talos-neutral-subtle-bg-hover);--talos-btn-danger-bg: var(--talos-danger-solid-bg);--talos-btn-danger-hover: var(--talos-danger-hover);--talos-btn-danger-active: var(--talos-danger-active);--talos-btn-danger-text: var(--talos-danger-solid-text);--talos-btn-success-bg: var(--talos-success-solid-bg);--talos-btn-success-hover: var(--talos-success-hover);--talos-btn-success-active: var(--talos-success-active);--talos-btn-success-text: var(--talos-success-solid-text);--talos-btn-height-xs: var(--talos-height-xs, 1.625rem);--talos-btn-height-sm: var(--talos-height-sm);--talos-btn-height-md: var(--talos-height-md);--talos-btn-height-lg: var(--talos-height-lg);--talos-btn-padding-x-xs: .5rem;--talos-btn-padding-x-sm: .625rem;--talos-btn-padding-x-md: .875rem;--talos-btn-padding-x-lg: 1.125rem;--talos-btn-font-size-xs: var(--talos-font-size-2xs, .6875rem);--talos-btn-font-size-sm: var(--talos-font-size-xs);--talos-btn-font-size-md: var(--talos-font-size-sm);--talos-btn-font-size-lg: var(--talos-font-size-md);--talos-category-bar-gap: 2px;--talos-category-bar-track-bg: var(--talos-bg-subtle);--talos-category-bar-border-radius: var(--talos-radius-md);--talos-category-bar-height-xs: .25rem;--talos-category-bar-height-sm: .375rem;--talos-category-bar-height-md: .5rem;--talos-category-bar-height-lg: .75rem;--talos-category-bar-marker-ring: var(--talos-bg-surface);--talos-range-track-bg: var(--talos-border-default);--talos-range-track-fill: var(--talos-primary);--talos-range-track-disabled-bg: var(--talos-border-subtle);--talos-range-track-disabled-fill: var(--talos-text-muted);--talos-range-track-height-sm: .25rem;--talos-range-track-height-md: .375rem;--talos-range-track-height-lg: .5rem;--talos-range-thumb-size-sm: 1rem;--talos-range-thumb-size-md: 1.25rem;--talos-range-thumb-size-lg: 1.5rem;--talos-range-thumb-bg: var(--talos-bg-surface);--talos-range-thumb-border: var(--talos-primary);--talos-range-thumb-shadow: var(--talos-shadow-sm);--talos-range-thumb-hover-shadow: 0 0 0 4px rgba(37, 99, 235, .15);--talos-range-thumb-active-shadow: 0 0 0 6px rgba(37, 99, 235, .25);--talos-range-tick-color: var(--talos-text-muted);--talos-range-tick-active-color: #ffffff;--talos-range-tick-label-color: var(--talos-text-muted);--talos-range-tooltip-bg: #0f172a;--talos-range-tooltip-text: #ffffff;--talos-toggle-track-bg: var(--talos-border-default);--talos-toggle-track-bg-hover: var(--talos-border-hover);--talos-toggle-thumb-bg: var(--talos-bg-surface);--talos-snackbar-bg: var(--talos-bg-surface);--talos-snackbar-text: var(--talos-text-primary);--talos-snackbar-border: var(--talos-border-default);--talos-snackbar-border-radius: var(--talos-radius-lg);--talos-dialog-bg: var(--talos-bg-surface);--talos-dialog-border: var(--talos-border-default);--talos-dialog-radius: var(--talos-radius-xl);--talos-dialog-shadow: var(--talos-shadow-dialog);--talos-dialog-backdrop-bg: var(--talos-bg-overlay);--talos-dialog-backdrop-blur-bg: rgba(15, 23, 42, .35);--talos-dialog-title-color: var(--talos-text-primary);--talos-dialog-subtitle-color: var(--talos-text-muted);--talos-tooltip-bg: #0f172a;--talos-tooltip-text: #ffffff;--talos-dropzone-bg: var(--talos-bg-surface);--talos-dropzone-hover-bg: var(--talos-bg-subtle);--talos-dropzone-drag-bg: var(--talos-primary-subtle-bg);--talos-dropzone-border: var(--talos-border-default);--talos-dropzone-hover-border: var(--talos-border-hover);--talos-dropzone-drag-border: var(--talos-primary);--talos-dropzone-radius: var(--talos-radius-lg);--talos-dropzone-text: var(--talos-text-primary);--talos-dropzone-subtext: var(--talos-text-muted);--talos-dropzone-icon-color: var(--talos-primary);--talos-dropzone-file-bg: var(--talos-bg-surface);--talos-dropzone-file-border: var(--talos-border-default);--talos-rating-fill-warning: var(--talos-warning);--talos-rating-fill-primary: var(--talos-primary);--talos-rating-fill-danger: var(--talos-danger);--talos-rating-fill-success: var(--talos-success);--talos-rating-fill-purple: var(--talos-purple);--talos-rating-unfilled: var(--talos-border-default);--talos-rating-size-sm: 1.125rem;--talos-rating-size-md: 1.375rem;--talos-rating-size-lg: 1.75rem;--talos-rating-size-xl: 2.25rem}:root[data-theme=dark],:root.dark,[data-theme=dark],[data-mode=dark],.dark,.dark-theme{--talos-bg-canvas: #090d16;--talos-bg-surface: #0f172a;--talos-bg-subtle: #131d31;--talos-bg-overlay: rgba(3, 7, 18, .75);--talos-border-subtle: rgba(255, 255, 255, .06);--talos-border-default: rgba(255, 255, 255, .1);--talos-border-hover: rgba(255, 255, 255, .2);--talos-border-focus: #3b82f6;--talos-focus-ring: 0 0 0 3px rgba(59, 130, 246, .35);--talos-text-primary: #f8fafc;--talos-text-secondary: #e2e8f0;--talos-text-muted: #94a3b8;--talos-text-inverse: #090d16;--talos-shadow-dropdown: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);--talos-shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .1);--talos-primary: #3b82f6;--talos-primary-hover: #60a5fa;--talos-primary-active: #2563eb;--talos-primary-subtle-bg: rgba(59, 130, 246, .16);--talos-primary-subtle-bg-hover: rgba(59, 130, 246, .26);--talos-primary-subtle-border: rgba(59, 130, 246, .35);--talos-primary-text: #93c5fd;--talos-primary-solid-bg: #2563eb;--talos-primary-solid-text: #ffffff;--talos-neutral: #94a3b8;--talos-neutral-hover: #cbd5e1;--talos-neutral-active: #f1f5f9;--talos-neutral-subtle-bg: rgba(148, 163, 184, .12);--talos-neutral-subtle-bg-hover: rgba(148, 163, 184, .2);--talos-neutral-subtle-border: rgba(148, 163, 184, .25);--talos-neutral-text: #e2e8f0;--talos-neutral-solid-bg: #334155;--talos-neutral-solid-text: #f8fafc;--talos-success: #22c55e;--talos-success-hover: #4ade80;--talos-success-active: #16a34a;--talos-success-subtle-bg: rgba(34, 197, 94, .16);--talos-success-subtle-bg-hover: rgba(34, 197, 94, .26);--talos-success-subtle-border: rgba(34, 197, 94, .35);--talos-success-text: #86efac;--talos-success-solid-bg: #16a34a;--talos-success-solid-text: #ffffff;--talos-warning: #f59e0b;--talos-warning-hover: #fbbf24;--talos-warning-active: #d97706;--talos-warning-subtle-bg: rgba(245, 158, 11, .16);--talos-warning-subtle-bg-hover: rgba(245, 158, 11, .26);--talos-warning-subtle-border: rgba(245, 158, 11, .35);--talos-warning-text: #fde047;--talos-warning-solid-bg: #d97706;--talos-warning-solid-text: #ffffff;--talos-danger: #ef4444;--talos-danger-hover: #f87171;--talos-danger-active: #dc2626;--talos-danger-subtle-bg: rgba(239, 68, 68, .16);--talos-danger-subtle-bg-hover: rgba(239, 68, 68, .26);--talos-danger-subtle-border: rgba(239, 68, 68, .35);--talos-danger-text: #fca5a5;--talos-danger-solid-bg: #dc2626;--talos-danger-solid-text: #ffffff;--talos-info: #0ea5e9;--talos-info-hover: #38bdf8;--talos-info-active: #0284c7;--talos-info-subtle-bg: rgba(14, 165, 233, .16);--talos-info-subtle-bg-hover: rgba(14, 165, 233, .26);--talos-info-subtle-border: rgba(14, 165, 233, .35);--talos-info-text: #7dd3fc;--talos-info-solid-bg: #0284c7;--talos-info-solid-text: #ffffff;--talos-purple: #8b5cf6;--talos-purple-hover: #a78bfa;--talos-purple-active: #7c3aed;--talos-purple-subtle-bg: rgba(139, 92, 246, .16);--talos-purple-subtle-bg-hover: rgba(139, 92, 246, .26);--talos-purple-subtle-border: rgba(139, 92, 246, .35);--talos-purple-text: #c4b5fd;--talos-purple-solid-bg: #7c3aed;--talos-purple-solid-text: #ffffff;--talos-tooltip-bg: #1e293b;--talos-tooltip-text: #f8fafc;--talos-range-tooltip-bg: #1e293b;--talos-range-tooltip-text: #f8fafc;--talos-range-tick-active-color: #f8fafc;--talos-loading-overlay-bg: rgba(9, 13, 22, .8);--talos-range-thumb-shadow: 0 2px 4px rgba(0, 0, 0, .5)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not(.light){--talos-bg-canvas: #090d16;--talos-bg-surface: #0f172a;--talos-bg-subtle: #131d31;--talos-bg-overlay: rgba(3, 7, 18, .75);--talos-border-subtle: rgba(255, 255, 255, .06);--talos-border-default: rgba(255, 255, 255, .1);--talos-border-hover: rgba(255, 255, 255, .2);--talos-border-focus: #3b82f6;--talos-focus-ring: 0 0 0 3px rgba(59, 130, 246, .35);--talos-text-primary: #f8fafc;--talos-text-secondary: #e2e8f0;--talos-text-muted: #94a3b8;--talos-text-inverse: #090d16;--talos-primary: #3b82f6;--talos-primary-hover: #60a5fa;--talos-primary-active: #2563eb;--talos-primary-subtle-bg: rgba(59, 130, 246, .16);--talos-primary-subtle-bg-hover: rgba(59, 130, 246, .26);--talos-primary-subtle-border: rgba(59, 130, 246, .35);--talos-primary-text: #93c5fd;--talos-neutral: #94a3b8;--talos-neutral-hover: #cbd5e1;--talos-neutral-active: #f1f5f9;--talos-neutral-subtle-bg: rgba(148, 163, 184, .12);--talos-neutral-subtle-bg-hover: rgba(148, 163, 184, .2);--talos-neutral-subtle-border: rgba(148, 163, 184, .25);--talos-neutral-text: #e2e8f0;--talos-success: #22c55e;--talos-success-hover: #4ade80;--talos-success-active: #16a34a;--talos-success-subtle-bg: rgba(34, 197, 94, .16);--talos-success-subtle-bg-hover: rgba(34, 197, 94, .26);--talos-success-subtle-border: rgba(34, 197, 94, .35);--talos-success-text: #86efac;--talos-warning: #f59e0b;--talos-warning-hover: #fbbf24;--talos-warning-active: #d97706;--talos-warning-subtle-bg: rgba(245, 158, 11, .16);--talos-warning-subtle-bg-hover: rgba(245, 158, 11, .26);--talos-warning-subtle-border: rgba(245, 158, 11, .35);--talos-warning-text: #fde047;--talos-danger: #ef4444;--talos-danger-hover: #f87171;--talos-danger-active: #dc2626;--talos-danger-subtle-bg: rgba(239, 68, 68, .16);--talos-danger-subtle-bg-hover: rgba(239, 68, 68, .26);--talos-danger-subtle-border: rgba(239, 68, 68, .35);--talos-danger-text: #fca5a5;--talos-info: #0ea5e9;--talos-info-hover: #38bdf8;--talos-info-active: #0284c7;--talos-info-subtle-bg: rgba(14, 165, 233, .16);--talos-info-subtle-bg-hover: rgba(14, 165, 233, .26);--talos-info-subtle-border: rgba(14, 165, 233, .35);--talos-info-text: #7dd3fc;--talos-purple: #8b5cf6;--talos-purple-hover: #a78bfa;--talos-purple-active: #7c3aed;--talos-purple-subtle-bg: rgba(139, 92, 246, .16);--talos-purple-subtle-bg-hover: rgba(139, 92, 246, .26);--talos-purple-subtle-border: rgba(139, 92, 246, .35);--talos-purple-text: #c4b5fd;--talos-tooltip-bg: #1e293b;--talos-tooltip-text: #f8fafc;--talos-range-tooltip-bg: #1e293b;--talos-range-tooltip-text: #f8fafc;--talos-range-tick-active-color: #f8fafc}}:host{display:block;width:100%;box-sizing:border-box}.talos-range-wrapper{display:flex;flex-direction:column;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none;font-family:inherit;--range-accent: var(--talos-range-track-fill, var(--talos-primary-color));--range-accent-hover: var(--talos-primary-hover, #1d4ed8);--range-focus-glow: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--range-track-h: var(--talos-range-track-height-md, .375rem);--range-thumb-d: var(--talos-range-thumb-size-md, 1.25rem);--range-thumb-border-width: 2px;--range-tick-w: 2px;--range-tick-h: 8px;--range-font-size: var(--talos-control-font-size, .8125rem)}.talos-range-wrapper.size-sm{--range-track-h: var(--talos-range-track-height-sm, .25rem);--range-thumb-d: var(--talos-range-thumb-size-sm, 1rem);--range-font-size: .75rem;--range-tick-h: 6px}.talos-range-wrapper.size-lg{--range-track-h: var(--talos-range-track-height-lg, .5rem);--range-thumb-d: var(--talos-range-thumb-size-lg, 1.5rem);--range-font-size: .875rem;--range-tick-h: 10px}.talos-range-wrapper.variant-primary{--range-accent: var(--talos-primary-color, #2563eb);--range-accent-hover: var(--talos-primary-hover, #1d4ed8);--range-focus-glow: 0 0 0 3px rgba(37, 99, 235, .2)}.talos-range-wrapper.variant-secondary{--range-accent: #475569;--range-accent-hover: #334155;--range-focus-glow: 0 0 0 3px rgba(71, 85, 105, .2)}.talos-range-wrapper.variant-success{--range-accent: #16a34a;--range-accent-hover: #15803d;--range-focus-glow: 0 0 0 3px rgba(22, 163, 74, .2)}.talos-range-wrapper.variant-warning{--range-accent: #d97706;--range-accent-hover: #b45309;--range-focus-glow: 0 0 0 3px rgba(217, 119, 6, .2)}.talos-range-wrapper.variant-danger{--range-accent: var(--talos-error-color, #ef4444);--range-accent-hover: #dc2626;--range-focus-glow: 0 0 0 3px rgba(239, 68, 68, .2)}.talos-range-wrapper.variant-info{--range-accent: #0284c7;--range-accent-hover: #0369a1;--range-focus-glow: 0 0 0 3px rgba(2, 132, 199, .2)}.talos-range-wrapper.is-invalid{--range-accent: var(--talos-error-color, #ef4444);--range-focus-glow: 0 0 0 3px rgba(239, 68, 68, .25)}.talos-range-wrapper.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.talos-range-wrapper.is-disabled .talos-range-thumb{cursor:not-allowed;border-color:var(--talos-range-track-disabled-fill, #94a3b8);background-color:var(--talos-range-track-disabled-bg, #cbd5e1);box-shadow:none}.talos-range-wrapper.is-disabled .talos-range-fill{background-color:var(--talos-range-track-disabled-fill, #94a3b8)}.talos-range-wrapper.is-readonly .talos-range-slider,.talos-range-wrapper.is-readonly .talos-range-thumb{cursor:default}.talos-range-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}.talos-range-label-group{display:flex;flex-direction:column;gap:.125rem}.talos-range-label{font-size:var(--range-font-size);font-weight:600;color:var(--talos-text-color, #0f172a)}.talos-range-hint{font-size:.75rem;color:var(--talos-text-muted, #64748b)}.talos-range-value-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;font-size:.75rem;font-weight:600;border-radius:var(--talos-border-radius, .375rem);background-color:var(--talos-primary-light, #eff6ff);color:var(--range-accent)}.talos-range-inputs-group{display:flex;align-items:center;gap:.375rem}.talos-range-inputs-separator{color:var(--talos-text-muted, #64748b);font-weight:500}.talos-range-number-box{display:inline-flex;align-items:center;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-border-radius, .375rem);padding:0 .375rem;height:1.875rem;transition:border-color .15s ease,box-shadow .15s ease}.talos-range-number-box:focus-within{border-color:var(--range-accent);box-shadow:var(--range-focus-glow)}.talos-range-input-affix{font-size:.75rem;color:var(--talos-text-muted, #64748b);-webkit-user-select:none;user-select:none}.talos-range-number-input{width:3.5rem;border:none;background:transparent;padding:.125rem .25rem;font-size:.8125rem;font-weight:500;color:var(--talos-text-color, #0f172a);text-align:right;outline:none;font-family:inherit}.talos-range-number-input::-webkit-inner-spin-button,.talos-range-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.talos-range-number-input{-moz-appearance:textfield}.talos-range-slider{position:relative;width:100%;height:calc(var(--range-thumb-d) + .5rem);display:flex;align-items:center;cursor:pointer;touch-action:none;padding:0 calc(var(--range-thumb-d) / 2);box-sizing:border-box}.talos-range-slider.is-active{cursor:grabbing}.talos-range-track{position:relative;width:100%;height:var(--range-track-h);background-color:var(--talos-range-track-bg, #e2e8f0);border-radius:9999px;overflow:visible}.talos-range-fill{position:absolute;top:0;bottom:0;background-color:var(--range-accent);border-radius:9999px;transition:background-color .18s ease;pointer-events:none}.talos-range-ticks{position:absolute;inset:0;pointer-events:none}.talos-range-tick{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--range-tick-w);height:var(--range-tick-h);background-color:var(--talos-range-tick-color, #94a3b8);border-radius:1px;pointer-events:auto;cursor:pointer;transition:transform .15s ease,background-color .15s ease}.talos-range-tick.is-active{background-color:var(--talos-range-tick-active-color, #ffffff);box-shadow:0 0 2px #0000004d}.talos-range-tick:hover{transform:translate(-50%,-50%) scale(1.4)}.talos-range-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--range-thumb-d);height:var(--range-thumb-d);background-color:var(--talos-range-thumb-bg, #ffffff);border:var(--range-thumb-border-width) solid var(--range-accent);border-radius:50%;box-shadow:var(--talos-range-thumb-shadow, 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08));cursor:grab;outline:none;box-sizing:border-box;transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .12s cubic-bezier(.4,0,.2,1),border-color .12s cubic-bezier(.4,0,.2,1);z-index:2}.talos-range-thumb:hover{box-shadow:var(--talos-range-thumb-hover-shadow, 0 0 0 4px rgba(37, 99, 235, .15));transform:translate(-50%,-50%) scale(1.08)}.talos-range-thumb.is-focused,.talos-range-thumb:focus-visible{box-shadow:var(--range-focus-glow);transform:translate(-50%,-50%) scale(1.12);z-index:3}.talos-range-thumb.is-dragging{cursor:grabbing;box-shadow:var(--talos-range-thumb-active-shadow, 0 0 0 6px rgba(37, 99, 235, .25));transform:translate(-50%,-50%) scale(1.16);z-index:4}.talos-range-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);background-color:var(--talos-range-tooltip-bg, #1e293b);color:var(--talos-range-tooltip-text, #ffffff);font-size:.6875rem;font-weight:600;padding:.1875rem .4375rem;border-radius:.25rem;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s ease;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;z-index:10}.talos-range-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:4px;border-style:solid;border-color:var(--talos-range-tooltip-bg, #1e293b) transparent transparent transparent}.talos-range-tooltip.visible{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.talos-range-labels{position:relative;width:100%;margin-top:.25rem;height:1.125rem;padding:0 calc(var(--range-thumb-d) / 2);box-sizing:border-box}.talos-range-label-item{position:absolute;top:0;transform:translate(-50%);font-size:.6875rem;color:var(--talos-range-tick-label-color, var(--talos-text-muted, #64748b));white-space:nowrap;cursor:pointer;transition:color .15s ease,font-weight .15s ease}.talos-range-label-item.is-active{color:var(--range-accent);font-weight:600}.talos-range-label-item:hover{color:var(--talos-text-color, #0f172a)}\n"] }]
         }], propDecorators: { trackContainerRef: [{ type: i0.ViewChild, args: ['sliderTrackContainer', { isSignal: true }] }], thumb0Ref: [{ type: i0.ViewChild, args: ['thumb0', { isSignal: true }] }], thumb1Ref: [{ type: i0.ViewChild, args: ['thumb1', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], minRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRange", required: false }] }], maxRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRange", required: false }] }], marks: [{ type: i0.Input, args: [{ isSignal: true, alias: "marks", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], showIntervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIntervals", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], snapToTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToTicks", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], showInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInputs", required: false }] }], showValueBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueBadge", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelStart", required: false }] }], ariaLabelEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelEnd", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], change: [{ type: i0.Output, args: ["change"] }] } });
 
 class TalosRangeInputModule {
@@ -15307,7 +15377,7 @@ class TalosColorPickerComponent {
                 useExisting: forwardRef(() => TalosColorPickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "satValCanvas", first: true, predicate: ["satValCanvas"], descendants: true }, { propertyName: "hueTrack", first: true, predicate: ["hueTrack"], descendants: true }, { propertyName: "alphaTrack", first: true, predicate: ["alphaTrack"], descendants: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true }, { propertyName: "triggerInput", first: true, predicate: ["triggerInput"], descendants: true }], ngImport: i0, template: "@if (!inline()) {\n<!-- Standard Trigger Button / Popover Mode -->\n<div class=\"talos-color-picker-wrapper\" [class.is-floating]=\"floatingLabel()\">\n  @if (label() && !floatingLabel()) {\n  <label [for]=\"inputId()\" class=\"talos-field-label\">{{ label() }}</label>\n  }\n\n  <div #triggerBtn cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"talos-color-picker-trigger\"\n    [class.is-focused]=\"isOpen()\" [class.is-disabled]=\"effectiveDisabled()\"\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" [attr.role]=\"'button'\" [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"isOpen()\" [attr.aria-label]=\"label() || placeholder()\" (click)=\"toggleDropdown()\"\n    (keydown.enter)=\"toggleDropdown()\" (keydown.space)=\"toggleDropdown()\">\n\n    <!-- Swatch Pill Preview -->\n    <div class=\"swatch-preview-box\" role=\"button\" tabindex=\"-1\" aria-label=\"Open color palette\" (click)=\"toggleDropdown($event)\">\n      <div class=\"swatch-checkerboard\"></div>\n      <div class=\"swatch-fill\" [style.background-color]=\"rgbaString()\"></div>\n    </div>\n\n    <!-- Color Value Input Field -->\n    <input\n      #triggerInput\n      [id]=\"inputId()\"\n      type=\"text\"\n      class=\"color-picker-input\"\n      [value]=\"isInputFocused() ? manualInputValue() : formattedColor()\"\n      [placeholder]=\"floatingLabel() && !isFloated() ? '' : placeholder()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onTriggerInput($event)\"\n      (focus)=\"onTriggerFocus()\"\n      (blur)=\"onTriggerBlur($event)\"\n      (keydown.enter)=\"onTriggerEnter($event)\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    />\n\n    <!-- Clear Button -->\n    @if (clearable() && formattedColor() && !effectiveDisabled() && !readonly()) {\n    <button type=\"button\" class=\"clear-button\" aria-label=\"Clear color\" (click)=\"clear($event)\">\n      <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n        stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n      </svg>\n    </button>\n    }\n\n    <!-- Dropdown Chevron Indicator -->\n    <button type=\"button\" class=\"dropdown-chevron-icon\" [class.is-rotated]=\"isOpen()\"\n      aria-label=\"Toggle color palette\" tabindex=\"-1\" (click)=\"toggleDropdown($event)\">\n      <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n        stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    </button>\n\n    @if (label() && floatingLabel()) {\n    <label [for]=\"inputId()\" class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\">{{ label() }}</label>\n    }\n  </div>\n\n  <!-- CDK Connected Popover Overlay -->\n  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\" (overlayOutsideClick)=\"close()\" (detach)=\"close()\">\n    <div class=\"talos-color-picker-panel talos-popover-panel\" (click)=\"$event.stopPropagation()\">\n      <ng-container *ngTemplateOutlet=\"pickerContentTpl\"></ng-container>\n    </div>\n  </ng-template>\n</div>\n} @else {\n<!-- Inline / Embedded Mode -->\n<div class=\"talos-color-picker-panel talos-inline-panel\">\n  @if (label()) {\n  <div class=\"panel-header-title\">{{ label() }}</div>\n  }\n  <ng-container *ngTemplateOutlet=\"pickerContentTpl\"></ng-container>\n</div>\n}\n\n<!-- Main Color Picker Content Template -->\n<ng-template #pickerContentTpl>\n  <div class=\"picker-inner-container\">\n\n    <!-- 1. Saturation & Value 2D Canvas -->\n    <div #satValCanvas class=\"sat-val-canvas\" [style.background-color]=\"pureHueHex()\" tabindex=\"0\" role=\"slider\"\n      aria-label=\"Color saturation and brightness\"\n      [attr.aria-valuetext]=\"'Saturation ' + currentHsva().s + '%, Brightness ' + currentHsva().v + '%'\"\n      (mousedown)=\"onSatValMouseDown($event)\" (touchstart)=\"onSatValTouchStart($event)\"\n      (keydown)=\"onSatValKeyDown($event)\">\n      <div class=\"sat-gradient-white\"></div>\n      <div class=\"val-gradient-black\"></div>\n\n      <!-- Handle Pin -->\n      <div class=\"sat-val-handle\" [class.is-light-handle]=\"!isLight()\" [style.left.%]=\"currentHsva().s\"\n        [style.top.%]=\"100 - currentHsva().v\" [style.background-color]=\"rgbaString()\">\n      </div>\n    </div>\n\n    <!-- 2. Sliders & Action Bar -->\n    <div class=\"sliders-action-bar\">\n      <!-- Sliders Column -->\n      <div class=\"sliders-column\">\n        <!-- Hue Rainbow Slider Track -->\n        <div #hueTrack class=\"hue-slider-track\" tabindex=\"0\" role=\"slider\" aria-label=\"Hue spectrum\" aria-valuemin=\"0\"\n          aria-valuemax=\"360\" [attr.aria-valuenow]=\"currentHsva().h\" (mousedown)=\"onHueMouseDown($event)\"\n          (touchstart)=\"onHueTouchStart($event)\" (keydown)=\"onHueKeyDown($event)\">\n          <div class=\"slider-thumb\" [style.left.%]=\"(currentHsva().h / 360) * 100\"\n            [style.background-color]=\"pureHueHex()\">\n          </div>\n        </div>\n\n        <!-- Alpha Opacity Slider Track -->\n        @if (showAlpha()) {\n        <div #alphaTrack class=\"alpha-slider-track\" tabindex=\"0\" role=\"slider\" aria-label=\"Color opacity\"\n          aria-valuemin=\"0\" aria-valuemax=\"1\" [attr.aria-valuenow]=\"currentHsva().a\"\n          (mousedown)=\"onAlphaMouseDown($event)\" (touchstart)=\"onAlphaTouchStart($event)\"\n          (keydown)=\"onAlphaKeyDown($event)\">\n          <div class=\"alpha-checkerboard-bg\"></div>\n          <div class=\"alpha-gradient-overlay\"\n            [style.background]=\"'linear-gradient(to right, transparent, ' + pureHueHex() + ')'\">\n          </div>\n          <div class=\"slider-thumb\" [style.left.%]=\"currentHsva().a * 100\" [style.background-color]=\"rgbaString()\">\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Action & Preview Column -->\n      <div class=\"action-preview-column\">\n        <!-- Color Preview Circle -->\n        <div class=\"swatch-circle-preview\" [title]=\"formattedColor()\">\n          <div class=\"swatch-checkerboard\"></div>\n          <div class=\"swatch-fill\" [style.background-color]=\"rgbaString()\"></div>\n        </div>\n\n        <!-- Quick Action Buttons -->\n        <div class=\"quick-actions-row\">\n          @if (showEyeDropper() && hasEyeDropper()) {\n          <button type=\"button\" class=\"icon-action-button\" title=\"Pick color from screen\"\n            aria-label=\"Pick color from screen\" (click)=\"pickWithEyeDropper()\">\n            <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path\n                d=\"m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12\" />\n              <path d=\"m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z\" />\n              <path d=\"m2 22 .414-.414\" />\n            </svg>\n          </button>\n          }\n\n          <button type=\"button\" class=\"icon-action-button\" [class.is-copied]=\"copied()\"\n            [title]=\"copied() ? 'Copied to clipboard!' : 'Copy color string'\" aria-label=\"Copy color string\"\n            (click)=\"copyColor()\">\n            @if (copied()) {\n            <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"copy-success-icon\">\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\n            </svg>\n            } @else {\n            <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect>\n              <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path>\n            </svg>\n            }\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <!-- 3. Format Switcher & Channel Inputs -->\n    @if (showInputs()) {\n    <div class=\"inputs-section\">\n      @if (showFormatSwitcher()) {\n      <div class=\"format-tabs-bar\">\n        <button type=\"button\" class=\"format-tab-btn\" [class.is-active]=\"currentFormat() === 'hex'\"\n          (click)=\"switchFormat('hex')\">\n          HEX\n        </button>\n        <button type=\"button\" class=\"format-tab-btn\" [class.is-active]=\"currentFormat() === 'rgb'\"\n          (click)=\"switchFormat('rgb')\">\n          RGB\n        </button>\n        <button type=\"button\" class=\"format-tab-btn\" [class.is-active]=\"currentFormat() === 'hsl'\"\n          (click)=\"switchFormat('hsl')\">\n          HSL\n        </button>\n      </div>\n      }\n\n      <!-- Channel Inputs Grid -->\n      <div class=\"channel-inputs-grid\">\n        @if (currentFormat() === 'hex') {\n        <!-- HEX Input -->\n        <div class=\"input-field-group hex-field\">\n          <input type=\"text\" class=\"channel-input hex-input\" [ngModel]=\"inputHex()\"\n            (ngModelChange)=\"onHexInputChange($event)\" placeholder=\"#3B82F6\" aria-label=\"Hex color value\" />\n          <span class=\"field-caption\">HEX</span>\n        </div>\n        } @else if (currentFormat() === 'rgb') {\n        <!-- RGB Inputs -->\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"255\" class=\"channel-input\" [(ngModel)]=\"inputR\"\n            (ngModelChange)=\"onRgbaInputChange()\" aria-label=\"Red\" />\n          <span class=\"field-caption\">R</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"255\" class=\"channel-input\" [(ngModel)]=\"inputG\"\n            (ngModelChange)=\"onRgbaInputChange()\" aria-label=\"Green\" />\n          <span class=\"field-caption\">G</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"255\" class=\"channel-input\" [(ngModel)]=\"inputB\"\n            (ngModelChange)=\"onRgbaInputChange()\" aria-label=\"Blue\" />\n          <span class=\"field-caption\">B</span>\n        </div>\n        } @else if (currentFormat() === 'hsl') {\n        <!-- HSL Inputs -->\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"360\" class=\"channel-input\" [(ngModel)]=\"inputH\"\n            (ngModelChange)=\"onHslaInputChange()\" aria-label=\"Hue\" />\n          <span class=\"field-caption\">H</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"100\" class=\"channel-input\" [(ngModel)]=\"inputS\"\n            (ngModelChange)=\"onHslaInputChange()\" aria-label=\"Saturation\" />\n          <span class=\"field-caption\">S%</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"100\" class=\"channel-input\" [(ngModel)]=\"inputL\"\n            (ngModelChange)=\"onHslaInputChange()\" aria-label=\"Lightness\" />\n          <span class=\"field-caption\">L%</span>\n        </div>\n        }\n\n        <!-- Alpha Input (Common for all non-hex or with alpha) -->\n        @if (showAlpha()) {\n        <div class=\"input-field-group alpha-field\">\n          <input type=\"number\" min=\"0\" max=\"100\" class=\"channel-input\" [(ngModel)]=\"inputA\"\n            (ngModelChange)=\"currentFormat() === 'hsl' ? onHslaInputChange() : onRgbaInputChange()\"\n            aria-label=\"Opacity Percentage\" />\n          <span class=\"field-caption\">A%</span>\n        </div>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- 4. Preset Color Swatches -->\n    @if (showPresets() && normalizedPresets().length > 0) {\n    <div class=\"presets-section\">\n      @for (group of normalizedPresets(); track group.label) {\n      @if (normalizedPresets().length > 1) {\n      <div class=\"preset-group-title\">{{ group.label }}</div>\n      }\n      <div class=\"swatches-grid\">\n        @for (color of group.colors; track color) {\n        <button type=\"button\" class=\"swatch-btn\"\n          [class.is-selected]=\"currentHex().toLowerCase() === color.toLowerCase()\" [style.background-color]=\"color\"\n          [title]=\"color\" [attr.aria-label]=\"'Select preset color ' + color\" (click)=\"selectPreset(color)\">\n          @if (currentHex().toLowerCase() === color.toLowerCase()) {\n          <svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" stroke=\"currentColor\" stroke-width=\"3\" fill=\"none\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"swatch-check-icon\">\n            <polyline points=\"20 6 9 17 4 12\"></polyline>\n          </svg>\n          }\n        </button>\n        }\n      </div>\n      }\n    </div>\n    }\n\n    <!-- 5. Recent Colors -->\n    @if (showRecent() && recentColors().length > 0) {\n    <div class=\"recent-section\">\n      <div class=\"recent-group-title\">Recent Colors</div>\n      <div class=\"swatches-grid recent-grid\">\n        @for (color of recentColors(); track color) {\n        <button type=\"button\" class=\"swatch-btn\"\n          [class.is-selected]=\"currentHex().toLowerCase() === color.toLowerCase()\" [style.background-color]=\"color\"\n          [title]=\"color\" [attr.aria-label]=\"'Select recent color ' + color\" (click)=\"selectPreset(color)\">\n        </button>\n        }\n      </div>\n    </div>\n    }\n\n  </div>\n</ng-template>", styles: [":host{display:inline-block;position:relative;width:100%;max-width:100%;font-family:inherit;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host.color-picker-sm{--talos-control-height: var(--talos-height-sm, 2rem);--tcp-width: 250px;--tcp-canvas-height: 130px;--tcp-font-size: var(--talos-font-size-xs, .75rem)}:host.color-picker-md{--talos-control-height: var(--talos-height-md, 2.25rem);--tcp-width: 280px;--tcp-canvas-height: 150px;--tcp-font-size: var(--talos-font-size-sm, .8125rem)}:host.color-picker-lg{--talos-control-height: var(--talos-height-lg, 2.625rem);--tcp-width: 310px;--tcp-canvas-height: 170px;--tcp-font-size: var(--talos-font-size-md, .875rem)}.talos-field-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-primary, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--talos-transition, .18s ease)}.talos-field-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-color-picker-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.talos-color-picker-trigger{position:relative;display:flex;align-items:center;gap:.625rem;width:100%;height:var(--talos-control-height, 2.25rem);min-height:var(--talos-control-height, 2.25rem);padding:0 var(--talos-control-padding-x, .625rem);background-color:var(--talos-input-bg, var(--talos-bg-surface, #ffffff));border:1px solid var(--talos-input-border, var(--talos-border-default, #cbd5e1));border-radius:var(--talos-border-radius, var(--talos-radius-md, .375rem));color:var(--talos-input-color, var(--talos-text-primary, #0f172a));font-size:var(--talos-control-font-size, .8125rem);cursor:text;outline:none;-webkit-user-select:none;user-select:none;transition:border-color var(--talos-transition, .18s ease),box-shadow var(--talos-transition, .18s ease),background-color var(--talos-transition, .18s ease)}.talos-color-picker-trigger:hover:not(.is-disabled){border-color:var(--talos-input-border-hover, var(--talos-border-hover, #94a3b8))}.talos-color-picker-trigger:focus-within,.talos-color-picker-trigger.is-focused,.talos-color-picker-trigger:focus-visible{border-color:var(--talos-input-border-focus, var(--talos-primary, #2563eb));box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .18))}.talos-color-picker-trigger.is-disabled{background-color:var(--talos-input-disabled-bg, var(--talos-bg-subtle, #f1f5f9));border-color:var(--talos-input-disabled-border, var(--talos-border-subtle, #e2e8f0));color:var(--talos-input-disabled-color, var(--talos-text-muted, #94a3b8));cursor:not-allowed;opacity:.65}.swatch-preview-box{position:relative;width:1.1rem;height:1.1rem;min-width:1.1rem;border-radius:var(--talos-radius-xs, .25rem);overflow:hidden;border:1px solid var(--talos-border-default, rgba(0, 0, 0, .15));box-shadow:inset 0 0 2px #0000001a;cursor:pointer;flex-shrink:0;transition:transform .12s ease}.swatch-preview-box:hover{transform:scale(1.08)}.swatch-checkerboard,.alpha-checkerboard-bg{position:absolute;inset:0;background-image:linear-gradient(45deg,var(--talos-border-default, #cbd5e1) 25%,transparent 25%),linear-gradient(-45deg,var(--talos-border-default, #cbd5e1) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--talos-border-default, #cbd5e1) 75%),linear-gradient(-45deg,transparent 75%,var(--talos-border-default, #cbd5e1) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:var(--talos-bg-surface, #ffffff)}.swatch-fill{position:absolute;inset:0;transition:background-color .1s ease}.color-picker-input{flex:1;min-width:0;width:100%;height:100%;background:transparent;border:none;outline:none;padding:0;margin:0;font-family:inherit;font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-medium, 500);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--talos-input-color, var(--talos-text-primary, #0f172a));line-height:normal}.color-picker-input::placeholder{color:var(--talos-input-placeholder-color, var(--talos-text-muted, #94a3b8));opacity:1;font-weight:var(--talos-font-weight-normal, 400)}.color-picker-input:disabled{cursor:not-allowed}.clear-button{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:.25rem;color:var(--talos-text-muted, #94a3b8);border-radius:var(--talos-radius-full, 9999px);cursor:pointer;transition:color var(--talos-transition, .18s ease),background-color var(--talos-transition, .18s ease)}.clear-button:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.dropdown-chevron-icon{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;color:var(--talos-text-muted, #94a3b8);cursor:pointer;transition:transform var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),color var(--talos-transition, .18s ease)}.dropdown-chevron-icon.is-rotated{transform:rotate(180deg);color:var(--talos-primary, #2563eb)}.dropdown-chevron-icon:hover{color:var(--talos-text-primary, #0f172a)}.talos-floating-label{position:absolute;left:calc(var(--talos-control-padding-x, .625rem) + 1.375rem + .625rem);top:50%;transform:translateY(-50%);font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-medium, 500);color:var(--talos-input-placeholder-color, var(--talos-text-muted, #94a3b8));pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--talos-input-bg, var(--talos-bg-surface, #ffffff));padding:0 .25rem;border-radius:var(--talos-radius-xs, .25rem);line-height:1;z-index:2;transition:transform var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),font-size var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),color var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),top var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),left var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1))}.talos-floating-label.is-floated{top:0;left:var(--talos-control-padding-x, .625rem);transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,:host(.is-floated) .talos-floating-label.is-floated,.talos-color-picker-trigger:focus-within .talos-floating-label.is-floated,.talos-color-picker-trigger.is-focused .talos-floating-label.is-floated{color:var(--talos-primary, #2563eb)}.talos-color-picker-panel{width:var(--tcp-width, 280px);max-width:calc(100vw - 2rem);background-color:var(--talos-dropdown-bg, var(--talos-bg-surface, #ffffff));border:1px solid var(--talos-dropdown-border, var(--talos-border-default, #cbd5e1));border-radius:var(--talos-border-radius, var(--talos-radius-lg, .5rem));overflow:hidden;box-sizing:border-box}.talos-color-picker-panel.talos-popover-panel{box-shadow:var(--talos-dropdown-shadow, var(--talos-shadow-dropdown, 0 16px 32px -4px rgba(0, 0, 0, .25)));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:tcp-slide-in var(--talos-transition, .18s cubic-bezier(.16, 1, .3, 1));z-index:1050}.talos-color-picker-panel.talos-inline-panel{box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .05))}.talos-color-picker-panel .panel-header-title{padding:.75rem .875rem 0;font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-primary, #0f172a)}.picker-inner-container{display:flex;flex-direction:column;padding:.75rem;gap:.75rem}.sat-val-canvas{position:relative;width:100%;height:var(--tcp-canvas-height, 150px);border-radius:calc(var(--talos-border-radius, var(--talos-radius-md, .375rem)) - 1px);overflow:hidden;cursor:crosshair;outline:none;-webkit-user-select:none;user-select:none;touch-action:none;box-shadow:inset 0 0 1px #0000004d}.sat-val-canvas:focus-visible{box-shadow:0 0 0 2px var(--talos-primary, #2563eb),inset 0 0 1px #0000004d}.sat-gradient-white{position:absolute;inset:0;background:linear-gradient(to right,#ffffff,transparent)}.val-gradient-black{position:absolute;inset:0;background:linear-gradient(to top,#000000,transparent)}.sat-val-handle{position:absolute;width:14px;height:14px;border-radius:var(--talos-radius-full, 9999px);border:2px solid #ffffff;box-shadow:0 0 2px #0009,inset 0 0 1px #0006;transform:translate(-50%,-50%);pointer-events:none;transition:transform .05s ease}.sat-val-handle.is-light-handle{border-color:#0f172a}.sliders-action-bar{display:flex;align-items:center;gap:.625rem}.sliders-column{flex:1;display:flex;flex-direction:column;gap:.5rem}.hue-slider-track,.alpha-slider-track{position:relative;width:100%;height:.75rem;border-radius:var(--talos-radius-full, 9999px);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;touch-action:none}.hue-slider-track:focus-visible,.alpha-slider-track:focus-visible{box-shadow:0 0 0 2px var(--talos-primary, #2563eb)}.hue-slider-track{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.alpha-slider-track{overflow:hidden}.alpha-slider-track .alpha-gradient-overlay{position:absolute;inset:0;border-radius:var(--talos-radius-full, 9999px)}.slider-thumb{position:absolute;top:50%;width:14px;height:14px;border-radius:var(--talos-radius-full, 9999px);border:2px solid #ffffff;box-shadow:0 1px 3px #0006;transform:translate(-50%,-50%);pointer-events:none}.action-preview-column{display:flex;flex-direction:column;align-items:center;gap:.375rem}.swatch-circle-preview{position:relative;width:1.75rem;height:1.75rem;border-radius:var(--talos-radius-full, 9999px);overflow:hidden;border:1px solid var(--talos-border-default, rgba(0, 0, 0, .15));box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .05))}.quick-actions-row{display:flex;align-items:center;gap:.25rem}.icon-action-button{display:inline-flex;align-items:center;justify-content:center;width:1.625rem;height:1.625rem;padding:0;background-color:transparent;border:1px solid transparent;border-radius:var(--talos-radius-sm, .25rem);color:var(--talos-text-muted, #94a3b8);cursor:pointer;transition:all var(--talos-transition, .18s ease)}.icon-action-button:hover{color:var(--talos-text-primary, #0f172a);background-color:var(--talos-bg-subtle, #f1f5f9);border-color:var(--talos-border-subtle, #e2e8f0)}.icon-action-button.is-copied{color:var(--talos-success, #16a34a)}.icon-action-button .copy-success-icon{animation:tcp-scale-up .2s ease}.inputs-section{display:flex;flex-direction:column;gap:.5rem}.format-tabs-bar{display:flex;align-items:center;background-color:var(--talos-bg-subtle, #f1f5f9);padding:2px;border-radius:var(--talos-radius-md, .375rem);gap:2px;border:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .04))}.format-tab-btn{flex:1;padding:.25rem 0;font-size:var(--talos-font-size-2xs, .6875rem);font-weight:var(--talos-font-weight-semibold, 600);letter-spacing:.03em;background:transparent;border:none;border-radius:var(--talos-radius-xs, .25rem);color:var(--talos-text-muted, #94a3b8);cursor:pointer;transition:all var(--talos-transition, .18s ease)}.format-tab-btn.is-active{background-color:var(--talos-bg-surface, #ffffff);color:var(--talos-text-primary, #0f172a);box-shadow:0 1px 2px #0000001a}.format-tab-btn:hover:not(.is-active){color:var(--talos-text-primary, #0f172a)}.channel-inputs-grid{display:flex;align-items:center;gap:.375rem}.input-field-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:.125rem}.input-field-group.hex-field{flex:2.5}.input-field-group .channel-input{width:100%;height:1.75rem;padding:0 .25rem;font-size:var(--talos-font-size-xs, .75rem);font-weight:var(--talos-font-weight-medium, 500);font-family:inherit;text-align:center;color:var(--talos-text-primary, #0f172a);background-color:var(--talos-bg-subtle, #f1f5f9);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-xs, .25rem);outline:none;transition:border-color var(--talos-transition, .18s ease),box-shadow var(--talos-transition, .18s ease),background-color var(--talos-transition, .18s ease)}.input-field-group .channel-input::-webkit-inner-spin-button,.input-field-group .channel-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field-group .channel-input{-moz-appearance:textfield}.input-field-group .channel-input:focus{border-color:var(--talos-primary, #2563eb);box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .18));background-color:var(--talos-bg-surface, #ffffff)}.input-field-group .field-caption{font-size:.625rem;font-weight:var(--talos-font-weight-bold, 700);color:var(--talos-text-muted, #94a3b8);text-transform:uppercase}.presets-section,.recent-section{display:flex;flex-direction:column;gap:.375rem;border-top:1px solid var(--talos-border-subtle, #e2e8f0);padding-top:.5rem}.preset-group-title,.recent-group-title{font-size:var(--talos-font-size-2xs, .6875rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-muted, #64748b)}.swatches-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.375rem}.swatch-btn{position:relative;aspect-ratio:1;border:1px solid var(--talos-border-default, rgba(0, 0, 0, .12));border-radius:var(--talos-radius-xs, .25rem);cursor:pointer;outline:none;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .12s ease,box-shadow .12s ease}.swatch-btn:hover{transform:scale(1.12);z-index:2;box-shadow:0 2px 6px #00000040}.swatch-btn:focus-visible{box-shadow:0 0 0 2px var(--talos-primary, #2563eb)}.swatch-btn.is-selected{box-shadow:0 0 0 2px var(--talos-bg-surface, #ffffff),0 0 0 4px var(--talos-primary, #3b82f6);z-index:1}.swatch-btn .swatch-check-icon{color:#fff;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.8))}@keyframes tcp-slide-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes tcp-scale-up{0%{transform:scale(.7)}50%{transform:scale(1.2)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        ], viewQueries: [{ propertyName: "satValCanvas", first: true, predicate: ["satValCanvas"], descendants: true }, { propertyName: "hueTrack", first: true, predicate: ["hueTrack"], descendants: true }, { propertyName: "alphaTrack", first: true, predicate: ["alphaTrack"], descendants: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true }, { propertyName: "triggerInput", first: true, predicate: ["triggerInput"], descendants: true }], ngImport: i0, template: "@if (!inline()) {\n<!-- Standard Trigger Button / Popover Mode -->\n<div class=\"talos-color-picker-wrapper\" [class.is-floating]=\"floatingLabel()\">\n  @if (label() && !floatingLabel()) {\n  <label [for]=\"inputId()\" class=\"talos-field-label\">{{ label() }}</label>\n  }\n\n  <div #triggerBtn cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"talos-color-picker-trigger\"\n    [class.is-focused]=\"isOpen()\" [class.is-disabled]=\"effectiveDisabled()\"\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" [attr.role]=\"'button'\" [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"isOpen()\" [attr.aria-label]=\"label() || placeholder()\" (click)=\"toggleDropdown()\"\n    (keydown.enter)=\"toggleDropdown()\" (keydown.space)=\"toggleDropdown()\">\n\n    <!-- Swatch Pill Preview -->\n    <div class=\"swatch-preview-box\" role=\"button\" tabindex=\"-1\" aria-label=\"Open color palette\" (click)=\"toggleDropdown($event)\">\n      <div class=\"swatch-checkerboard\"></div>\n      <div class=\"swatch-fill\" [style.background-color]=\"rgbaString()\"></div>\n    </div>\n\n    <!-- Color Value Input Field -->\n    <input\n      #triggerInput\n      [id]=\"inputId()\"\n      type=\"text\"\n      class=\"color-picker-input\"\n      [value]=\"isInputFocused() ? manualInputValue() : formattedColor()\"\n      [placeholder]=\"floatingLabel() && !isFloated() ? '' : placeholder()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onTriggerInput($event)\"\n      (focus)=\"onTriggerFocus()\"\n      (blur)=\"onTriggerBlur($event)\"\n      (keydown.enter)=\"onTriggerEnter($event)\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    />\n\n    <!-- Clear Button -->\n    @if (clearable() && formattedColor() && !effectiveDisabled() && !readonly()) {\n    <button type=\"button\" class=\"clear-button\" aria-label=\"Clear color\" (click)=\"clear($event)\">\n      <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n        stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n      </svg>\n    </button>\n    }\n\n    <!-- Dropdown Chevron Indicator -->\n    <button type=\"button\" class=\"dropdown-chevron-icon\" [class.is-rotated]=\"isOpen()\"\n      aria-label=\"Toggle color palette\" tabindex=\"-1\" (click)=\"toggleDropdown($event)\">\n      <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n        stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    </button>\n\n    @if (label() && floatingLabel()) {\n    <label [for]=\"inputId()\" class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\">{{ label() }}</label>\n    }\n  </div>\n\n  <!-- CDK Connected Popover Overlay -->\n  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\" (overlayOutsideClick)=\"close()\" (detach)=\"close()\">\n    <div class=\"talos-color-picker-panel talos-popover-panel\" (click)=\"$event.stopPropagation()\">\n      <ng-container *ngTemplateOutlet=\"pickerContentTpl\"></ng-container>\n    </div>\n  </ng-template>\n</div>\n} @else {\n<!-- Inline / Embedded Mode -->\n<div class=\"talos-color-picker-panel talos-inline-panel\">\n  @if (label()) {\n  <div class=\"panel-header-title\">{{ label() }}</div>\n  }\n  <ng-container *ngTemplateOutlet=\"pickerContentTpl\"></ng-container>\n</div>\n}\n\n<!-- Main Color Picker Content Template -->\n<ng-template #pickerContentTpl>\n  <div class=\"picker-inner-container\">\n\n    <!-- 1. Saturation & Value 2D Canvas -->\n    <div #satValCanvas class=\"sat-val-canvas\" [style.background-color]=\"pureHueHex()\" tabindex=\"0\" role=\"slider\"\n      aria-label=\"Color saturation and brightness\"\n      [attr.aria-valuetext]=\"'Saturation ' + currentHsva().s + '%, Brightness ' + currentHsva().v + '%'\"\n      (mousedown)=\"onSatValMouseDown($event)\" (touchstart)=\"onSatValTouchStart($event)\"\n      (keydown)=\"onSatValKeyDown($event)\">\n      <div class=\"sat-gradient-white\"></div>\n      <div class=\"val-gradient-black\"></div>\n\n      <!-- Handle Pin -->\n      <div class=\"sat-val-handle\" [class.is-light-handle]=\"!isLight()\" [style.left.%]=\"currentHsva().s\"\n        [style.top.%]=\"100 - currentHsva().v\" [style.background-color]=\"rgbaString()\">\n      </div>\n    </div>\n\n    <!-- 2. Sliders & Action Bar -->\n    <div class=\"sliders-action-bar\">\n      <!-- Sliders Column -->\n      <div class=\"sliders-column\">\n        <!-- Hue Rainbow Slider Track -->\n        <div #hueTrack class=\"hue-slider-track\" tabindex=\"0\" role=\"slider\" aria-label=\"Hue spectrum\" aria-valuemin=\"0\"\n          aria-valuemax=\"360\" [attr.aria-valuenow]=\"currentHsva().h\" (mousedown)=\"onHueMouseDown($event)\"\n          (touchstart)=\"onHueTouchStart($event)\" (keydown)=\"onHueKeyDown($event)\">\n          <div class=\"slider-thumb\" [style.left.%]=\"(currentHsva().h / 360) * 100\"\n            [style.background-color]=\"pureHueHex()\">\n          </div>\n        </div>\n\n        <!-- Alpha Opacity Slider Track -->\n        @if (showAlpha()) {\n        <div #alphaTrack class=\"alpha-slider-track\" tabindex=\"0\" role=\"slider\" aria-label=\"Color opacity\"\n          aria-valuemin=\"0\" aria-valuemax=\"1\" [attr.aria-valuenow]=\"currentHsva().a\"\n          (mousedown)=\"onAlphaMouseDown($event)\" (touchstart)=\"onAlphaTouchStart($event)\"\n          (keydown)=\"onAlphaKeyDown($event)\">\n          <div class=\"alpha-checkerboard-bg\"></div>\n          <div class=\"alpha-gradient-overlay\"\n            [style.background]=\"'linear-gradient(to right, transparent, ' + pureHueHex() + ')'\">\n          </div>\n          <div class=\"slider-thumb\" [style.left.%]=\"currentHsva().a * 100\" [style.background-color]=\"rgbaString()\">\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Action & Preview Column -->\n      <div class=\"action-preview-column\">\n        <!-- Color Preview Circle -->\n        <div class=\"swatch-circle-preview\" [title]=\"formattedColor()\">\n          <div class=\"swatch-checkerboard\"></div>\n          <div class=\"swatch-fill\" [style.background-color]=\"rgbaString()\"></div>\n        </div>\n\n        <!-- Quick Action Buttons -->\n        <div class=\"quick-actions-row\">\n          @if (showEyeDropper() && hasEyeDropper()) {\n          <button type=\"button\" class=\"icon-action-button\" title=\"Pick color from screen\"\n            aria-label=\"Pick color from screen\" (click)=\"pickWithEyeDropper()\">\n            <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path\n                d=\"m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12\" />\n              <path d=\"m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z\" />\n              <path d=\"m2 22 .414-.414\" />\n            </svg>\n          </button>\n          }\n\n          <button type=\"button\" class=\"icon-action-button\" [class.is-copied]=\"copied()\"\n            [title]=\"copied() ? 'Copied to clipboard!' : 'Copy color string'\" aria-label=\"Copy color string\"\n            (click)=\"copyColor()\">\n            @if (copied()) {\n            <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"copy-success-icon\">\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\n            </svg>\n            } @else {\n            <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect>\n              <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path>\n            </svg>\n            }\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <!-- 3. Format Switcher & Channel Inputs -->\n    @if (showInputs()) {\n    <div class=\"inputs-section\">\n      @if (showFormatSwitcher()) {\n      <div class=\"format-tabs-bar\">\n        <button type=\"button\" class=\"format-tab-btn\" [class.is-active]=\"currentFormat() === 'hex'\"\n          (click)=\"switchFormat('hex')\">\n          HEX\n        </button>\n        <button type=\"button\" class=\"format-tab-btn\" [class.is-active]=\"currentFormat() === 'rgb'\"\n          (click)=\"switchFormat('rgb')\">\n          RGB\n        </button>\n        <button type=\"button\" class=\"format-tab-btn\" [class.is-active]=\"currentFormat() === 'hsl'\"\n          (click)=\"switchFormat('hsl')\">\n          HSL\n        </button>\n      </div>\n      }\n\n      <!-- Channel Inputs Grid -->\n      <div class=\"channel-inputs-grid\">\n        @if (currentFormat() === 'hex') {\n        <!-- HEX Input -->\n        <div class=\"input-field-group hex-field\">\n          <input type=\"text\" class=\"channel-input hex-input\" [ngModel]=\"inputHex()\"\n            (ngModelChange)=\"onHexInputChange($event)\" placeholder=\"#3B82F6\" aria-label=\"Hex color value\" />\n          <span class=\"field-caption\">HEX</span>\n        </div>\n        } @else if (currentFormat() === 'rgb') {\n        <!-- RGB Inputs -->\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"255\" class=\"channel-input\" [(ngModel)]=\"inputR\"\n            (ngModelChange)=\"onRgbaInputChange()\" aria-label=\"Red\" />\n          <span class=\"field-caption\">R</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"255\" class=\"channel-input\" [(ngModel)]=\"inputG\"\n            (ngModelChange)=\"onRgbaInputChange()\" aria-label=\"Green\" />\n          <span class=\"field-caption\">G</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"255\" class=\"channel-input\" [(ngModel)]=\"inputB\"\n            (ngModelChange)=\"onRgbaInputChange()\" aria-label=\"Blue\" />\n          <span class=\"field-caption\">B</span>\n        </div>\n        } @else if (currentFormat() === 'hsl') {\n        <!-- HSL Inputs -->\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"360\" class=\"channel-input\" [(ngModel)]=\"inputH\"\n            (ngModelChange)=\"onHslaInputChange()\" aria-label=\"Hue\" />\n          <span class=\"field-caption\">H</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"100\" class=\"channel-input\" [(ngModel)]=\"inputS\"\n            (ngModelChange)=\"onHslaInputChange()\" aria-label=\"Saturation\" />\n          <span class=\"field-caption\">S%</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"100\" class=\"channel-input\" [(ngModel)]=\"inputL\"\n            (ngModelChange)=\"onHslaInputChange()\" aria-label=\"Lightness\" />\n          <span class=\"field-caption\">L%</span>\n        </div>\n        }\n\n        <!-- Alpha Input (Common for all non-hex or with alpha) -->\n        @if (showAlpha()) {\n        <div class=\"input-field-group alpha-field\">\n          <input type=\"number\" min=\"0\" max=\"100\" class=\"channel-input\" [(ngModel)]=\"inputA\"\n            (ngModelChange)=\"currentFormat() === 'hsl' ? onHslaInputChange() : onRgbaInputChange()\"\n            aria-label=\"Opacity Percentage\" />\n          <span class=\"field-caption\">A%</span>\n        </div>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- 4. Preset Color Swatches -->\n    @if (showPresets() && normalizedPresets().length > 0) {\n    <div class=\"presets-section\">\n      @for (group of normalizedPresets(); track group.label) {\n      @if (normalizedPresets().length > 1) {\n      <div class=\"preset-group-title\">{{ group.label }}</div>\n      }\n      <div class=\"swatches-grid\">\n        @for (color of group.colors; track color) {\n        <button type=\"button\" class=\"swatch-btn\"\n          [class.is-selected]=\"currentHex().toLowerCase() === color.toLowerCase()\" [style.background-color]=\"color\"\n          [title]=\"color\" [attr.aria-label]=\"'Select preset color ' + color\" (click)=\"selectPreset(color)\">\n          @if (currentHex().toLowerCase() === color.toLowerCase()) {\n          <svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" stroke=\"currentColor\" stroke-width=\"3\" fill=\"none\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"swatch-check-icon\">\n            <polyline points=\"20 6 9 17 4 12\"></polyline>\n          </svg>\n          }\n        </button>\n        }\n      </div>\n      }\n    </div>\n    }\n\n    <!-- 5. Recent Colors -->\n    @if (showRecent() && recentColors().length > 0) {\n    <div class=\"recent-section\">\n      <div class=\"recent-group-title\">Recent Colors</div>\n      <div class=\"swatches-grid recent-grid\">\n        @for (color of recentColors(); track color) {\n        <button type=\"button\" class=\"swatch-btn\"\n          [class.is-selected]=\"currentHex().toLowerCase() === color.toLowerCase()\" [style.background-color]=\"color\"\n          [title]=\"color\" [attr.aria-label]=\"'Select recent color ' + color\" (click)=\"selectPreset(color)\">\n        </button>\n        }\n      </div>\n    </div>\n    }\n\n  </div>\n</ng-template>", styles: [":host{display:inline-block;position:relative;width:100%;max-width:100%;font-family:inherit;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host.color-picker-sm{--talos-control-height: var(--talos-height-sm, 2rem);--tcp-width: 250px;--tcp-canvas-height: 130px;--tcp-font-size: var(--talos-font-size-xs, .75rem)}:host.color-picker-md{--talos-control-height: var(--talos-height-md, 2.25rem);--tcp-width: 280px;--tcp-canvas-height: 150px;--tcp-font-size: var(--talos-font-size-sm, .8125rem)}:host.color-picker-lg{--talos-control-height: var(--talos-height-lg, 2.625rem);--tcp-width: 310px;--tcp-canvas-height: 170px;--tcp-font-size: var(--talos-font-size-md, .875rem)}.talos-field-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-primary, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--talos-transition, .18s ease)}.talos-field-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-color-picker-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.talos-color-picker-trigger{position:relative;display:flex;align-items:center;gap:.625rem;width:100%;height:var(--talos-control-height, 2.25rem);min-height:var(--talos-control-height, 2.25rem);padding:0 var(--talos-control-padding-x, .625rem);background-color:var(--talos-input-bg, var(--talos-bg-surface, #ffffff));border:1px solid var(--talos-input-border, var(--talos-border-default, #cbd5e1));border-radius:var(--talos-border-radius, var(--talos-radius-md, .375rem));color:var(--talos-input-color, var(--talos-text-primary, #0f172a));font-size:var(--talos-control-font-size, .8125rem);cursor:text;outline:none;-webkit-user-select:none;user-select:none;transition:border-color var(--talos-transition, .18s ease),box-shadow var(--talos-transition, .18s ease),background-color var(--talos-transition, .18s ease)}.talos-color-picker-trigger:hover:not(.is-disabled){border-color:var(--talos-input-border-hover, var(--talos-border-hover, #94a3b8))}.talos-color-picker-trigger:focus-within,.talos-color-picker-trigger.is-focused,.talos-color-picker-trigger:focus-visible{border-color:var(--talos-input-border-focus, var(--talos-primary, #2563eb));box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .18))}.talos-color-picker-trigger.is-disabled{background-color:var(--talos-input-disabled-bg, var(--talos-bg-subtle, #f1f5f9));border-color:var(--talos-input-disabled-border, var(--talos-border-subtle, #e2e8f0));color:var(--talos-input-disabled-color, var(--talos-text-muted, #94a3b8));cursor:not-allowed;opacity:.65}.swatch-preview-box{position:relative;width:1.1rem;height:1.1rem;min-width:1.1rem;border-radius:var(--talos-radius-xs, .25rem);overflow:hidden;border:1px solid var(--talos-border-default, rgba(0, 0, 0, .15));box-shadow:inset 0 0 2px #0000001a;cursor:pointer;flex-shrink:0;transition:transform .12s ease}.swatch-preview-box:hover{transform:scale(1.08)}.swatch-checkerboard,.alpha-checkerboard-bg{position:absolute;inset:0;background-image:linear-gradient(45deg,var(--talos-border-default, #cbd5e1) 25%,transparent 25%),linear-gradient(-45deg,var(--talos-border-default, #cbd5e1) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--talos-border-default, #cbd5e1) 75%),linear-gradient(-45deg,transparent 75%,var(--talos-border-default, #cbd5e1) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:var(--talos-bg-surface, #ffffff)}.swatch-fill{position:absolute;inset:0;transition:background-color .1s ease}.color-picker-input{flex:1;min-width:0;width:100%;height:100%;background:transparent;border:none;outline:none;padding:0;margin:0;font-family:inherit;font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-medium, 500);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--talos-input-color, var(--talos-text-primary, #0f172a));line-height:normal}.color-picker-input::placeholder{color:var(--talos-input-placeholder-color, var(--talos-text-muted, #94a3b8));opacity:1;font-weight:var(--talos-font-weight-normal, 400)}.color-picker-input:disabled{cursor:not-allowed}.clear-button{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:.25rem;color:var(--talos-text-muted, #94a3b8);border-radius:var(--talos-radius-full, 9999px);cursor:pointer;transition:color var(--talos-transition, .18s ease),background-color var(--talos-transition, .18s ease)}.clear-button:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.dropdown-chevron-icon{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;color:var(--talos-text-muted, #94a3b8);cursor:pointer;transition:transform var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),color var(--talos-transition, .18s ease)}.dropdown-chevron-icon.is-rotated{transform:rotate(180deg);color:var(--talos-primary, #2563eb)}.dropdown-chevron-icon:hover{color:var(--talos-text-primary, #0f172a)}.talos-floating-label{position:absolute;left:calc(var(--talos-control-padding-x, .625rem) + 1.375rem + .625rem);top:50%;transform:translateY(-50%);font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-medium, 500);color:var(--talos-input-placeholder-color, var(--talos-text-muted, #94a3b8));pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--talos-input-bg, var(--talos-bg-surface, #ffffff));padding:0 .25rem;border-radius:var(--talos-radius-xs, .25rem);line-height:1;z-index:2;transition:transform var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),font-size var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),color var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),top var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),left var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1))}.talos-floating-label.is-floated{top:0;left:var(--talos-control-padding-x, .625rem);transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,:host(.is-floated) .talos-floating-label.is-floated,.talos-color-picker-trigger:focus-within .talos-floating-label.is-floated,.talos-color-picker-trigger.is-focused .talos-floating-label.is-floated{color:var(--talos-primary, #2563eb)}.talos-color-picker-panel{width:var(--tcp-width, 280px);max-width:calc(100vw - 2rem);background-color:var(--talos-dropdown-bg, var(--talos-bg-surface, #ffffff));border:1px solid var(--talos-dropdown-border, var(--talos-border-default, #cbd5e1));border-radius:var(--talos-border-radius, var(--talos-radius-lg, .5rem));overflow:hidden;box-sizing:border-box}.talos-color-picker-panel.talos-popover-panel{box-shadow:var(--talos-dropdown-shadow, var(--talos-shadow-dropdown, 0 16px 32px -4px rgba(0, 0, 0, .25)));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:tcp-slide-in var(--talos-transition, .18s cubic-bezier(.16, 1, .3, 1));z-index:1050}.talos-color-picker-panel.talos-inline-panel{box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .05))}.talos-color-picker-panel .panel-header-title{padding:.75rem .875rem 0;font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-primary, #0f172a)}.picker-inner-container{display:flex;flex-direction:column;padding:.75rem;gap:.75rem}.sat-val-canvas{position:relative;width:100%;height:var(--tcp-canvas-height, 150px);border-radius:calc(var(--talos-border-radius, var(--talos-radius-md, .375rem)) - 1px);overflow:hidden;cursor:crosshair;outline:none;-webkit-user-select:none;user-select:none;touch-action:none;box-shadow:inset 0 0 1px #0000004d}.sat-val-canvas:focus-visible{box-shadow:0 0 0 2px var(--talos-primary, #2563eb),inset 0 0 1px #0000004d}.sat-gradient-white{position:absolute;inset:0;background:linear-gradient(to right,#ffffff,transparent)}.val-gradient-black{position:absolute;inset:0;background:linear-gradient(to top,#000000,transparent)}.sat-val-handle{position:absolute;width:14px;height:14px;border-radius:var(--talos-radius-full, 9999px);border:2px solid #ffffff;box-shadow:0 0 2px #0009,inset 0 0 1px #0006;transform:translate(-50%,-50%);pointer-events:none;transition:transform .05s ease}.sat-val-handle.is-light-handle{border-color:#0f172a}.sliders-action-bar{display:flex;align-items:center;gap:.625rem}.sliders-column{flex:1;display:flex;flex-direction:column;gap:.5rem}.hue-slider-track,.alpha-slider-track{position:relative;width:100%;height:.75rem;border-radius:var(--talos-radius-full, 9999px);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;touch-action:none}.hue-slider-track:focus-visible,.alpha-slider-track:focus-visible{box-shadow:0 0 0 2px var(--talos-primary, #2563eb)}.hue-slider-track{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.alpha-slider-track{overflow:hidden}.alpha-slider-track .alpha-gradient-overlay{position:absolute;inset:0;border-radius:var(--talos-radius-full, 9999px)}.slider-thumb{position:absolute;top:50%;width:14px;height:14px;border-radius:var(--talos-radius-full, 9999px);border:2px solid #ffffff;box-shadow:0 1px 3px #0006;transform:translate(-50%,-50%);pointer-events:none}.action-preview-column{display:flex;flex-direction:column;align-items:center;gap:.375rem}.swatch-circle-preview{position:relative;width:1.75rem;height:1.75rem;border-radius:var(--talos-radius-full, 9999px);overflow:hidden;border:1px solid var(--talos-border-default, rgba(0, 0, 0, .15));box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .05))}.quick-actions-row{display:flex;align-items:center;gap:.25rem}.icon-action-button{display:inline-flex;align-items:center;justify-content:center;width:1.625rem;height:1.625rem;padding:0;background-color:transparent;border:1px solid transparent;border-radius:var(--talos-radius-sm, .25rem);color:var(--talos-text-muted, #94a3b8);cursor:pointer;transition:all var(--talos-transition, .18s ease)}.icon-action-button:hover{color:var(--talos-text-primary, #0f172a);background-color:var(--talos-bg-subtle, #f1f5f9);border-color:var(--talos-border-subtle, #e2e8f0)}.icon-action-button.is-copied{color:var(--talos-success, #16a34a)}.icon-action-button .copy-success-icon{animation:tcp-scale-up .2s ease}.inputs-section{display:flex;flex-direction:column;gap:.5rem}.format-tabs-bar{display:flex;align-items:center;background-color:var(--talos-bg-subtle, #f1f5f9);padding:2px;border-radius:var(--talos-radius-md, .375rem);gap:2px;border:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .04))}.format-tab-btn{flex:1;padding:.25rem 0;font-size:var(--talos-font-size-2xs, .6875rem);font-weight:var(--talos-font-weight-semibold, 600);letter-spacing:.03em;background:transparent;border:none;border-radius:var(--talos-radius-xs, .25rem);color:var(--talos-text-muted, #94a3b8);cursor:pointer;transition:all var(--talos-transition, .18s ease)}.format-tab-btn.is-active{background-color:var(--talos-bg-surface, #ffffff);color:var(--talos-text-primary, #0f172a);box-shadow:0 1px 2px #0000001a}.format-tab-btn:hover:not(.is-active){color:var(--talos-text-primary, #0f172a)}.channel-inputs-grid{display:flex;align-items:center;gap:.375rem}.input-field-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:.125rem}.input-field-group.hex-field{flex:2.5}.input-field-group .channel-input{width:100%;height:1.75rem;padding:0 .25rem;font-size:var(--talos-font-size-xs, .75rem);font-weight:var(--talos-font-weight-medium, 500);font-family:inherit;text-align:center;color:var(--talos-text-primary, #0f172a);background-color:var(--talos-bg-subtle, #f1f5f9);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-xs, .25rem);outline:none;transition:border-color var(--talos-transition, .18s ease),box-shadow var(--talos-transition, .18s ease),background-color var(--talos-transition, .18s ease)}.input-field-group .channel-input::-webkit-inner-spin-button,.input-field-group .channel-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field-group .channel-input{-moz-appearance:textfield}.input-field-group .channel-input:focus{border-color:var(--talos-primary, #2563eb);box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .18));background-color:var(--talos-bg-surface, #ffffff)}.input-field-group .field-caption{font-size:.625rem;font-weight:var(--talos-font-weight-bold, 700);color:var(--talos-text-muted, #94a3b8);text-transform:uppercase}.presets-section,.recent-section{display:flex;flex-direction:column;gap:.375rem;border-top:1px solid var(--talos-border-subtle, #e2e8f0);padding-top:.5rem}.preset-group-title,.recent-group-title{font-size:var(--talos-font-size-2xs, .6875rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-muted, #64748b)}.swatches-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.375rem}.swatch-btn{position:relative;aspect-ratio:1;border:1px solid var(--talos-border-default, rgba(0, 0, 0, .12));border-radius:var(--talos-radius-xs, .25rem);cursor:pointer;outline:none;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .12s ease,box-shadow .12s ease}.swatch-btn:hover{transform:scale(1.12);z-index:2;box-shadow:0 2px 6px #00000040}.swatch-btn:focus-visible{box-shadow:0 0 0 2px var(--talos-primary, #2563eb)}.swatch-btn.is-selected{box-shadow:0 0 0 2px var(--talos-bg-surface, #ffffff),0 0 0 4px var(--talos-primary, #3b82f6);z-index:1}.swatch-btn .swatch-check-icon{color:#fff;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.8))}@keyframes tcp-slide-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes tcp-scale-up{0%{transform:scale(.7)}50%{transform:scale(1.2)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosColorPickerComponent, decorators: [{
             type: Component,
@@ -16981,7 +17051,7 @@ class TalosRatingComponent {
                 useExisting: forwardRef(() => TalosRatingComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div\n  class=\"talos-rating-container\"\n  [id]=\"elementId()\"\n  [style.--talos-rating-custom-color]=\"color() || null\"\n>\n  <div class=\"talos-rating-stars\" role=\"presentation\">\n    @for (i of items(); track i) {\n      <button\n        type=\"button\"\n        class=\"talos-rating-star-btn\"\n        [class.is-active]=\"isItemActive(i)\"\n        [class.is-hovered]=\"hoverValue() !== null && hoverValue()! >= i\"\n        [class.is-animating]=\"animatingIndex() === i && showPop()\"\n        [attr.aria-label]=\"i + ' of ' + max() + ' stars'\"\n        [disabled]=\"effectiveDisabled() || effectiveReadonly()\"\n        (mouseenter)=\"onItemMouseEnter(i)\"\n        (click)=\"onItemClick(i)\"\n      >\n        <svg\n          class=\"talos-star-svg\"\n          viewBox=\"0 0 24 24\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\" />\n        </svg>\n\n        <!-- Particle Celebration Spark Burst -->\n        @if (activeBurstIndex() === i && showParticles()) {\n          <span class=\"talos-rating-particles\" aria-hidden=\"true\">\n            <span class=\"particle p-1\"></span>\n            <span class=\"particle p-2\"></span>\n            <span class=\"particle p-3\"></span>\n            <span class=\"particle p-4\"></span>\n            <span class=\"particle p-5\"></span>\n            <span class=\"particle p-6\"></span>\n            <span class=\"particle p-7\"></span>\n            <span class=\"particle p-8\"></span>\n          </span>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Optional Descriptor / Score Label -->\n  @if (showScore() || showLabel() || activeTooltip()) {\n    <div class=\"talos-rating-label-wrapper\">\n      @if (showScore()) {\n        <span class=\"talos-rating-score-pill\">\n          {{ displayValue() }}<span class=\"score-max\">/{{ max() }}</span>\n        </span>\n      }\n      @if ((showLabel() || tooltips().length > 0) && activeTooltip()) {\n        <span class=\"talos-rating-desc-text\">{{ activeTooltip() }}</span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex;vertical-align:middle;outline:none;border-radius:var(--talos-radius-sm, 4px);transition:box-shadow var(--talos-transition, .18s ease);--talos-rating-fill: var(--talos-warning, #f59e0b);--talos-rating-spark-alt: #fbbf24;--talos-rating-unfilled: var(--talos-border-default, #cbd5e1);--talos-rating-size: 1.375rem;--talos-rating-gap: .375rem;--talos-rating-font-size: var(--talos-font-size-sm, .8125rem)}:host.variant-warning{--talos-rating-fill: var(--talos-warning, #f59e0b);--talos-rating-spark-alt: #fcd34d}:host.variant-primary{--talos-rating-fill: var(--talos-primary, #2563eb);--talos-rating-spark-alt: #60a5fa}:host.variant-danger{--talos-rating-fill: var(--talos-danger, #ef4444);--talos-rating-spark-alt: #f87171}:host.variant-success{--talos-rating-fill: var(--talos-success, #16a34a);--talos-rating-spark-alt: #4ade80}:host.variant-purple{--talos-rating-fill: var(--talos-purple, #8b5cf6);--talos-rating-spark-alt: #c084fc}:host.variant-custom{--talos-rating-fill: var(--talos-rating-custom-color, var(--talos-warning, #f59e0b));--talos-rating-spark-alt: var(--talos-rating-custom-color, #fbbf24)}:host.rating-sm{--talos-rating-size: 1.125rem;--talos-rating-gap: .25rem;--talos-rating-font-size: var(--talos-font-size-xs, .75rem);--particle-dist: 12px}:host.rating-md{--talos-rating-size: 1.375rem;--talos-rating-gap: .375rem;--talos-rating-font-size: var(--talos-font-size-sm, .8125rem);--particle-dist: 16px}:host.rating-lg{--talos-rating-size: 1.75rem;--talos-rating-gap: .5rem;--talos-rating-font-size: var(--talos-font-size-md, .875rem);--particle-dist: 22px}:host.rating-xl{--talos-rating-size: 2.25rem;--talos-rating-gap: .625rem;--talos-rating-font-size: var(--talos-font-size-lg, 1rem);--particle-dist: 28px}:host.is-disabled{opacity:.5;pointer-events:none;cursor:not-allowed}:host.is-readonly{cursor:default}:host:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .2))}.talos-rating-container{display:inline-flex;align-items:center;gap:.625rem;-webkit-user-select:none;user-select:none;font-family:var(--talos-font-sans, inherit)}:host(.label-bottom) .talos-rating-container{flex-direction:column;align-items:flex-start;gap:.375rem}.talos-rating-stars{display:inline-flex;align-items:center;gap:var(--talos-rating-gap)}.talos-rating-star-btn{position:relative;background:transparent;border:none;padding:0;margin:0;line-height:0;display:inline-flex;align-items:center;justify-content:center;width:var(--talos-rating-size);height:var(--talos-rating-size);color:var(--talos-rating-unfilled);outline:none;cursor:default;transform-origin:center center;overflow:visible}:host(.is-interactive) .talos-rating-star-btn{cursor:pointer}.talos-rating-star-btn .talos-star-svg{width:var(--talos-rating-size);height:var(--talos-rating-size);stroke-width:1.75;stroke:var(--talos-rating-unfilled);fill:transparent;transition:color .15s ease,fill .15s ease,stroke .15s ease,transform .15s ease;transform-origin:center center}:host(.is-interactive:not(.anim-none)) .talos-rating-star-btn:hover .talos-star-svg{transform:scale(1.12)}.talos-rating-star-btn.is-active,.talos-rating-star-btn.is-hovered{color:var(--talos-rating-fill)}.talos-rating-star-btn.is-active .talos-star-svg,.talos-rating-star-btn.is-hovered .talos-star-svg{fill:var(--talos-rating-fill);stroke:var(--talos-rating-fill);filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}.talos-rating-star-btn.is-animating .talos-star-svg{animation:talosStarPop .44s cubic-bezier(.175,.885,.32,1.275)}.talos-rating-star-btn:disabled{cursor:not-allowed}.talos-rating-particles{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none;z-index:10}.talos-rating-particles .particle{position:absolute;top:0;left:0;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background-color:var(--talos-rating-fill);pointer-events:none;box-shadow:0 0 4px var(--talos-rating-fill);animation-duration:.5s;animation-timing-function:cubic-bezier(.165,.84,.44,1);animation-fill-mode:forwards}.talos-rating-particles .particle.p-1,.talos-rating-particles .particle.p-3,.talos-rating-particles .particle.p-5,.talos-rating-particles .particle.p-7{background-color:var(--talos-rating-spark-alt);box-shadow:0 0 5px var(--talos-rating-spark-alt)}.talos-rating-particles .particle.p-1{width:3.5px;height:3.5px;animation-name:burstNorthWest}.talos-rating-particles .particle.p-2{width:4.5px;height:4.5px;animation-name:burstNorth}.talos-rating-particles .particle.p-3{width:3px;height:3px;animation-name:burstNorthEast}.talos-rating-particles .particle.p-4{width:4.5px;height:4.5px;animation-name:burstEast}.talos-rating-particles .particle.p-5{width:3.5px;height:3.5px;animation-name:burstSouthEast}.talos-rating-particles .particle.p-6{width:4px;height:4px;animation-name:burstSouth}.talos-rating-particles .particle.p-7{width:3px;height:3px;animation-name:burstSouthWest}.talos-rating-particles .particle.p-8{width:4.5px;height:4.5px;animation-name:burstWest}@keyframes talosStarPop{0%{transform:scale(1)}30%{transform:scale(1.38) rotate(-6deg)}65%{transform:scale(.9) rotate(3deg)}85%{transform:scale(1.08) rotate(0)}to{transform:scale(1) rotate(0)}}@keyframes burstNorthWest{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * -.7),calc(var(--particle-dist, 16px) * -.7)) scale(0);opacity:0}}@keyframes burstNorth{0%{transform:translate(0) scale(1);opacity:1}to{transform:translateY(calc(var(--particle-dist, 16px) * -1)) scale(0);opacity:0}}@keyframes burstNorthEast{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * .7),calc(var(--particle-dist, 16px) * -.7)) scale(0);opacity:0}}@keyframes burstEast{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--particle-dist, 16px)) scale(0);opacity:0}}@keyframes burstSouthEast{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * .7),calc(var(--particle-dist, 16px) * .7)) scale(0);opacity:0}}@keyframes burstSouth{0%{transform:translate(0) scale(1);opacity:1}to{transform:translateY(var(--particle-dist, 16px)) scale(0);opacity:0}}@keyframes burstSouthWest{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * -.7),calc(var(--particle-dist, 16px) * .7)) scale(0);opacity:0}}@keyframes burstWest{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * -1)) scale(0);opacity:0}}.talos-rating-label-wrapper{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--talos-rating-font-size);line-height:1}.talos-rating-score-pill{display:inline-flex;align-items:baseline;padding:.15rem .45rem;font-weight:700;border-radius:var(--talos-radius-sm, 4px);background-color:var(--talos-bg-subtle, #f1f5f9);color:var(--talos-text-primary, #0f172a);border:1px solid var(--talos-border-subtle, #e2e8f0)}.talos-rating-score-pill .score-max{font-size:.85em;font-weight:500;color:var(--talos-text-muted, #64748b);margin-left:1px}.talos-rating-desc-text{font-weight:500;color:var(--talos-text-secondary, #334155)}:host(.anim-none) .talos-rating-star-btn,:host(.anim-none) .talos-star-svg,:host(.anim-none) .talos-rating-particles{animation:none!important;transition:none!important;transform:none!important}:host(.anim-subtle) .talos-rating-star-btn.is-animating .talos-star-svg{animation:none;transform:scale(1.08);transition:transform .15s ease}:host(.anim-pop) .talos-rating-particles{display:none!important}@media(prefers-reduced-motion:reduce){:host .talos-rating-star-btn,:host .talos-star-svg,:host .talos-rating-particles{animation:none!important;transition:none!important;transform:none!important}}:root[data-theme=dark],:root.dark,[data-theme=dark],[data-mode=dark],.dark,.dark-theme{--talos-rating-unfilled: rgba(255, 255, 255, .2)}:root[data-theme=dark] .talos-rating-star-btn .talos-star-svg,:root.dark .talos-rating-star-btn .talos-star-svg,[data-theme=dark] .talos-rating-star-btn .talos-star-svg,[data-mode=dark] .talos-rating-star-btn .talos-star-svg,.dark .talos-rating-star-btn .talos-star-svg,.dark-theme .talos-rating-star-btn .talos-star-svg{stroke:#ffffff40}:root[data-theme=dark] .talos-rating-score-pill,:root.dark .talos-rating-score-pill,[data-theme=dark] .talos-rating-score-pill,[data-mode=dark] .talos-rating-score-pill,.dark .talos-rating-score-pill,.dark-theme .talos-rating-score-pill{background-color:var(--talos-bg-subtle, #131d31);border-color:var(--talos-border-subtle, rgba(255, 255, 255, .08));color:var(--talos-text-primary, #f8fafc)}:root[data-theme=dark] .talos-rating-score-pill .score-max,:root.dark .talos-rating-score-pill .score-max,[data-theme=dark] .talos-rating-score-pill .score-max,[data-mode=dark] .talos-rating-score-pill .score-max,.dark .talos-rating-score-pill .score-max,.dark-theme .talos-rating-score-pill .score-max{color:var(--talos-text-muted, #94a3b8)}:root[data-theme=dark] .talos-rating-desc-text,:root.dark .talos-rating-desc-text,[data-theme=dark] .talos-rating-desc-text,[data-mode=dark] .talos-rating-desc-text,.dark .talos-rating-desc-text,.dark-theme .talos-rating-desc-text{color:var(--talos-text-secondary, #e2e8f0)}\n"] });
+        ], ngImport: i0, template: "<div\n  class=\"talos-rating-container\"\n  [id]=\"elementId()\"\n  [style.--talos-rating-custom-color]=\"color() || null\"\n>\n  <div class=\"talos-rating-stars\" role=\"presentation\">\n    @for (i of items(); track i) {\n      <button\n        type=\"button\"\n        class=\"talos-rating-star-btn\"\n        [class.is-active]=\"isItemActive(i)\"\n        [class.is-hovered]=\"hoverValue() !== null && hoverValue()! >= i\"\n        [class.is-animating]=\"animatingIndex() === i && showPop()\"\n        [attr.aria-label]=\"i + ' of ' + max() + ' stars'\"\n        [disabled]=\"effectiveDisabled() || effectiveReadonly()\"\n        (mouseenter)=\"onItemMouseEnter(i)\"\n        (click)=\"onItemClick(i)\"\n      >\n        <svg\n          class=\"talos-star-svg\"\n          viewBox=\"0 0 24 24\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\" />\n        </svg>\n\n        <!-- Particle Celebration Spark Burst -->\n        @if (activeBurstIndex() === i && showParticles()) {\n          <span class=\"talos-rating-particles\" aria-hidden=\"true\">\n            <span class=\"particle p-1\"></span>\n            <span class=\"particle p-2\"></span>\n            <span class=\"particle p-3\"></span>\n            <span class=\"particle p-4\"></span>\n            <span class=\"particle p-5\"></span>\n            <span class=\"particle p-6\"></span>\n            <span class=\"particle p-7\"></span>\n            <span class=\"particle p-8\"></span>\n          </span>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Optional Descriptor / Score Label -->\n  @if (showScore() || showLabel() || activeTooltip()) {\n    <div class=\"talos-rating-label-wrapper\">\n      @if (showScore()) {\n        <span class=\"talos-rating-score-pill\">\n          {{ displayValue() }}<span class=\"score-max\">/{{ max() }}</span>\n        </span>\n      }\n      @if ((showLabel() || tooltips().length > 0) && activeTooltip()) {\n        <span class=\"talos-rating-desc-text\">{{ activeTooltip() }}</span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex;vertical-align:middle;outline:none;border-radius:var(--talos-radius-sm, 4px);transition:box-shadow var(--talos-transition, .18s ease);--talos-rating-fill: var(--talos-warning, #f59e0b);--talos-rating-spark-alt: #fbbf24;--talos-rating-unfilled: var(--talos-border-default, #cbd5e1);--talos-rating-size: 1.375rem;--talos-rating-gap: .375rem;--talos-rating-font-size: var(--talos-font-size-sm, .8125rem)}:host.variant-warning{--talos-rating-fill: var(--talos-warning, #f59e0b);--talos-rating-spark-alt: #fcd34d}:host.variant-primary{--talos-rating-fill: var(--talos-primary, #2563eb);--talos-rating-spark-alt: #60a5fa}:host.variant-danger{--talos-rating-fill: var(--talos-danger, #ef4444);--talos-rating-spark-alt: #f87171}:host.variant-success{--talos-rating-fill: var(--talos-success, #16a34a);--talos-rating-spark-alt: #4ade80}:host.variant-purple{--talos-rating-fill: var(--talos-purple, #8b5cf6);--talos-rating-spark-alt: #c084fc}:host.variant-custom{--talos-rating-fill: var(--talos-rating-custom-color, var(--talos-warning, #f59e0b));--talos-rating-spark-alt: var(--talos-rating-custom-color, #fbbf24)}:host.rating-sm{--talos-rating-size: 1.125rem;--talos-rating-gap: .25rem;--talos-rating-font-size: var(--talos-font-size-xs, .75rem);--particle-dist: 12px}:host.rating-md{--talos-rating-size: 1.375rem;--talos-rating-gap: .375rem;--talos-rating-font-size: var(--talos-font-size-sm, .8125rem);--particle-dist: 16px}:host.rating-lg{--talos-rating-size: 1.75rem;--talos-rating-gap: .5rem;--talos-rating-font-size: var(--talos-font-size-md, .875rem);--particle-dist: 22px}:host.rating-xl{--talos-rating-size: 2.25rem;--talos-rating-gap: .625rem;--talos-rating-font-size: var(--talos-font-size-lg, 1rem);--particle-dist: 28px}:host.is-disabled{opacity:.5;pointer-events:none;cursor:not-allowed}:host.is-readonly{cursor:default}:host:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .2))}.talos-rating-container{display:inline-flex;align-items:center;gap:.625rem;-webkit-user-select:none;user-select:none;font-family:var(--talos-font-sans, inherit)}:host(.label-bottom) .talos-rating-container{flex-direction:column;align-items:flex-start;gap:.375rem}.talos-rating-stars{display:inline-flex;align-items:center;gap:var(--talos-rating-gap)}.talos-rating-star-btn{position:relative;background:transparent;border:none;padding:0;margin:0;line-height:0;display:inline-flex;align-items:center;justify-content:center;width:var(--talos-rating-size);height:var(--talos-rating-size);color:var(--talos-rating-unfilled);outline:none;cursor:default;transform-origin:center center;overflow:visible}:host(.is-interactive) .talos-rating-star-btn{cursor:pointer}.talos-rating-star-btn .talos-star-svg{width:var(--talos-rating-size);height:var(--talos-rating-size);stroke-width:1.75;stroke:var(--talos-rating-unfilled);fill:transparent;transition:color .15s ease,fill .15s ease,stroke .15s ease,transform .15s ease;transform-origin:center center}:host(.is-interactive:not(.anim-none)) .talos-rating-star-btn:hover .talos-star-svg{transform:scale(1.12)}.talos-rating-star-btn.is-active,.talos-rating-star-btn.is-hovered{color:var(--talos-rating-fill)}.talos-rating-star-btn.is-active .talos-star-svg,.talos-rating-star-btn.is-hovered .talos-star-svg{fill:var(--talos-rating-fill);stroke:var(--talos-rating-fill);filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}.talos-rating-star-btn.is-animating .talos-star-svg{animation:talosStarPop .44s cubic-bezier(.175,.885,.32,1.275)}.talos-rating-star-btn:disabled{cursor:not-allowed}.talos-rating-particles{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none;z-index:10}.talos-rating-particles .particle{position:absolute;top:0;left:0;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background-color:var(--talos-rating-fill);pointer-events:none;box-shadow:0 0 4px var(--talos-rating-fill);animation-duration:.5s;animation-timing-function:cubic-bezier(.165,.84,.44,1);animation-fill-mode:forwards}.talos-rating-particles .particle.p-1,.talos-rating-particles .particle.p-3,.talos-rating-particles .particle.p-5,.talos-rating-particles .particle.p-7{background-color:var(--talos-rating-spark-alt);box-shadow:0 0 5px var(--talos-rating-spark-alt)}.talos-rating-particles .particle.p-1{width:3.5px;height:3.5px;animation-name:burstNorthWest}.talos-rating-particles .particle.p-2{width:4.5px;height:4.5px;animation-name:burstNorth}.talos-rating-particles .particle.p-3{width:3px;height:3px;animation-name:burstNorthEast}.talos-rating-particles .particle.p-4{width:4.5px;height:4.5px;animation-name:burstEast}.talos-rating-particles .particle.p-5{width:3.5px;height:3.5px;animation-name:burstSouthEast}.talos-rating-particles .particle.p-6{width:4px;height:4px;animation-name:burstSouth}.talos-rating-particles .particle.p-7{width:3px;height:3px;animation-name:burstSouthWest}.talos-rating-particles .particle.p-8{width:4.5px;height:4.5px;animation-name:burstWest}@keyframes talosStarPop{0%{transform:scale(1)}30%{transform:scale(1.38) rotate(-6deg)}65%{transform:scale(.9) rotate(3deg)}85%{transform:scale(1) rotate(0)}to{transform:scale(1) rotate(0)}}@keyframes burstNorthWest{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * -.7),calc(var(--particle-dist, 16px) * -.7)) scale(0);opacity:0}}@keyframes burstNorth{0%{transform:translate(0) scale(1);opacity:1}to{transform:translateY(calc(var(--particle-dist, 16px) * -1)) scale(0);opacity:0}}@keyframes burstNorthEast{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * .7),calc(var(--particle-dist, 16px) * -.7)) scale(0);opacity:0}}@keyframes burstEast{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--particle-dist, 16px)) scale(0);opacity:0}}@keyframes burstSouthEast{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * .7),calc(var(--particle-dist, 16px) * .7)) scale(0);opacity:0}}@keyframes burstSouth{0%{transform:translate(0) scale(1);opacity:1}to{transform:translateY(var(--particle-dist, 16px)) scale(0);opacity:0}}@keyframes burstSouthWest{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * -.7),calc(var(--particle-dist, 16px) * .7)) scale(0);opacity:0}}@keyframes burstWest{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * -1)) scale(0);opacity:0}}.talos-rating-label-wrapper{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--talos-rating-font-size);line-height:1}.talos-rating-score-pill{display:inline-flex;align-items:baseline;padding:.15rem .45rem;font-weight:700;border-radius:var(--talos-radius-sm, 4px);background-color:var(--talos-bg-subtle, #f1f5f9);color:var(--talos-text-primary, #0f172a);border:1px solid var(--talos-border-subtle, #e2e8f0)}.talos-rating-score-pill .score-max{font-size:.85em;font-weight:500;color:var(--talos-text-muted, #64748b);margin-left:1px}.talos-rating-desc-text{font-weight:500;color:var(--talos-text-secondary, #334155)}:host(.anim-none) .talos-rating-star-btn,:host(.anim-none) .talos-star-svg,:host(.anim-none) .talos-rating-particles{animation:none!important;transition:none!important;transform:none!important}:host(.anim-subtle) .talos-rating-star-btn.is-animating .talos-star-svg{animation:none;transform:scale(1);transition:transform .15s ease}:host(.anim-pop) .talos-rating-particles{display:none!important}@media(prefers-reduced-motion:reduce){:host .talos-rating-star-btn,:host .talos-star-svg,:host .talos-rating-particles{animation:none!important;transition:none!important;transform:none!important}}:root[data-theme=dark],:root.dark,[data-theme=dark],[data-mode=dark],.dark,.dark-theme{--talos-rating-unfilled: rgba(255, 255, 255, .2)}:root[data-theme=dark] .talos-rating-star-btn .talos-star-svg,:root.dark .talos-rating-star-btn .talos-star-svg,[data-theme=dark] .talos-rating-star-btn .talos-star-svg,[data-mode=dark] .talos-rating-star-btn .talos-star-svg,.dark .talos-rating-star-btn .talos-star-svg,.dark-theme .talos-rating-star-btn .talos-star-svg{stroke:#ffffff40}:root[data-theme=dark] .talos-rating-score-pill,:root.dark .talos-rating-score-pill,[data-theme=dark] .talos-rating-score-pill,[data-mode=dark] .talos-rating-score-pill,.dark .talos-rating-score-pill,.dark-theme .talos-rating-score-pill{background-color:var(--talos-bg-subtle, #131d31);border-color:var(--talos-border-subtle, rgba(255, 255, 255, .08));color:var(--talos-text-primary, #f8fafc)}:root[data-theme=dark] .talos-rating-score-pill .score-max,:root.dark .talos-rating-score-pill .score-max,[data-theme=dark] .talos-rating-score-pill .score-max,[data-mode=dark] .talos-rating-score-pill .score-max,.dark .talos-rating-score-pill .score-max,.dark-theme .talos-rating-score-pill .score-max{color:var(--talos-text-muted, #94a3b8)}:root[data-theme=dark] .talos-rating-desc-text,:root.dark .talos-rating-desc-text,[data-theme=dark] .talos-rating-desc-text,[data-mode=dark] .talos-rating-desc-text,.dark .talos-rating-desc-text,.dark-theme .talos-rating-desc-text{color:var(--talos-text-secondary, #e2e8f0)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosRatingComponent, decorators: [{
             type: Component,
@@ -17025,7 +17095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '(focus)': 'onFocus()',
                         '(blur)': 'onBlur()',
                         '(mouseleave)': 'onMouseLeave()'
-                    }, template: "<div\n  class=\"talos-rating-container\"\n  [id]=\"elementId()\"\n  [style.--talos-rating-custom-color]=\"color() || null\"\n>\n  <div class=\"talos-rating-stars\" role=\"presentation\">\n    @for (i of items(); track i) {\n      <button\n        type=\"button\"\n        class=\"talos-rating-star-btn\"\n        [class.is-active]=\"isItemActive(i)\"\n        [class.is-hovered]=\"hoverValue() !== null && hoverValue()! >= i\"\n        [class.is-animating]=\"animatingIndex() === i && showPop()\"\n        [attr.aria-label]=\"i + ' of ' + max() + ' stars'\"\n        [disabled]=\"effectiveDisabled() || effectiveReadonly()\"\n        (mouseenter)=\"onItemMouseEnter(i)\"\n        (click)=\"onItemClick(i)\"\n      >\n        <svg\n          class=\"talos-star-svg\"\n          viewBox=\"0 0 24 24\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\" />\n        </svg>\n\n        <!-- Particle Celebration Spark Burst -->\n        @if (activeBurstIndex() === i && showParticles()) {\n          <span class=\"talos-rating-particles\" aria-hidden=\"true\">\n            <span class=\"particle p-1\"></span>\n            <span class=\"particle p-2\"></span>\n            <span class=\"particle p-3\"></span>\n            <span class=\"particle p-4\"></span>\n            <span class=\"particle p-5\"></span>\n            <span class=\"particle p-6\"></span>\n            <span class=\"particle p-7\"></span>\n            <span class=\"particle p-8\"></span>\n          </span>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Optional Descriptor / Score Label -->\n  @if (showScore() || showLabel() || activeTooltip()) {\n    <div class=\"talos-rating-label-wrapper\">\n      @if (showScore()) {\n        <span class=\"talos-rating-score-pill\">\n          {{ displayValue() }}<span class=\"score-max\">/{{ max() }}</span>\n        </span>\n      }\n      @if ((showLabel() || tooltips().length > 0) && activeTooltip()) {\n        <span class=\"talos-rating-desc-text\">{{ activeTooltip() }}</span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex;vertical-align:middle;outline:none;border-radius:var(--talos-radius-sm, 4px);transition:box-shadow var(--talos-transition, .18s ease);--talos-rating-fill: var(--talos-warning, #f59e0b);--talos-rating-spark-alt: #fbbf24;--talos-rating-unfilled: var(--talos-border-default, #cbd5e1);--talos-rating-size: 1.375rem;--talos-rating-gap: .375rem;--talos-rating-font-size: var(--talos-font-size-sm, .8125rem)}:host.variant-warning{--talos-rating-fill: var(--talos-warning, #f59e0b);--talos-rating-spark-alt: #fcd34d}:host.variant-primary{--talos-rating-fill: var(--talos-primary, #2563eb);--talos-rating-spark-alt: #60a5fa}:host.variant-danger{--talos-rating-fill: var(--talos-danger, #ef4444);--talos-rating-spark-alt: #f87171}:host.variant-success{--talos-rating-fill: var(--talos-success, #16a34a);--talos-rating-spark-alt: #4ade80}:host.variant-purple{--talos-rating-fill: var(--talos-purple, #8b5cf6);--talos-rating-spark-alt: #c084fc}:host.variant-custom{--talos-rating-fill: var(--talos-rating-custom-color, var(--talos-warning, #f59e0b));--talos-rating-spark-alt: var(--talos-rating-custom-color, #fbbf24)}:host.rating-sm{--talos-rating-size: 1.125rem;--talos-rating-gap: .25rem;--talos-rating-font-size: var(--talos-font-size-xs, .75rem);--particle-dist: 12px}:host.rating-md{--talos-rating-size: 1.375rem;--talos-rating-gap: .375rem;--talos-rating-font-size: var(--talos-font-size-sm, .8125rem);--particle-dist: 16px}:host.rating-lg{--talos-rating-size: 1.75rem;--talos-rating-gap: .5rem;--talos-rating-font-size: var(--talos-font-size-md, .875rem);--particle-dist: 22px}:host.rating-xl{--talos-rating-size: 2.25rem;--talos-rating-gap: .625rem;--talos-rating-font-size: var(--talos-font-size-lg, 1rem);--particle-dist: 28px}:host.is-disabled{opacity:.5;pointer-events:none;cursor:not-allowed}:host.is-readonly{cursor:default}:host:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .2))}.talos-rating-container{display:inline-flex;align-items:center;gap:.625rem;-webkit-user-select:none;user-select:none;font-family:var(--talos-font-sans, inherit)}:host(.label-bottom) .talos-rating-container{flex-direction:column;align-items:flex-start;gap:.375rem}.talos-rating-stars{display:inline-flex;align-items:center;gap:var(--talos-rating-gap)}.talos-rating-star-btn{position:relative;background:transparent;border:none;padding:0;margin:0;line-height:0;display:inline-flex;align-items:center;justify-content:center;width:var(--talos-rating-size);height:var(--talos-rating-size);color:var(--talos-rating-unfilled);outline:none;cursor:default;transform-origin:center center;overflow:visible}:host(.is-interactive) .talos-rating-star-btn{cursor:pointer}.talos-rating-star-btn .talos-star-svg{width:var(--talos-rating-size);height:var(--talos-rating-size);stroke-width:1.75;stroke:var(--talos-rating-unfilled);fill:transparent;transition:color .15s ease,fill .15s ease,stroke .15s ease,transform .15s ease;transform-origin:center center}:host(.is-interactive:not(.anim-none)) .talos-rating-star-btn:hover .talos-star-svg{transform:scale(1.12)}.talos-rating-star-btn.is-active,.talos-rating-star-btn.is-hovered{color:var(--talos-rating-fill)}.talos-rating-star-btn.is-active .talos-star-svg,.talos-rating-star-btn.is-hovered .talos-star-svg{fill:var(--talos-rating-fill);stroke:var(--talos-rating-fill);filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}.talos-rating-star-btn.is-animating .talos-star-svg{animation:talosStarPop .44s cubic-bezier(.175,.885,.32,1.275)}.talos-rating-star-btn:disabled{cursor:not-allowed}.talos-rating-particles{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none;z-index:10}.talos-rating-particles .particle{position:absolute;top:0;left:0;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background-color:var(--talos-rating-fill);pointer-events:none;box-shadow:0 0 4px var(--talos-rating-fill);animation-duration:.5s;animation-timing-function:cubic-bezier(.165,.84,.44,1);animation-fill-mode:forwards}.talos-rating-particles .particle.p-1,.talos-rating-particles .particle.p-3,.talos-rating-particles .particle.p-5,.talos-rating-particles .particle.p-7{background-color:var(--talos-rating-spark-alt);box-shadow:0 0 5px var(--talos-rating-spark-alt)}.talos-rating-particles .particle.p-1{width:3.5px;height:3.5px;animation-name:burstNorthWest}.talos-rating-particles .particle.p-2{width:4.5px;height:4.5px;animation-name:burstNorth}.talos-rating-particles .particle.p-3{width:3px;height:3px;animation-name:burstNorthEast}.talos-rating-particles .particle.p-4{width:4.5px;height:4.5px;animation-name:burstEast}.talos-rating-particles .particle.p-5{width:3.5px;height:3.5px;animation-name:burstSouthEast}.talos-rating-particles .particle.p-6{width:4px;height:4px;animation-name:burstSouth}.talos-rating-particles .particle.p-7{width:3px;height:3px;animation-name:burstSouthWest}.talos-rating-particles .particle.p-8{width:4.5px;height:4.5px;animation-name:burstWest}@keyframes talosStarPop{0%{transform:scale(1)}30%{transform:scale(1.38) rotate(-6deg)}65%{transform:scale(.9) rotate(3deg)}85%{transform:scale(1.08) rotate(0)}to{transform:scale(1) rotate(0)}}@keyframes burstNorthWest{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * -.7),calc(var(--particle-dist, 16px) * -.7)) scale(0);opacity:0}}@keyframes burstNorth{0%{transform:translate(0) scale(1);opacity:1}to{transform:translateY(calc(var(--particle-dist, 16px) * -1)) scale(0);opacity:0}}@keyframes burstNorthEast{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * .7),calc(var(--particle-dist, 16px) * -.7)) scale(0);opacity:0}}@keyframes burstEast{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--particle-dist, 16px)) scale(0);opacity:0}}@keyframes burstSouthEast{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * .7),calc(var(--particle-dist, 16px) * .7)) scale(0);opacity:0}}@keyframes burstSouth{0%{transform:translate(0) scale(1);opacity:1}to{transform:translateY(var(--particle-dist, 16px)) scale(0);opacity:0}}@keyframes burstSouthWest{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * -.7),calc(var(--particle-dist, 16px) * .7)) scale(0);opacity:0}}@keyframes burstWest{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * -1)) scale(0);opacity:0}}.talos-rating-label-wrapper{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--talos-rating-font-size);line-height:1}.talos-rating-score-pill{display:inline-flex;align-items:baseline;padding:.15rem .45rem;font-weight:700;border-radius:var(--talos-radius-sm, 4px);background-color:var(--talos-bg-subtle, #f1f5f9);color:var(--talos-text-primary, #0f172a);border:1px solid var(--talos-border-subtle, #e2e8f0)}.talos-rating-score-pill .score-max{font-size:.85em;font-weight:500;color:var(--talos-text-muted, #64748b);margin-left:1px}.talos-rating-desc-text{font-weight:500;color:var(--talos-text-secondary, #334155)}:host(.anim-none) .talos-rating-star-btn,:host(.anim-none) .talos-star-svg,:host(.anim-none) .talos-rating-particles{animation:none!important;transition:none!important;transform:none!important}:host(.anim-subtle) .talos-rating-star-btn.is-animating .talos-star-svg{animation:none;transform:scale(1.08);transition:transform .15s ease}:host(.anim-pop) .talos-rating-particles{display:none!important}@media(prefers-reduced-motion:reduce){:host .talos-rating-star-btn,:host .talos-star-svg,:host .talos-rating-particles{animation:none!important;transition:none!important;transform:none!important}}:root[data-theme=dark],:root.dark,[data-theme=dark],[data-mode=dark],.dark,.dark-theme{--talos-rating-unfilled: rgba(255, 255, 255, .2)}:root[data-theme=dark] .talos-rating-star-btn .talos-star-svg,:root.dark .talos-rating-star-btn .talos-star-svg,[data-theme=dark] .talos-rating-star-btn .talos-star-svg,[data-mode=dark] .talos-rating-star-btn .talos-star-svg,.dark .talos-rating-star-btn .talos-star-svg,.dark-theme .talos-rating-star-btn .talos-star-svg{stroke:#ffffff40}:root[data-theme=dark] .talos-rating-score-pill,:root.dark .talos-rating-score-pill,[data-theme=dark] .talos-rating-score-pill,[data-mode=dark] .talos-rating-score-pill,.dark .talos-rating-score-pill,.dark-theme .talos-rating-score-pill{background-color:var(--talos-bg-subtle, #131d31);border-color:var(--talos-border-subtle, rgba(255, 255, 255, .08));color:var(--talos-text-primary, #f8fafc)}:root[data-theme=dark] .talos-rating-score-pill .score-max,:root.dark .talos-rating-score-pill .score-max,[data-theme=dark] .talos-rating-score-pill .score-max,[data-mode=dark] .talos-rating-score-pill .score-max,.dark .talos-rating-score-pill .score-max,.dark-theme .talos-rating-score-pill .score-max{color:var(--talos-text-muted, #94a3b8)}:root[data-theme=dark] .talos-rating-desc-text,:root.dark .talos-rating-desc-text,[data-theme=dark] .talos-rating-desc-text,[data-mode=dark] .talos-rating-desc-text,.dark .talos-rating-desc-text,.dark-theme .talos-rating-desc-text{color:var(--talos-text-secondary, #e2e8f0)}\n"] }]
+                    }, template: "<div\n  class=\"talos-rating-container\"\n  [id]=\"elementId()\"\n  [style.--talos-rating-custom-color]=\"color() || null\"\n>\n  <div class=\"talos-rating-stars\" role=\"presentation\">\n    @for (i of items(); track i) {\n      <button\n        type=\"button\"\n        class=\"talos-rating-star-btn\"\n        [class.is-active]=\"isItemActive(i)\"\n        [class.is-hovered]=\"hoverValue() !== null && hoverValue()! >= i\"\n        [class.is-animating]=\"animatingIndex() === i && showPop()\"\n        [attr.aria-label]=\"i + ' of ' + max() + ' stars'\"\n        [disabled]=\"effectiveDisabled() || effectiveReadonly()\"\n        (mouseenter)=\"onItemMouseEnter(i)\"\n        (click)=\"onItemClick(i)\"\n      >\n        <svg\n          class=\"talos-star-svg\"\n          viewBox=\"0 0 24 24\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\" />\n        </svg>\n\n        <!-- Particle Celebration Spark Burst -->\n        @if (activeBurstIndex() === i && showParticles()) {\n          <span class=\"talos-rating-particles\" aria-hidden=\"true\">\n            <span class=\"particle p-1\"></span>\n            <span class=\"particle p-2\"></span>\n            <span class=\"particle p-3\"></span>\n            <span class=\"particle p-4\"></span>\n            <span class=\"particle p-5\"></span>\n            <span class=\"particle p-6\"></span>\n            <span class=\"particle p-7\"></span>\n            <span class=\"particle p-8\"></span>\n          </span>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Optional Descriptor / Score Label -->\n  @if (showScore() || showLabel() || activeTooltip()) {\n    <div class=\"talos-rating-label-wrapper\">\n      @if (showScore()) {\n        <span class=\"talos-rating-score-pill\">\n          {{ displayValue() }}<span class=\"score-max\">/{{ max() }}</span>\n        </span>\n      }\n      @if ((showLabel() || tooltips().length > 0) && activeTooltip()) {\n        <span class=\"talos-rating-desc-text\">{{ activeTooltip() }}</span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex;vertical-align:middle;outline:none;border-radius:var(--talos-radius-sm, 4px);transition:box-shadow var(--talos-transition, .18s ease);--talos-rating-fill: var(--talos-warning, #f59e0b);--talos-rating-spark-alt: #fbbf24;--talos-rating-unfilled: var(--talos-border-default, #cbd5e1);--talos-rating-size: 1.375rem;--talos-rating-gap: .375rem;--talos-rating-font-size: var(--talos-font-size-sm, .8125rem)}:host.variant-warning{--talos-rating-fill: var(--talos-warning, #f59e0b);--talos-rating-spark-alt: #fcd34d}:host.variant-primary{--talos-rating-fill: var(--talos-primary, #2563eb);--talos-rating-spark-alt: #60a5fa}:host.variant-danger{--talos-rating-fill: var(--talos-danger, #ef4444);--talos-rating-spark-alt: #f87171}:host.variant-success{--talos-rating-fill: var(--talos-success, #16a34a);--talos-rating-spark-alt: #4ade80}:host.variant-purple{--talos-rating-fill: var(--talos-purple, #8b5cf6);--talos-rating-spark-alt: #c084fc}:host.variant-custom{--talos-rating-fill: var(--talos-rating-custom-color, var(--talos-warning, #f59e0b));--talos-rating-spark-alt: var(--talos-rating-custom-color, #fbbf24)}:host.rating-sm{--talos-rating-size: 1.125rem;--talos-rating-gap: .25rem;--talos-rating-font-size: var(--talos-font-size-xs, .75rem);--particle-dist: 12px}:host.rating-md{--talos-rating-size: 1.375rem;--talos-rating-gap: .375rem;--talos-rating-font-size: var(--talos-font-size-sm, .8125rem);--particle-dist: 16px}:host.rating-lg{--talos-rating-size: 1.75rem;--talos-rating-gap: .5rem;--talos-rating-font-size: var(--talos-font-size-md, .875rem);--particle-dist: 22px}:host.rating-xl{--talos-rating-size: 2.25rem;--talos-rating-gap: .625rem;--talos-rating-font-size: var(--talos-font-size-lg, 1rem);--particle-dist: 28px}:host.is-disabled{opacity:.5;pointer-events:none;cursor:not-allowed}:host.is-readonly{cursor:default}:host:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .2))}.talos-rating-container{display:inline-flex;align-items:center;gap:.625rem;-webkit-user-select:none;user-select:none;font-family:var(--talos-font-sans, inherit)}:host(.label-bottom) .talos-rating-container{flex-direction:column;align-items:flex-start;gap:.375rem}.talos-rating-stars{display:inline-flex;align-items:center;gap:var(--talos-rating-gap)}.talos-rating-star-btn{position:relative;background:transparent;border:none;padding:0;margin:0;line-height:0;display:inline-flex;align-items:center;justify-content:center;width:var(--talos-rating-size);height:var(--talos-rating-size);color:var(--talos-rating-unfilled);outline:none;cursor:default;transform-origin:center center;overflow:visible}:host(.is-interactive) .talos-rating-star-btn{cursor:pointer}.talos-rating-star-btn .talos-star-svg{width:var(--talos-rating-size);height:var(--talos-rating-size);stroke-width:1.75;stroke:var(--talos-rating-unfilled);fill:transparent;transition:color .15s ease,fill .15s ease,stroke .15s ease,transform .15s ease;transform-origin:center center}:host(.is-interactive:not(.anim-none)) .talos-rating-star-btn:hover .talos-star-svg{transform:scale(1.12)}.talos-rating-star-btn.is-active,.talos-rating-star-btn.is-hovered{color:var(--talos-rating-fill)}.talos-rating-star-btn.is-active .talos-star-svg,.talos-rating-star-btn.is-hovered .talos-star-svg{fill:var(--talos-rating-fill);stroke:var(--talos-rating-fill);filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}.talos-rating-star-btn.is-animating .talos-star-svg{animation:talosStarPop .44s cubic-bezier(.175,.885,.32,1.275)}.talos-rating-star-btn:disabled{cursor:not-allowed}.talos-rating-particles{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none;z-index:10}.talos-rating-particles .particle{position:absolute;top:0;left:0;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background-color:var(--talos-rating-fill);pointer-events:none;box-shadow:0 0 4px var(--talos-rating-fill);animation-duration:.5s;animation-timing-function:cubic-bezier(.165,.84,.44,1);animation-fill-mode:forwards}.talos-rating-particles .particle.p-1,.talos-rating-particles .particle.p-3,.talos-rating-particles .particle.p-5,.talos-rating-particles .particle.p-7{background-color:var(--talos-rating-spark-alt);box-shadow:0 0 5px var(--talos-rating-spark-alt)}.talos-rating-particles .particle.p-1{width:3.5px;height:3.5px;animation-name:burstNorthWest}.talos-rating-particles .particle.p-2{width:4.5px;height:4.5px;animation-name:burstNorth}.talos-rating-particles .particle.p-3{width:3px;height:3px;animation-name:burstNorthEast}.talos-rating-particles .particle.p-4{width:4.5px;height:4.5px;animation-name:burstEast}.talos-rating-particles .particle.p-5{width:3.5px;height:3.5px;animation-name:burstSouthEast}.talos-rating-particles .particle.p-6{width:4px;height:4px;animation-name:burstSouth}.talos-rating-particles .particle.p-7{width:3px;height:3px;animation-name:burstSouthWest}.talos-rating-particles .particle.p-8{width:4.5px;height:4.5px;animation-name:burstWest}@keyframes talosStarPop{0%{transform:scale(1)}30%{transform:scale(1.38) rotate(-6deg)}65%{transform:scale(.9) rotate(3deg)}85%{transform:scale(1) rotate(0)}to{transform:scale(1) rotate(0)}}@keyframes burstNorthWest{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * -.7),calc(var(--particle-dist, 16px) * -.7)) scale(0);opacity:0}}@keyframes burstNorth{0%{transform:translate(0) scale(1);opacity:1}to{transform:translateY(calc(var(--particle-dist, 16px) * -1)) scale(0);opacity:0}}@keyframes burstNorthEast{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * .7),calc(var(--particle-dist, 16px) * -.7)) scale(0);opacity:0}}@keyframes burstEast{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--particle-dist, 16px)) scale(0);opacity:0}}@keyframes burstSouthEast{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * .7),calc(var(--particle-dist, 16px) * .7)) scale(0);opacity:0}}@keyframes burstSouth{0%{transform:translate(0) scale(1);opacity:1}to{transform:translateY(var(--particle-dist, 16px)) scale(0);opacity:0}}@keyframes burstSouthWest{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * -.7),calc(var(--particle-dist, 16px) * .7)) scale(0);opacity:0}}@keyframes burstWest{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--particle-dist, 16px) * -1)) scale(0);opacity:0}}.talos-rating-label-wrapper{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--talos-rating-font-size);line-height:1}.talos-rating-score-pill{display:inline-flex;align-items:baseline;padding:.15rem .45rem;font-weight:700;border-radius:var(--talos-radius-sm, 4px);background-color:var(--talos-bg-subtle, #f1f5f9);color:var(--talos-text-primary, #0f172a);border:1px solid var(--talos-border-subtle, #e2e8f0)}.talos-rating-score-pill .score-max{font-size:.85em;font-weight:500;color:var(--talos-text-muted, #64748b);margin-left:1px}.talos-rating-desc-text{font-weight:500;color:var(--talos-text-secondary, #334155)}:host(.anim-none) .talos-rating-star-btn,:host(.anim-none) .talos-star-svg,:host(.anim-none) .talos-rating-particles{animation:none!important;transition:none!important;transform:none!important}:host(.anim-subtle) .talos-rating-star-btn.is-animating .talos-star-svg{animation:none;transform:scale(1);transition:transform .15s ease}:host(.anim-pop) .talos-rating-particles{display:none!important}@media(prefers-reduced-motion:reduce){:host .talos-rating-star-btn,:host .talos-star-svg,:host .talos-rating-particles{animation:none!important;transition:none!important;transform:none!important}}:root[data-theme=dark],:root.dark,[data-theme=dark],[data-mode=dark],.dark,.dark-theme{--talos-rating-unfilled: rgba(255, 255, 255, .2)}:root[data-theme=dark] .talos-rating-star-btn .talos-star-svg,:root.dark .talos-rating-star-btn .talos-star-svg,[data-theme=dark] .talos-rating-star-btn .talos-star-svg,[data-mode=dark] .talos-rating-star-btn .talos-star-svg,.dark .talos-rating-star-btn .talos-star-svg,.dark-theme .talos-rating-star-btn .talos-star-svg{stroke:#ffffff40}:root[data-theme=dark] .talos-rating-score-pill,:root.dark .talos-rating-score-pill,[data-theme=dark] .talos-rating-score-pill,[data-mode=dark] .talos-rating-score-pill,.dark .talos-rating-score-pill,.dark-theme .talos-rating-score-pill{background-color:var(--talos-bg-subtle, #131d31);border-color:var(--talos-border-subtle, rgba(255, 255, 255, .08));color:var(--talos-text-primary, #f8fafc)}:root[data-theme=dark] .talos-rating-score-pill .score-max,:root.dark .talos-rating-score-pill .score-max,[data-theme=dark] .talos-rating-score-pill .score-max,[data-mode=dark] .talos-rating-score-pill .score-max,.dark .talos-rating-score-pill .score-max,.dark-theme .talos-rating-score-pill .score-max{color:var(--talos-text-muted, #94a3b8)}:root[data-theme=dark] .talos-rating-desc-text,:root.dark .talos-rating-desc-text,[data-theme=dark] .talos-rating-desc-text,[data-mode=dark] .talos-rating-desc-text,.dark .talos-rating-desc-text,.dark-theme .talos-rating-desc-text{color:var(--talos-text-secondary, #e2e8f0)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], tooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltips", required: false }] }], showScore: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScore", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], rateChange: [{ type: i0.Output, args: ["rateChange"] }], hoverChange: [{ type: i0.Output, args: ["hoverChange"] }], cleared: [{ type: i0.Output, args: ["cleared"] }] } });
 
 class TalosRatingModule {
@@ -17041,6 +17111,1614 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }] });
 
+class TalosGridStatusCellComponent {
+    row = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    column = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    rawValue = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rawValue" }] : /* istanbul ignore next */ []));
+    value = computed(() => {
+        const directVal = this.rawValue();
+        if (directVal !== undefined) {
+            return directVal;
+        }
+        const r = this.row();
+        const col = this.column();
+        if (!r || !col?.field)
+            return '';
+        return r[col.field];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    status = computed(() => {
+        const val = this.value();
+        const r = this.row();
+        const config = this.column().statusConfig;
+        if (config?.statusMap) {
+            return config.statusMap(val, r);
+        }
+        return (val ?? 'PENDING');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    label = computed(() => {
+        const val = this.value();
+        const r = this.row();
+        const col = this.column();
+        if (col.formatter) {
+            return col.formatter(val, r);
+        }
+        return String(val ?? '');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    variant = computed(() => {
+        return this.column().statusConfig?.variant ?? 'subtle';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = computed(() => {
+        return this.column().statusConfig?.size ?? 'sm';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    shape = computed(() => {
+        return this.column().statusConfig?.shape ?? 'rounded';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    showIcon = computed(() => {
+        return this.column().statusConfig?.showIcon ?? true;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridStatusCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: TalosGridStatusCellComponent, isStandalone: true, selector: "talos-grid-status-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rawValue: { classPropertyName: "rawValue", publicName: "rawValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "talos-grid-status-cell" }, ngImport: i0, template: `
+    <talos-status-tag
+      [status]="status()"
+      [variant]="variant()"
+      [size]="size()"
+      [shape]="shape()"
+      [showIcon]="showIcon()"
+    >
+      {{ label() }}
+    </talos-status-tag>
+  `, isInline: true, dependencies: [{ kind: "component", type: TalosStatusTagComponent$1, selector: "talos-status-tag, [talosStatusTag]", inputs: ["status", "label", "variant", "size", "shape", "showIcon", "icon", "iconOnly", "pulse", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridStatusCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'talos-grid-status-cell',
+                    imports: [TalosStatusTagComponent$1],
+                    template: `
+    <talos-status-tag
+      [status]="status()"
+      [variant]="variant()"
+      [size]="size()"
+      [shape]="shape()"
+      [showIcon]="showIcon()"
+    >
+      {{ label() }}
+    </talos-status-tag>
+  `,
+                    host: {
+                        class: 'talos-grid-status-cell',
+                    },
+                }]
+        }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], rawValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rawValue", required: false }] }] } });
+
+class TalosGridActionsCellComponent {
+    row = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    rowIndex = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    actionClick = output();
+    visibleActions() {
+        const r = this.row();
+        return (this.actions() || []).filter((a) => {
+            if (typeof a.hidden === 'function') {
+                return !a.hidden(r);
+            }
+            return !a.hidden;
+        });
+    }
+    isActionDisabled(action) {
+        if (typeof action.disabled === 'function') {
+            return action.disabled(this.row());
+        }
+        return !!action.disabled;
+    }
+    getActionTooltip(action) {
+        if (typeof action.tooltip === 'function') {
+            return action.tooltip(this.row());
+        }
+        return action.tooltip || '';
+    }
+    onActionClick(action, event) {
+        event.stopPropagation();
+        if (this.isActionDisabled(action))
+            return;
+        if (action.onClick) {
+            action.onClick(this.row(), this.rowIndex(), event);
+        }
+        this.actionClick.emit({
+            actionId: action.id,
+            row: this.row(),
+            index: this.rowIndex(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridActionsCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosGridActionsCellComponent, isStandalone: true, selector: "talos-grid-actions-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, host: { classAttribute: "talos-grid-actions-cell" }, ngImport: i0, template: `
+    <div class="talos-grid-actions-wrapper">
+      @for (action of visibleActions(); track action.id) {
+        <button
+          talosButton
+          type="button"
+          [variant]="action.variant ?? 'ghost'"
+          [size]="action.size ?? 'xs'"
+          [iconOnly]="action.iconOnly ?? !action.label"
+          [disabled]="isActionDisabled(action)"
+          [talosTooltip]="getActionTooltip(action)"
+          [tooltipDisabled]="!getActionTooltip(action)"
+          (click)="onActionClick(action, $event)"
+        >
+          @if (action.icon) {
+            <ng-container *ngComponentOutlet="action.icon" />
+          }
+          @if (action.label && !action.iconOnly) {
+            <span class="action-label">{{ action.label }}</span>
+          }
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [".talos-grid-actions-wrapper{display:inline-flex;align-items:center;gap:4px;flex-wrap:nowrap}.action-label{margin-left:2px;font-size:11.5px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: TalosButtonDirective$1, selector: "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", inputs: ["variant", "size", "iconOnly", "fullWidth", "pill", "loading", "disabled", "animation", "spinning", "popping", "feedback"] }, { kind: "directive", type: TalosTooltipDirective$1, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridActionsCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-grid-actions-cell', imports: [NgComponentOutlet, TalosButtonDirective$1, TalosTooltipDirective$1], template: `
+    <div class="talos-grid-actions-wrapper">
+      @for (action of visibleActions(); track action.id) {
+        <button
+          talosButton
+          type="button"
+          [variant]="action.variant ?? 'ghost'"
+          [size]="action.size ?? 'xs'"
+          [iconOnly]="action.iconOnly ?? !action.label"
+          [disabled]="isActionDisabled(action)"
+          [talosTooltip]="getActionTooltip(action)"
+          [tooltipDisabled]="!getActionTooltip(action)"
+          (click)="onActionClick(action, $event)"
+        >
+          @if (action.icon) {
+            <ng-container *ngComponentOutlet="action.icon" />
+          }
+          @if (action.label && !action.iconOnly) {
+            <span class="action-label">{{ action.label }}</span>
+          }
+        </button>
+      }
+    </div>
+  `, host: {
+                        class: 'talos-grid-actions-cell',
+                    }, styles: [".talos-grid-actions-wrapper{display:inline-flex;align-items:center;gap:4px;flex-wrap:nowrap}.action-label{margin-left:2px;font-size:11.5px;font-weight:500}\n"] }]
+        }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
+
+class TalosGridFilterDialogComponent {
+    column = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    distinctValues = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "distinctValues" }] : /* istanbul ignore next */ []));
+    currentFilter = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentFilter" }] : /* istanbul ignore next */ []));
+    align = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    filterApplied = output();
+    filterCleared = output();
+    closed = output();
+    // Template icons
+    searchIcon = LucideSearch;
+    checkIcon = LucideCheck;
+    chevronDownIcon = LucideChevronDown;
+    xIcon = LucideX;
+    // Filter mode derived from column:
+    // Mode A: text, select, status
+    // Mode B: number, date
+    filterMode = computed(() => {
+        const col = this.column();
+        if (col.filterMode)
+            return col.filterMode;
+        if (col.type === 'number' ||
+            col.sortType === 'number' ||
+            col.type === 'date' ||
+            col.sortType === 'date') {
+            return 'condition';
+        }
+        return 'set';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []));
+    // Mode A local state
+    searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    selectedSet = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedSet" }] : /* istanbul ignore next */ []));
+    // Mode B local state
+    selectedOperator = signal('eq', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOperator" }] : /* istanbul ignore next */ []));
+    filterVal = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterVal" }] : /* istanbul ignore next */ []));
+    filterVal2 = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterVal2" }] : /* istanbul ignore next */ []));
+    operatorOptions = computed(() => {
+        if (this.isDateField()) {
+            return [
+                { value: 'eq', label: 'Is on' },
+                { value: 'neq', label: 'Is not on' },
+                { value: 'gt', label: 'After' },
+                { value: 'gte', label: 'On or after' },
+                { value: 'lt', label: 'Before' },
+                { value: 'lte', label: 'On or before' },
+                { value: 'between', label: 'Between' },
+                { value: 'blank', label: 'Blank' },
+                { value: 'notBlank', label: 'Not blank' },
+            ];
+        }
+        if (this.isNumberField()) {
+            return [
+                { value: 'eq', label: 'Equals' },
+                { value: 'neq', label: 'Does not equal' },
+                { value: 'gt', label: 'Greater than' },
+                { value: 'gte', label: 'Greater than or equal to' },
+                { value: 'lt', label: 'Less than' },
+                { value: 'lte', label: 'Less than or equal to' },
+                { value: 'between', label: 'Between' },
+                { value: 'blank', label: 'Blank' },
+                { value: 'notBlank', label: 'Not blank' },
+            ];
+        }
+        return [
+            { value: 'contains', label: 'Contains' },
+            { value: 'eq', label: 'Equals' },
+            { value: 'neq', label: 'Does not equal' },
+            { value: 'startsWith', label: 'Starts with' },
+            { value: 'endsWith', label: 'Ends with' },
+            { value: 'blank', label: 'Blank' },
+            { value: 'notBlank', label: 'Not blank' },
+        ];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operatorOptions" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.initFromCurrentFilter();
+    }
+    initFromCurrentFilter() {
+        const cf = this.currentFilter();
+        const all = this.distinctValues();
+        if (this.filterMode() === 'set') {
+            if (cf && cf.mode === 'set' && cf.selectedValues) {
+                this.selectedSet.set(new Set(cf.selectedValues));
+            }
+            else {
+                // Default: all selected
+                this.selectedSet.set(new Set(all));
+            }
+        }
+        else {
+            if (cf && cf.mode === 'condition') {
+                this.selectedOperator.set(cf.operator || 'eq');
+                this.filterVal.set(cf.value !== undefined && cf.value !== null ? String(cf.value) : '');
+                this.filterVal2.set(cf.secondValue !== undefined && cf.secondValue !== null ? String(cf.secondValue) : '');
+            }
+            else {
+                const defaultOp = this.isDateField() || this.isNumberField() ? 'eq' : 'contains';
+                this.selectedOperator.set(defaultOp);
+                this.filterVal.set('');
+                this.filterVal2.set('');
+            }
+        }
+    }
+    isDateField() {
+        const col = this.column();
+        return col.type === 'date' || col.sortType === 'date';
+    }
+    isNumberField() {
+        const col = this.column();
+        return col.type === 'number' || col.sortType === 'number';
+    }
+    onDateFilterValChange(val) {
+        if (!val) {
+            this.filterVal.set('');
+        }
+        else if (val instanceof Date) {
+            const y = val.getFullYear();
+            const m = String(val.getMonth() + 1).padStart(2, '0');
+            const d = String(val.getDate()).padStart(2, '0');
+            this.filterVal.set(`${y}-${m}-${d}`);
+        }
+        else {
+            this.filterVal.set(String(val));
+        }
+    }
+    onDateFilterVal2Change(val) {
+        if (!val) {
+            this.filterVal2.set('');
+        }
+        else if (val instanceof Date) {
+            const y = val.getFullYear();
+            const m = String(val.getMonth() + 1).padStart(2, '0');
+            const d = String(val.getDate()).padStart(2, '0');
+            this.filterVal2.set(`${y}-${m}-${d}`);
+        }
+        else {
+            this.filterVal2.set(String(val));
+        }
+    }
+    // Mode A Helpers
+    visibleDistinctValues = computed(() => {
+        const term = this.searchTerm().toLowerCase().trim();
+        const all = this.distinctValues();
+        if (!term)
+            return all;
+        return all.filter((v) => (v || '').toLowerCase().includes(term));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleDistinctValues" }] : /* istanbul ignore next */ []));
+    isAllSelected() {
+        const visible = this.visibleDistinctValues();
+        if (visible.length === 0)
+            return false;
+        const sel = this.selectedSet();
+        return visible.every((v) => sel.has(v));
+    }
+    isIndeterminate() {
+        const visible = this.visibleDistinctValues();
+        if (visible.length === 0)
+            return false;
+        const sel = this.selectedSet();
+        const count = visible.filter((v) => sel.has(v)).length;
+        return count > 0 && count < visible.length;
+    }
+    toggleSelectAll(event) {
+        const checked = event.target.checked;
+        const sel = new Set(this.selectedSet());
+        const visible = this.visibleDistinctValues();
+        if (checked) {
+            visible.forEach((v) => sel.add(v));
+        }
+        else {
+            visible.forEach((v) => sel.delete(v));
+        }
+        this.selectedSet.set(sel);
+    }
+    isValSelected(val) {
+        return this.selectedSet().has(val);
+    }
+    toggleVal(val, event) {
+        const checked = event.target.checked;
+        const sel = new Set(this.selectedSet());
+        if (checked) {
+            sel.add(val);
+        }
+        else {
+            sel.delete(val);
+        }
+        this.selectedSet.set(sel);
+    }
+    onSearchEnter() {
+        const term = this.searchTerm().trim();
+        if (term) {
+            const visible = this.visibleDistinctValues();
+            this.selectedSet.set(new Set(visible));
+        }
+        this.applySetFilter();
+    }
+    // Apply Actions
+    applyFilter() {
+        if (this.filterMode() === 'set') {
+            this.applySetFilter();
+        }
+        else {
+            this.applyConditionFilter();
+        }
+    }
+    applySetFilter() {
+        const field = this.column().field;
+        const all = this.distinctValues();
+        let sel = Array.from(this.selectedSet());
+        // If search term is present and user hadn't changed individual checkboxes (still all selected),
+        // narrow selection to the visible search matches
+        const term = this.searchTerm().trim();
+        if (term && sel.length === all.length) {
+            sel = this.visibleDistinctValues();
+            this.selectedSet.set(new Set(sel));
+        }
+        // If all distinct values are selected and no search term, it's effectively no filter
+        if (sel.length === all.length && all.every((v) => this.selectedSet().has(v))) {
+            this.clearFilter();
+            return;
+        }
+        this.filterApplied.emit({
+            field,
+            mode: 'set',
+            selectedValues: sel,
+        });
+        this.closed.emit();
+    }
+    applyConditionFilter() {
+        const field = this.column().field;
+        const op = this.selectedOperator();
+        const val = this.filterVal().trim();
+        const val2 = this.filterVal2().trim();
+        if (op !== 'blank' && op !== 'notBlank' && val === '') {
+            this.clearFilter();
+            return;
+        }
+        this.filterApplied.emit({
+            field,
+            mode: 'condition',
+            operator: op,
+            value: val,
+            secondValue: op === 'between' ? val2 : undefined,
+        });
+        this.closed.emit();
+    }
+    clearFilter() {
+        this.filterCleared.emit();
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridFilterDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosGridFilterDialogComponent, isStandalone: true, selector: "talos-grid-filter-dialog", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, distinctValues: { classPropertyName: "distinctValues", publicName: "distinctValues", isSignal: true, isRequired: false, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterApplied: "filterApplied", filterCleared: "filterCleared", closed: "closed" }, host: { listeners: { "keydown.escape": "closed.emit()" }, properties: { "class.align-right": "align() === 'right'" } }, ngImport: i0, template: `
+    <div class="filter-dialog-container" (click)="$event.stopPropagation()">
+      @if (filterMode() === 'set') {
+        <!-- MODE A: Searchable Checkbox List (for text / select / status) -->
+        <div class="mode-a-wrapper">
+          <!-- Search input -->
+          <div class="search-input-wrapper">
+            <span class="search-icon">
+              <ng-container *ngComponentOutlet="searchIcon" />
+            </span>
+            <input
+              type="text"
+              class="filter-search-input"
+              placeholder="Search..."
+              [ngModel]="searchTerm()"
+              (ngModelChange)="searchTerm.set($event)"
+              (keydown.enter)="onSearchEnter()"
+              autofocus
+            />
+            @if (searchTerm()) {
+              <button type="button" class="clear-search-btn" (click)="searchTerm.set('')">
+                <ng-container *ngComponentOutlet="xIcon" />
+              </button>
+            }
+          </div>
+
+          <!-- Checkbox List -->
+          <div class="checkbox-list-wrapper">
+            <!-- (Select All) item -->
+            <label class="checkbox-item select-all-item">
+              <input
+                type="checkbox"
+                class="filter-checkbox"
+                [checked]="isAllSelected()"
+                [indeterminate]="isIndeterminate()"
+                (change)="toggleSelectAll($event)"
+              />
+              <span
+                class="checkbox-custom"
+                [class.is-checked]="isAllSelected()"
+                [class.is-indeterminate]="isIndeterminate()"
+              >
+                @if (isAllSelected()) {
+                  <ng-container *ngComponentOutlet="checkIcon" />
+                } @else if (isIndeterminate()) {
+                  <span class="indeterminate-bar"></span>
+                }
+              </span>
+              <span class="checkbox-label">
+                {{ searchTerm() ? '(Select All Matches)' : '(Select All)' }}
+              </span>
+            </label>
+
+            <!-- Distinct item checkboxes -->
+            @for (val of visibleDistinctValues(); track val) {
+              <label class="checkbox-item">
+                <input
+                  type="checkbox"
+                  class="filter-checkbox"
+                  [checked]="isValSelected(val)"
+                  (change)="toggleVal(val, $event)"
+                />
+                <span class="checkbox-custom" [class.is-checked]="isValSelected(val)">
+                  @if (isValSelected(val)) {
+                    <ng-container *ngComponentOutlet="checkIcon" />
+                  }
+                </span>
+                <span class="checkbox-label">{{ val || '(Blank)' }}</span>
+              </label>
+            }
+
+            @if (visibleDistinctValues().length === 0) {
+              <div class="no-matches-msg">No matching values</div>
+            }
+          </div>
+        </div>
+      } @else {
+        <!-- MODE B: Operator Dropdown & Filter Input (for numbers / dates) -->
+        <div class="mode-b-wrapper">
+          <!-- Operator Dropdown -->
+          <div class="operator-dropdown-wrapper">
+            <select
+              class="operator-select"
+              [ngModel]="selectedOperator()"
+              (ngModelChange)="selectedOperator.set($event)"
+            >
+              @for (op of operatorOptions(); track op.value) {
+                <option [value]="op.value">{{ op.label }}</option>
+              }
+            </select>
+            <span class="dropdown-arrow">
+              <ng-container *ngComponentOutlet="chevronDownIcon" />
+            </span>
+          </div>
+
+          <!-- Filter Value Input -->
+          @if (selectedOperator() !== 'blank' && selectedOperator() !== 'notBlank') {
+            @if (isDateField()) {
+              <div class="date-picker-wrapper" (keydown.enter)="applyConditionFilter()">
+                <talos-date-picker
+                  [ngModel]="filterVal()"
+                  (ngModelChange)="onDateFilterValChange($event)"
+                  size="sm"
+                  placeholder="Select date"
+                />
+              </div>
+            } @else {
+              <div class="search-input-wrapper">
+                <span class="search-icon">
+                  <ng-container *ngComponentOutlet="searchIcon" />
+                </span>
+                <input
+                  type="text"
+                  class="filter-search-input"
+                  placeholder="Filter..."
+                  [ngModel]="filterVal()"
+                  (ngModelChange)="filterVal.set($event)"
+                  (keydown.enter)="applyConditionFilter()"
+                  autofocus
+                />
+              </div>
+            }
+
+            <!-- Second input for Between -->
+            @if (selectedOperator() === 'between') {
+              @if (isDateField()) {
+                <div class="date-picker-wrapper" style="margin-top: 6px;" (keydown.enter)="applyConditionFilter()">
+                  <talos-date-picker
+                    [ngModel]="filterVal2()"
+                    (ngModelChange)="onDateFilterVal2Change($event)"
+                    size="sm"
+                    placeholder="And max date"
+                  />
+                </div>
+              } @else {
+                <div class="search-input-wrapper" style="margin-top: 6px;">
+                  <span class="search-icon">
+                    <ng-container *ngComponentOutlet="searchIcon" />
+                  </span>
+                  <input
+                    type="text"
+                    class="filter-search-input"
+                    placeholder="And max value..."
+                    [ngModel]="filterVal2()"
+                    (ngModelChange)="filterVal2.set($event)"
+                    (keydown.enter)="applyConditionFilter()"
+                  />
+                </div>
+              }
+            }
+          }
+        </div>
+      }
+
+      <!-- Dialog Footer -->
+      <div class="dialog-footer">
+        <button talosButton variant="ghost" size="sm" type="button" (click)="clearFilter()">
+          Clear
+        </button>
+        <button talosButton variant="primary" size="sm" type="button" (click)="applyFilter()">
+          Apply
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--talos-font-sans, system-ui, sans-serif);font-size:13px}.filter-dialog-container{background:var(--talos-dropdown-bg, var(--talos-bg-surface, #ffffff));color:var(--talos-text-primary, #0f172a);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-md, 8px);box-shadow:0 12px 28px -4px #00000040,0 4px 10px #0000001a;width:240px;padding:10px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.date-picker-wrapper{width:100%}.date-picker-wrapper talos-date-picker{display:block;width:100%}.search-input-wrapper{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:9px;width:14px;height:14px;opacity:.6;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--talos-text-muted, #94a3b8)}.search-icon ::ng-deep svg,.search-icon svg{width:13px;height:13px;display:block}.filter-search-input{width:100%;height:32px;padding:0 24px 0 28px;background:var(--talos-bg-subtle, #f8fafc);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-sm, 6px);color:var(--talos-text-primary, #0f172a);font-size:13px;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}.filter-search-input::placeholder{color:var(--talos-text-muted, #94a3b8)}.filter-search-input:focus{border-color:var(--talos-primary, #2563eb);box-shadow:0 0 0 2px #2563eb40}.clear-search-btn{position:absolute;right:6px;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer;padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.clear-search-btn ::ng-deep svg,.clear-search-btn svg{width:12px;height:12px;display:block}.clear-search-btn:hover{color:var(--talos-text-primary, #0f172a)}.checkbox-list-wrapper{margin-top:8px;max-height:175px;overflow-y:auto;overflow-x:hidden;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--talos-border-default, #cbd5e1) transparent}.checkbox-list-wrapper::-webkit-scrollbar{width:5px}.checkbox-list-wrapper::-webkit-scrollbar-thumb{background:var(--talos-border-default, #cbd5e1);border-radius:4px}.checkbox-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:4px;cursor:pointer;color:var(--talos-text-primary, #0f172a);transition:background-color .12s}.checkbox-item:hover{background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .05))}.checkbox-item.select-all-item{font-weight:500;border-bottom:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .08));margin-bottom:3px;padding-bottom:6px}.filter-checkbox{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-custom{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--talos-border-hover, #94a3b8);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s}.checkbox-custom ::ng-deep svg,.checkbox-custom svg{width:12px;height:12px;display:block}.checkbox-custom.is-checked,.checkbox-custom.is-indeterminate{background:var(--talos-primary, #2563eb);border-color:var(--talos-primary, #2563eb);color:#fff}.checkbox-custom .indeterminate-bar{width:8px;height:2px;background:#fff;border-radius:1px}.checkbox-label{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.no-matches-msg{padding:12px;text-align:center;color:var(--talos-text-muted, #94a3b8);font-size:12px}.operator-dropdown-wrapper{position:relative;margin-bottom:8px}.operator-select{width:100%;height:32px;padding:0 24px 0 10px;background:var(--talos-bg-subtle, #f8fafc);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-sm, 6px);color:var(--talos-text-primary, #0f172a);font-size:13px;outline:none;cursor:pointer;appearance:none;box-sizing:border-box}.operator-select:focus{border-color:var(--talos-primary, #2563eb);box-shadow:0 0 0 2px #2563eb40}.dropdown-arrow{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.6;width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #94a3b8)}.dropdown-arrow ::ng-deep svg,.dropdown-arrow svg{width:13px;height:13px;display:block}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .08))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: TalosButtonDirective$1, selector: "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", inputs: ["variant", "size", "iconOnly", "fullWidth", "pill", "loading", "disabled", "animation", "spinning", "popping", "feedback"] }, { kind: "component", type: DatePickerComponent$1, selector: "talos-date-picker", inputs: ["placeholder", "label", "floatingLabel", "floating", "required", "disabled", "clearable", "size", "displayFormat", "valueFormat", "showTime", "use24Hour", "showSeconds", "minuteStep", "minDate", "maxDate", "firstDayOfWeek", "filterDate"], outputs: ["dateChange", "opened", "closed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridFilterDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-grid-filter-dialog', imports: [FormsModule, NgComponentOutlet, TalosButtonDirective$1, DatePickerComponent$1], host: {
+                        '[class.align-right]': "align() === 'right'",
+                        '(keydown.escape)': 'closed.emit()',
+                    }, template: `
+    <div class="filter-dialog-container" (click)="$event.stopPropagation()">
+      @if (filterMode() === 'set') {
+        <!-- MODE A: Searchable Checkbox List (for text / select / status) -->
+        <div class="mode-a-wrapper">
+          <!-- Search input -->
+          <div class="search-input-wrapper">
+            <span class="search-icon">
+              <ng-container *ngComponentOutlet="searchIcon" />
+            </span>
+            <input
+              type="text"
+              class="filter-search-input"
+              placeholder="Search..."
+              [ngModel]="searchTerm()"
+              (ngModelChange)="searchTerm.set($event)"
+              (keydown.enter)="onSearchEnter()"
+              autofocus
+            />
+            @if (searchTerm()) {
+              <button type="button" class="clear-search-btn" (click)="searchTerm.set('')">
+                <ng-container *ngComponentOutlet="xIcon" />
+              </button>
+            }
+          </div>
+
+          <!-- Checkbox List -->
+          <div class="checkbox-list-wrapper">
+            <!-- (Select All) item -->
+            <label class="checkbox-item select-all-item">
+              <input
+                type="checkbox"
+                class="filter-checkbox"
+                [checked]="isAllSelected()"
+                [indeterminate]="isIndeterminate()"
+                (change)="toggleSelectAll($event)"
+              />
+              <span
+                class="checkbox-custom"
+                [class.is-checked]="isAllSelected()"
+                [class.is-indeterminate]="isIndeterminate()"
+              >
+                @if (isAllSelected()) {
+                  <ng-container *ngComponentOutlet="checkIcon" />
+                } @else if (isIndeterminate()) {
+                  <span class="indeterminate-bar"></span>
+                }
+              </span>
+              <span class="checkbox-label">
+                {{ searchTerm() ? '(Select All Matches)' : '(Select All)' }}
+              </span>
+            </label>
+
+            <!-- Distinct item checkboxes -->
+            @for (val of visibleDistinctValues(); track val) {
+              <label class="checkbox-item">
+                <input
+                  type="checkbox"
+                  class="filter-checkbox"
+                  [checked]="isValSelected(val)"
+                  (change)="toggleVal(val, $event)"
+                />
+                <span class="checkbox-custom" [class.is-checked]="isValSelected(val)">
+                  @if (isValSelected(val)) {
+                    <ng-container *ngComponentOutlet="checkIcon" />
+                  }
+                </span>
+                <span class="checkbox-label">{{ val || '(Blank)' }}</span>
+              </label>
+            }
+
+            @if (visibleDistinctValues().length === 0) {
+              <div class="no-matches-msg">No matching values</div>
+            }
+          </div>
+        </div>
+      } @else {
+        <!-- MODE B: Operator Dropdown & Filter Input (for numbers / dates) -->
+        <div class="mode-b-wrapper">
+          <!-- Operator Dropdown -->
+          <div class="operator-dropdown-wrapper">
+            <select
+              class="operator-select"
+              [ngModel]="selectedOperator()"
+              (ngModelChange)="selectedOperator.set($event)"
+            >
+              @for (op of operatorOptions(); track op.value) {
+                <option [value]="op.value">{{ op.label }}</option>
+              }
+            </select>
+            <span class="dropdown-arrow">
+              <ng-container *ngComponentOutlet="chevronDownIcon" />
+            </span>
+          </div>
+
+          <!-- Filter Value Input -->
+          @if (selectedOperator() !== 'blank' && selectedOperator() !== 'notBlank') {
+            @if (isDateField()) {
+              <div class="date-picker-wrapper" (keydown.enter)="applyConditionFilter()">
+                <talos-date-picker
+                  [ngModel]="filterVal()"
+                  (ngModelChange)="onDateFilterValChange($event)"
+                  size="sm"
+                  placeholder="Select date"
+                />
+              </div>
+            } @else {
+              <div class="search-input-wrapper">
+                <span class="search-icon">
+                  <ng-container *ngComponentOutlet="searchIcon" />
+                </span>
+                <input
+                  type="text"
+                  class="filter-search-input"
+                  placeholder="Filter..."
+                  [ngModel]="filterVal()"
+                  (ngModelChange)="filterVal.set($event)"
+                  (keydown.enter)="applyConditionFilter()"
+                  autofocus
+                />
+              </div>
+            }
+
+            <!-- Second input for Between -->
+            @if (selectedOperator() === 'between') {
+              @if (isDateField()) {
+                <div class="date-picker-wrapper" style="margin-top: 6px;" (keydown.enter)="applyConditionFilter()">
+                  <talos-date-picker
+                    [ngModel]="filterVal2()"
+                    (ngModelChange)="onDateFilterVal2Change($event)"
+                    size="sm"
+                    placeholder="And max date"
+                  />
+                </div>
+              } @else {
+                <div class="search-input-wrapper" style="margin-top: 6px;">
+                  <span class="search-icon">
+                    <ng-container *ngComponentOutlet="searchIcon" />
+                  </span>
+                  <input
+                    type="text"
+                    class="filter-search-input"
+                    placeholder="And max value..."
+                    [ngModel]="filterVal2()"
+                    (ngModelChange)="filterVal2.set($event)"
+                    (keydown.enter)="applyConditionFilter()"
+                  />
+                </div>
+              }
+            }
+          }
+        </div>
+      }
+
+      <!-- Dialog Footer -->
+      <div class="dialog-footer">
+        <button talosButton variant="ghost" size="sm" type="button" (click)="clearFilter()">
+          Clear
+        </button>
+        <button talosButton variant="primary" size="sm" type="button" (click)="applyFilter()">
+          Apply
+        </button>
+      </div>
+    </div>
+  `, styles: [":host{display:block;font-family:var(--talos-font-sans, system-ui, sans-serif);font-size:13px}.filter-dialog-container{background:var(--talos-dropdown-bg, var(--talos-bg-surface, #ffffff));color:var(--talos-text-primary, #0f172a);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-md, 8px);box-shadow:0 12px 28px -4px #00000040,0 4px 10px #0000001a;width:240px;padding:10px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.date-picker-wrapper{width:100%}.date-picker-wrapper talos-date-picker{display:block;width:100%}.search-input-wrapper{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:9px;width:14px;height:14px;opacity:.6;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--talos-text-muted, #94a3b8)}.search-icon ::ng-deep svg,.search-icon svg{width:13px;height:13px;display:block}.filter-search-input{width:100%;height:32px;padding:0 24px 0 28px;background:var(--talos-bg-subtle, #f8fafc);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-sm, 6px);color:var(--talos-text-primary, #0f172a);font-size:13px;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}.filter-search-input::placeholder{color:var(--talos-text-muted, #94a3b8)}.filter-search-input:focus{border-color:var(--talos-primary, #2563eb);box-shadow:0 0 0 2px #2563eb40}.clear-search-btn{position:absolute;right:6px;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer;padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.clear-search-btn ::ng-deep svg,.clear-search-btn svg{width:12px;height:12px;display:block}.clear-search-btn:hover{color:var(--talos-text-primary, #0f172a)}.checkbox-list-wrapper{margin-top:8px;max-height:175px;overflow-y:auto;overflow-x:hidden;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--talos-border-default, #cbd5e1) transparent}.checkbox-list-wrapper::-webkit-scrollbar{width:5px}.checkbox-list-wrapper::-webkit-scrollbar-thumb{background:var(--talos-border-default, #cbd5e1);border-radius:4px}.checkbox-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:4px;cursor:pointer;color:var(--talos-text-primary, #0f172a);transition:background-color .12s}.checkbox-item:hover{background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .05))}.checkbox-item.select-all-item{font-weight:500;border-bottom:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .08));margin-bottom:3px;padding-bottom:6px}.filter-checkbox{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-custom{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--talos-border-hover, #94a3b8);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s}.checkbox-custom ::ng-deep svg,.checkbox-custom svg{width:12px;height:12px;display:block}.checkbox-custom.is-checked,.checkbox-custom.is-indeterminate{background:var(--talos-primary, #2563eb);border-color:var(--talos-primary, #2563eb);color:#fff}.checkbox-custom .indeterminate-bar{width:8px;height:2px;background:#fff;border-radius:1px}.checkbox-label{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.no-matches-msg{padding:12px;text-align:center;color:var(--talos-text-muted, #94a3b8);font-size:12px}.operator-dropdown-wrapper{position:relative;margin-bottom:8px}.operator-select{width:100%;height:32px;padding:0 24px 0 10px;background:var(--talos-bg-subtle, #f8fafc);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-sm, 6px);color:var(--talos-text-primary, #0f172a);font-size:13px;outline:none;cursor:pointer;appearance:none;box-sizing:border-box}.operator-select:focus{border-color:var(--talos-primary, #2563eb);box-shadow:0 0 0 2px #2563eb40}.dropdown-arrow{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.6;width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #94a3b8)}.dropdown-arrow ::ng-deep svg,.dropdown-arrow svg{width:13px;height:13px;display:block}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .08))}\n"] }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], distinctValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "distinctValues", required: false }] }], currentFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFilter", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], filterApplied: [{ type: i0.Output, args: ["filterApplied"] }], filterCleared: [{ type: i0.Output, args: ["filterCleared"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class TalosGridCellFormatPipe {
+    fieldPartsCache = new Map();
+    transform(row, col) {
+        if (!row || !col)
+            return '';
+        const val = this.extractFieldValue(row, col.field);
+        if (col.formatter) {
+            return col.formatter(val, row);
+        }
+        if (val === null || val === undefined) {
+            return '';
+        }
+        if (col.type === 'date' && val instanceof Date) {
+            return val.toLocaleDateString();
+        }
+        return String(val);
+    }
+    extractFieldValue(item, field) {
+        if (!item || !field)
+            return undefined;
+        if (!field.includes('.')) {
+            return item[field];
+        }
+        let parts = this.fieldPartsCache.get(field);
+        if (!parts) {
+            parts = field.split('.');
+            this.fieldPartsCache.set(field, parts);
+        }
+        let cur = item;
+        for (let i = 0; i < parts.length; i++) {
+            if (cur == null)
+                return undefined;
+            cur = cur[parts[i]];
+        }
+        return cur;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridCellFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosGridCellFormatPipe, isStandalone: true, name: "talosGridCellFormat" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridCellFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'talosGridCellFormat',
+                    pure: true,
+                }]
+        }] });
+
+class TalosDataGridComponent {
+    // Inputs
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    density = input('comfortable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    filterable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
+    pagination = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+    pageSize = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = input([5, 10, 20, 50], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    pageIndex = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+    totalItems = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    trackBy = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    striped = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
+    bordered = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    hoverable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('No records to display', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    clientSort = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clientSort" }] : /* istanbul ignore next */ []));
+    clientPagination = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clientPagination" }] : /* istanbul ignore next */ []));
+    clientFilter = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clientFilter" }] : /* istanbul ignore next */ []));
+    resizable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+    rowKey = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
+    // Outputs
+    sortChange = output();
+    filterChange = output();
+    pageChange = output();
+    rowClick = output();
+    actionClick = output();
+    columnResize = output();
+    // Icons for template
+    arrowUpIcon = LucideArrowUp;
+    arrowDownIcon = LucideArrowDown;
+    arrowUpDownIcon = LucideArrowUpDown;
+    chevronLeftIcon = LucideChevronLeft;
+    chevronRightIcon = LucideChevronRight;
+    chevronsLeftIcon = LucideChevronsLeft;
+    chevronsRightIcon = LucideChevronsRight;
+    xIcon = LucideX;
+    inboxIcon = LucideInbox;
+    loaderIcon = LucideLoader2;
+    filterIcon = LucideFilter;
+    // Internal reactive states
+    internalSortState = signal({ field: '', direction: null }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalSortState" }] : /* istanbul ignore next */ []));
+    internalFilterStates = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalFilterStates" }] : /* istanbul ignore next */ []));
+    internalPageIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalPageIndex" }] : /* istanbul ignore next */ []));
+    internalPageSize = signal(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalPageSize" }] : /* istanbul ignore next */ []));
+    activeFilterCol = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeFilterCol" }] : /* istanbul ignore next */ []));
+    columnWidths = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
+    resizingColumn = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizingColumn" }] : /* istanbul ignore next */ []));
+    isResizing = computed(() => this.resizingColumn() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isResizing" }] : /* istanbul ignore next */ []));
+    hasResizableColumns = computed(() => {
+        return this.resizable() || this.columns().some((c) => c.resizable === true);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasResizableColumns" }] : /* istanbul ignore next */ []));
+    // CDK Connected Overlay Positions
+    overlayPositions = [
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: 6,
+        },
+        {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetY: 6,
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -6,
+        },
+        {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetY: -6,
+        },
+    ];
+    constructor() {
+        effect(() => {
+            this.internalPageIndex.set(this.pageIndex());
+        });
+        effect(() => {
+            this.internalPageSize.set(this.pageSize());
+        });
+    }
+    // Active filters list
+    activeFiltersList = computed(() => {
+        return Array.from(this.internalFilterStates().values());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeFiltersList" }] : /* istanbul ignore next */ []));
+    hasActiveFilters = computed(() => {
+        return this.internalFilterStates().size > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActiveFilters" }] : /* istanbul ignore next */ []));
+    // Cached distinct values for the currently active filter column
+    activeColumnDistinctValues = computed(() => {
+        const field = this.activeFilterCol();
+        if (!field)
+            return [];
+        const col = this.columns().find((c) => c.field === field);
+        if (!col)
+            return [];
+        return this.getDistinctValues(col);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeColumnDistinctValues" }] : /* istanbul ignore next */ []));
+    // Multi-Stage Processing Pipeline:
+    // Stage 1: Filtered Data
+    filteredData = computed(() => {
+        const raw = this.data() || [];
+        if (!this.clientFilter() || this.internalFilterStates().size === 0) {
+            return raw;
+        }
+        const filters = this.internalFilterStates();
+        const colsMap = new Map(this.columns().map((c) => [c.field, c]));
+        return raw.filter((item) => {
+            for (const [field, filter] of filters.entries()) {
+                const rawVal = this.extractFieldValue(item, field);
+                const col = colsMap.get(field);
+                if (!this.matchesFilter(rawVal, filter, col)) {
+                    return false;
+                }
+            }
+            return true;
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
+    // Stage 2: Sorted Data
+    sortedData = computed(() => {
+        const base = this.filteredData();
+        const sort = this.internalSortState();
+        if (!this.clientSort() || !sort.direction || !sort.field) {
+            return base;
+        }
+        const col = this.columns().find((c) => c.field === sort.field);
+        const sortType = sort.sortType || col?.sortType || this.inferSortType(col);
+        const dir = sort.direction === 'asc' ? 1 : -1;
+        // Schwartzian transform: Pre-extract and parse sort keys in an O(N) pass
+        // to eliminate reflection, string conversions, and Date parsing from the O(N log N) comparator
+        const mapped = base.map((item, index) => {
+            const raw = this.extractFieldValue(item, sort.field);
+            let sortKey = null;
+            if (raw !== null && raw !== undefined && raw !== '') {
+                switch (sortType) {
+                    case 'number': {
+                        const num = Number(raw);
+                        sortKey = isNaN(num) ? null : num;
+                        break;
+                    }
+                    case 'date': {
+                        const time = raw instanceof Date ? raw.getTime() : new Date(raw).getTime();
+                        sortKey = isNaN(time) ? null : time;
+                        break;
+                    }
+                    case 'string':
+                    default:
+                        sortKey = String(raw);
+                        break;
+                }
+            }
+            return { item, index, sortKey };
+        });
+        mapped.sort((a, b) => {
+            if (a.sortKey === b.sortKey)
+                return a.index - b.index;
+            if (a.sortKey === null)
+                return 1;
+            if (b.sortKey === null)
+                return -1;
+            if (sortType === 'number' || sortType === 'date') {
+                const diff = (a.sortKey - b.sortKey) * dir;
+                return diff !== 0 ? diff : a.index - b.index;
+            }
+            // string
+            const cmp = a.sortKey.localeCompare(b.sortKey, undefined, {
+                numeric: true,
+                sensitivity: 'base',
+            }) * dir;
+            return cmp !== 0 ? cmp : a.index - b.index;
+        });
+        return mapped.map((m) => m.item);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
+    // Stage 3: Paged Data
+    pagedData = computed(() => {
+        const sorted = this.sortedData();
+        if (!this.pagination() || !this.clientPagination()) {
+            return sorted;
+        }
+        const pageSize = this.internalPageSize();
+        const pageIndex = this.internalPageIndex();
+        const start = pageIndex * pageSize;
+        return sorted.slice(start, start + pageSize);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagedData" }] : /* istanbul ignore next */ []));
+    // Stage 4: Pagination Metrics
+    totalCount = computed(() => {
+        const externalTotal = this.totalItems();
+        if (externalTotal !== null && externalTotal !== undefined) {
+            return externalTotal;
+        }
+        return this.filteredData().length;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalCount" }] : /* istanbul ignore next */ []));
+    totalPages = computed(() => {
+        const count = this.totalCount();
+        const size = this.internalPageSize();
+        if (count <= 0 || size <= 0)
+            return 1;
+        return Math.ceil(count / size);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    startRecord = computed(() => {
+        const total = this.totalCount();
+        if (total === 0)
+            return 0;
+        return this.internalPageIndex() * this.internalPageSize() + 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startRecord" }] : /* istanbul ignore next */ []));
+    endRecord = computed(() => {
+        const total = this.totalCount();
+        if (total === 0)
+            return 0;
+        return Math.min(total, (this.internalPageIndex() + 1) * this.internalPageSize());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endRecord" }] : /* istanbul ignore next */ []));
+    get hasRowClickListeners() {
+        return true;
+    }
+    // Row Identification for TrackBy
+    trackByRow(index, row) {
+        const customTrack = this.trackBy();
+        if (customTrack) {
+            return customTrack(index, row);
+        }
+        const customKey = this.rowKey();
+        if (customKey && row && typeof row === 'object') {
+            return row[customKey];
+        }
+        if (row && typeof row === 'object') {
+            const anyRow = row;
+            return anyRow.id ?? anyRow._id ?? anyRow.uuid ?? anyRow.key ?? index;
+        }
+        return index;
+    }
+    // Header & Sorting helpers
+    isSortable(col) {
+        if (col.type === 'actions')
+            return false;
+        if (col.sortable !== undefined)
+            return col.sortable;
+        return !!col.sortType;
+    }
+    isSorted(col) {
+        return (this.internalSortState().field === col.field && this.internalSortState().direction !== null);
+    }
+    getSortDirection(col) {
+        if (this.internalSortState().field !== col.field) {
+            return null;
+        }
+        return this.internalSortState().direction;
+    }
+    getAriaSort(col) {
+        if (!this.isSortable(col))
+            return null;
+        const dir = this.getSortDirection(col);
+        if (dir === 'asc')
+            return 'ascending';
+        if (dir === 'desc')
+            return 'descending';
+        return 'none';
+    }
+    onHeaderClick(col) {
+        if (!this.isSortable(col))
+            return;
+        const current = this.internalSortState();
+        let nextDirection;
+        if (current.field !== col.field) {
+            nextDirection = 'asc';
+        }
+        else if (current.direction === 'asc') {
+            nextDirection = 'desc';
+        }
+        else if (current.direction === 'desc') {
+            nextDirection = null;
+        }
+        else {
+            nextDirection = 'asc';
+        }
+        const sortType = col.sortType || this.inferSortType(col);
+        const newState = {
+            field: nextDirection ? col.field : '',
+            direction: nextDirection,
+            sortType,
+        };
+        this.internalSortState.set(newState);
+        this.sortChange.emit(newState);
+    }
+    // Column Resizing Helpers & Handlers
+    isResizable(col) {
+        if (col.resizable !== undefined) {
+            return col.resizable;
+        }
+        if (col.type === 'actions') {
+            return false;
+        }
+        return this.resizable();
+    }
+    isColumnResizing(field) {
+        return this.resizingColumn() === field;
+    }
+    getColumnWidth(col) {
+        const dynamic = this.columnWidths()[col.field];
+        if (dynamic !== undefined) {
+            return `${dynamic}px`;
+        }
+        return col.width || col.minWidth;
+    }
+    setColumnWidth(field, width) {
+        this.columnWidths.update((prev) => ({
+            ...prev,
+            [field]: width,
+        }));
+    }
+    resetColumnWidths() {
+        this.columnWidths.set({});
+    }
+    onResizeStart(col, event, thEl) {
+        if (!this.isResizable(col))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const startX = 'touches' in event ? event.touches[0].clientX : event.clientX;
+        const startWidth = thEl.getBoundingClientRect().width;
+        const minW = col.minWidth ? parseInt(col.minWidth, 10) : 50;
+        const maxW = col.maxWidth ? parseInt(col.maxWidth, 10) : undefined;
+        this.resizingColumn.set(col.field);
+        if (typeof document !== 'undefined') {
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+        }
+        let lastWidth = startWidth;
+        const onMove = (moveEvent) => {
+            const currentX = 'touches' in moveEvent ? moveEvent.touches[0].clientX : moveEvent.clientX;
+            const deltaX = currentX - startX;
+            let newWidth = Math.round(startWidth + deltaX);
+            if (minW !== undefined && newWidth < minW)
+                newWidth = minW;
+            if (maxW !== undefined && newWidth > maxW)
+                newWidth = maxW;
+            lastWidth = newWidth;
+            this.columnWidths.update((prev) => ({
+                ...prev,
+                [col.field]: newWidth,
+            }));
+        };
+        const onEnd = () => {
+            if (typeof document !== 'undefined') {
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onEnd);
+                document.removeEventListener('touchmove', onMove);
+                document.removeEventListener('touchend', onEnd);
+                document.body.style.cursor = '';
+                document.body.style.userSelect = '';
+            }
+            this.resizingColumn.set(null);
+            this.columnResize.emit({ column: col, width: lastWidth });
+        };
+        if (typeof document !== 'undefined') {
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onEnd);
+            document.addEventListener('touchmove', onMove, { passive: true });
+            document.addEventListener('touchend', onEnd);
+        }
+    }
+    onResizeDoubleClick(col, event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.columnWidths.update((prev) => {
+            const next = { ...prev };
+            delete next[col.field];
+            return next;
+        });
+        if (col.width) {
+            const parsed = parseInt(col.width, 10);
+            if (!isNaN(parsed)) {
+                this.columnResize.emit({ column: col, width: parsed });
+            }
+        }
+    }
+    onResizeKeydown(col, event, thEl) {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            event.preventDefault();
+            event.stopPropagation();
+            const currentWidth = this.columnWidths()[col.field] ?? thEl.getBoundingClientRect().width;
+            const step = event.key === 'ArrowRight' ? 10 : -10;
+            const minW = col.minWidth ? parseInt(col.minWidth, 10) : 50;
+            const maxW = col.maxWidth ? parseInt(col.maxWidth, 10) : undefined;
+            let newWidth = Math.round(currentWidth + step);
+            if (minW !== undefined && newWidth < minW)
+                newWidth = minW;
+            if (maxW !== undefined && newWidth > maxW)
+                newWidth = maxW;
+            this.columnWidths.update((prev) => ({
+                ...prev,
+                [col.field]: newWidth,
+            }));
+            this.columnResize.emit({ column: col, width: newWidth });
+        }
+    }
+    // Filter Helpers & Dialog Management
+    isFilterable(col) {
+        if (col.type === 'actions')
+            return false;
+        if (col.filterable !== undefined)
+            return col.filterable;
+        return this.filterable();
+    }
+    isFilterDialogOpen(field) {
+        return this.activeFilterCol() === field;
+    }
+    toggleFilterDialog(field, event) {
+        event.stopPropagation();
+        if (this.activeFilterCol() === field) {
+            this.activeFilterCol.set(null);
+        }
+        else {
+            this.activeFilterCol.set(field);
+        }
+    }
+    closeFilterDialog() {
+        this.activeFilterCol.set(null);
+    }
+    onOverlayOutsideClick(event, field) {
+        const target = event.target;
+        if (target &&
+            (target.closest(`.filter-anchor-${field}`) ||
+                target.closest('.datepicker-dropdown-panel') ||
+                target.closest('.talos-datepicker-host'))) {
+            return;
+        }
+        this.closeFilterDialog();
+    }
+    getDistinctValues(col) {
+        const raw = this.data() || [];
+        const valuesSet = new Set();
+        for (const item of raw) {
+            const val = this.extractFieldValue(item, col.field);
+            if (val === null || val === undefined) {
+                valuesSet.add('');
+            }
+            else {
+                valuesSet.add(String(val));
+            }
+        }
+        return Array.from(valuesSet).sort((a, b) => {
+            if (a === '')
+                return 1;
+            if (b === '')
+                return -1;
+            return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+        });
+    }
+    getFilter(field) {
+        return this.internalFilterStates().get(field);
+    }
+    hasFilter(field) {
+        return this.internalFilterStates().has(field);
+    }
+    onFilterApplied(filter) {
+        const map = new Map(this.internalFilterStates());
+        map.set(filter.field, filter);
+        this.internalFilterStates.set(map);
+        this.internalPageIndex.set(0);
+        this.filterChange.emit(this.activeFiltersList());
+    }
+    onFilterCleared(field) {
+        const map = new Map(this.internalFilterStates());
+        map.delete(field);
+        this.internalFilterStates.set(map);
+        this.internalPageIndex.set(0);
+        this.filterChange.emit(this.activeFiltersList());
+    }
+    clearAllFilters() {
+        this.internalFilterStates.set(new Map());
+        this.internalPageIndex.set(0);
+        this.filterChange.emit([]);
+    }
+    // Filter Matching Evaluator
+    matchesFilter(rawValue, filter, col) {
+        // Mode A: Set Filter (text / select / status)
+        if (filter.mode === 'set') {
+            if (!filter.selectedValues)
+                return true;
+            const strVal = rawValue === null || rawValue === undefined ? '' : String(rawValue);
+            return filter.selectedValues.includes(strVal);
+        }
+        // Mode B: Condition Filter (numbers / dates / text)
+        const op = filter.operator || 'eq';
+        if (op === 'blank') {
+            return rawValue === null || rawValue === undefined || rawValue === '';
+        }
+        if (op === 'notBlank') {
+            return rawValue !== null && rawValue !== undefined && rawValue !== '';
+        }
+        if (rawValue === null || rawValue === undefined || rawValue === '') {
+            return false;
+        }
+        const filterVal = filter.value;
+        const secondVal = filter.secondValue;
+        // Check if comparing dates
+        const isDate = col?.type === 'date' ||
+            col?.sortType === 'date' ||
+            filterVal instanceof Date ||
+            (typeof filterVal === 'string' && /^\d{4}-\d{2}-\d{2}/.test(filterVal)) ||
+            rawValue instanceof Date;
+        if (isDate) {
+            const rowDate = this.normalizeDateToYMD(rawValue);
+            const targetDate = this.normalizeDateToYMD(filterVal);
+            const targetDate2 = secondVal ? this.normalizeDateToYMD(secondVal) : '';
+            switch (op) {
+                case 'eq':
+                    return rowDate === targetDate;
+                case 'neq':
+                    return rowDate !== targetDate;
+                case 'gt':
+                    return rowDate > targetDate;
+                case 'gte':
+                    return rowDate >= targetDate;
+                case 'lt':
+                    return rowDate < targetDate;
+                case 'lte':
+                    return rowDate <= targetDate;
+                case 'between': {
+                    if (!targetDate2)
+                        return rowDate >= targetDate;
+                    const minD = targetDate <= targetDate2 ? targetDate : targetDate2;
+                    const maxD = targetDate <= targetDate2 ? targetDate2 : targetDate;
+                    return rowDate >= minD && rowDate <= maxD;
+                }
+                default:
+                    return true;
+            }
+        }
+        // Check if comparing numbers
+        const isNumber = col?.type === 'number' || col?.sortType === 'number';
+        const hasFilterNum = filterVal !== '' &&
+            filterVal !== null &&
+            filterVal !== undefined &&
+            !isNaN(Number(filterVal));
+        const numRaw = Number(rawValue);
+        if ((isNumber || hasFilterNum) && !isNaN(numRaw)) {
+            const numFilter = Number(filterVal);
+            const numFilter2 = secondVal !== '' && secondVal !== null && secondVal !== undefined ? Number(secondVal) : NaN;
+            switch (op) {
+                case 'eq':
+                    return numRaw === numFilter;
+                case 'neq':
+                    return numRaw !== numFilter;
+                case 'gt':
+                    return numRaw > numFilter;
+                case 'gte':
+                    return numRaw >= numFilter;
+                case 'lt':
+                    return numRaw < numFilter;
+                case 'lte':
+                    return numRaw <= numFilter;
+                case 'between': {
+                    if (isNaN(numFilter2))
+                        return numRaw >= numFilter;
+                    const minN = Math.min(numFilter, numFilter2);
+                    const maxN = Math.max(numFilter, numFilter2);
+                    return numRaw >= minN && numRaw <= maxN;
+                }
+                default:
+                    return true;
+            }
+        }
+        // String / Text comparison
+        const strRaw = String(rawValue).toLowerCase().trim();
+        const strFilter = String(filterVal ?? '')
+            .toLowerCase()
+            .trim();
+        switch (op) {
+            case 'eq':
+                return strRaw === strFilter;
+            case 'neq':
+                return strRaw !== strFilter;
+            case 'startsWith':
+                return strRaw.startsWith(strFilter);
+            case 'endsWith':
+                return strRaw.endsWith(strFilter);
+            case 'contains':
+            default:
+                return strRaw.includes(strFilter);
+        }
+    }
+    normalizeDateToYMD(val) {
+        if (!val)
+            return '';
+        if (typeof val === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(val)) {
+            return val;
+        }
+        const d = new Date(val);
+        if (isNaN(d.getTime()))
+            return '';
+        const y = d.getFullYear();
+        const m = String(d.getMonth() + 1).padStart(2, '0');
+        const day = String(d.getDate()).padStart(2, '0');
+        return `${y}-${m}-${day}`;
+    }
+    // Pagination Handlers
+    setPage(pageIndex) {
+        const validPage = Math.max(0, Math.min(pageIndex, this.totalPages() - 1));
+        if (validPage !== this.internalPageIndex()) {
+            this.internalPageIndex.set(validPage);
+            this.pageChange.emit({
+                pageIndex: validPage,
+                pageSize: this.internalPageSize(),
+                totalItems: this.totalCount(),
+            });
+        }
+    }
+    onPageSizeChange(event) {
+        const target = event.target;
+        const newSize = Number(target.value);
+        this.internalPageSize.set(newSize);
+        this.internalPageIndex.set(0);
+        this.pageChange.emit({
+            pageIndex: 0,
+            pageSize: newSize,
+            totalItems: this.totalCount(),
+        });
+    }
+    // Cell Content & Row Click Helpers
+    getCellValue(row, col) {
+        return this.extractFieldValue(row, col.field);
+    }
+    formatCellValue(row, col) {
+        const val = this.getCellValue(row, col);
+        if (col.formatter) {
+            return col.formatter(val, row);
+        }
+        if (val === null || val === undefined) {
+            return '';
+        }
+        if (col.type === 'date' && val instanceof Date) {
+            return val.toLocaleDateString();
+        }
+        return String(val);
+    }
+    onRowClick(row, index) {
+        this.rowClick.emit({ row, index });
+    }
+    fieldPartsCache = new Map();
+    extractFieldValue(item, field) {
+        if (!item || !field)
+            return undefined;
+        if (!field.includes('.')) {
+            return item[field];
+        }
+        let parts = this.fieldPartsCache.get(field);
+        if (!parts) {
+            parts = field.split('.');
+            this.fieldPartsCache.set(field, parts);
+        }
+        let cur = item;
+        for (let i = 0; i < parts.length; i++) {
+            if (cur == null)
+                return undefined;
+            cur = cur[parts[i]];
+        }
+        return cur;
+    }
+    inferSortType(col) {
+        if (!col)
+            return 'string';
+        if (col.type === 'number')
+            return 'number';
+        if (col.type === 'date')
+            return 'date';
+        return 'string';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosDataGridComponent, isStandalone: true, selector: "talos-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, clientSort: { classPropertyName: "clientSort", publicName: "clientSort", isSignal: true, isRequired: false, transformFunction: null }, clientPagination: { classPropertyName: "clientPagination", publicName: "clientPagination", isSignal: true, isRequired: false, transformFunction: null }, clientFilter: { classPropertyName: "clientFilter", publicName: "clientFilter", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", filterChange: "filterChange", pageChange: "pageChange", rowClick: "rowClick", actionClick: "actionClick", columnResize: "columnResize" }, host: { classAttribute: "talos-data-grid-host" }, ngImport: i0, template: "<div\n  class=\"talos-data-grid-container\"\n  [class.density-compact]=\"density() === 'compact'\"\n  [class.density-comfortable]=\"density() === 'comfortable'\"\n  [class.density-spacious]=\"density() === 'spacious'\"\n  [class.is-bordered]=\"bordered()\"\n  [class.is-striped]=\"striped()\"\n  [class.is-resizing]=\"isResizing()\"\n>\n  <!-- Loading overlay -->\n  @if (loading()) {\n    <div class=\"talos-data-grid-loading-overlay\">\n      <ng-container *ngComponentOutlet=\"loaderIcon\" />\n    </div>\n  }\n\n  <!-- Main Scrollable Table Wrapper -->\n  <div class=\"talos-data-grid-table-wrapper\">\n    <table class=\"talos-data-grid-table\" [class.has-resizable-columns]=\"hasResizableColumns()\" role=\"grid\">\n      <thead>\n        <!-- Header Column Row -->\n        <tr>\n          @for (col of columns(); track col.field) {\n            <th\n              #thEl\n              [style.width]=\"getColumnWidth(col)\"\n              [style.min-width]=\"col.minWidth\"\n              [style.max-width]=\"col.maxWidth\"\n              [class.align-left]=\"!col.align || col.align === 'left'\"\n              [class.align-center]=\"col.align === 'center'\"\n              [class.align-right]=\"col.align === 'right'\"\n              [class.is-sortable]=\"isSortable(col)\"\n              [class.is-sorted]=\"isSorted(col)\"\n              [class.is-resizable]=\"isResizable(col)\"\n              [class.is-resizing]=\"isColumnResizing(col.field)\"\n              (click)=\"onHeaderClick(col)\"\n              role=\"columnheader\"\n              [attr.aria-sort]=\"getAriaSort(col)\"\n            >\n              <div class=\"header-content-wrapper\">\n                <span class=\"header-title\" [title]=\"col.header\">{{ col.header }}</span>\n                @if (isSortable(col) || isFilterable(col)) {\n                  <div class=\"header-tools\">\n                    @if (isSortable(col)) {\n                      <button\n                        talosButton\n                        variant=\"ghost\"\n                        size=\"xs\"\n                        [iconOnly]=\"true\"\n                        type=\"button\"\n                        class=\"header-sort-btn\"\n                        [class.is-sorted]=\"isSorted(col)\"\n                        (click)=\"$event.stopPropagation(); onHeaderClick(col)\"\n                        [attr.aria-label]=\"'Sort by ' + col.header\"\n                        [title]=\"'Sort by ' + col.header\"\n                      >\n                        @if (getSortDirection(col) === 'asc') {\n                          <ng-container *ngComponentOutlet=\"arrowUpIcon\" />\n                        } @else if (getSortDirection(col) === 'desc') {\n                          <ng-container *ngComponentOutlet=\"arrowDownIcon\" />\n                        } @else {\n                          <ng-container *ngComponentOutlet=\"arrowUpDownIcon\" />\n                        }\n                      </button>\n                    }\n                    @if (isFilterable(col)) {\n                      <div\n                        class=\"talos-grid-filter-anchor\"\n                        [class]=\"'filter-anchor-' + col.field\"\n                        cdkOverlayOrigin\n                        #filterOrigin=\"cdkOverlayOrigin\"\n                        (click)=\"$event.stopPropagation()\"\n                      >\n                        <button\n                          talosButton\n                          variant=\"ghost\"\n                          size=\"xs\"\n                          [iconOnly]=\"true\"\n                          type=\"button\"\n                          class=\"header-filter-btn\"\n                          [class.is-active]=\"hasFilter(col.field)\"\n                          [class.is-open]=\"isFilterDialogOpen(col.field)\"\n                          (click)=\"toggleFilterDialog(col.field, $event)\"\n                          [attr.aria-label]=\"'Filter ' + col.header\"\n                          title=\"Filter\"\n                        >\n                          <ng-container *ngComponentOutlet=\"filterIcon\" />\n                        </button>\n\n                        <ng-template\n                          cdkConnectedOverlay\n                          [cdkConnectedOverlayOrigin]=\"filterOrigin\"\n                          [cdkConnectedOverlayOpen]=\"isFilterDialogOpen(col.field)\"\n                          [cdkConnectedOverlayPositions]=\"overlayPositions\"\n                          [cdkConnectedOverlayPush]=\"true\"\n                          (overlayOutsideClick)=\"onOverlayOutsideClick($event, col.field)\"\n                        >\n                          <talos-grid-filter-dialog\n                            [column]=\"col\"\n                            [distinctValues]=\"activeColumnDistinctValues()\"\n                            [currentFilter]=\"getFilter(col.field)\"\n                            [align]=\"col.align === 'right' ? 'right' : 'left'\"\n                            (filterApplied)=\"onFilterApplied($event)\"\n                            (filterCleared)=\"onFilterCleared(col.field)\"\n                            (closed)=\"closeFilterDialog()\"\n                          />\n                        </ng-template>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n              @if (isResizable(col)) {\n                <div\n                  class=\"talos-grid-resize-handle\"\n                  [class.is-resizing]=\"isColumnResizing(col.field)\"\n                  (mousedown)=\"onResizeStart(col, $event, thEl)\"\n                  (touchstart)=\"onResizeStart(col, $event, thEl)\"\n                  (dblclick)=\"onResizeDoubleClick(col, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  role=\"separator\"\n                  aria-orientation=\"vertical\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"'Resize ' + col.header + ' column'\"\n                  (keydown)=\"onResizeKeydown(col, $event, thEl)\"\n                ></div>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body with TrackBy for Optimal Refresh Performance -->\n      <tbody>\n        @for (row of pagedData(); track trackByRow($index, row)) {\n          <tr\n            [class.is-hoverable]=\"hoverable()\"\n            [class.is-clickable]=\"hasRowClickListeners\"\n            (click)=\"onRowClick(row, $index)\"\n            role=\"row\"\n          >\n            @for (col of columns(); track col.field) {\n              <td\n                [class.align-left]=\"!col.align || col.align === 'left'\"\n                [class.align-center]=\"col.align === 'center'\"\n                [class.align-right]=\"col.align === 'right'\"\n                role=\"gridcell\"\n              >\n                @if (col.cellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      col.cellTemplate;\n                      context: {\n                        $implicit: getCellValue(row, col),\n                        row: row,\n                        index: $index,\n                        column: col,\n                      }\n                    \"\n                  />\n                } @else if (col.type === 'status') {\n                  <talos-grid-status-cell\n                    [row]=\"row\"\n                    [column]=\"col\"\n                    [rawValue]=\"getCellValue(row, col)\"\n                  />\n                } @else if (col.type === 'actions' && col.actionsConfig) {\n                  <talos-grid-actions-cell\n                    [row]=\"row\"\n                    [rowIndex]=\"$index\"\n                    [actions]=\"col.actionsConfig\"\n                    (actionClick)=\"actionClick.emit($event)\"\n                  />\n                } @else {\n                  {{ row | talosGridCellFormat: col }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n\n    <!-- Empty State -->\n    @if (pagedData().length === 0) {\n      <div class=\"talos-data-grid-empty\">\n        <div class=\"empty-icon\">\n          <ng-container *ngComponentOutlet=\"inboxIcon\" />\n        </div>\n        <div class=\"empty-text\">\n          @if (hasActiveFilters()) {\n            <span>No results matching the active filters.</span>\n          } @else {\n            <span>{{ emptyMessage() }}</span>\n          }\n        </div>\n        @if (hasActiveFilters()) {\n          <button talosButton variant=\"outline\" size=\"sm\" (click)=\"clearAllFilters()\">\n            Clear Filters\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Pagination Bar -->\n  @if (pagination()) {\n    <div class=\"talos-data-grid-pagination\">\n      <div class=\"pagination-left\">\n        <span class=\"pagination-info\">\n          Showing {{ startRecord() }} to {{ endRecord() }} of {{ totalCount() }} entries\n        </span>\n\n        @if (pageSizeOptions().length > 1) {\n          <div class=\"pagination-size-selector\">\n            <span>Rows per page:</span>\n            <select\n              [value]=\"internalPageSize()\"\n              (change)=\"onPageSizeChange($event)\"\n              aria-label=\"Select page size\"\n            >\n              @for (size of pageSizeOptions(); track size) {\n                <option [value]=\"size\">{{ size }}</option>\n              }\n            </select>\n          </div>\n        }\n      </div>\n\n      <div class=\"pagination-right\">\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() <= 0\"\n          (click)=\"setPage(0)\"\n          title=\"First page\"\n          aria-label=\"First page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronsLeftIcon\" />\n        </button>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() <= 0\"\n          (click)=\"setPage(internalPageIndex() - 1)\"\n          title=\"Previous page\"\n          aria-label=\"Previous page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronLeftIcon\" />\n        </button>\n\n        <span class=\"page-indicator\">\n          Page {{ internalPageIndex() + 1 }} of {{ totalPages() }}\n        </span>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() >= totalPages() - 1\"\n          (click)=\"setPage(internalPageIndex() + 1)\"\n          title=\"Next page\"\n          aria-label=\"Next page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronRightIcon\" />\n        </button>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() >= totalPages() - 1\"\n          (click)=\"setPage(totalPages() - 1)\"\n          title=\"Last page\"\n          aria-label=\"Last page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronsRightIcon\" />\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--talos-font-sans, system-ui, -apple-system, sans-serif);color:var(--talos-text-primary, #0f172a)}.talos-data-grid-container{display:flex;flex-direction:column;background-color:var(--talos-bg-surface, #ffffff);border-radius:var(--talos-radius-lg, 8px);position:relative;width:100%;overflow:hidden}.talos-data-grid-container.is-bordered{border:1px solid var(--talos-border-default, #cbd5e1)}.talos-data-grid-container.is-resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.talos-data-grid-container.is-resizing *{-webkit-user-select:none!important;user-select:none!important;cursor:col-resize!important}.talos-data-grid-table-wrapper{width:100%;overflow-x:auto;overflow-y:visible;position:relative;scrollbar-width:thin;scrollbar-color:var(--talos-border-default, #cbd5e1) transparent}.talos-data-grid-table-wrapper::-webkit-scrollbar{height:6px;width:6px}.talos-data-grid-table-wrapper::-webkit-scrollbar-thumb{background:var(--talos-border-default, #cbd5e1);border-radius:4px}.talos-data-grid-table{width:100%;min-width:100%;border-collapse:collapse;text-align:left;font-size:var(--talos-font-size-sm, 13px);line-height:var(--talos-line-height-normal, 1.5)}.talos-data-grid-table.has-resizable-columns{table-layout:fixed;width:max-content;min-width:100%}.talos-data-grid-container.density-compact{--grid-header-padding-y: 6px;--grid-header-padding-x: 10px;--grid-cell-padding-y: 5px;--grid-cell-padding-x: 10px;--grid-font-size: 12px;--grid-header-font-size: 11px;--grid-filter-height: 24px}.talos-data-grid-container.density-comfortable{--grid-header-padding-y: 10px;--grid-header-padding-x: 14px;--grid-cell-padding-y: 9px;--grid-cell-padding-x: 14px;--grid-font-size: 13.5px;--grid-header-font-size: 12px;--grid-filter-height: 28px}.talos-data-grid-container.density-spacious{--grid-header-padding-y: 14px;--grid-header-padding-x: 18px;--grid-cell-padding-y: 14px;--grid-cell-padding-x: 18px;--grid-font-size: 14.5px;--grid-header-font-size: 13px;--grid-filter-height: 32px}.talos-data-grid-table thead th{position:relative;background-color:var(--talos-bg-subtle, #f8fafc);color:var(--talos-text-secondary, #475569);font-size:var(--grid-header-font-size, 12px);font-weight:var(--talos-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;padding:var(--grid-header-padding-y) 8px var(--grid-header-padding-y) var(--grid-header-padding-x);border-bottom:1px solid var(--talos-border-default, #cbd5e1);white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle;overflow:hidden}.talos-data-grid-table thead th.is-sortable{cursor:pointer;transition:background-color var(--talos-transition, .15s ease)}.talos-data-grid-table thead th.is-sortable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f1f5f9);color:var(--talos-text-primary, #0f172a)}.talos-data-grid-table thead th.is-sorted{color:var(--talos-primary, #2563eb);background-color:var(--talos-primary-subtle-bg, #eff6ff)}.talos-data-grid-table thead th.is-resizable{padding-right:10px}.talos-data-grid-table thead th.is-resizing{background-color:var(--talos-neutral-subtle-bg-hover, #f1f5f9)}.header-content-wrapper{display:flex;align-items:center;gap:4px;width:100%;min-width:0;overflow:hidden}.header-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-tools{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sort-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;opacity:.45;transition:opacity var(--talos-transition, .15s ease),transform .15s ease}.sort-icon-wrapper ::ng-deep svg,.sort-icon-wrapper ::ng-deep .lucide,.sort-icon-wrapper svg,.sort-icon-wrapper .lucide{width:13px!important;height:13px!important;display:block}.is-sortable:hover .sort-icon-wrapper{opacity:.85}.is-sorted .sort-icon-wrapper{opacity:1;color:var(--talos-primary, #2563eb)}.header-sort-btn{width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;border-radius:var(--talos-radius-sm, 4px)!important;border:1px solid transparent!important;background:transparent!important;color:var(--talos-text-muted, #94a3b8)!important;cursor:pointer;opacity:.45;transition:all var(--talos-transition, .15s ease);box-shadow:none!important}.header-sort-btn ::ng-deep svg,.header-sort-btn ::ng-deep .lucide,.header-sort-btn svg,.header-sort-btn .lucide{width:13px!important;height:13px!important;display:block;flex-shrink:0}th:hover .header-sort-btn{opacity:.85}.header-sort-btn:hover{opacity:1;color:var(--talos-text-primary, #0f172a)!important;background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .06))!important}.header-sort-btn.is-sorted{opacity:1;color:var(--talos-primary, #2563eb)!important;background:var(--talos-primary-subtle-bg, #eff6ff)!important}.align-left{text-align:left}.align-left .header-content-wrapper{justify-content:flex-start}.align-center{text-align:center}.align-center .header-content-wrapper{justify-content:center}.align-right{text-align:right}.align-right .header-content-wrapper{justify-content:flex-end}.talos-grid-resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:2;display:flex;align-items:center;justify-content:center}.talos-grid-resize-handle:after{content:\"\";display:block;width:2px;height:50%;border-radius:1px;background-color:transparent;transition:background-color var(--talos-transition, .15s ease),height var(--talos-transition, .15s ease)}.talos-grid-resize-handle:hover:after,.talos-grid-resize-handle:focus-visible:after,.talos-grid-resize-handle.is-resizing:after{background-color:var(--talos-primary, #2563eb);height:100%}.talos-grid-resize-handle:focus-visible{outline:none}.talos-grid-filter-anchor{position:relative;display:inline-flex;align-items:center}.header-filter-btn{display:inline-flex;align-items:center;justify-content:center;width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;border-radius:var(--talos-radius-sm, 4px)!important;border:1px solid transparent!important;background:transparent!important;color:var(--talos-text-muted, #94a3b8)!important;cursor:pointer;opacity:.5;transition:all var(--talos-transition, .15s ease);box-shadow:none!important}.header-filter-btn ::ng-deep svg,.header-filter-btn ::ng-deep .lucide,.header-filter-btn svg,.header-filter-btn .lucide{width:13px!important;height:13px!important;display:block;flex-shrink:0}th:hover .header-filter-btn{opacity:.85}.header-filter-btn:hover,.header-filter-btn.is-open{opacity:1;color:var(--talos-text-primary, #0f172a)!important;background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .06))!important}.header-filter-btn.is-active{opacity:1;color:#fff!important;background:var(--talos-primary, #2563eb)!important;border-color:var(--talos-primary, #2563eb)!important}.talos-data-grid-table tbody tr{border-bottom:1px solid var(--talos-border-subtle, #f1f5f9);transition:background-color var(--talos-transition, .12s ease)}.talos-data-grid-table tbody tr.is-hoverable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f8fafc)}.talos-data-grid-table tbody tr.is-clickable{cursor:pointer}.talos-data-grid-container.is-striped .talos-data-grid-table tbody tr:nth-child(2n){background-color:var(--talos-bg-subtle, #fcfdfe)}.talos-data-grid-container.is-striped .talos-data-grid-table tbody tr:nth-child(2n).is-hoverable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f8fafc)}.talos-data-grid-table tbody td{padding:var(--grid-cell-padding-y) var(--grid-cell-padding-x);font-size:var(--grid-font-size, 13.5px);color:var(--talos-text-primary, #0f172a);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.talos-data-grid-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--talos-text-muted, #64748b);text-align:center;gap:12px}.talos-data-grid-empty .empty-icon{opacity:.5;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.talos-data-grid-empty .empty-icon ::ng-deep svg,.talos-data-grid-empty .empty-icon ::ng-deep .lucide,.talos-data-grid-empty .empty-icon svg,.talos-data-grid-empty .empty-icon .lucide{width:36px;height:36px}.talos-data-grid-empty .empty-text{font-size:var(--talos-font-size-base, 14px);font-weight:var(--talos-font-weight-medium, 500)}.talos-data-grid-pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--talos-border-default, #cbd5e1);background-color:var(--talos-bg-surface, #ffffff);gap:12px;flex-wrap:wrap}.pagination-left{display:flex;align-items:center;gap:12px}.pagination-info{font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-muted, #64748b)}.pagination-size-selector{display:flex;align-items:center;gap:6px;font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-secondary, #334155)}.pagination-size-selector select{height:28px;padding:0 8px;font-size:var(--talos-font-size-sm, 13px);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-sm, 4px);background-color:var(--talos-bg-surface, #ffffff);color:var(--talos-text-primary, #0f172a);cursor:pointer;outline:none}.pagination-size-selector select:focus{border-color:var(--talos-border-focus, #2563eb)}.pagination-right{display:flex;align-items:center;gap:4px}.pagination-right ::ng-deep button.talos-btn svg,.pagination-right ::ng-deep button.talos-btn .lucide{width:14px;height:14px}.page-indicator{font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-secondary, #334155);font-weight:var(--talos-font-weight-medium, 500);padding:0 8px}.talos-data-grid-loading-overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}.talos-data-grid-loading-overlay ::ng-deep svg,.talos-data-grid-loading-overlay ::ng-deep .lucide,.talos-data-grid-loading-overlay svg,.talos-data-grid-loading-overlay .lucide{width:24px;height:24px;animation:talos-grid-spin .8s linear infinite}@keyframes talos-grid-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\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: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: TalosButtonDirective$1, selector: "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", inputs: ["variant", "size", "iconOnly", "fullWidth", "pill", "loading", "disabled", "animation", "spinning", "popping", "feedback"] }, { kind: "component", type: TalosGridStatusCellComponent, selector: "talos-grid-status-cell", inputs: ["row", "column", "rawValue"] }, { kind: "component", type: TalosGridActionsCellComponent, selector: "talos-grid-actions-cell", inputs: ["row", "rowIndex", "actions"], outputs: ["actionClick"] }, { kind: "component", type: TalosGridFilterDialogComponent, selector: "talos-grid-filter-dialog", inputs: ["column", "distinctValues", "currentFilter", "align"], outputs: ["filterApplied", "filterCleared", "closed"] }, { kind: "pipe", type: TalosGridCellFormatPipe, name: "talosGridCellFormat" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-data-grid', imports: [
+                        NgComponentOutlet,
+                        NgTemplateOutlet,
+                        OverlayModule,
+                        CdkConnectedOverlay,
+                        CdkOverlayOrigin,
+                        TalosButtonDirective$1,
+                        TalosGridStatusCellComponent,
+                        TalosGridActionsCellComponent,
+                        TalosGridFilterDialogComponent,
+                        TalosGridCellFormatPipe,
+                    ], host: {
+                        class: 'talos-data-grid-host',
+                    }, template: "<div\n  class=\"talos-data-grid-container\"\n  [class.density-compact]=\"density() === 'compact'\"\n  [class.density-comfortable]=\"density() === 'comfortable'\"\n  [class.density-spacious]=\"density() === 'spacious'\"\n  [class.is-bordered]=\"bordered()\"\n  [class.is-striped]=\"striped()\"\n  [class.is-resizing]=\"isResizing()\"\n>\n  <!-- Loading overlay -->\n  @if (loading()) {\n    <div class=\"talos-data-grid-loading-overlay\">\n      <ng-container *ngComponentOutlet=\"loaderIcon\" />\n    </div>\n  }\n\n  <!-- Main Scrollable Table Wrapper -->\n  <div class=\"talos-data-grid-table-wrapper\">\n    <table class=\"talos-data-grid-table\" [class.has-resizable-columns]=\"hasResizableColumns()\" role=\"grid\">\n      <thead>\n        <!-- Header Column Row -->\n        <tr>\n          @for (col of columns(); track col.field) {\n            <th\n              #thEl\n              [style.width]=\"getColumnWidth(col)\"\n              [style.min-width]=\"col.minWidth\"\n              [style.max-width]=\"col.maxWidth\"\n              [class.align-left]=\"!col.align || col.align === 'left'\"\n              [class.align-center]=\"col.align === 'center'\"\n              [class.align-right]=\"col.align === 'right'\"\n              [class.is-sortable]=\"isSortable(col)\"\n              [class.is-sorted]=\"isSorted(col)\"\n              [class.is-resizable]=\"isResizable(col)\"\n              [class.is-resizing]=\"isColumnResizing(col.field)\"\n              (click)=\"onHeaderClick(col)\"\n              role=\"columnheader\"\n              [attr.aria-sort]=\"getAriaSort(col)\"\n            >\n              <div class=\"header-content-wrapper\">\n                <span class=\"header-title\" [title]=\"col.header\">{{ col.header }}</span>\n                @if (isSortable(col) || isFilterable(col)) {\n                  <div class=\"header-tools\">\n                    @if (isSortable(col)) {\n                      <button\n                        talosButton\n                        variant=\"ghost\"\n                        size=\"xs\"\n                        [iconOnly]=\"true\"\n                        type=\"button\"\n                        class=\"header-sort-btn\"\n                        [class.is-sorted]=\"isSorted(col)\"\n                        (click)=\"$event.stopPropagation(); onHeaderClick(col)\"\n                        [attr.aria-label]=\"'Sort by ' + col.header\"\n                        [title]=\"'Sort by ' + col.header\"\n                      >\n                        @if (getSortDirection(col) === 'asc') {\n                          <ng-container *ngComponentOutlet=\"arrowUpIcon\" />\n                        } @else if (getSortDirection(col) === 'desc') {\n                          <ng-container *ngComponentOutlet=\"arrowDownIcon\" />\n                        } @else {\n                          <ng-container *ngComponentOutlet=\"arrowUpDownIcon\" />\n                        }\n                      </button>\n                    }\n                    @if (isFilterable(col)) {\n                      <div\n                        class=\"talos-grid-filter-anchor\"\n                        [class]=\"'filter-anchor-' + col.field\"\n                        cdkOverlayOrigin\n                        #filterOrigin=\"cdkOverlayOrigin\"\n                        (click)=\"$event.stopPropagation()\"\n                      >\n                        <button\n                          talosButton\n                          variant=\"ghost\"\n                          size=\"xs\"\n                          [iconOnly]=\"true\"\n                          type=\"button\"\n                          class=\"header-filter-btn\"\n                          [class.is-active]=\"hasFilter(col.field)\"\n                          [class.is-open]=\"isFilterDialogOpen(col.field)\"\n                          (click)=\"toggleFilterDialog(col.field, $event)\"\n                          [attr.aria-label]=\"'Filter ' + col.header\"\n                          title=\"Filter\"\n                        >\n                          <ng-container *ngComponentOutlet=\"filterIcon\" />\n                        </button>\n\n                        <ng-template\n                          cdkConnectedOverlay\n                          [cdkConnectedOverlayOrigin]=\"filterOrigin\"\n                          [cdkConnectedOverlayOpen]=\"isFilterDialogOpen(col.field)\"\n                          [cdkConnectedOverlayPositions]=\"overlayPositions\"\n                          [cdkConnectedOverlayPush]=\"true\"\n                          (overlayOutsideClick)=\"onOverlayOutsideClick($event, col.field)\"\n                        >\n                          <talos-grid-filter-dialog\n                            [column]=\"col\"\n                            [distinctValues]=\"activeColumnDistinctValues()\"\n                            [currentFilter]=\"getFilter(col.field)\"\n                            [align]=\"col.align === 'right' ? 'right' : 'left'\"\n                            (filterApplied)=\"onFilterApplied($event)\"\n                            (filterCleared)=\"onFilterCleared(col.field)\"\n                            (closed)=\"closeFilterDialog()\"\n                          />\n                        </ng-template>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n              @if (isResizable(col)) {\n                <div\n                  class=\"talos-grid-resize-handle\"\n                  [class.is-resizing]=\"isColumnResizing(col.field)\"\n                  (mousedown)=\"onResizeStart(col, $event, thEl)\"\n                  (touchstart)=\"onResizeStart(col, $event, thEl)\"\n                  (dblclick)=\"onResizeDoubleClick(col, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  role=\"separator\"\n                  aria-orientation=\"vertical\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"'Resize ' + col.header + ' column'\"\n                  (keydown)=\"onResizeKeydown(col, $event, thEl)\"\n                ></div>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body with TrackBy for Optimal Refresh Performance -->\n      <tbody>\n        @for (row of pagedData(); track trackByRow($index, row)) {\n          <tr\n            [class.is-hoverable]=\"hoverable()\"\n            [class.is-clickable]=\"hasRowClickListeners\"\n            (click)=\"onRowClick(row, $index)\"\n            role=\"row\"\n          >\n            @for (col of columns(); track col.field) {\n              <td\n                [class.align-left]=\"!col.align || col.align === 'left'\"\n                [class.align-center]=\"col.align === 'center'\"\n                [class.align-right]=\"col.align === 'right'\"\n                role=\"gridcell\"\n              >\n                @if (col.cellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      col.cellTemplate;\n                      context: {\n                        $implicit: getCellValue(row, col),\n                        row: row,\n                        index: $index,\n                        column: col,\n                      }\n                    \"\n                  />\n                } @else if (col.type === 'status') {\n                  <talos-grid-status-cell\n                    [row]=\"row\"\n                    [column]=\"col\"\n                    [rawValue]=\"getCellValue(row, col)\"\n                  />\n                } @else if (col.type === 'actions' && col.actionsConfig) {\n                  <talos-grid-actions-cell\n                    [row]=\"row\"\n                    [rowIndex]=\"$index\"\n                    [actions]=\"col.actionsConfig\"\n                    (actionClick)=\"actionClick.emit($event)\"\n                  />\n                } @else {\n                  {{ row | talosGridCellFormat: col }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n\n    <!-- Empty State -->\n    @if (pagedData().length === 0) {\n      <div class=\"talos-data-grid-empty\">\n        <div class=\"empty-icon\">\n          <ng-container *ngComponentOutlet=\"inboxIcon\" />\n        </div>\n        <div class=\"empty-text\">\n          @if (hasActiveFilters()) {\n            <span>No results matching the active filters.</span>\n          } @else {\n            <span>{{ emptyMessage() }}</span>\n          }\n        </div>\n        @if (hasActiveFilters()) {\n          <button talosButton variant=\"outline\" size=\"sm\" (click)=\"clearAllFilters()\">\n            Clear Filters\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Pagination Bar -->\n  @if (pagination()) {\n    <div class=\"talos-data-grid-pagination\">\n      <div class=\"pagination-left\">\n        <span class=\"pagination-info\">\n          Showing {{ startRecord() }} to {{ endRecord() }} of {{ totalCount() }} entries\n        </span>\n\n        @if (pageSizeOptions().length > 1) {\n          <div class=\"pagination-size-selector\">\n            <span>Rows per page:</span>\n            <select\n              [value]=\"internalPageSize()\"\n              (change)=\"onPageSizeChange($event)\"\n              aria-label=\"Select page size\"\n            >\n              @for (size of pageSizeOptions(); track size) {\n                <option [value]=\"size\">{{ size }}</option>\n              }\n            </select>\n          </div>\n        }\n      </div>\n\n      <div class=\"pagination-right\">\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() <= 0\"\n          (click)=\"setPage(0)\"\n          title=\"First page\"\n          aria-label=\"First page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronsLeftIcon\" />\n        </button>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() <= 0\"\n          (click)=\"setPage(internalPageIndex() - 1)\"\n          title=\"Previous page\"\n          aria-label=\"Previous page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronLeftIcon\" />\n        </button>\n\n        <span class=\"page-indicator\">\n          Page {{ internalPageIndex() + 1 }} of {{ totalPages() }}\n        </span>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() >= totalPages() - 1\"\n          (click)=\"setPage(internalPageIndex() + 1)\"\n          title=\"Next page\"\n          aria-label=\"Next page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronRightIcon\" />\n        </button>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() >= totalPages() - 1\"\n          (click)=\"setPage(totalPages() - 1)\"\n          title=\"Last page\"\n          aria-label=\"Last page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronsRightIcon\" />\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--talos-font-sans, system-ui, -apple-system, sans-serif);color:var(--talos-text-primary, #0f172a)}.talos-data-grid-container{display:flex;flex-direction:column;background-color:var(--talos-bg-surface, #ffffff);border-radius:var(--talos-radius-lg, 8px);position:relative;width:100%;overflow:hidden}.talos-data-grid-container.is-bordered{border:1px solid var(--talos-border-default, #cbd5e1)}.talos-data-grid-container.is-resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.talos-data-grid-container.is-resizing *{-webkit-user-select:none!important;user-select:none!important;cursor:col-resize!important}.talos-data-grid-table-wrapper{width:100%;overflow-x:auto;overflow-y:visible;position:relative;scrollbar-width:thin;scrollbar-color:var(--talos-border-default, #cbd5e1) transparent}.talos-data-grid-table-wrapper::-webkit-scrollbar{height:6px;width:6px}.talos-data-grid-table-wrapper::-webkit-scrollbar-thumb{background:var(--talos-border-default, #cbd5e1);border-radius:4px}.talos-data-grid-table{width:100%;min-width:100%;border-collapse:collapse;text-align:left;font-size:var(--talos-font-size-sm, 13px);line-height:var(--talos-line-height-normal, 1.5)}.talos-data-grid-table.has-resizable-columns{table-layout:fixed;width:max-content;min-width:100%}.talos-data-grid-container.density-compact{--grid-header-padding-y: 6px;--grid-header-padding-x: 10px;--grid-cell-padding-y: 5px;--grid-cell-padding-x: 10px;--grid-font-size: 12px;--grid-header-font-size: 11px;--grid-filter-height: 24px}.talos-data-grid-container.density-comfortable{--grid-header-padding-y: 10px;--grid-header-padding-x: 14px;--grid-cell-padding-y: 9px;--grid-cell-padding-x: 14px;--grid-font-size: 13.5px;--grid-header-font-size: 12px;--grid-filter-height: 28px}.talos-data-grid-container.density-spacious{--grid-header-padding-y: 14px;--grid-header-padding-x: 18px;--grid-cell-padding-y: 14px;--grid-cell-padding-x: 18px;--grid-font-size: 14.5px;--grid-header-font-size: 13px;--grid-filter-height: 32px}.talos-data-grid-table thead th{position:relative;background-color:var(--talos-bg-subtle, #f8fafc);color:var(--talos-text-secondary, #475569);font-size:var(--grid-header-font-size, 12px);font-weight:var(--talos-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;padding:var(--grid-header-padding-y) 8px var(--grid-header-padding-y) var(--grid-header-padding-x);border-bottom:1px solid var(--talos-border-default, #cbd5e1);white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle;overflow:hidden}.talos-data-grid-table thead th.is-sortable{cursor:pointer;transition:background-color var(--talos-transition, .15s ease)}.talos-data-grid-table thead th.is-sortable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f1f5f9);color:var(--talos-text-primary, #0f172a)}.talos-data-grid-table thead th.is-sorted{color:var(--talos-primary, #2563eb);background-color:var(--talos-primary-subtle-bg, #eff6ff)}.talos-data-grid-table thead th.is-resizable{padding-right:10px}.talos-data-grid-table thead th.is-resizing{background-color:var(--talos-neutral-subtle-bg-hover, #f1f5f9)}.header-content-wrapper{display:flex;align-items:center;gap:4px;width:100%;min-width:0;overflow:hidden}.header-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-tools{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sort-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;opacity:.45;transition:opacity var(--talos-transition, .15s ease),transform .15s ease}.sort-icon-wrapper ::ng-deep svg,.sort-icon-wrapper ::ng-deep .lucide,.sort-icon-wrapper svg,.sort-icon-wrapper .lucide{width:13px!important;height:13px!important;display:block}.is-sortable:hover .sort-icon-wrapper{opacity:.85}.is-sorted .sort-icon-wrapper{opacity:1;color:var(--talos-primary, #2563eb)}.header-sort-btn{width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;border-radius:var(--talos-radius-sm, 4px)!important;border:1px solid transparent!important;background:transparent!important;color:var(--talos-text-muted, #94a3b8)!important;cursor:pointer;opacity:.45;transition:all var(--talos-transition, .15s ease);box-shadow:none!important}.header-sort-btn ::ng-deep svg,.header-sort-btn ::ng-deep .lucide,.header-sort-btn svg,.header-sort-btn .lucide{width:13px!important;height:13px!important;display:block;flex-shrink:0}th:hover .header-sort-btn{opacity:.85}.header-sort-btn:hover{opacity:1;color:var(--talos-text-primary, #0f172a)!important;background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .06))!important}.header-sort-btn.is-sorted{opacity:1;color:var(--talos-primary, #2563eb)!important;background:var(--talos-primary-subtle-bg, #eff6ff)!important}.align-left{text-align:left}.align-left .header-content-wrapper{justify-content:flex-start}.align-center{text-align:center}.align-center .header-content-wrapper{justify-content:center}.align-right{text-align:right}.align-right .header-content-wrapper{justify-content:flex-end}.talos-grid-resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:2;display:flex;align-items:center;justify-content:center}.talos-grid-resize-handle:after{content:\"\";display:block;width:2px;height:50%;border-radius:1px;background-color:transparent;transition:background-color var(--talos-transition, .15s ease),height var(--talos-transition, .15s ease)}.talos-grid-resize-handle:hover:after,.talos-grid-resize-handle:focus-visible:after,.talos-grid-resize-handle.is-resizing:after{background-color:var(--talos-primary, #2563eb);height:100%}.talos-grid-resize-handle:focus-visible{outline:none}.talos-grid-filter-anchor{position:relative;display:inline-flex;align-items:center}.header-filter-btn{display:inline-flex;align-items:center;justify-content:center;width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;border-radius:var(--talos-radius-sm, 4px)!important;border:1px solid transparent!important;background:transparent!important;color:var(--talos-text-muted, #94a3b8)!important;cursor:pointer;opacity:.5;transition:all var(--talos-transition, .15s ease);box-shadow:none!important}.header-filter-btn ::ng-deep svg,.header-filter-btn ::ng-deep .lucide,.header-filter-btn svg,.header-filter-btn .lucide{width:13px!important;height:13px!important;display:block;flex-shrink:0}th:hover .header-filter-btn{opacity:.85}.header-filter-btn:hover,.header-filter-btn.is-open{opacity:1;color:var(--talos-text-primary, #0f172a)!important;background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .06))!important}.header-filter-btn.is-active{opacity:1;color:#fff!important;background:var(--talos-primary, #2563eb)!important;border-color:var(--talos-primary, #2563eb)!important}.talos-data-grid-table tbody tr{border-bottom:1px solid var(--talos-border-subtle, #f1f5f9);transition:background-color var(--talos-transition, .12s ease)}.talos-data-grid-table tbody tr.is-hoverable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f8fafc)}.talos-data-grid-table tbody tr.is-clickable{cursor:pointer}.talos-data-grid-container.is-striped .talos-data-grid-table tbody tr:nth-child(2n){background-color:var(--talos-bg-subtle, #fcfdfe)}.talos-data-grid-container.is-striped .talos-data-grid-table tbody tr:nth-child(2n).is-hoverable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f8fafc)}.talos-data-grid-table tbody td{padding:var(--grid-cell-padding-y) var(--grid-cell-padding-x);font-size:var(--grid-font-size, 13.5px);color:var(--talos-text-primary, #0f172a);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.talos-data-grid-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--talos-text-muted, #64748b);text-align:center;gap:12px}.talos-data-grid-empty .empty-icon{opacity:.5;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.talos-data-grid-empty .empty-icon ::ng-deep svg,.talos-data-grid-empty .empty-icon ::ng-deep .lucide,.talos-data-grid-empty .empty-icon svg,.talos-data-grid-empty .empty-icon .lucide{width:36px;height:36px}.talos-data-grid-empty .empty-text{font-size:var(--talos-font-size-base, 14px);font-weight:var(--talos-font-weight-medium, 500)}.talos-data-grid-pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--talos-border-default, #cbd5e1);background-color:var(--talos-bg-surface, #ffffff);gap:12px;flex-wrap:wrap}.pagination-left{display:flex;align-items:center;gap:12px}.pagination-info{font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-muted, #64748b)}.pagination-size-selector{display:flex;align-items:center;gap:6px;font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-secondary, #334155)}.pagination-size-selector select{height:28px;padding:0 8px;font-size:var(--talos-font-size-sm, 13px);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-sm, 4px);background-color:var(--talos-bg-surface, #ffffff);color:var(--talos-text-primary, #0f172a);cursor:pointer;outline:none}.pagination-size-selector select:focus{border-color:var(--talos-border-focus, #2563eb)}.pagination-right{display:flex;align-items:center;gap:4px}.pagination-right ::ng-deep button.talos-btn svg,.pagination-right ::ng-deep button.talos-btn .lucide{width:14px;height:14px}.page-indicator{font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-secondary, #334155);font-weight:var(--talos-font-weight-medium, 500);padding:0 8px}.talos-data-grid-loading-overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}.talos-data-grid-loading-overlay ::ng-deep svg,.talos-data-grid-loading-overlay ::ng-deep .lucide,.talos-data-grid-loading-overlay svg,.talos-data-grid-loading-overlay .lucide{width:24px;height:24px;animation:talos-grid-spin .8s linear infinite}@keyframes talos-grid-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], clientSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSort", required: false }] }], clientPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientPagination", required: false }] }], clientFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientFilter", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }] } });
+
+class TalosDataGridModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridModule, imports: [TalosDataGridComponent,
+            TalosGridStatusCellComponent,
+            TalosGridActionsCellComponent,
+            TalosGridFilterDialogComponent,
+            TalosGridCellFormatPipe], exports: [TalosDataGridComponent,
+            TalosGridStatusCellComponent,
+            TalosGridActionsCellComponent,
+            TalosGridFilterDialogComponent,
+            TalosGridCellFormatPipe] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridModule, imports: [TalosDataGridComponent,
+            TalosGridStatusCellComponent,
+            TalosGridFilterDialogComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TalosDataGridComponent,
+                        TalosGridStatusCellComponent,
+                        TalosGridActionsCellComponent,
+                        TalosGridFilterDialogComponent,
+                        TalosGridCellFormatPipe,
+                    ],
+                    exports: [
+                        TalosDataGridComponent,
+                        TalosGridStatusCellComponent,
+                        TalosGridActionsCellComponent,
+                        TalosGridFilterDialogComponent,
+                        TalosGridCellFormatPipe,
+                    ],
+                }]
+        }] });
+
 /*
  * Public API Surface of @weeehaoooz/talos-ui
  *
@@ -17054,5 +18732,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CascadeSelectComponent, DEFAULT_COLOR_PRESETS, DEFAULT_PASSWORD_RULES, DEFAULT_STRENGTH_LABELS, DatePickerComponent, DateRangePickerComponent, DateTimePickerComponent, DateTimeRangePickerComponent, GOLDEN_RATIO, LayoutService, MainLayoutComponent, OptionComponent, OptionGroupComponent, SelectInputComponent, SelectInputModule, SideNavComponent, SidePanelComponent, TALOS_DIALOG_CONFIG, TALOS_DIALOG_DATA, TALOS_DIALOG_REF, TALOS_STATUS_DESCRIPTORS, TalosAffixButtonDirective, TalosAffixModule, TalosAlertActionsDirective, TalosAlertComponent, TalosAlertContainerComponent, TalosAlertDescriptionDirective, TalosAlertIconDirective, TalosAlertModule, TalosAlertService, TalosAlertTitleDirective, TalosAutocompleteComponent, TalosAutocompleteModule, TalosBadgeDirective, TalosBadgeModule, TalosButtonDirective, TalosButtonGroupComponent, TalosButtonGroupItemDirective, TalosButtonGroupModule, TalosCardActionsDirective, TalosCardAvatarDirective, TalosCardBodyComponent, TalosCardComponent, TalosCardFooterComponent, TalosCardHeaderComponent, TalosCardMediaDirective, TalosCardModule, TalosCardSubtitleDirective, TalosCardTitleDirective, TalosCategoryBarComponent, TalosCategoryBarModule, TalosCheckboxComponent, TalosCheckboxDirective, TalosCheckboxGroupComponent, TalosCheckboxGroupDirective, TalosCheckboxModule, TalosCheckboxParentDirective, TalosChipComponent, TalosChipsComponent, TalosChipsModule, TalosColorPickerComponent, TalosColorPickerModule, TalosConfirmDialogComponent, TalosDialogCloseDirective, TalosDialogContentComponent, TalosDialogDescriptionDirective, TalosDialogFooterComponent, TalosDialogHeaderComponent, TalosDialogModule, TalosDialogRef, TalosDialogService, TalosDialogTitleDirective, TalosDropZoneComponent, TalosDropZoneModule, TalosExpansionPanelActionsDirective, TalosExpansionPanelBodyComponent, TalosExpansionPanelComponent, TalosExpansionPanelContentDirective, TalosExpansionPanelDescriptionDirective, TalosExpansionPanelGroupComponent, TalosExpansionPanelHeaderComponent, TalosExpansionPanelIconDirective, TalosExpansionPanelModule, TalosExpansionPanelTitleDirective, TalosExpansionPanelToggleDirective, TalosFileDropDirective, TalosFormFieldComponent, TalosFormFieldModule, TalosHeatmapComponent, TalosHeatmapModule, TalosInputDirective, TalosMiniDonutComponent, TalosMiniDonutModule, TalosMiniGaugeComponent, TalosMiniGaugeModule, TalosNavGroupComponent, TalosNavItemComponent, TalosNavModule, TalosNavThemeToggleComponent, TalosOtpComponent, TalosOtpModule, TalosPasswordInputComponent, TalosPasswordInputDirective, TalosPasswordInputModule, TalosPrefixDirective, TalosRadioComponent, TalosRadioDirective, TalosRadioGroupComponent, TalosRadioModule, TalosRangeInputComponent, TalosRangeInputDirective, TalosRangeInputModule, TalosRatingComponent, TalosRatingModule, TalosSideNavModule, TalosSlideToggleComponent, TalosSlideToggleDirective, TalosSlideToggleModule, TalosSnackbarComponent, TalosSnackbarContainerComponent, TalosSnackbarModule, TalosSnackbarService, TalosSparklineComponent, TalosSparklineModule, TalosStatusTagComponent, TalosStatusTagModule, TalosSuffixDirective, TalosTextPrefixDirective, TalosTextSuffixDirective, TalosTimelineComponent, TalosTimelineContentDirective, TalosTimelineDotDirective, TalosTimelineExtraDirective, TalosTimelineItemComponent, TalosTimelineModule, TalosTimelineTimeDirective, TalosTimelineTitleDirective, TalosTooltipComponent, TalosTooltipDirective, TalosTopNavModule, TalosTransferListComponent, TalosTransferListModule, TalosTrendIndicatorComponent, TalosTrendIndicatorModule, TopNavComponent, clamp, formatBadgeContent, formatColor, formatDate, getContrastRatio, getLuminance, hexToRgb, hslToHsv, hslToRgb, hsvToHsl, hsvToRgb, isLightColor, isValidColor, normalizeDateFnsToken, normalizeWorkflowStatus, parseColor, parseFlexibleDate, rgbToHex, rgbToHsl, rgbToHsv, round };
+export { CascadeSelectComponent, DEFAULT_COLOR_PRESETS, DEFAULT_PASSWORD_RULES, DEFAULT_STRENGTH_LABELS, DatePickerComponent, DateRangePickerComponent, DateTimePickerComponent, DateTimeRangePickerComponent, GOLDEN_RATIO, LayoutService, MainLayoutComponent, OptionComponent, OptionGroupComponent, SelectInputComponent, SelectInputModule, SideNavComponent, SidePanelComponent, TALOS_DIALOG_CONFIG, TALOS_DIALOG_DATA, TALOS_DIALOG_REF, TALOS_STATUS_DESCRIPTORS, TalosAffixButtonDirective, TalosAffixModule, TalosAlertActionsDirective, TalosAlertComponent, TalosAlertContainerComponent, TalosAlertDescriptionDirective, TalosAlertIconDirective, TalosAlertModule, TalosAlertService, TalosAlertTitleDirective, TalosAutocompleteComponent, TalosAutocompleteModule, TalosBadgeDirective, TalosBadgeModule, TalosButtonDirective, TalosButtonGroupComponent, TalosButtonGroupItemDirective, TalosButtonGroupModule, TalosCardActionsDirective, TalosCardAvatarDirective, TalosCardBodyComponent, TalosCardComponent, TalosCardFooterComponent, TalosCardHeaderComponent, TalosCardMediaDirective, TalosCardModule, TalosCardSubtitleDirective, TalosCardTitleDirective, TalosCategoryBarComponent, TalosCategoryBarModule, TalosCheckboxComponent, TalosCheckboxDirective, TalosCheckboxGroupComponent, TalosCheckboxGroupDirective, TalosCheckboxModule, TalosCheckboxParentDirective, TalosChipComponent, TalosChipsComponent, TalosChipsModule, TalosColorPickerComponent, TalosColorPickerModule, TalosConfirmDialogComponent, TalosDataGridComponent, TalosDataGridModule, TalosDialogCloseDirective, TalosDialogContentComponent, TalosDialogDescriptionDirective, TalosDialogFooterComponent, TalosDialogHeaderComponent, TalosDialogModule, TalosDialogRef, TalosDialogService, TalosDialogTitleDirective, TalosDropZoneComponent, TalosDropZoneModule, TalosExpansionPanelActionsDirective, TalosExpansionPanelBodyComponent, TalosExpansionPanelComponent, TalosExpansionPanelContentDirective, TalosExpansionPanelDescriptionDirective, TalosExpansionPanelGroupComponent, TalosExpansionPanelHeaderComponent, TalosExpansionPanelIconDirective, TalosExpansionPanelModule, TalosExpansionPanelTitleDirective, TalosExpansionPanelToggleDirective, TalosFileDropDirective, TalosFormFieldComponent, TalosFormFieldModule, TalosGridActionsCellComponent, TalosGridCellFormatPipe, TalosGridFilterDialogComponent, TalosGridStatusCellComponent, TalosHeatmapComponent, TalosHeatmapModule, TalosInputDirective, TalosMiniDonutComponent, TalosMiniDonutModule, TalosMiniGaugeComponent, TalosMiniGaugeModule, TalosNavGroupComponent, TalosNavItemComponent, TalosNavModule, TalosNavThemeToggleComponent, TalosOtpComponent, TalosOtpModule, TalosPasswordInputComponent, TalosPasswordInputDirective, TalosPasswordInputModule, TalosPrefixDirective, TalosRadioComponent, TalosRadioDirective, TalosRadioGroupComponent, TalosRadioModule, TalosRangeInputComponent, TalosRangeInputDirective, TalosRangeInputModule, TalosRatingComponent, TalosRatingModule, TalosSideNavModule, TalosSlideToggleComponent, TalosSlideToggleDirective, TalosSlideToggleModule, TalosSnackbarComponent, TalosSnackbarContainerComponent, TalosSnackbarModule, TalosSnackbarService, TalosSparklineComponent, TalosSparklineModule, TalosStatusTagComponent, TalosStatusTagModule, TalosSuffixDirective, TalosTextPrefixDirective, TalosTextSuffixDirective, TalosThemeMorphIconComponent, TalosTimelineComponent, TalosTimelineContentDirective, TalosTimelineDotDirective, TalosTimelineExtraDirective, TalosTimelineItemComponent, TalosTimelineModule, TalosTimelineTimeDirective, TalosTimelineTitleDirective, TalosTooltipComponent, TalosTooltipDirective, TalosTopNavModule, TalosTransferListComponent, TalosTransferListModule, TalosTrendIndicatorComponent, TalosTrendIndicatorModule, TopNavComponent, clamp, formatBadgeContent, formatColor, formatDate, getContrastRatio, getLuminance, hexToRgb, hslToHsv, hslToRgb, hsvToHsl, hsvToRgb, isLightColor, isValidColor, normalizeDateFnsToken, normalizeWorkflowStatus, parseColor, parseFlexibleDate, rgbToHex, rgbToHsl, rgbToHsv, round };
 //# sourceMappingURL=weeehaoooz-talos-ui.mjs.map