orbiq-neural-ui-kit 0.0.3 → 0.0.5

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, output, computed, Component, 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';
@@ -1728,7 +1728,7 @@ class NeuralPopoverPanelComponent {
       data-slot="content-body"
       data-panel
       data-motion="instant"
-      class="overflow-hidden rounded-6 bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 will-change-[opacity]"
+      class="overflow-hidden rounded-6 bg-surface-elevation-2 shadow-2xl ring-1 ring-black/5 will-change-[opacity]"
     >
       <ng-content></ng-content>
     </div>
@@ -1744,7 +1744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       data-slot="content-body"
       data-panel
       data-motion="instant"
-      class="overflow-hidden rounded-6 bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 will-change-[opacity]"
+      class="overflow-hidden rounded-6 bg-surface-elevation-2 shadow-2xl ring-1 ring-black/5 will-change-[opacity]"
     >
       <ng-content></ng-content>
     </div>
@@ -5908,106 +5908,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 +6038,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 +6137,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;
@@ -8779,13 +8813,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 +8852,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 +12399,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 +12408,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 +12500,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 +12509,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)"
                   />