orbiq-neural-ui-kit 1.2.57 → 1.2.59

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

@@ -14697,33 +14697,31 @@ class NeuralSidebarHeaderComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSidebarHeaderComponent, isStandalone: true, selector: "neural-sidebar-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, appIcon: { classPropertyName: "appIcon", publicName: "appIcon", isSignal: true, isRequired: true, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, menuOptions: { classPropertyName: "menuOptions", publicName: "menuOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block w-full" }, ngImport: i0, template: `
     <neural-dropdown class="block w-full" [options]="menuOptions()" [hasTriggerSlot]="true" align="start" [offset]="4" triggerClass="block mx-2" (openChange)="isOpen = $event">
       <div trigger
-        class="flex items-center h-10 rounded-6 transition-all duration-300 ease-in-out cursor-pointer overflow-hidden"
-        [ngClass]="isOpen && !isCollapsed() ? 'bg-surface-elevation-2 shadow-sm ring-1 ring-black/5' : 'hover:bg-surface-gray-2'"
+        class="flex items-center p-2 rounded-[20px] bg-surface-base transition-all duration-300 ease-in-out cursor-pointer overflow-hidden"
+        [ngClass]="isOpen && !isCollapsed() ? 'shadow-sm ring-1 ring-black/5' : 'hover:bg-surface-gray-2'"
         [attr.aria-label]="title()"
         [title]="isCollapsed() ? title() : null"
       >
-        <!-- App Icon Container (32px wide, centers icon exactly) -->
-        <div class="flex-none w-8 flex items-center justify-center shrink-0 h-full">
-          <div class="flex items-center justify-center size-8 rounded-[10px]" [ngClass]="iconClass()">
-            <i [class]="appIcon()" class="size-4.5"></i>
-          </div>
+        <!-- App Icon Container -->
+        <div class="flex-none flex items-center justify-center size-[48px] rounded-[14px] shrink-0" [ngClass]="iconClass()">
+          <i [class]="appIcon()" class="size-6"></i>
         </div>
 
-        <!-- Texts (Shrinks naturally with flex-1) -->
-        <div class="flex flex-col flex-1 min-w-0 pl-2 transition-opacity duration-300 ease-in-out"
+        <!-- Texts -->
+        <div class="flex flex-col flex-1 min-w-0 px-3 transition-opacity duration-300 ease-in-out"
           [class.opacity-0]="isCollapsed()"
         >
-          <span class="text-[14px] font-medium text-ink-gray-9 truncate">{{ title() }}</span>
+          <span class="text-[17px] font-medium text-ink-gray-9 truncate leading-tight">{{ title() }}</span>
           @if (subtitle()) {
-            <span class="text-xs text-ink-gray-5 truncate">{{ subtitle() }}</span>
+            <span class="text-[15px] text-ink-gray-5 truncate leading-tight mt-0.5">{{ subtitle() }}</span>
           }
         </div>
 
         <!-- Chevron -->
-        <div class="flex-none w-8 flex items-center justify-center transition-opacity duration-300 ease-in-out"
+        <div class="flex-none flex items-center justify-center size-8 rounded-[8px] border-[2.5px] border-blue-600 text-blue-600 transition-opacity duration-300 ease-in-out mr-1"
           [class.opacity-0]="isCollapsed()"
         >
-          <i class="lucide-chevron-down size-4 text-ink-gray-5 transition-transform duration-200" [class.rotate-180]="isOpen"></i>
+          <i class="lucide-chevron-down size-4 stroke-[2.5] transition-transform duration-200" [class.rotate-180]="isOpen"></i>
         </div>
       </div>
     </neural-dropdown>
