orbiq-neural-ui-kit 1.1.31 → 1.1.33

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

@@ -490,7 +490,7 @@ class NeuralButtonComponent {
         const t = this.theme();
         const s = this.size();
         const solidClasses = {
-            gray: 'text-ink-base bg-surface-gray-10 hover:bg-surface-gray-9 active:bg-surface-gray-8',
+            gray: 'text-white bg-gray-800 hover:bg-gray-900 active:bg-surface-gray-8',
             blue: 'text-ink-base bg-surface-blue-6 hover:bg-surface-blue-7 active:bg-surface-blue-8',
             green: 'text-ink-base bg-surface-green-7 hover:bg-surface-green-8 active:bg-surface-green-9',
             red: 'text-ink-base dark:text-ink-red-9 bg-surface-red-7 hover:bg-surface-red-8 active:bg-surface-red-9',
@@ -576,11 +576,11 @@ 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 }, 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: `
+    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" }, host: { styleAttribute: "display: inline-block" }, ngImport: i0, template: `
     <button
       [type]="type()"
       [disabled]="isDisabled()"
-      [class]="computedClasses()"
+      [class]="'w-full ' + computedClasses()"
       (click)="onClick($event)"
       [attr.aria-busy]="loading() ? 'true' : null"
     >
@@ -619,11 +619,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     selector: 'neural-button',
                     standalone: true,
                     imports: [CommonModule, NeuralIconComponent],
+                    host: { style: 'display: inline-block' },
                     template: `
     <button
       [type]="type()"
       [disabled]="isDisabled()"
-      [class]="computedClasses()"
+      [class]="'w-full ' + computedClasses()"
       (click)="onClick($event)"
       [attr.aria-busy]="loading() ? 'true' : null"
     >
@@ -8271,8 +8272,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             }] } });
 
 class NeuralDialogComponent {
-    dialog;
-    viewContainerRef;
     // ── Public API (sin cambios de compatibilidad) ──────────────────────────────
     openModel = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "openModel" }] : /* istanbul ignore next */ []));
@@ -8296,60 +8295,24 @@ class NeuralDialogComponent {
     ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
     bare = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bare" }] : /* istanbul ignore next */ []));
-    // Mantenidos por compatibilidad con el modo bare=false aunque ya no se usan en bare=true
     hasTitleSlot = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasTitleSlot" }] : /* istanbul ignore next */ []));
     hasActionsSlot = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasActionsSlot" }] : /* istanbul ignore next */ []));
     hasDefaultSlot = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasDefaultSlot" }] : /* istanbul ignore next */ []));
-    dialogTemplate;
-    dialogRef = null;
     internalActionsState = {};
-    constructor(dialog, viewContainerRef) {
-        this.dialog = dialog;
-        this.viewContainerRef = viewContainerRef;
+    constructor() {
         effect(() => {
-            const isOpen = this.openModel();
-            // El CDK Portal SOLO se gestiona en modo bare=false.
-            // En bare=true, el @if del template reacciona al signal directamente.
-            if (!this.bare()) {
-                if (isOpen && !this.dialogRef && this.dialogTemplate) {
-                    this.openDialog();
-                }
-                else if (!isOpen && this.dialogRef) {
-                    this.dialogRef.close();
-                    this.dialogRef = null;
-                }
-            }
-        });
-    }
-    openDialog() {
-        this.dialogRef = this.dialog.open(this.dialogTemplate, {
-            disableClose: !this.dismissible(),
-            backdropClass: 'bg-black-overlay-200',
-            panelClass: ['w-full', 'h-full', 'bg-transparent', 'shadow-none'],
-            hasBackdrop: true,
-            viewContainerRef: this.viewContainerRef,
-        });
-        this.dialogRef.closed.subscribe(() => {
-            this.dialogRef = null;
-            if (this.openModel()) {
-                this.openModel.set(false);
-            }
+            // Manejar foco y escape de forma nativa en el futuro si es necesario.
+            // El ngIf maneja el montaje y desmontaje.
         });
     }
-    /** Cierra el modal en modo bare=false (CDK) */
+    /** Cierra el modal */
     close() {
-        if (this.bare()) {
-            // bare=true: simplemente cerramos el signal
-            this.openModel.set(false);
-        }
-        else if (this.dialogRef) {
-            this.dialogRef.close();
-        }
+        this.openModel.set(false);
     }
-    /** Alias para cerrar desde el template bare=true (keydown.escape) */
+    /** Alias para cerrar desde el template */
     closeBare() {
         if (this.dismissible()) {
             this.openModel.set(false);
@@ -8359,15 +8322,13 @@ class NeuralDialogComponent {
         const target = event.target;
         const isOverlay = target.classList.contains('dialog-scroll-container') ||
             target.classList.contains('min-h-screen') ||
-            target.classList.contains('dialog-backdrop'); // clic en backdrop manual (bare=true)
+            target.classList.contains('dialog-backdrop');
         if (isOverlay && this.dismissible()) {
             this.close();
         }
     }
     ngOnDestroy() {
-        if (this.dialogRef) {
-            this.dialogRef.close();
-        }
+        this.close();
     }
     // ── Computed ────────────────────────────────────────────────────────────────
     sizeClass = computed(() => {
@@ -8438,16 +8399,6 @@ class NeuralDialogComponent {
         return pt ? { paddingTop: pt } : {};
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dialogPositionStyles" }] : /* istanbul ignore next */ []));
-    showHeader = computed(() => {
-        if (this.bare())
-            return false;
-        if (this.hasTitleSlot())
-            return true;
-        if (this.title())
-            return true;
-        return false;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
     reactiveActions = computed(() => {
         if (this.bare())
             return [];
@@ -8475,283 +8426,150 @@ class NeuralDialogComponent {
             this.internalActionsState[action.label] = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, deps: [{ token: i1$3.Dialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDialogComponent, isStandalone: true, selector: "neural-dialog", inputs: { openModel: { classPropertyName: "openModel", publicName: "openModel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, paddingTop: { classPropertyName: "paddingTop", publicName: "paddingTop", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, bare: { classPropertyName: "bare", publicName: "bare", isSignal: true, isRequired: false, transformFunction: null }, hasTitleSlot: { classPropertyName: "hasTitleSlot", publicName: "hasTitleSlot", isSignal: true, isRequired: false, transformFunction: null }, hasActionsSlot: { classPropertyName: "hasActionsSlot", publicName: "hasActionsSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDefaultSlot: { classPropertyName: "hasDefaultSlot", publicName: "hasDefaultSlot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModel: "openModelChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: `
-    <!--
-      MODO bare=true: Renderizado directo con @if.
-      Angular mantiene el árbol de vistas del componente padre, lo que permite que
-      <ng-content> proyecte correctamente los nodos del consumidor.
-      NOTA: El CDK Dialog Portal crea una EmbeddedView desconectada donde <ng-content>
-      no recibe proyección, resultando en height:0. Este modo evita ese bug.
-    -->
-    @if (bare() && openModel()) {
-      <div
-        class="fixed inset-0 z-[1000] overflow-y-auto dialog-scroll-container"
-        (click)="onContainerClick($event)"
-        (keydown.escape)="closeBare()"
-        tabindex="-1"
-      >
-        <!-- Backdrop manual con transición sincronizada -->
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDialogComponent, isStandalone: true, selector: "neural-dialog", inputs: { openModel: { classPropertyName: "openModel", publicName: "openModel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, paddingTop: { classPropertyName: "paddingTop", publicName: "paddingTop", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, bare: { classPropertyName: "bare", publicName: "bare", isSignal: true, isRequired: false, transformFunction: null }, hasTitleSlot: { classPropertyName: "hasTitleSlot", publicName: "hasTitleSlot", isSignal: true, isRequired: false, transformFunction: null }, hasActionsSlot: { classPropertyName: "hasActionsSlot", publicName: "hasActionsSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDefaultSlot: { classPropertyName: "hasDefaultSlot", publicName: "hasDefaultSlot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModel: "openModelChange" }, ngImport: i0, template: `
+    @if (openModel()) {
+      <div class="fixed inset-0 z-[1000] overflow-y-auto dialog-scroll-container" (click)="onContainerClick($event)" (keydown.escape)="closeBare()" tabindex="-1">
         <div class="fixed inset-0 bg-black-overlay-200 transition-opacity duration-150 dialog-backdrop"></div>
+        
+        <div class="relative flex min-h-screen flex-col items-center px-4 py-4 text-center" [class]="dialogPositionClasses()" [style]="dialogPositionStyles()">
+          <div class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none" [class]="sizeClass()">
+            
+            <ng-template #defaultContent>
+              <ng-content></ng-content>
+            </ng-template>
 
-        <!-- Contenedor posicionado -->
-        <div
-          class="relative flex min-h-screen flex-col items-center px-4 py-4 text-center"
-          [class]="dialogPositionClasses()"
-          [style]="dialogPositionStyles()"
-        >
-          <div
-            class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
-            [class]="sizeClass()"
-          >
-            <!-- ng-content proyecta correctamente aquí porque estamos en el árbol de vistas del padre -->
-            <ng-content></ng-content>
-          </div>
-        </div>
-      </div>
-    }
-
-    <!--
-      MODO bare=false: CDK Dialog Portal.
-      No usa <ng-content> — el contenido se genera desde @Input() (title, message, actions).
-      El CDK Portal funciona correctamente aquí porque no hay proyección de nodos externos.
-    -->
-    @if (!bare()) {
-      <ng-template #dialogTemplate>
-        <div
-          class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container"
-          (click)="onContainerClick($event)"
-        >
-          <div
-            class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
-            [class]="dialogPositionClasses()"
-            [style]="dialogPositionStyles()"
-          >
-            <div
-              class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
-              [class]="sizeClass()"
-            >
+            @if (bare()) {
+              <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
+            } @else {
+              <!-- Diseño estándar con Header y Body -->
               <div class="bg-surface-elevation-1 px-4 pb-6 pt-5 sm:px-6">
                 <div class="flex">
-                  <div class="w-full flex-1">
-                    @if (showHeader()) {
-                      <div class="mb-6 flex items-center justify-between">
-                        <div class="flex items-center space-x-2 flex-1">
-                          @if (icon()) {
-                            <div
-                              class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full"
-                              [class]="dialogIconBgClasses()"
-                            >
-                              <span [class]="iconName() + ' size-4 ' + dialogIconClasses()" aria-hidden="true"></span>
-                            </div>
-                          }
-                          <header class="flex-1">
-                            @if (title()) {
-                              <h3 class="text-2xl-semibold leading-6 text-ink-gray-8">
-                                {{ title() }}
-                              </h3>
-                            }
-                          </header>
-                        </div>
-                        @if (showCloseButton()) {
-                          <neural-button variant="ghost" label="Close" (click)="close()">
-                            <span icon class="lucide-x size-4 text-ink-gray-9"></span>
-                          </neural-button>
-                        }
-                      </div>
-                    }
-
-                    @if (message()) {
-                      <p class="text-p-base text-ink-gray-7">
-                        {{ message() }}
-                      </p>
+                  @if (icon()) {
+                    <div class="mx-auto flex size-10 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:size-10" [class]="dialogIconBgClasses()">
+                      <span icon [class]="(iconName() || '') + ' size-5 ' + dialogIconClasses()"></span>
+                    </div>
+                  }
+                  <header class="flex-1" [class.ml-4]="icon()">
+                    @if (hasTitleSlot()) {
+                      <ng-content select="[title]"></ng-content>
+                    } @else if (title()) {
+                      <h3 class="text-2xl-semibold leading-6 text-ink-gray-8">{{ title() }}</h3>
                     }
-                  </div>
+                  </header>
+                  @if (showCloseButton()) {
+                    <neural-button variant="ghost" [iconOnly]="true" icon="lucide-x" (clicked)="closeBare()" class="-mt-2 -mr-2"></neural-button>
+                  }
+                </div>
+                
+                <div [class]="icon() ? 'ml-14 mt-2' : 'mt-3'">
+                  @if (hasDefaultSlot()) {
+                    <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
+                  } @else if (message()) {
+                    <p class="text-p-base text-ink-gray-7">{{ message() }}</p>
+                  }
                 </div>
               </div>
-
-              @if (reactiveActions().length) {
-                <div class="px-4 pb-7 pt-4 sm:px-6">
-                  <div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
-                    @for (action of reactiveActions(); track action.label) {
-                      <neural-button
-                        class="w-full sm:w-auto"
-                        [disabled]="action.disabled || false"
-                        [loading]="action.loading || false"
-                        [variant]="action.variant || 'solid'"
-                        [theme]="action.theme || 'gray'"
-                        (click)="onActionClick(action)"
-                      >
-                        {{ action.label }}
-                        @if (action.icon) {
-                          <span icon [class]="action.icon + ' size-4'"></span>
-                        }
-                      </neural-button>
-                    }
-                  </div>
+              
+              <!-- Acciones Footer -->
+              @if (reactiveActions().length || hasActionsSlot()) {
+                <div class="px-4 pb-7 pt-4 sm:px-6 bg-surface-gray-1 border-t border-outline-gray-2">
+                  @if (hasActionsSlot()) {
+                    <ng-content select="[actions]"></ng-content>
+                  } @else {
+                    <div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
+                      @for (action of reactiveActions(); track action.label) {
+                        <neural-button class="w-full sm:w-auto" [disabled]="action.disabled || false" [loading]="action.loading || false" [variant]="action.variant || 'solid'" [theme]="action.theme || 'gray'" (clicked)="onActionClick(action)">
+                          {{ action.label }}
+                          @if (action.icon) { <span icon [class]="action.icon + ' size-4'"></span> }
+                        </neural-button>
+                      }
+                    </div>
+                  }
                 </div>
               }
-
-              @if (showCloseButton() && !showHeader()) {
-                <neural-button
-                  class="absolute right-4 top-4 z-10"
-                  variant="ghost"
-                  label="Close"
-                  (click)="close()"
-                >
-                  <span icon class="lucide-x size-4 text-ink-gray-9"></span>
-                </neural-button>
-              }
-            </div>
+            }
           </div>
         </div>
-      </ng-template>
+      </div>
     }
-  `, 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"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.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: NeuralDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'neural-dialog',
                     standalone: true,
-                    imports: [CommonModule, DialogModule, NeuralButtonComponent],
+                    imports: [CommonModule, NeuralButtonComponent],
                     template: `
-    <!--
-      MODO bare=true: Renderizado directo con @if.
-      Angular mantiene el árbol de vistas del componente padre, lo que permite que
-      <ng-content> proyecte correctamente los nodos del consumidor.
-      NOTA: El CDK Dialog Portal crea una EmbeddedView desconectada donde <ng-content>
-      no recibe proyección, resultando en height:0. Este modo evita ese bug.
-    -->
-    @if (bare() && openModel()) {
-      <div
-        class="fixed inset-0 z-[1000] overflow-y-auto dialog-scroll-container"
-        (click)="onContainerClick($event)"
-        (keydown.escape)="closeBare()"
-        tabindex="-1"
-      >
-        <!-- Backdrop manual con transición sincronizada -->
+    @if (openModel()) {
+      <div class="fixed inset-0 z-[1000] overflow-y-auto dialog-scroll-container" (click)="onContainerClick($event)" (keydown.escape)="closeBare()" tabindex="-1">
         <div class="fixed inset-0 bg-black-overlay-200 transition-opacity duration-150 dialog-backdrop"></div>
+        
+        <div class="relative flex min-h-screen flex-col items-center px-4 py-4 text-center" [class]="dialogPositionClasses()" [style]="dialogPositionStyles()">
+          <div class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none" [class]="sizeClass()">
+            
+            <ng-template #defaultContent>
+              <ng-content></ng-content>
+            </ng-template>
 
-        <!-- Contenedor posicionado -->
-        <div
-          class="relative flex min-h-screen flex-col items-center px-4 py-4 text-center"
-          [class]="dialogPositionClasses()"
-          [style]="dialogPositionStyles()"
-        >
-          <div
-            class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
-            [class]="sizeClass()"
-          >
-            <!-- ng-content proyecta correctamente aquí porque estamos en el árbol de vistas del padre -->
-            <ng-content></ng-content>
-          </div>
-        </div>
-      </div>
-    }
-
-    <!--
-      MODO bare=false: CDK Dialog Portal.
-      No usa <ng-content> — el contenido se genera desde @Input() (title, message, actions).
-      El CDK Portal funciona correctamente aquí porque no hay proyección de nodos externos.
-    -->
-    @if (!bare()) {
-      <ng-template #dialogTemplate>
-        <div
-          class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container"
-          (click)="onContainerClick($event)"
-        >
-          <div
-            class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
-            [class]="dialogPositionClasses()"
-            [style]="dialogPositionStyles()"
-          >
-            <div
-              class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
-              [class]="sizeClass()"
-            >
+            @if (bare()) {
+              <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
+            } @else {
+              <!-- Diseño estándar con Header y Body -->
               <div class="bg-surface-elevation-1 px-4 pb-6 pt-5 sm:px-6">
                 <div class="flex">
-                  <div class="w-full flex-1">
-                    @if (showHeader()) {
-                      <div class="mb-6 flex items-center justify-between">
-                        <div class="flex items-center space-x-2 flex-1">
-                          @if (icon()) {
-                            <div
-                              class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full"
-                              [class]="dialogIconBgClasses()"
-                            >
-                              <span [class]="iconName() + ' size-4 ' + dialogIconClasses()" aria-hidden="true"></span>
-                            </div>
-                          }
-                          <header class="flex-1">
-                            @if (title()) {
-                              <h3 class="text-2xl-semibold leading-6 text-ink-gray-8">
-                                {{ title() }}
-                              </h3>
-                            }
-                          </header>
-                        </div>
-                        @if (showCloseButton()) {
-                          <neural-button variant="ghost" label="Close" (click)="close()">
-                            <span icon class="lucide-x size-4 text-ink-gray-9"></span>
-                          </neural-button>
-                        }
-                      </div>
-                    }
-
-                    @if (message()) {
-                      <p class="text-p-base text-ink-gray-7">
-                        {{ message() }}
-                      </p>
+                  @if (icon()) {
+                    <div class="mx-auto flex size-10 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:size-10" [class]="dialogIconBgClasses()">
+                      <span icon [class]="(iconName() || '') + ' size-5 ' + dialogIconClasses()"></span>
+                    </div>
+                  }
+                  <header class="flex-1" [class.ml-4]="icon()">
+                    @if (hasTitleSlot()) {
+                      <ng-content select="[title]"></ng-content>
+                    } @else if (title()) {
+                      <h3 class="text-2xl-semibold leading-6 text-ink-gray-8">{{ title() }}</h3>
                     }
-                  </div>
+                  </header>
+                  @if (showCloseButton()) {
+                    <neural-button variant="ghost" [iconOnly]="true" icon="lucide-x" (clicked)="closeBare()" class="-mt-2 -mr-2"></neural-button>
+                  }
+                </div>
+                
+                <div [class]="icon() ? 'ml-14 mt-2' : 'mt-3'">
+                  @if (hasDefaultSlot()) {
+                    <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
+                  } @else if (message()) {
+                    <p class="text-p-base text-ink-gray-7">{{ message() }}</p>
+                  }
                 </div>
               </div>
-
-              @if (reactiveActions().length) {
-                <div class="px-4 pb-7 pt-4 sm:px-6">
-                  <div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
-                    @for (action of reactiveActions(); track action.label) {
-                      <neural-button
-                        class="w-full sm:w-auto"
-                        [disabled]="action.disabled || false"
-                        [loading]="action.loading || false"
-                        [variant]="action.variant || 'solid'"
-                        [theme]="action.theme || 'gray'"
-                        (click)="onActionClick(action)"
-                      >
-                        {{ action.label }}
-                        @if (action.icon) {
-                          <span icon [class]="action.icon + ' size-4'"></span>
-                        }
-                      </neural-button>
-                    }
-                  </div>
+              
+              <!-- Acciones Footer -->
+              @if (reactiveActions().length || hasActionsSlot()) {
+                <div class="px-4 pb-7 pt-4 sm:px-6 bg-surface-gray-1 border-t border-outline-gray-2">
+                  @if (hasActionsSlot()) {
+                    <ng-content select="[actions]"></ng-content>
+                  } @else {
+                    <div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
+                      @for (action of reactiveActions(); track action.label) {
+                        <neural-button class="w-full sm:w-auto" [disabled]="action.disabled || false" [loading]="action.loading || false" [variant]="action.variant || 'solid'" [theme]="action.theme || 'gray'" (clicked)="onActionClick(action)">
+                          {{ action.label }}
+                          @if (action.icon) { <span icon [class]="action.icon + ' size-4'"></span> }
+                        </neural-button>
+                      }
+                    </div>
+                  }
                 </div>
               }
-
-              @if (showCloseButton() && !showHeader()) {
-                <neural-button
-                  class="absolute right-4 top-4 z-10"
-                  variant="ghost"
-                  label="Close"
-                  (click)="close()"
-                >
-                  <span icon class="lucide-x size-4 text-ink-gray-9"></span>
-                </neural-button>
-              }
-            </div>
+            }
           </div>
         </div>
-      </ng-template>
+      </div>
     }
   `
                 }]
-        }], ctorParameters: () => [{ type: i1$3.Dialog }, { type: i0.ViewContainerRef }], propDecorators: { openModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openModel", required: false }] }, { type: i0.Output, args: ["openModelChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], paddingTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingTop", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], bare: [{ type: i0.Input, args: [{ isSignal: true, alias: "bare", required: false }] }], hasTitleSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTitleSlot", required: false }] }], hasActionsSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActionsSlot", required: false }] }], hasDefaultSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultSlot", required: false }] }], dialogTemplate: [{
-                type: ViewChild,
-                args: ['dialogTemplate']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { openModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openModel", required: false }] }, { type: i0.Output, args: ["openModelChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], paddingTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingTop", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], bare: [{ type: i0.Input, args: [{ isSignal: true, alias: "bare", required: false }] }], hasTitleSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTitleSlot", required: false }] }], hasActionsSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActionsSlot", required: false }] }], hasDefaultSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultSlot", required: false }] }] } });
 
 class NeuralAwesomeBarComponent {
     searchInput;
@@ -8851,14 +8669,23 @@ class NeuralAwesomeBarComponent {
             (ngModelChange)="onQueryChange($event)"
             (keydown)="handleKeydown($event)"
           />
-          @if (query()) {
-            <button 
-              class="flex items-center justify-center size-6 rounded-md hover:bg-surface-gray-2 transition-colors ml-2"
-              (click)="clearQuery()"
-            >
-              <i class="lucide-x size-4 text-ink-gray-5"></i>
+          <div class="flex items-center gap-1 ml-3 text-ink-gray-4">
+            @if (query()) {
+              <button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7" (click)="clearQuery()">
+                <i class="lucide-delete size-4"></i>
+              </button>
+              <div class="w-px h-4 bg-outline-gray-2 mx-1"></div>
+            }
+            <button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7">
+              <i class="lucide-settings size-4"></i>
             </button>
-          }
+            <button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7">
+              <i class="lucide-maximize-2 size-4"></i>
+            </button>
+            <button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7" (click)="openModel.set(false)">
+              <i class="lucide-x size-4"></i>
+            </button>
+          </div>
         </div>
 
         <!-- Filters (Chips) -->
@@ -8910,12 +8737,17 @@ class NeuralAwesomeBarComponent {
             <!-- Empty State -->
             <div class="flex flex-col items-center justify-center py-16 px-4 text-center">
               <div class="size-16 rounded-full bg-surface-gray-2 flex items-center justify-center mb-4">
-                <i class="lucide-search size-8 text-ink-gray-4"></i>
+                <i class="lucide-clipboard-search size-8 text-ink-gray-4"></i>
               </div>
               <h3 class="text-base font-semibold text-ink-gray-9 mb-1">Buscar por cualquier cosa</h3>
-              <p class="text-sm text-ink-gray-5 max-w-sm">
-                Escribe para buscar a través de módulos, clientes, productos y configuraciones.
+              <p class="text-sm text-ink-gray-5 max-w-sm mb-4">
+                Use ampersand to match multiple terms (ej. Marie&amp;John)
               </p>
+              <div class="flex items-center gap-1.5 text-xs text-ink-gray-5">
+                <kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">⌘</kbd>
+                <kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">K</kbd>
+                <span>to open Awesome Bar</span>
+              </div>
             </div>
           } @else {
             <!-- Results Projection -->
@@ -8971,14 +8803,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             (ngModelChange)="onQueryChange($event)"
             (keydown)="handleKeydown($event)"
           />
-          @if (query()) {
-            <button 
-              class="flex items-center justify-center size-6 rounded-md hover:bg-surface-gray-2 transition-colors ml-2"
-              (click)="clearQuery()"
-            >
-              <i class="lucide-x size-4 text-ink-gray-5"></i>
+          <div class="flex items-center gap-1 ml-3 text-ink-gray-4">
+            @if (query()) {
+              <button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7" (click)="clearQuery()">
+                <i class="lucide-delete size-4"></i>
+              </button>
+              <div class="w-px h-4 bg-outline-gray-2 mx-1"></div>
+            }
+            <button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7">
+              <i class="lucide-settings size-4"></i>
             </button>
-          }
+            <button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7">
+              <i class="lucide-maximize-2 size-4"></i>
+            </button>
+            <button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7" (click)="openModel.set(false)">
+              <i class="lucide-x size-4"></i>
+            </button>
+          </div>
         </div>
 
         <!-- Filters (Chips) -->
@@ -9030,12 +8871,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             <!-- Empty State -->
             <div class="flex flex-col items-center justify-center py-16 px-4 text-center">
               <div class="size-16 rounded-full bg-surface-gray-2 flex items-center justify-center mb-4">
-                <i class="lucide-search size-8 text-ink-gray-4"></i>
+                <i class="lucide-clipboard-search size-8 text-ink-gray-4"></i>
               </div>
               <h3 class="text-base font-semibold text-ink-gray-9 mb-1">Buscar por cualquier cosa</h3>
-              <p class="text-sm text-ink-gray-5 max-w-sm">
-                Escribe para buscar a través de módulos, clientes, productos y configuraciones.
+              <p class="text-sm text-ink-gray-5 max-w-sm mb-4">
+                Use ampersand to match multiple terms (ej. Marie&amp;John)
               </p>
+              <div class="flex items-center gap-1.5 text-xs text-ink-gray-5">
+                <kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">⌘</kbd>
+                <kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">K</kbd>
+                <span>to open Awesome Bar</span>
+              </div>
             </div>
           } @else {
             <!-- Results Projection -->