orbiq-neural-ui-kit 0.0.4 → 0.0.6

package/fesm2022/orbiq-neural-ui-kit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, computed, Component, signal, model, effect, ViewChild, Directive, EventEmitter, ContentChild, Output, HostListener, Input, InjectionToken, Optional, Inject, ContentChildren, ViewChildren, inject, Injectable, ViewContainerRef, ElementRef } from '@angular/core';
+import { input, computed, Component, output, signal, model, effect, ViewChild, Directive, EventEmitter, ContentChild, Output, HostListener, Input, InjectionToken, Optional, Inject, ContentChildren, ViewChildren, inject, forwardRef, Injectable, ViewContainerRef, ElementRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/cdk/overlay';
@@ -20,6 +20,58 @@ import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
 import { Placeholder } from '@tiptap/extensions';
 
+class NeuralIconComponent {
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    isLucideIcon = computed(() => {
+        const val = this.name();
+        return typeof val === 'string' && val.startsWith('lucide-');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLucideIcon" }] : /* istanbul ignore next */ []));
+    isEmojiIcon = computed(() => {
+        const val = this.name();
+        if (typeof val !== 'string')
+            return false;
+        // Very simple emoji detection
+        const emojiRegex = /[\p{Emoji_Presentation}\p{Extended_Pictographic}]/u;
+        return emojiRegex.test(val);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEmojiIcon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralIconComponent, isStandalone: true, selector: "neural-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (isLucideIcon()) {
+      <span [class]="name()" aria-hidden="true"></span>
+    } @else if (isEmojiIcon()) {
+      <span class="inline-flex items-center justify-center leading-none" aria-hidden="true">
+        {{ name() }}
+      </span>
+    } @else {
+      <!-- Fallback or custom SVG component handled by ng-content if not string -->
+      <ng-content></ng-content>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'neural-icon',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    @if (isLucideIcon()) {
+      <span [class]="name()" aria-hidden="true"></span>
+    } @else if (isEmojiIcon()) {
+      <span class="inline-flex items-center justify-center leading-none" aria-hidden="true">
+        {{ name() }}
+      </span>
+    } @else {
+      <!-- Fallback or custom SVG component handled by ng-content if not string -->
+      <ng-content></ng-content>
+    }
+  `
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
+
 class NeuralButtonComponent {
     // Inputs
     variant = input('subtle', /* @ts-ignore */
@@ -35,6 +87,8 @@ class NeuralButtonComponent {
     loading = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     // Modifiers
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
     iconLeft = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconLeft" }] : /* istanbul ignore next */ []));
     iconRight = input(false, /* @ts-ignore */
@@ -59,6 +113,10 @@ class NeuralButtonComponent {
         }[this.size()];
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "spinnerClasses" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => {
+        return this.spinnerClasses();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
     computedClasses = computed(() => {
         const v = this.variant();
         const t = this.theme();
@@ -143,7 +201,7 @@ class NeuralButtonComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralButtonComponent, isStandalone: true, selector: "neural-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralButtonComponent, isStandalone: true, selector: "neural-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
     <button
       [type]="type()"
       [disabled]="isDisabled()"
@@ -156,26 +214,36 @@ class NeuralButtonComponent {
           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
           <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
         </svg>
-      } @else if (iconLeft()) {
-        <ng-content select="[left-icon]"></ng-content>
+      } @else if (iconLeft() || (icon() && !iconRight() && !iconOnly())) {
+        @if (icon()) {
+          <neural-icon [name]="icon()!" [class]="iconClasses()"></neural-icon>
+        } @else {
+          <ng-content select="[left-icon]"></ng-content>
+        }
+      } @else if (iconOnly() && icon()) {
+        <neural-icon [name]="icon()!" [class]="iconClasses()"></neural-icon>
       }
       
       <span class="truncate" [class.sr-only]="iconOnly()">
         <ng-content></ng-content>
       </span>
 
-      @if (!loading() && iconRight()) {
-        <ng-content select="[right-icon]"></ng-content>
+      @if (!loading() && (iconRight() || (icon() && iconRight() && !iconOnly()))) {
+        @if (icon()) {
+          <neural-icon [name]="icon()!" [class]="iconClasses()"></neural-icon>
+        } @else {
+          <ng-content select="[right-icon]"></ng-content>
+        }
       }
     </button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralIconComponent, selector: "neural-icon", inputs: ["name"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'neural-button',
                     standalone: true,
-                    imports: [CommonModule],
+                    imports: [CommonModule, NeuralIconComponent],
                     template: `
     <button
       [type]="type()"
@@ -189,21 +257,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
           <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
         </svg>
-      } @else if (iconLeft()) {
-        <ng-content select="[left-icon]"></ng-content>
+      } @else if (iconLeft() || (icon() && !iconRight() && !iconOnly())) {
+        @if (icon()) {
+          <neural-icon [name]="icon()!" [class]="iconClasses()"></neural-icon>
+        } @else {
+          <ng-content select="[left-icon]"></ng-content>
+        }
+      } @else if (iconOnly() && icon()) {
+        <neural-icon [name]="icon()!" [class]="iconClasses()"></neural-icon>
       }
       
       <span class="truncate" [class.sr-only]="iconOnly()">
         <ng-content></ng-content>
       </span>
 
-      @if (!loading() && iconRight()) {
-        <ng-content select="[right-icon]"></ng-content>
+      @if (!loading() && (iconRight() || (icon() && iconRight() && !iconOnly()))) {
+        @if (icon()) {
+          <neural-icon [name]="icon()!" [class]="iconClasses()"></neural-icon>
+        } @else {
+          <ng-content select="[right-icon]"></ng-content>
+        }
       }
     </button>
   `
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], iconRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRight", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], iconRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRight", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 class NeuralAlertComponent {
     title = input(/* @ts-ignore */
@@ -479,7 +557,7 @@ class NeuralAlertComponent {
         <svg [class]="iconColorClass()" class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path d="M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1ZM10.8535 5.14648C10.6583 4.95122 10.3417 4.95122 10.1465 5.14648L8 7.29297L5.85352 5.14648C5.65825 4.95122 5.34175 4.95122 5.14648 5.14648C4.95122 5.34175 4.95122 5.65825 5.14648 5.85352L7.29297 8L5.14648 10.1465C4.95122 10.3417 4.95122 10.6583 5.14648 10.8535C5.34175 11.0488 5.65825 11.0488 5.85352 10.8535L8 8.70703L10.1465 10.8535C10.3417 11.0488 10.6583 11.0488 10.8535 10.8535C11.0488 10.6583 11.0488 10.3417 10.8535 10.1465L8.70703 8L10.8535 5.85352C11.0488 5.65825 11.0488 5.34175 10.8535 5.14648Z" fill="currentColor"/></svg>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralAlertComponent, decorators: [{
             type: Component,
@@ -1821,7 +1899,7 @@ class NeuralDropdownComponent {
         </neural-popover-panel>
       </ng-template>
     </neural-popover>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NeuralPopoverComponent, selector: "neural-popover", inputs: ["side", "align", "offset", "bare"], outputs: ["openChange"] }, { kind: "directive", type: NeuralPopoverTriggerDirective, selector: "[neuralPopoverTrigger]" }, { kind: "directive", type: NeuralPopoverContentDirective, selector: "[neuralPopoverContent]" }, { kind: "component", type: NeuralPopoverPanelComponent, selector: "neural-popover-panel" }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NeuralPopoverComponent, selector: "neural-popover", inputs: ["side", "align", "offset", "bare"], outputs: ["openChange"] }, { kind: "directive", type: NeuralPopoverTriggerDirective, selector: "[neuralPopoverTrigger]" }, { kind: "directive", type: NeuralPopoverContentDirective, selector: "[neuralPopoverContent]" }, { kind: "component", type: NeuralPopoverPanelComponent, selector: "neural-popover-panel" }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDropdownComponent, decorators: [{
             type: Component,
@@ -2013,7 +2091,7 @@ class NeuralBreadcrumbsComponent {
         }
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "hasTriggerSlot"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "hasTriggerSlot"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralBreadcrumbsComponent, decorators: [{
             type: Component,
@@ -3695,58 +3773,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }]
         }], propDecorators: { valueModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueModel", required: false }] }, { type: i0.Output, args: ["valueModelChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], padded: [{ type: i0.Input, args: [{ isSignal: true, alias: "padded", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], controlPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlPosition", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], hasLabelSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasLabelSlot", required: false }] }], hasDescriptionSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDescriptionSlot", required: false }] }] } });
 
-class NeuralIconComponent {
-    name = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    isLucideIcon = computed(() => {
-        const val = this.name();
-        return typeof val === 'string' && val.startsWith('lucide-');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isLucideIcon" }] : /* istanbul ignore next */ []));
-    isEmojiIcon = computed(() => {
-        const val = this.name();
-        if (typeof val !== 'string')
-            return false;
-        // Very simple emoji detection
-        const emojiRegex = /[\p{Emoji_Presentation}\p{Extended_Pictographic}]/u;
-        return emojiRegex.test(val);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isEmojiIcon" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralIconComponent, isStandalone: true, selector: "neural-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @if (isLucideIcon()) {
-      <span [class]="name()" aria-hidden="true"></span>
-    } @else if (isEmojiIcon()) {
-      <span class="inline-flex items-center justify-center leading-none" aria-hidden="true">
-        {{ name() }}
-      </span>
-    } @else {
-      <!-- Fallback or custom SVG component handled by ng-content if not string -->
-      <ng-content></ng-content>
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralIconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'neural-icon',
-                    standalone: true,
-                    imports: [CommonModule],
-                    template: `
-    @if (isLucideIcon()) {
-      <span [class]="name()" aria-hidden="true"></span>
-    } @else if (isEmojiIcon()) {
-      <span class="inline-flex items-center justify-center leading-none" aria-hidden="true">
-        {{ name() }}
-      </span>
-    } @else {
-      <!-- Fallback or custom SVG component handled by ng-content if not string -->
-      <ng-content></ng-content>
-    }
-  `
-                }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
-
 class NeuralSpinnerComponent {
     size = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
@@ -3921,7 +3947,7 @@ class NeuralDividerComponent {
     } @else {
       <hr class="border-0 border-outline-gray-2" [class]="dividerClasses()" />
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDividerComponent, decorators: [{
             type: Component,
@@ -4433,7 +4459,7 @@ class NeuralDialogComponent {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, decorators: [{
             type: Component,
@@ -5908,106 +5934,129 @@ class NeuralSidebarItemComponent {
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     suffix = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+    children = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
     hasPrefixSlot = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasPrefixSlot" }] : /* istanbul ignore next */ []));
     hasDefaultSlot = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasDefaultSlot" }] : /* istanbul ignore next */ []));
     hasSuffixSlot = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasSuffixSlot" }] : /* istanbul ignore next */ []));
+    isExpanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
     router = inject(Router, { optional: true });
     sidebar = inject(NeuralSidebarComponent, { optional: true });
     isCollapsed = computed(() => {
         return this.sidebar ? this.sidebar.shouldCollapse() : false;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    hasChildren = computed(() => {
+        return this.children() && this.children().length > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
     tooltipText = computed(() => this.label(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tooltipText" }] : /* istanbul ignore next */ []));
     resolvedActive = computed(() => {
         if (this.active() !== undefined)
             return this.active();
+        // Check if any child is active
+        if (this.hasChildren()) {
+            return this.children().some(child => {
+                if (child.active)
+                    return true;
+                if (child.to && this.router) {
+                    return this.router.isActive(child.to, { paths: 'exact', queryParams: 'ignored', fragment: 'ignored', matrixParams: 'ignored' });
+                }
+                return false;
+            });
+        }
         if (!this.to() || !this.router)
             return false;
         return this.router.isActive(this.to(), { paths: 'exact', queryParams: 'ignored', fragment: 'ignored', matrixParams: 'ignored' });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedActive" }] : /* istanbul ignore next */ []));
     handleClick(event) {
-        // optional click handler
+        if (this.hasChildren()) {
+            event.preventDefault();
+            this.isExpanded.set(!this.isExpanded());
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSidebarItemComponent, isStandalone: true, selector: "neural-sidebar-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, hasPrefixSlot: { classPropertyName: "hasPrefixSlot", publicName: "hasPrefixSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDefaultSlot: { classPropertyName: "hasDefaultSlot", publicName: "hasDefaultSlot", isSignal: true, isRequired: false, transformFunction: null }, hasSuffixSlot: { classPropertyName: "hasSuffixSlot", publicName: "hasSuffixSlot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div
-      data-slot="sidebar-item"
-      [attr.data-state]="resolvedActive() ? 'active' : 'inactive'"
-      class="group/sidebar-item flex h-7 items-center rounded-4 transition"
-      [class]="
-        resolvedActive()
-          ? 'bg-surface-elevation-3 text-ink-gray-8 shadow-sm'
-          : 'text-ink-gray-6 hover:bg-surface-gray-2'
-      "
-    >
-      @if (to()) {
-        <a
-          [routerLink]="to()"
-          routerLinkActive="active"
-          #rla="routerLinkActive"
-          [attr.aria-label]="tooltipText() || undefined"
-          [attr.aria-current]="resolvedActive() ? 'page' : undefined"
-          class="flex h-full min-w-0 flex-1 items-center rounded-4 pl-2 focus-visible:ring-0 focus-visible:focus-ring"
-          (click)="handleClick($event)"
-        >
-          <span class="grid shrink-0 place-items-center">
-            <ng-content select="[prefix]"></ng-content>
-            @if (!hasPrefixSlot() && icon()) {
-              <span [class]="icon() + ' size-4'"></span>
-            }
-          </span>
-          <span
-            class="min-w-0 flex-1 transition-all ease-in-out"
-            [class]="
-              isCollapsed()
-                ? 'ml-0 w-0 overflow-hidden opacity-0'
-                : 'ml-2 w-auto opacity-100'
-            "
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSidebarItemComponent, isStandalone: true, selector: "neural-sidebar-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, hasPrefixSlot: { classPropertyName: "hasPrefixSlot", publicName: "hasPrefixSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDefaultSlot: { classPropertyName: "hasDefaultSlot", publicName: "hasDefaultSlot", isSignal: true, isRequired: false, transformFunction: null }, hasSuffixSlot: { classPropertyName: "hasSuffixSlot", publicName: "hasSuffixSlot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="flex flex-col">
+      <div
+        data-slot="sidebar-item"
+        [attr.data-state]="resolvedActive() ? 'active' : 'inactive'"
+        class="group/sidebar-item flex h-8 items-center rounded-4 transition-colors cursor-pointer"
+        [class]="
+          resolvedActive()
+            ? 'bg-surface-gray-3 text-ink-gray-9 font-medium'
+            : 'text-ink-gray-7 hover:bg-surface-gray-2'
+        "
+      >
+        @if (to() && !hasChildren()) {
+          <a
+            [routerLink]="to()"
+            routerLinkActive="active"
+            #rla="routerLinkActive"
+            [attr.aria-label]="tooltipText() || undefined"
+            [attr.aria-current]="resolvedActive() ? 'page' : undefined"
+            class="flex h-full min-w-0 flex-1 items-center rounded-4 pl-2 focus-visible:ring-0 focus-visible:focus-ring"
+            (click)="handleClick($event)"
           >
-            <span class="flex min-w-0 items-center">
-              <ng-content></ng-content>
-              @if (!hasDefaultSlot() && label()) {
-                <span class="truncate text-sm">{{ label() }}</span>
-              }
-            </span>
-          </span>
-        </a>
-      } @else {
-        <button
-          type="button"
-          [attr.aria-label]="tooltipText() || undefined"
-          class="flex h-full text-left min-w-0 flex-1 items-center rounded-4 pl-2 focus-visible:ring-0 focus-visible:focus-ring"
-          (click)="handleClick($event)"
-        >
-          <span class="grid shrink-0 place-items-center">
-            <ng-content select="[prefix]"></ng-content>
-            @if (!hasPrefixSlot() && icon()) {
-              <span [class]="icon() + ' size-4'"></span>
-            }
-          </span>
-          <span
-            class="min-w-0 flex-1 transition-all ease-in-out"
-            [class]="
-              isCollapsed()
-                ? 'ml-0 w-0 overflow-hidden opacity-0'
-                : 'ml-2 w-auto opacity-100'
-            "
+            <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+          </a>
+        } @else {
+          <button
+            type="button"
+            [attr.aria-label]="tooltipText() || undefined"
+            class="flex h-full text-left min-w-0 flex-1 items-center rounded-4 pl-2 focus-visible:ring-0 focus-visible:focus-ring"
+            (click)="handleClick($event)"
           >
-            <span class="flex min-w-0 items-center">
-              <ng-content></ng-content>
-              @if (!hasDefaultSlot() && label()) {
-                <span class="truncate text-sm">{{ label() }}</span>
-              }
-            </span>
-          </span>
-        </button>
+            <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+          </button>
+        }
+      </div>
+
+      <!-- Nested Children -->
+      @if (hasChildren() && !isCollapsed() && isExpanded()) {
+        <div class="flex flex-col pl-6 mt-0.5 space-y-0.5">
+          @for (child of children(); track child.label) {
+            <neural-sidebar-item 
+              [label]="child.label"
+              [icon]="child.icon || ''"
+              [to]="child.to"
+              [active]="child.active"
+              [children]="child.children || []">
+            </neural-sidebar-item>
+          }
+        </div>
       }
-      
+    </div>
+
+    <!-- Content Template to avoid duplication -->
+    <ng-template #itemContent>
+      <span class="grid shrink-0 place-items-center">
+        <ng-content select="[prefix]"></ng-content>
+        @if (!hasPrefixSlot() && icon()) {
+          <span [class]="icon() + ' size-4.5'"></span>
+        }
+      </span>
+      <span
+        class="min-w-0 flex-1 transition-all ease-in-out"
+        [class]="
+          isCollapsed()
+            ? 'ml-0 w-0 overflow-hidden opacity-0'
+            : 'ml-2 w-auto opacity-100'
+        "
+      >
+        <span class="flex min-w-0 items-center">
+          <ng-content></ng-content>
+          @if (!hasDefaultSlot() && label()) {
+            <span class="truncate text-[13px] tracking-wide">{{ label() }}</span>
+          }
+        </span>
+      </span>
       <div
         data-slot="sidebar-item-suffix"
         class="flex shrink-0 items-center transition-all ease-in-out"
@@ -6015,92 +6064,98 @@ class NeuralSidebarItemComponent {
       >
         <ng-content select="[suffix]"></ng-content>
         @if (!hasSuffixSlot() && suffix()) {
-          <span class="mr-2 text-sm text-ink-gray-4">{{ suffix() }}</span>
+          <span class="mr-2 text-xs text-ink-gray-4">{{ suffix() }}</span>
+        }
+        @if (hasChildren()) {
+          <span class="mr-2 transition-transform duration-200" [class.rotate-90]="isExpanded()">
+            <span class="lucide-chevron-right size-3.5 text-ink-gray-4 group-hover/sidebar-item:text-ink-gray-6"></span>
+          </span>
         }
       </div>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => NeuralSidebarItemComponent), selector: "neural-sidebar-item", inputs: ["label", "icon", "to", "active", "suffix", "children", "hasPrefixSlot", "hasDefaultSlot", "hasSuffixSlot"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i0.forwardRef(() => RouterModule) }, { kind: "directive", type: i0.forwardRef(() => i1$2.RouterLink), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(() => i1$2.RouterLinkActive), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSidebarItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'neural-sidebar-item',
                     standalone: true,
-                    imports: [CommonModule, RouterModule],
+                    imports: [CommonModule, RouterModule, forwardRef(() => NeuralSidebarItemComponent)],
                     template: `
-    <div
-      data-slot="sidebar-item"
-      [attr.data-state]="resolvedActive() ? 'active' : 'inactive'"
-      class="group/sidebar-item flex h-7 items-center rounded-4 transition"
-      [class]="
-        resolvedActive()
-          ? 'bg-surface-elevation-3 text-ink-gray-8 shadow-sm'
-          : 'text-ink-gray-6 hover:bg-surface-gray-2'
-      "
-    >
-      @if (to()) {
-        <a
-          [routerLink]="to()"
-          routerLinkActive="active"
-          #rla="routerLinkActive"
-          [attr.aria-label]="tooltipText() || undefined"
-          [attr.aria-current]="resolvedActive() ? 'page' : undefined"
-          class="flex h-full min-w-0 flex-1 items-center rounded-4 pl-2 focus-visible:ring-0 focus-visible:focus-ring"
-          (click)="handleClick($event)"
-        >
-          <span class="grid shrink-0 place-items-center">
-            <ng-content select="[prefix]"></ng-content>
-            @if (!hasPrefixSlot() && icon()) {
-              <span [class]="icon() + ' size-4'"></span>
-            }
-          </span>
-          <span
-            class="min-w-0 flex-1 transition-all ease-in-out"
-            [class]="
-              isCollapsed()
-                ? 'ml-0 w-0 overflow-hidden opacity-0'
-                : 'ml-2 w-auto opacity-100'
-            "
+    <div class="flex flex-col">
+      <div
+        data-slot="sidebar-item"
+        [attr.data-state]="resolvedActive() ? 'active' : 'inactive'"
+        class="group/sidebar-item flex h-8 items-center rounded-4 transition-colors cursor-pointer"
+        [class]="
+          resolvedActive()
+            ? 'bg-surface-gray-3 text-ink-gray-9 font-medium'
+            : 'text-ink-gray-7 hover:bg-surface-gray-2'
+        "
+      >
+        @if (to() && !hasChildren()) {
+          <a
+            [routerLink]="to()"
+            routerLinkActive="active"
+            #rla="routerLinkActive"
+            [attr.aria-label]="tooltipText() || undefined"
+            [attr.aria-current]="resolvedActive() ? 'page' : undefined"
+            class="flex h-full min-w-0 flex-1 items-center rounded-4 pl-2 focus-visible:ring-0 focus-visible:focus-ring"
+            (click)="handleClick($event)"
           >
-            <span class="flex min-w-0 items-center">
-              <ng-content></ng-content>
-              @if (!hasDefaultSlot() && label()) {
-                <span class="truncate text-sm">{{ label() }}</span>
-              }
-            </span>
-          </span>
-        </a>
-      } @else {
-        <button
-          type="button"
-          [attr.aria-label]="tooltipText() || undefined"
-          class="flex h-full text-left min-w-0 flex-1 items-center rounded-4 pl-2 focus-visible:ring-0 focus-visible:focus-ring"
-          (click)="handleClick($event)"
-        >
-          <span class="grid shrink-0 place-items-center">
-            <ng-content select="[prefix]"></ng-content>
-            @if (!hasPrefixSlot() && icon()) {
-              <span [class]="icon() + ' size-4'"></span>
-            }
-          </span>
-          <span
-            class="min-w-0 flex-1 transition-all ease-in-out"
-            [class]="
-              isCollapsed()
-                ? 'ml-0 w-0 overflow-hidden opacity-0'
-                : 'ml-2 w-auto opacity-100'
-            "
+            <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+          </a>
+        } @else {
+          <button
+            type="button"
+            [attr.aria-label]="tooltipText() || undefined"
+            class="flex h-full text-left min-w-0 flex-1 items-center rounded-4 pl-2 focus-visible:ring-0 focus-visible:focus-ring"
+            (click)="handleClick($event)"
           >
-            <span class="flex min-w-0 items-center">
-              <ng-content></ng-content>
-              @if (!hasDefaultSlot() && label()) {
-                <span class="truncate text-sm">{{ label() }}</span>
-              }
-            </span>
-          </span>
-        </button>
+            <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+          </button>
+        }
+      </div>
+
+      <!-- Nested Children -->
+      @if (hasChildren() && !isCollapsed() && isExpanded()) {
+        <div class="flex flex-col pl-6 mt-0.5 space-y-0.5">
+          @for (child of children(); track child.label) {
+            <neural-sidebar-item 
+              [label]="child.label"
+              [icon]="child.icon || ''"
+              [to]="child.to"
+              [active]="child.active"
+              [children]="child.children || []">
+            </neural-sidebar-item>
+          }
+        </div>
       }
-      
+    </div>
+
+    <!-- Content Template to avoid duplication -->
+    <ng-template #itemContent>
+      <span class="grid shrink-0 place-items-center">
+        <ng-content select="[prefix]"></ng-content>
+        @if (!hasPrefixSlot() && icon()) {
+          <span [class]="icon() + ' size-4.5'"></span>
+        }
+      </span>
+      <span
+        class="min-w-0 flex-1 transition-all ease-in-out"
+        [class]="
+          isCollapsed()
+            ? 'ml-0 w-0 overflow-hidden opacity-0'
+            : 'ml-2 w-auto opacity-100'
+        "
+      >
+        <span class="flex min-w-0 items-center">
+          <ng-content></ng-content>
+          @if (!hasDefaultSlot() && label()) {
+            <span class="truncate text-[13px] tracking-wide">{{ label() }}</span>
+          }
+        </span>
+      </span>
       <div
         data-slot="sidebar-item-suffix"
         class="flex shrink-0 items-center transition-all ease-in-out"
@@ -6108,13 +6163,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       >
         <ng-content select="[suffix]"></ng-content>
         @if (!hasSuffixSlot() && suffix()) {
-          <span class="mr-2 text-sm text-ink-gray-4">{{ suffix() }}</span>
+          <span class="mr-2 text-xs text-ink-gray-4">{{ suffix() }}</span>
+        }
+        @if (hasChildren()) {
+          <span class="mr-2 transition-transform duration-200" [class.rotate-90]="isExpanded()">
+            <span class="lucide-chevron-right size-3.5 text-ink-gray-4 group-hover/sidebar-item:text-ink-gray-6"></span>
+          </span>
         }
       </div>
-    </div>
+    </ng-template>
   `
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], hasPrefixSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPrefixSlot", required: false }] }], hasDefaultSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultSlot", required: false }] }], hasSuffixSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSuffixSlot", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }], hasPrefixSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPrefixSlot", required: false }] }], hasDefaultSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultSlot", required: false }] }], hasSuffixSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSuffixSlot", required: false }] }] } });
 
 class ToastService {
     overlay;
@@ -7358,7 +7418,7 @@ class NeuralFileUploaderComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }, { kind: "component", type: NeuralErrorMessageComponent, selector: "neural-error-message", inputs: ["message"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }, { kind: "component", type: NeuralErrorMessageComponent, selector: "neural-error-message", inputs: ["message"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFileUploaderComponent, decorators: [{
             type: Component,
@@ -8779,13 +8839,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         }] });
 
 class NeuralPageHeaderComponent {
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: NeuralPageHeaderComponent, isStandalone: true, selector: "neural-page-header", ngImport: i0, template: `
-    <header
-      class="z-10 flex min-h-12 flex-col justify-center border-b border-outline-gray-2 bg-surface-base px-3 sm:px-5"
-    >
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralPageHeaderComponent, isStandalone: true, selector: "neural-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <header class="z-10 flex min-h-[56px] flex-col justify-center border-b border-outline-gray-2 bg-surface-base px-4 sm:px-6">
       <div class="flex items-center justify-between">
-        <ng-content></ng-content>
+        
+        <!-- Left Side (Title & Slots) -->
+        <div class="flex items-center gap-3">
+          <ng-content select="[left]"></ng-content>
+          
+          <div class="flex flex-col">
+            @if (title()) {
+              <h2 class="text-base font-semibold text-ink-gray-9 tracking-tight">{{ title() }}</h2>
+            }
+            @if (subtitle()) {
+              <span class="text-xs text-ink-gray-5">{{ subtitle() }}</span>
+            }
+          </div>
+        </div>
+
+        <!-- Right Side (Actions & Slots) -->
+        <div class="flex items-center gap-2">
+          <ng-content select="[right]"></ng-content>
+        </div>
+
       </div>
     </header>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
@@ -8797,16 +8878,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     standalone: true,
                     imports: [CommonModule],
                     template: `
-    <header
-      class="z-10 flex min-h-12 flex-col justify-center border-b border-outline-gray-2 bg-surface-base px-3 sm:px-5"
-    >
+    <header class="z-10 flex min-h-[56px] flex-col justify-center border-b border-outline-gray-2 bg-surface-base px-4 sm:px-6">
       <div class="flex items-center justify-between">
-        <ng-content></ng-content>
+        
+        <!-- Left Side (Title & Slots) -->
+        <div class="flex items-center gap-3">
+          <ng-content select="[left]"></ng-content>
+          
+          <div class="flex flex-col">
+            @if (title()) {
+              <h2 class="text-base font-semibold text-ink-gray-9 tracking-tight">{{ title() }}</h2>
+            }
+            @if (subtitle()) {
+              <span class="text-xs text-ink-gray-5">{{ subtitle() }}</span>
+            }
+          </div>
+        </div>
+
+        <!-- Right Side (Actions & Slots) -->
+        <div class="flex items-center gap-2">
+          <ng-content select="[right]"></ng-content>
+        </div>
+
       </div>
     </header>
   `
                 }]
-        }] });
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }] } });
 
 class NeuralRailComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralRailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -12327,7 +12425,7 @@ class NeuralListViewComponent {
         @if (rows().length) {
           @for (row of rows(); track row[rowKey()]) {
             <div
-              class="flex border-b border-outline-gray-1 hover:bg-surface-gray-1 transition-colors duration-100 cursor-pointer"
+              class="flex border-b border-outline-gray-1 hover:bg-surface-gray-2 transition-colors duration-100 cursor-pointer"
               [style.height.px]="resolvedOptions().rowHeight || 40"
               [class.bg-surface-gray-2]="isSelected(row)"
               (click)="onRowClick(row)"
@@ -12336,7 +12434,7 @@ class NeuralListViewComponent {
                 <div class="flex w-9 shrink-0 items-center justify-center p-2">
                   <input
                     type="checkbox"
-                    class="rounded border-outline-gray-3"
+                    class="form-checkbox"
                     [checked]="isSelected(row)"
                     (change)="$event.stopPropagation(); toggleRow(row)"
                   />
@@ -12428,7 +12526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         @if (rows().length) {
           @for (row of rows(); track row[rowKey()]) {
             <div
-              class="flex border-b border-outline-gray-1 hover:bg-surface-gray-1 transition-colors duration-100 cursor-pointer"
+              class="flex border-b border-outline-gray-1 hover:bg-surface-gray-2 transition-colors duration-100 cursor-pointer"
               [style.height.px]="resolvedOptions().rowHeight || 40"
               [class.bg-surface-gray-2]="isSelected(row)"
               (click)="onRowClick(row)"
@@ -12437,7 +12535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 <div class="flex w-9 shrink-0 items-center justify-center p-2">
                   <input
                     type="checkbox"
-                    class="rounded border-outline-gray-3"
+                    class="form-checkbox"
                     [checked]="isSelected(row)"
                     (change)="$event.stopPropagation(); toggleRow(row)"
                   />