@@ -14739,33 +14737,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     template: `
     <neural-dropdown class="block w-full" [options]="menuOptions()" [hasTriggerSlot]="true" align="start" [offset]="4" triggerClass="block mx-2" (openChange)="isOpen = $event">
       <div trigger
-        class="flex items-center h-10 rounded-6 transition-all duration-300 ease-in-out cursor-pointer overflow-hidden"
-        [ngClass]="isOpen && !isCollapsed() ? 'bg-surface-elevation-2 shadow-sm ring-1 ring-black/5' : 'hover:bg-surface-gray-2'"
+        class="flex items-center p-2 rounded-[20px] bg-surface-base transition-all duration-300 ease-in-out cursor-pointer overflow-hidden"
+        [ngClass]="isOpen && !isCollapsed() ? 'shadow-sm ring-1 ring-black/5' : 'hover:bg-surface-gray-2'"
         [attr.aria-label]="title()"
         [title]="isCollapsed() ? title() : null"
       >
-        <!-- App Icon Container (32px wide, centers icon exactly) -->
-        <div class="flex-none w-8 flex items-center justify-center shrink-0 h-full">
-          <div class="flex items-center justify-center size-8 rounded-[10px]" [ngClass]="iconClass()">
-            <i [class]="appIcon()" class="size-4.5"></i>
-          </div>
+        <!-- App Icon Container -->
+        <div class="flex-none flex items-center justify-center size-[48px] rounded-[14px] shrink-0" [ngClass]="iconClass()">
+          <i [class]="appIcon()" class="size-6"></i>
         </div>
 
-        <!-- Texts (Shrinks naturally with flex-1) -->
-        <div class="flex flex-col flex-1 min-w-0 pl-2 transition-opacity duration-300 ease-in-out"
+        <!-- Texts -->
+        <div class="flex flex-col flex-1 min-w-0 px-3 transition-opacity duration-300 ease-in-out"
           [class.opacity-0]="isCollapsed()"
         >
-          <span class="text-[14px] font-medium text-ink-gray-9 truncate">{{ title() }}</span>
+          <span class="text-[17px] font-medium text-ink-gray-9 truncate leading-tight">{{ title() }}</span>
           @if (subtitle()) {
-            <span class="text-xs text-ink-gray-5 truncate">{{ subtitle() }}</span>
+            <span class="text-[15px] text-ink-gray-5 truncate leading-tight mt-0.5">{{ subtitle() }}</span>
           }
         </div>
 
         <!-- Chevron -->
-        <div class="flex-none w-8 flex items-center justify-center transition-opacity duration-300 ease-in-out"
+        <div class="flex-none flex items-center justify-center size-8 rounded-[8px] border-[2.5px] border-blue-600 text-blue-600 transition-opacity duration-300 ease-in-out mr-1"
           [class.opacity-0]="isCollapsed()"
         >
-          <i class="lucide-chevron-down size-4 text-ink-gray-5 transition-transform duration-200" [class.rotate-180]="isOpen"></i>
+          <i class="lucide-chevron-down size-4 stroke-[2.5] transition-transform duration-200" [class.rotate-180]="isOpen"></i>
         </div>
       </div>
     </neural-dropdown>
@@ -14827,7 +14823,7 @@ class NeuralAppLauncherComponent {
       </span>
       
       <!-- We add a simple animation key to force re-render/animation on the grid when path changes -->
-      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4 animate-in fade-in slide-in-from-bottom-2 duration-200" [attr.data-level]="path().length">
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 content-start gap-4 p-4 min-h-[400px] animate-in fade-in slide-in-from-bottom-2 duration-200" [attr.data-level]="path().length">
         @for (module of currentModules(); track module.id) {
           <div 
             class="flex flex-col items-center justify-center p-4 rounded-xl border border-outline-gray-2 hover:shadow-md transition-all cursor-pointer bg-surface-base group" 
@@ -14865,7 +14861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       </span>
       
       <!-- We add a simple animation key to force re-render/animation on the grid when path changes -->
-      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4 animate-in fade-in slide-in-from-bottom-2 duration-200" [attr.data-level]="path().length">
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 content-start gap-4 p-4 min-h-[400px] animate-in fade-in slide-in-from-bottom-2 duration-200" [attr.data-level]="path().length">
         @for (module of currentModules(); track module.id) {
           <div 
             class="flex flex-col items-center justify-center p-4 rounded-xl border border-outline-gray-2 hover:shadow-md transition-all cursor-pointer bg-surface-base group"