orbiq-neural-ui-kit 1.2.51 → 1.2.53

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

@@ -4616,7 +4616,7 @@ class NeuralDropdownComponent {
                 </button>
                 
                 <!-- Nested Panel -->
-                <div class="absolute left-full top-0 hidden group-hover:block pl-1.5 z-50">
+                <div class="absolute left-full top-0 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 delay-100 group-hover:delay-150 pl-1.5 z-50">
                   <neural-popover-panel class="block min-w-[180px]">
                     <ng-container *ngTemplateOutlet="menuList; context: { $implicit: option.children, popover: popover }"></ng-container>
                   </neural-popover-panel>
@@ -4721,7 +4721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 </button>
                 
                 <!-- Nested Panel -->
-                <div class="absolute left-full top-0 hidden group-hover:block pl-1.5 z-50">
+                <div class="absolute left-full top-0 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 delay-100 group-hover:delay-150 pl-1.5 z-50">
                   <neural-popover-panel class="block min-w-[180px]">
                     <ng-container *ngTemplateOutlet="menuList; context: { $implicit: option.children, popover: popover }"></ng-container>
                   </neural-popover-panel>
@@ -14490,7 +14490,7 @@ class NeuralSidebarItemComponent {
       <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="group/sidebar-item flex h-8 items-center rounded-4 transition-colors cursor-pointer mx-2"
         [class]="
           resolvedActive()
             ? 'bg-surface-gray-3 text-ink-gray-9 font-medium'
@@ -14504,7 +14504,7 @@ class NeuralSidebarItemComponent {
             #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"
+            class="flex h-full w-full items-center rounded-4 focus-visible:ring-0 focus-visible:focus-ring overflow-hidden transition-all duration-300 ease-in-out"
             (click)="handleClick($event)"
           >
             <ng-container *ngTemplateOutlet="itemContent"></ng-container>
@@ -14513,7 +14513,7 @@ class NeuralSidebarItemComponent {
           <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"
+            class="flex h-full w-full text-left items-center rounded-4 focus-visible:ring-0 focus-visible:focus-ring overflow-hidden transition-all duration-300 ease-in-out"
             (click)="handleClick($event)"
           >
             <ng-container *ngTemplateOutlet="itemContent"></ng-container>
@@ -14539,19 +14539,18 @@ class NeuralSidebarItemComponent {
 
     <!-- Content Template to avoid duplication -->
     <ng-template #itemContent>
-      <span class="grid shrink-0 place-items-center">
+      <!-- Icon Container (32px wide to center perfectly in a 32px collapsed container) -->
+      <span class="flex-none w-8 flex items-center justify-center h-full">
         <ng-content select="[prefix]"></ng-content>
         @if (!hasPrefixSlot() && icon()) {
           <span [class]="icon() + ' size-4.5'"></span>
         }
       </span>
+      
+      <!-- Text Container (Shrinks naturally with flex-1) -->
       <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'
-        "
+        class="flex-1 min-w-0 pl-1 transition-opacity duration-300 ease-in-out"
+        [class.opacity-0]="isCollapsed()"
       >
         <span class="flex min-w-0 items-center">
           <ng-content></ng-content>
@@ -14560,17 +14559,19 @@ class NeuralSidebarItemComponent {
           }
         </span>
       </span>
+      
+      <!-- Suffix Container -->
       <div
         data-slot="sidebar-item-suffix"
-        class="flex shrink-0 items-center transition-all ease-in-out"
-        [class]="isCollapsed() ? 'w-0 overflow-hidden opacity-0' : 'opacity-100'"
+        class="flex-none flex items-center transition-opacity duration-300 ease-in-out pr-2"
+        [class.opacity-0]="isCollapsed()"
       >
         <ng-content select="[suffix]"></ng-content>
         @if (!hasSuffixSlot() && suffix()) {
           <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="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>
         }
@@ -14589,7 +14590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       <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="group/sidebar-item flex h-8 items-center rounded-4 transition-colors cursor-pointer mx-2"
         [class]="
           resolvedActive()
             ? 'bg-surface-gray-3 text-ink-gray-9 font-medium'
@@ -14603,7 +14604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             #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"
+            class="flex h-full w-full items-center rounded-4 focus-visible:ring-0 focus-visible:focus-ring overflow-hidden transition-all duration-300 ease-in-out"
             (click)="handleClick($event)"
           >
             <ng-container *ngTemplateOutlet="itemContent"></ng-container>
@@ -14612,7 +14613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           <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"
+            class="flex h-full w-full text-left items-center rounded-4 focus-visible:ring-0 focus-visible:focus-ring overflow-hidden transition-all duration-300 ease-in-out"
             (click)="handleClick($event)"
           >
             <ng-container *ngTemplateOutlet="itemContent"></ng-container>
@@ -14638,19 +14639,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 
     <!-- Content Template to avoid duplication -->
     <ng-template #itemContent>
-      <span class="grid shrink-0 place-items-center">
+      <!-- Icon Container (32px wide to center perfectly in a 32px collapsed container) -->
+      <span class="flex-none w-8 flex items-center justify-center h-full">
         <ng-content select="[prefix]"></ng-content>
         @if (!hasPrefixSlot() && icon()) {
           <span [class]="icon() + ' size-4.5'"></span>
         }
       </span>
+      
+      <!-- Text Container (Shrinks naturally with flex-1) -->
       <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'
-        "
+        class="flex-1 min-w-0 pl-1 transition-opacity duration-300 ease-in-out"
+        [class.opacity-0]="isCollapsed()"
       >
         <span class="flex min-w-0 items-center">
           <ng-content></ng-content>
@@ -14659,17 +14659,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           }
         </span>
       </span>
+      
+      <!-- Suffix Container -->
       <div
         data-slot="sidebar-item-suffix"
-        class="flex shrink-0 items-center transition-all ease-in-out"
-        [class]="isCollapsed() ? 'w-0 overflow-hidden opacity-0' : 'opacity-100'"
+        class="flex-none flex items-center transition-opacity duration-300 ease-in-out pr-2"
+        [class.opacity-0]="isCollapsed()"
       >
         <ng-content select="[suffix]"></ng-content>
         @if (!hasSuffixSlot() && suffix()) {
           <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="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>
         }
@@ -14698,24 +14700,23 @@ class NeuralSidebarHeaderComponent {
     ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     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]="isCollapsed() ? 'block w-10 mx-auto' : 'block mx-2'" (openChange)="isOpen = $event">
+    <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 gap-2 p-2 rounded-6 transition-colors cursor-pointer w-full"
-        [class.duration-0]="isOpen"
-        [class.justify-center]="isCollapsed()"
-        [class.h-10]="isCollapsed()"
+        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'"
         [attr.aria-label]="title()"
         [title]="isCollapsed() ? title() : null"
       >
-        <!-- App Icon -->
-        <div class="flex items-center justify-center shrink-0 size-8 rounded-[10px]" [ngClass]="iconClass()">
-          <i [class]="appIcon()" class="size-4.5"></i>
+        <!-- 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>
         </div>
 
-        <!-- Texts (Hidden when collapsed) -->
-        <div class="flex flex-col flex-1 min-w-0 transition-all duration-200"
-          [class]="isCollapsed() ? 'w-0 opacity-0 hidden' : 'opacity-100'"
+        <!-- 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"
+          [class.opacity-0]="isCollapsed()"
         >
           <span class="text-[14px] font-medium text-ink-gray-9 truncate">{{ title() }}</span>
           @if (subtitle()) {
@@ -14723,9 +14724,9 @@ class NeuralSidebarHeaderComponent {
           }
         </div>
 
-        <!-- Chevron (Hidden when collapsed) -->
-        <div class="shrink-0 transition-all duration-200"
-          [class]="isCollapsed() ? 'w-0 opacity-0 hidden' : 'opacity-100'"
+        <!-- Chevron -->
+        <div class="flex-none w-8 flex items-center justify-center transition-opacity duration-300 ease-in-out"
+          [class.opacity-0]="isCollapsed()"
         >
           <i class="lucide-chevron-down size-4 text-ink-gray-5 transition-transform duration-200" [class.rotate-180]="isOpen"></i>
         </div>
@@ -14741,24 +14742,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     imports: [CommonModule, NeuralDropdownComponent],
                     host: { class: 'block w-full' },
                     template: `
-    <neural-dropdown class="block w-full" [options]="menuOptions()" [hasTriggerSlot]="true" align="start" [offset]="4" [triggerClass]="isCollapsed() ? 'block w-10 mx-auto' : 'block mx-2'" (openChange)="isOpen = $event">
+    <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 gap-2 p-2 rounded-6 transition-colors cursor-pointer w-full"
-        [class.duration-0]="isOpen"
-        [class.justify-center]="isCollapsed()"
-        [class.h-10]="isCollapsed()"
+        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'"
         [attr.aria-label]="title()"
         [title]="isCollapsed() ? title() : null"
       >
-        <!-- App Icon -->
-        <div class="flex items-center justify-center shrink-0 size-8 rounded-[10px]" [ngClass]="iconClass()">
-          <i [class]="appIcon()" class="size-4.5"></i>
+        <!-- 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>
         </div>
 
-        <!-- Texts (Hidden when collapsed) -->
-        <div class="flex flex-col flex-1 min-w-0 transition-all duration-200"
-          [class]="isCollapsed() ? 'w-0 opacity-0 hidden' : 'opacity-100'"
+        <!-- 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"
+          [class.opacity-0]="isCollapsed()"
         >
           <span class="text-[14px] font-medium text-ink-gray-9 truncate">{{ title() }}</span>
           @if (subtitle()) {
@@ -14766,9 +14766,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           }
         </div>
 
-        <!-- Chevron (Hidden when collapsed) -->
-        <div class="shrink-0 transition-all duration-200"
-          [class]="isCollapsed() ? 'w-0 opacity-0 hidden' : 'opacity-100'"
+        <!-- Chevron -->
+        <div class="flex-none w-8 flex items-center justify-center transition-opacity duration-300 ease-in-out"
+          [class.opacity-0]="isCollapsed()"
         >
           <i class="lucide-chevron-down size-4 text-ink-gray-5 transition-transform duration-200" [class.rotate-180]="isOpen"></i>
         </div>