@caribeng/ui 22.4.0 → 22.5.0

package/fesm2022/{caribeng-ui-caribe-tag-button.mjs → caribeng-ui-tag-button.mjs}

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * Tag-button de Caribe Design: píldora pulsable usada como filtro o chip de
+ * Tag-button: píldora pulsable usada como filtro o chip de
  * acción. Alterna su estado seleccionado y emite el cambio.
  *
  * @example
@@ -32,33 +32,33 @@ class CbTagButton {
         this.changed.emit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTagButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbTagButton, isStandalone: true, selector: "cb-tag-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", changed: "changed" }, host: { classAttribute: "cb-tag-button-host" }, ngImport: i0, template: `
-    <button
-      type="button"
-      class="cb-tag-button"
-      [class.cb-tag-button--selected]="selected()"
-      [disabled]="disabled()"
-      [attr.aria-pressed]="selected()"
-      (click)="toggle()"
-    >
-      <span class="cb-tag-button__label">{{ label() }}</span>
-    </button>
-  `, isInline: true, styles: [":host{display:inline-block}.cb-tag-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-1, .25rem);height:2rem;padding:0 var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:1;color:var(--cb-color-text, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #cbd5e1);border-radius:var(--cb-radius-full, 999px);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-100, #f1f5f9);border-color:var(--cb-color-border-strong, #94a3b8)}.cb-tag-button:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-tag-button--selected,.cb-tag-button--selected:hover:not(:disabled){color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857);border-color:var(--cb-color-primary-600, #047857)}.cb-tag-button:disabled{opacity:.55;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-tag-button{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-tag-button--selected,:host-context([data-theme=\"dark\"]) .cb-tag-button--selected:hover:not(:disabled){color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-500, #10b981);border-color:var(--cb-color-primary-500, #10b981)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbTagButton, isStandalone: true, selector: "cb-tag-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", changed: "changed" }, host: { classAttribute: "cb-tag-button-host" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="cb-tag-button"
+      [class.cb-tag-button--selected]="selected()"
+      [disabled]="disabled()"
+      [attr.aria-pressed]="selected()"
+      (click)="toggle()"
+    >
+      <span class="cb-tag-button__label">{{ label() }}</span>
+    </button>
+  `, isInline: true, styles: [":host{display:inline-block}.cb-tag-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-1, .25rem);height:2rem;padding:0 var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:1;color:var(--cb-color-text, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #cbd5e1);border-radius:var(--cb-radius-full, 999px);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-100, #f1f5f9);border-color:var(--cb-color-border-strong, #94a3b8)}.cb-tag-button:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-tag-button--selected,.cb-tag-button--selected:hover:not(:disabled){color:#fff;background-color:var(--cb-color-primary-700, #047857);border-color:var(--cb-color-primary-600, #047857)}.cb-tag-button:disabled{opacity:.55;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-tag-button{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-tag-button--selected,:host-context([data-theme=\"dark\"]) .cb-tag-button--selected:hover:not(:disabled){color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-500, #10b981);border-color:var(--cb-color-primary-500, #10b981)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTagButton, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-tag-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-tag-button-host' }, template: `
-    <button
-      type="button"
-      class="cb-tag-button"
-      [class.cb-tag-button--selected]="selected()"
-      [disabled]="disabled()"
-      [attr.aria-pressed]="selected()"
-      (click)="toggle()"
-    >
-      <span class="cb-tag-button__label">{{ label() }}</span>
-    </button>
-  `, styles: [":host{display:inline-block}.cb-tag-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-1, .25rem);height:2rem;padding:0 var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:1;color:var(--cb-color-text, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #cbd5e1);border-radius:var(--cb-radius-full, 999px);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-100, #f1f5f9);border-color:var(--cb-color-border-strong, #94a3b8)}.cb-tag-button:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-tag-button--selected,.cb-tag-button--selected:hover:not(:disabled){color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857);border-color:var(--cb-color-primary-600, #047857)}.cb-tag-button:disabled{opacity:.55;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-tag-button{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-tag-button--selected,:host-context([data-theme=\"dark\"]) .cb-tag-button--selected:hover:not(:disabled){color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-500, #10b981);border-color:var(--cb-color-primary-500, #10b981)}\n"] }]
+            args: [{ selector: 'cb-tag-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-tag-button-host' }, template: `
+    <button
+      type="button"
+      class="cb-tag-button"
+      [class.cb-tag-button--selected]="selected()"
+      [disabled]="disabled()"
+      [attr.aria-pressed]="selected()"
+      (click)="toggle()"
+    >
+      <span class="cb-tag-button__label">{{ label() }}</span>
+    </button>
+  `, styles: [":host{display:inline-block}.cb-tag-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-1, .25rem);height:2rem;padding:0 var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:1;color:var(--cb-color-text, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #cbd5e1);border-radius:var(--cb-radius-full, 999px);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-100, #f1f5f9);border-color:var(--cb-color-border-strong, #94a3b8)}.cb-tag-button:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-tag-button--selected,.cb-tag-button--selected:hover:not(:disabled){color:#fff;background-color:var(--cb-color-primary-700, #047857);border-color:var(--cb-color-primary-600, #047857)}.cb-tag-button:disabled{opacity:.55;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-tag-button{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-tag-button--selected,:host-context([data-theme=\"dark\"]) .cb-tag-button--selected:hover:not(:disabled){color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-500, #10b981);border-color:var(--cb-color-primary-500, #10b981)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**

package/fesm2022/caribeng-ui-tag.mjs

@@ -31,7 +31,7 @@ class CbTag {
       <span class="cb-tag__label">{{ value() }}</span>
     }
     <ng-content />
-  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:var(--cb-radius-sm);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);line-height:1.4;color:var(--_fg);background-color:var(--_bg)}:host(.cb-tag--rounded){border-radius:var(--cb-radius-full);padding-inline:.625rem}:host(.cb-tag--primary){--_bg: var(--cb-color-primary-100);--_fg: var(--cb-color-primary-500)}:host(.cb-tag--secondary){--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text-muted)}:host(.cb-tag--success){--_bg: var(--cb-color-success-100);--_fg: var(--cb-color-success-500)}:host(.cb-tag--info){--_bg: var(--cb-color-info-100);--_fg: var(--cb-color-info-500)}:host(.cb-tag--warning){--_bg: var(--cb-color-warning-100);--_fg: var(--cb-color-warning-500)}:host(.cb-tag--danger){--_bg: var(--cb-color-danger-100);--_fg: var(--cb-color-danger-500)}:host(.cb-tag--help){--_bg: var(--cb-color-help-100);--_fg: var(--cb-color-help-500)}:host(.cb-tag--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}:host-context([data-theme=\"dark\"]){--_bg: color-mix(in srgb, var(--_fg) 22%, transparent)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:var(--cb-radius-sm);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);line-height:1.4;color:var(--_fg);background-color:var(--_bg)}:host(.cb-tag--rounded){border-radius:var(--cb-radius-full);padding-inline:.625rem}:host(.cb-tag--primary){--_bg: var(--cb-color-primary-100);--_fg: var(--cb-color-primary-text)}:host(.cb-tag--secondary){--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text-muted)}:host(.cb-tag--success){--_bg: var(--cb-color-success-100);--_fg: var(--cb-color-success-text)}:host(.cb-tag--info){--_bg: var(--cb-color-info-100);--_fg: var(--cb-color-info-text)}:host(.cb-tag--warning){--_bg: var(--cb-color-warning-100);--_fg: var(--cb-color-warning-text)}:host(.cb-tag--danger){--_bg: var(--cb-color-danger-100);--_fg: var(--cb-color-danger-text)}:host(.cb-tag--help){--_bg: var(--cb-color-help-100);--_fg: var(--cb-color-help-text)}:host(.cb-tag--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}:host-context([data-theme=\"dark\"]){--_bg: color-mix(in srgb, var(--_fg) 22%, transparent)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTag, decorators: [{
             type: Component,
@@ -47,7 +47,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <span class="cb-tag__label">{{ value() }}</span>
     }
     <ng-content />
-  `, styles: [":host{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:var(--cb-radius-sm);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);line-height:1.4;color:var(--_fg);background-color:var(--_bg)}:host(.cb-tag--rounded){border-radius:var(--cb-radius-full);padding-inline:.625rem}:host(.cb-tag--primary){--_bg: var(--cb-color-primary-100);--_fg: var(--cb-color-primary-500)}:host(.cb-tag--secondary){--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text-muted)}:host(.cb-tag--success){--_bg: var(--cb-color-success-100);--_fg: var(--cb-color-success-500)}:host(.cb-tag--info){--_bg: var(--cb-color-info-100);--_fg: var(--cb-color-info-500)}:host(.cb-tag--warning){--_bg: var(--cb-color-warning-100);--_fg: var(--cb-color-warning-500)}:host(.cb-tag--danger){--_bg: var(--cb-color-danger-100);--_fg: var(--cb-color-danger-500)}:host(.cb-tag--help){--_bg: var(--cb-color-help-100);--_fg: var(--cb-color-help-500)}:host(.cb-tag--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}:host-context([data-theme=\"dark\"]){--_bg: color-mix(in srgb, var(--_fg) 22%, transparent)}\n"] }]
+  `, styles: [":host{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:var(--cb-radius-sm);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);line-height:1.4;color:var(--_fg);background-color:var(--_bg)}:host(.cb-tag--rounded){border-radius:var(--cb-radius-full);padding-inline:.625rem}:host(.cb-tag--primary){--_bg: var(--cb-color-primary-100);--_fg: var(--cb-color-primary-text)}:host(.cb-tag--secondary){--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text-muted)}:host(.cb-tag--success){--_bg: var(--cb-color-success-100);--_fg: var(--cb-color-success-text)}:host(.cb-tag--info){--_bg: var(--cb-color-info-100);--_fg: var(--cb-color-info-text)}:host(.cb-tag--warning){--_bg: var(--cb-color-warning-100);--_fg: var(--cb-color-warning-text)}:host(.cb-tag--danger){--_bg: var(--cb-color-danger-100);--_fg: var(--cb-color-danger-text)}:host(.cb-tag--help){--_bg: var(--cb-color-help-100);--_fg: var(--cb-color-help-text)}:host(.cb-tag--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}:host-context([data-theme=\"dark\"]){--_bg: color-mix(in srgb, var(--_fg) 22%, transparent)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-tieredmenu.mjs

@@ -155,7 +155,7 @@ class CbTieredMenu {
           @else {
             <li class="cb-tieredmenu__entry" role="none" [class.cb-tieredmenu__entry--open]="openIndex() === i">
               @if (item.items?.length) {
-                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" data-level="1" [attr.data-index]="i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(openIndex() === i ? null : i)">
+                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" data-level="1" [attr.data-index]="i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(i)">
                   @if (item.icon) { <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" /> }<span>{{ item.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                 </button>
                 @if (openIndex() === i) {
@@ -163,7 +163,7 @@ class CbTieredMenu {
                     @for (child of item.items; track $index; let j = $index) {
                       <li role="none">
                         @if (child.items?.length) {
-                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" data-level="2" [attr.data-index]="j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(openChildIndex() === j ? null : j)">
+                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" data-level="2" [attr.data-index]="j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(j)">
                             @if (child.icon) { <cb-icon [name]="child.icon" [size]="16" aria-hidden="true" /> }<span>{{ child.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                           </button>
                           @if (openChildIndex() === j) {
@@ -190,7 +190,7 @@ class CbTieredMenu {
         }
       </ul>
     </ng-template>
-  `, isInline: true, styles: [":host{display:inline-block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tieredmenu__trigger{min-height:2.5rem;padding:.5rem .875rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);color:inherit;font:inherit;cursor:pointer}.cb-tieredmenu__trigger:hover,.cb-tieredmenu__trigger:focus-visible{outline:none;border-color:var(--cb-color-primary)}.cb-tieredmenu__list,.cb-tieredmenu__submenu{min-width:13rem;margin:0;padding:.375rem;list-style:none;background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-lg)}.cb-tieredmenu__entry{position:relative}.cb-tieredmenu__item{display:flex;align-items:center;gap:.625rem;width:100%;min-height:2.25rem;padding:.5rem .625rem;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.cb-tieredmenu__item span{flex:1}.cb-tieredmenu__item:hover:not(:disabled),.cb-tieredmenu__item:focus-visible,.cb-tieredmenu__entry--open>.cb-tieredmenu__item{outline:none;background:var(--cb-color-surface)}.cb-tieredmenu__item:disabled{opacity:.5;cursor:default}.cb-tieredmenu__submenu{position:absolute;z-index:2;top:-.375rem;left:calc(100% + .25rem)}.cb-tieredmenu__submenu--third{z-index:3}.cb-tieredmenu__separator{height:1px;margin:.375rem .25rem;background:var(--cb-color-border)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:inline-block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tieredmenu__trigger{min-height:2.5rem;padding:.5rem .875rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);color:inherit;font:inherit;cursor:pointer}.cb-tieredmenu__trigger:hover,.cb-tieredmenu__trigger:focus-visible{outline:none;border-color:var(--cb-color-primary)}.cb-tieredmenu__list,.cb-tieredmenu__submenu{min-width:13rem;margin:0;padding:.375rem;list-style:none;background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-lg)}.cb-tieredmenu__entry{position:relative}.cb-tieredmenu__item{display:flex;align-items:center;gap:.625rem;width:100%;min-height:2.25rem;padding:.5rem .625rem;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.cb-tieredmenu__item span{flex:1}.cb-tieredmenu__item:hover:not(:disabled),.cb-tieredmenu__item:focus-visible,.cb-tieredmenu__entry--open>.cb-tieredmenu__item{outline:none;background:var(--cb-color-surface)}.cb-tieredmenu__item:disabled{opacity:.5;cursor:default}.cb-tieredmenu__submenu{position:absolute;z-index:2;top:-.375rem;left:calc(100% + .25rem)}.cb-tieredmenu__submenu--third{z-index:3}.cb-tieredmenu__separator{height:1px;margin:.375rem .25rem;background:var(--cb-color-border)}@media(max-width:40rem){.cb-tieredmenu__list{min-width:min(13rem,calc(100vw - 2rem));max-width:calc(100vw - 2rem)}.cb-tieredmenu__submenu{position:static;min-width:0;margin:0 0 0 .75rem;padding:0 0 0 .25rem;border:0;border-left:1px solid var(--cb-color-border);border-radius:0;box-shadow:none}.cb-tieredmenu__item[aria-expanded=true]>cb-icon:last-child{transform:rotate(90deg)}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTieredMenu, decorators: [{
             type: Component,
@@ -203,7 +203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           @else {
             <li class="cb-tieredmenu__entry" role="none" [class.cb-tieredmenu__entry--open]="openIndex() === i">
               @if (item.items?.length) {
-                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" data-level="1" [attr.data-index]="i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(openIndex() === i ? null : i)">
+                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" data-level="1" [attr.data-index]="i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(i)">
                   @if (item.icon) { <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" /> }<span>{{ item.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                 </button>
                 @if (openIndex() === i) {
@@ -211,7 +211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     @for (child of item.items; track $index; let j = $index) {
                       <li role="none">
                         @if (child.items?.length) {
-                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" data-level="2" [attr.data-index]="j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(openChildIndex() === j ? null : j)">
+                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" data-level="2" [attr.data-index]="j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(j)">
                             @if (child.icon) { <cb-icon [name]="child.icon" [size]="16" aria-hidden="true" /> }<span>{{ child.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                           </button>
                           @if (openChildIndex() === j) {
@@ -238,7 +238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       </ul>
     </ng-template>
-  `, styles: [":host{display:inline-block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tieredmenu__trigger{min-height:2.5rem;padding:.5rem .875rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);color:inherit;font:inherit;cursor:pointer}.cb-tieredmenu__trigger:hover,.cb-tieredmenu__trigger:focus-visible{outline:none;border-color:var(--cb-color-primary)}.cb-tieredmenu__list,.cb-tieredmenu__submenu{min-width:13rem;margin:0;padding:.375rem;list-style:none;background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-lg)}.cb-tieredmenu__entry{position:relative}.cb-tieredmenu__item{display:flex;align-items:center;gap:.625rem;width:100%;min-height:2.25rem;padding:.5rem .625rem;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.cb-tieredmenu__item span{flex:1}.cb-tieredmenu__item:hover:not(:disabled),.cb-tieredmenu__item:focus-visible,.cb-tieredmenu__entry--open>.cb-tieredmenu__item{outline:none;background:var(--cb-color-surface)}.cb-tieredmenu__item:disabled{opacity:.5;cursor:default}.cb-tieredmenu__submenu{position:absolute;z-index:2;top:-.375rem;left:calc(100% + .25rem)}.cb-tieredmenu__submenu--third{z-index:3}.cb-tieredmenu__separator{height:1px;margin:.375rem .25rem;background:var(--cb-color-border)}\n"] }]
+  `, styles: [":host{display:inline-block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tieredmenu__trigger{min-height:2.5rem;padding:.5rem .875rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);color:inherit;font:inherit;cursor:pointer}.cb-tieredmenu__trigger:hover,.cb-tieredmenu__trigger:focus-visible{outline:none;border-color:var(--cb-color-primary)}.cb-tieredmenu__list,.cb-tieredmenu__submenu{min-width:13rem;margin:0;padding:.375rem;list-style:none;background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-lg)}.cb-tieredmenu__entry{position:relative}.cb-tieredmenu__item{display:flex;align-items:center;gap:.625rem;width:100%;min-height:2.25rem;padding:.5rem .625rem;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.cb-tieredmenu__item span{flex:1}.cb-tieredmenu__item:hover:not(:disabled),.cb-tieredmenu__item:focus-visible,.cb-tieredmenu__entry--open>.cb-tieredmenu__item{outline:none;background:var(--cb-color-surface)}.cb-tieredmenu__item:disabled{opacity:.5;cursor:default}.cb-tieredmenu__submenu{position:absolute;z-index:2;top:-.375rem;left:calc(100% + .25rem)}.cb-tieredmenu__submenu--third{z-index:3}.cb-tieredmenu__separator{height:1px;margin:.375rem .25rem;background:var(--cb-color-border)}@media(max-width:40rem){.cb-tieredmenu__list{min-width:min(13rem,calc(100vw - 2rem));max-width:calc(100vw - 2rem)}.cb-tieredmenu__submenu{position:static;min-width:0;margin:0 0 0 .75rem;padding:0 0 0 .25rem;border:0;border-left:1px solid var(--cb-color-border);border-radius:0;box-shadow:none}.cb-tieredmenu__item[aria-expanded=true]>cb-icon:last-child{transform:rotate(90deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 /**

package/fesm2022/{caribeng-ui-caribe-tracker.mjs → caribeng-ui-tracker.mjs}

@@ -3,7 +3,7 @@ import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * Tracker de Caribe Design: indicador de progreso por pasos (stepper) con
+ * Tracker: indicador de progreso por pasos (stepper) con
  * marcadores completados, activo y pendientes conectados por líneas.
  *
  * @example
@@ -27,38 +27,38 @@ class CbTracker {
         return index < this.currentIndex() ? '✓' : index + 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTracker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTracker, isStandalone: true, selector: "cb-tracker", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, currentIndex: { classPropertyName: "currentIndex", publicName: "currentIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <ol class="cb-tracker" [attr.aria-label]="t().progress">
-      @for (step of steps(); track $index) {
-        <li
-          class="cb-tracker__step"
-          [class.cb-is-complete]="$index < currentIndex()"
-          [class.cb-is-current]="$index === currentIndex()"
-          [attr.aria-current]="ariaCurrent($index)"
-        >
-          <span class="cb-tracker__marker">{{ marker($index) }}</span>
-          <span class="cb-tracker__label">{{ step }}</span>
-        </li>
-      }
-    </ol>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTracker, isStandalone: true, selector: "cb-tracker", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, currentIndex: { classPropertyName: "currentIndex", publicName: "currentIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ol class="cb-tracker" [attr.aria-label]="t().progress">
+      @for (step of steps(); track $index) {
+        <li
+          class="cb-tracker__step"
+          [class.cb-is-complete]="$index < currentIndex()"
+          [class.cb-is-current]="$index === currentIndex()"
+          [attr.aria-current]="ariaCurrent($index)"
+        >
+          <span class="cb-tracker__marker">{{ marker($index) }}</span>
+          <span class="cb-tracker__label">{{ step }}</span>
+        </li>
+      }
+    </ol>
   `, isInline: true, styles: [":host{display:block;width:100%}.cb-tracker{display:flex;margin:0;padding:0;list-style:none;font-family:var(--cb-font-sans, inherit)}.cb-tracker__step{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .5rem);text-align:center}.cb-tracker__step:before{content:\"\";position:absolute;top:.9rem;right:50%;width:100%;height:2px;background-color:var(--cb-color-surface-300, #cbd5e1)}.cb-tracker__step:first-child:before{display:none}.cb-tracker__step.cb-is-complete:before,.cb-tracker__step.cb-is-current:before{background-color:var(--cb-color-primary-500, #10b981)}.cb-tracker__marker{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted, #64748b);background-color:var(--cb-color-surface-200, #e2e8f0);border:2px solid var(--cb-color-surface-300, #cbd5e1);border-radius:var(--cb-radius-full, 999px)}.cb-tracker__step.cb-is-complete .cb-tracker__marker{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-500, #10b981);border-color:var(--cb-color-primary-500, #10b981)}.cb-tracker__step.cb-is-current .cb-tracker__marker{color:var(--cb-color-primary-700, #065f46);background-color:var(--cb-color-surface-0, #ffffff);border-color:var(--cb-color-primary-500, #10b981)}.cb-tracker__label{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b);padding:0 var(--cb-space-1, .25rem)}.cb-tracker__step.cb-is-current .cb-tracker__label{color:var(--cb-color-text-strong, #0f172a);font-weight:var(--cb-font-weight-semibold, 600)}:host-context([data-theme=\"dark\"]) .cb-tracker__step:before{background-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-complete:before,:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-current:before{background-color:var(--cb-color-primary-500, #10b981)}:host-context([data-theme=\"dark\"]) .cb-tracker__marker{background-color:var(--cb-color-surface-700, #334155);border-color:var(--cb-color-surface-600, #475569);color:var(--cb-color-surface-300, #cbd5e1)}:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-current .cb-tracker__marker{background-color:var(--cb-color-surface-900, #0f172a)}:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-current .cb-tracker__label{color:var(--cb-color-surface-0, #f8fafc)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTracker, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-tracker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
-    <ol class="cb-tracker" [attr.aria-label]="t().progress">
-      @for (step of steps(); track $index) {
-        <li
-          class="cb-tracker__step"
-          [class.cb-is-complete]="$index < currentIndex()"
-          [class.cb-is-current]="$index === currentIndex()"
-          [attr.aria-current]="ariaCurrent($index)"
-        >
-          <span class="cb-tracker__marker">{{ marker($index) }}</span>
-          <span class="cb-tracker__label">{{ step }}</span>
-        </li>
-      }
-    </ol>
+            args: [{ selector: 'cb-tracker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
+    <ol class="cb-tracker" [attr.aria-label]="t().progress">
+      @for (step of steps(); track $index) {
+        <li
+          class="cb-tracker__step"
+          [class.cb-is-complete]="$index < currentIndex()"
+          [class.cb-is-current]="$index === currentIndex()"
+          [attr.aria-current]="ariaCurrent($index)"
+        >
+          <span class="cb-tracker__marker">{{ marker($index) }}</span>
+          <span class="cb-tracker__label">{{ step }}</span>
+        </li>
+      }
+    </ol>
   `, styles: [":host{display:block;width:100%}.cb-tracker{display:flex;margin:0;padding:0;list-style:none;font-family:var(--cb-font-sans, inherit)}.cb-tracker__step{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .5rem);text-align:center}.cb-tracker__step:before{content:\"\";position:absolute;top:.9rem;right:50%;width:100%;height:2px;background-color:var(--cb-color-surface-300, #cbd5e1)}.cb-tracker__step:first-child:before{display:none}.cb-tracker__step.cb-is-complete:before,.cb-tracker__step.cb-is-current:before{background-color:var(--cb-color-primary-500, #10b981)}.cb-tracker__marker{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted, #64748b);background-color:var(--cb-color-surface-200, #e2e8f0);border:2px solid var(--cb-color-surface-300, #cbd5e1);border-radius:var(--cb-radius-full, 999px)}.cb-tracker__step.cb-is-complete .cb-tracker__marker{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-500, #10b981);border-color:var(--cb-color-primary-500, #10b981)}.cb-tracker__step.cb-is-current .cb-tracker__marker{color:var(--cb-color-primary-700, #065f46);background-color:var(--cb-color-surface-0, #ffffff);border-color:var(--cb-color-primary-500, #10b981)}.cb-tracker__label{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b);padding:0 var(--cb-space-1, .25rem)}.cb-tracker__step.cb-is-current .cb-tracker__label{color:var(--cb-color-text-strong, #0f172a);font-weight:var(--cb-font-weight-semibold, 600)}:host-context([data-theme=\"dark\"]) .cb-tracker__step:before{background-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-complete:before,:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-current:before{background-color:var(--cb-color-primary-500, #10b981)}:host-context([data-theme=\"dark\"]) .cb-tracker__marker{background-color:var(--cb-color-surface-700, #334155);border-color:var(--cb-color-surface-600, #475569);color:var(--cb-color-surface-300, #cbd5e1)}:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-current .cb-tracker__marker{background-color:var(--cb-color-surface-900, #0f172a)}:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-current .cb-tracker__label{color:var(--cb-color-surface-0, #f8fafc)}\n"] }]
         }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], currentIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentIndex", required: false }] }] } });
 

package/fesm2022/{caribeng-ui-caribe-transaction-status.mjs → caribeng-ui-transaction-status.mjs}

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * Transaction-status de Caribe Design: indicador del resultado de una
+ * Transaction-status: indicador del resultado de una
  * transacción (éxito, advertencia, error, info).
  *
  * @example
@@ -30,20 +30,20 @@ class CbTransactionStatus {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTransactionStatus, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbTransactionStatus, isStandalone: true, selector: "cb-transaction-status", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="cb-txn cb-txn--{{ status() }}" role="status">
-      <span class="cb-txn__icon" aria-hidden="true">{{ glyph() }}</span>
-      <span class="cb-txn__label">{{ label() }}</span>
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbTransactionStatus, isStandalone: true, selector: "cb-transaction-status", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="cb-txn cb-txn--{{ status() }}" role="status">
+      <span class="cb-txn__icon" aria-hidden="true">{{ glyph() }}</span>
+      <span class="cb-txn__label">{{ label() }}</span>
+    </div>
   `, isInline: true, styles: [":host{display:inline-flex}.cb-txn{display:inline-flex;align-items:center;gap:var(--cb-space-2, .5rem);padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);border:1px solid transparent;border-radius:var(--cb-radius-full, 999px)}.cb-txn__icon{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:.75rem;font-weight:var(--cb-font-weight-bold, 700);color:#fff;border-radius:var(--cb-radius-full, 999px)}.cb-txn--success{color:var(--cb-color-success-700, #15803d);background-color:var(--cb-color-success-50, #f0fdf4);border-color:var(--cb-color-success-200, #bbf7d0)}.cb-txn--success .cb-txn__icon{background-color:var(--cb-color-success-500, #16a34a)}.cb-txn--warning{color:var(--cb-color-warning-700, #b45309);background-color:var(--cb-color-warning-50, #fffbeb);border-color:var(--cb-color-warning-200, #fde68a)}.cb-txn--warning .cb-txn__icon{background-color:var(--cb-color-warning-500, #d97706)}.cb-txn--error{color:var(--cb-color-danger-700, #b91c1c);background-color:var(--cb-color-danger-50, #fef2f2);border-color:var(--cb-color-danger-200, #fecaca)}.cb-txn--error .cb-txn__icon{background-color:var(--cb-color-danger-500, #dc2626)}.cb-txn--info{color:var(--cb-color-info-700, #1d4ed8);background-color:var(--cb-color-info-50, #eff6ff);border-color:var(--cb-color-info-200, #bfdbfe)}.cb-txn--info .cb-txn__icon{background-color:var(--cb-color-info-500, #2563eb)}:host-context([data-theme=\"dark\"]) .cb-txn{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569);color:var(--cb-color-surface-100, #f1f5f9)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTransactionStatus, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-transaction-status', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
-    <div class="cb-txn cb-txn--{{ status() }}" role="status">
-      <span class="cb-txn__icon" aria-hidden="true">{{ glyph() }}</span>
-      <span class="cb-txn__label">{{ label() }}</span>
-    </div>
+            args: [{ selector: 'cb-transaction-status', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
+    <div class="cb-txn cb-txn--{{ status() }}" role="status">
+      <span class="cb-txn__icon" aria-hidden="true">{{ glyph() }}</span>
+      <span class="cb-txn__label">{{ label() }}</span>
+    </div>
   `, styles: [":host{display:inline-flex}.cb-txn{display:inline-flex;align-items:center;gap:var(--cb-space-2, .5rem);padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);border:1px solid transparent;border-radius:var(--cb-radius-full, 999px)}.cb-txn__icon{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:.75rem;font-weight:var(--cb-font-weight-bold, 700);color:#fff;border-radius:var(--cb-radius-full, 999px)}.cb-txn--success{color:var(--cb-color-success-700, #15803d);background-color:var(--cb-color-success-50, #f0fdf4);border-color:var(--cb-color-success-200, #bbf7d0)}.cb-txn--success .cb-txn__icon{background-color:var(--cb-color-success-500, #16a34a)}.cb-txn--warning{color:var(--cb-color-warning-700, #b45309);background-color:var(--cb-color-warning-50, #fffbeb);border-color:var(--cb-color-warning-200, #fde68a)}.cb-txn--warning .cb-txn__icon{background-color:var(--cb-color-warning-500, #d97706)}.cb-txn--error{color:var(--cb-color-danger-700, #b91c1c);background-color:var(--cb-color-danger-50, #fef2f2);border-color:var(--cb-color-danger-200, #fecaca)}.cb-txn--error .cb-txn__icon{background-color:var(--cb-color-danger-500, #dc2626)}.cb-txn--info{color:var(--cb-color-info-700, #1d4ed8);background-color:var(--cb-color-info-50, #eff6ff);border-color:var(--cb-color-info-200, #bfdbfe)}.cb-txn--info .cb-txn__icon{background-color:var(--cb-color-info-500, #2563eb)}:host-context([data-theme=\"dark\"]) .cb-txn{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569);color:var(--cb-color-surface-100, #f1f5f9)}\n"] }]
         }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 

package/fesm2022/caribeng-ui-treeselect.mjs

@@ -1,5 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, model, signal, computed, viewChild, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, model, signal, computed, viewChild, inject, ElementRef, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CbIcon } from '@caribeng/ui/icon';
 import { injectCbTranslation, cbFormat, cbFieldState } from '@caribeng/ui';
@@ -59,6 +61,13 @@ class CbTreeSelect {
         this.onChange = () => { };
         this.onTouched = () => { };
         this.trigger = viewChild.required('trigger');
+        this.host = inject(ElementRef);
+        this.triggerWidth = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerWidth" }] : /* istanbul ignore next */ []));
+        this.positions = [
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ];
     }
     writeValue(val) {
         this.value.set(val ?? null);
@@ -72,9 +81,14 @@ class CbTreeSelect {
     setDisabledState(isDisabled) {
         this.cvaDisabled.set(isDisabled);
     }
+    /** Un clic fuera del panel lo cierra (el del disparador ya lo alterna). */
+    onOutsideClick(event) {
+        if (!this.host.nativeElement.contains(event.target))
+            this.open.set(false);
+    }
     /** Escape cierra el panel y devuelve el foco al disparador. */
     closeOnEscape(event) {
-        if (!this.open())
+        if (!this.open() || event.key !== 'Escape')
             return;
         event.preventDefault();
         this.open.set(false);
@@ -83,6 +97,7 @@ class CbTreeSelect {
     toggleOpen() {
         if (this.isDisabled())
             return;
+        this.triggerWidth.set(this.trigger().nativeElement.offsetWidth);
         this.open.set(!this.open());
     }
     isExpanded(key) {
@@ -144,7 +159,17 @@ class CbTreeSelect {
       <cb-icon name="chevron-down" [size]="16" aria-hidden="true" />
     </button>
 
-    @if (open()) {
+    <!-- El panel va en un overlay: no lo recorta un contenedor con overflow (tarjetas, diálogos, tablas). -->
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayWidth]="triggerWidth()"
+      [cdkConnectedOverlayPositions]="positions"
+      (overlayOutsideClick)="onOutsideClick($event)"
+      (overlayKeydown)="closeOnEscape($event)"
+      (detach)="open.set(false)"
+    >
       <div class="cb-tree-select__panel" role="tree">
         @for (item of visibleNodes(); track item.node.key) {
           <div
@@ -184,12 +209,12 @@ class CbTreeSelect {
           </div>
         }
       </div>
-    }
-  `, isInline: true, styles: [":host{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-tree-select__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-tree-select__label.cb-is-placeholder{color:var(--cb-color-text-muted)}.cb-tree-select__panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;max-height:240px;overflow:auto;padding:var(--cb-space-1);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);box-shadow:var(--cb-shadow-md, 0 8px 20px rgba(0, 0, 0, .12))}.cb-tree-select__item{display:flex;align-items:center;gap:.25rem;border-radius:var(--cb-radius-sm)}.cb-tree-select__item.cb-is-selected{background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}.cb-tree-select__expander{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-tree-select__spacer{display:inline-block;width:1.25rem}.cb-tree-select__node-btn{flex:1;display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .5rem;border:none;background:transparent;color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);text-align:left;cursor:pointer}.cb-tree-select__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    </ng-template>
+  `, isInline: true, styles: [":host{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-tree-select__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-tree-select__label.cb-is-placeholder{color:var(--cb-color-text-muted)}.cb-tree-select__panel{box-sizing:border-box;width:100%;max-height:240px;overflow:auto;padding:var(--cb-space-1);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);box-shadow:var(--cb-shadow-md, 0 8px 20px rgba(0, 0, 0, .12))}.cb-tree-select__item{display:flex;align-items:center;gap:.25rem;border-radius:var(--cb-radius-sm)}.cb-tree-select__item.cb-is-selected{background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}.cb-tree-select__expander{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-tree-select__spacer{display:inline-block;width:1.25rem}.cb-tree-select__node-btn{flex:1;display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .5rem;border:none;background:transparent;color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);text-align:left;cursor:pointer}.cb-tree-select__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTreeSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-tree-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], providers: [
+            args: [{ selector: 'cb-tree-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [OverlayModule, CbIcon], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CbTreeSelect),
@@ -220,7 +245,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <cb-icon name="chevron-down" [size]="16" aria-hidden="true" />
     </button>
 
-    @if (open()) {
+    <!-- El panel va en un overlay: no lo recorta un contenedor con overflow (tarjetas, diálogos, tablas). -->
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayWidth]="triggerWidth()"
+      [cdkConnectedOverlayPositions]="positions"
+      (overlayOutsideClick)="onOutsideClick($event)"
+      (overlayKeydown)="closeOnEscape($event)"
+      (detach)="open.set(false)"
+    >
       <div class="cb-tree-select__panel" role="tree">
         @for (item of visibleNodes(); track item.node.key) {
           <div
@@ -260,8 +295,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           </div>
         }
       </div>
-    }
-  `, styles: [":host{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-tree-select__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-tree-select__label.cb-is-placeholder{color:var(--cb-color-text-muted)}.cb-tree-select__panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;max-height:240px;overflow:auto;padding:var(--cb-space-1);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);box-shadow:var(--cb-shadow-md, 0 8px 20px rgba(0, 0, 0, .12))}.cb-tree-select__item{display:flex;align-items:center;gap:.25rem;border-radius:var(--cb-radius-sm)}.cb-tree-select__item.cb-is-selected{background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}.cb-tree-select__expander{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-tree-select__spacer{display:inline-block;width:1.25rem}.cb-tree-select__node-btn{flex:1;display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .5rem;border:none;background:transparent;color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);text-align:left;cursor:pointer}.cb-tree-select__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
+    </ng-template>
+  `, styles: [":host{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-tree-select__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-tree-select__label.cb-is-placeholder{color:var(--cb-color-text-muted)}.cb-tree-select__panel{box-sizing:border-box;width:100%;max-height:240px;overflow:auto;padding:var(--cb-space-1);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);box-shadow:var(--cb-shadow-md, 0 8px 20px rgba(0, 0, 0, .12))}.cb-tree-select__item{display:flex;align-items:center;gap:.25rem;border-radius:var(--cb-radius-sm)}.cb-tree-select__item.cb-is-selected{background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}.cb-tree-select__expander{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-tree-select__spacer{display:inline-block;width:1.25rem}.cb-tree-select__node-btn{flex:1;display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .5rem;border:none;background:transparent;color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);text-align:left;cursor:pointer}.cb-tree-select__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
         }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 /**