@caribeng/ui 22.2.0 → 22.5.0

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

@@ -3,7 +3,7 @@ import { input, model, output, inject, ElementRef, computed, ViewEncapsulation,
 import { injectCbTranslation } from '@caribeng/ui';
 
 /**
- * Card-select de Caribe Design: tarjeta con buscador y lista de opciones
+ * Card-select: tarjeta con buscador y lista de opciones
  * seleccionables.
  *
  * @example
@@ -55,76 +55,76 @@ class CbCardSelect {
         options[target].focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCardSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCardSelect, isStandalone: true, selector: "cb-card-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChange: "selectionChange", query: "queryChange" }, ngImport: i0, template: `
-    <section class="cb-card-select">
-      <input
-        class="cb-card-select__search"
-        type="search"
-        [value]="query()"
-        (input)="query.set($any($event.target).value)"
-        [attr.aria-label]="t().filterOptions"
-        [placeholder]="t().search"
-      />
-      <div
-        class="cb-card-select__list"
-        role="listbox"
-        [attr.aria-label]="(label() ?? t().options)"
-        (keydown)="onListKeydown($event)"
-      >
-        @for (item of filtered(); track $index) {
-          <button
-            type="button"
-            class="cb-card-select__option"
-            role="option"
-            [class.cb-is-selected]="selected() === item"
-            [attr.aria-selected]="selected() === item"
-            [attr.tabindex]="$index === tabbable() ? 0 : -1"
-            (click)="choose(item)"
-          >
-            {{ item }}
-          </button>
-        } @empty {
-          <span class="cb-card-select__empty">{{ t().noResults }}</span>
-        }
-      </div>
-    </section>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCardSelect, isStandalone: true, selector: "cb-card-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChange: "selectionChange", query: "queryChange" }, ngImport: i0, template: `
+    <section class="cb-card-select">
+      <input
+        class="cb-card-select__search"
+        type="search"
+        [value]="query()"
+        (input)="query.set($any($event.target).value)"
+        [attr.aria-label]="t().filterOptions"
+        [placeholder]="t().search"
+      />
+      <div
+        class="cb-card-select__list"
+        role="listbox"
+        [attr.aria-label]="(label() ?? t().options)"
+        (keydown)="onListKeydown($event)"
+      >
+        @for (item of filtered(); track $index) {
+          <button
+            type="button"
+            class="cb-card-select__option"
+            role="option"
+            [class.cb-is-selected]="selected() === item"
+            [attr.aria-selected]="selected() === item"
+            [attr.tabindex]="$index === tabbable() ? 0 : -1"
+            (click)="choose(item)"
+          >
+            {{ item }}
+          </button>
+        } @empty {
+          <span class="cb-card-select__empty">{{ t().noResults }}</span>
+        }
+      </div>
+    </section>
   `, isInline: true, styles: [":host{display:block;width:100%;max-width:22rem}.cb-card-select{display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem);box-sizing:border-box;padding:var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem)}.cb-card-select__search{box-sizing:border-box;width:100%;padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font:inherit;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-50, #f8fafc);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-md, .5rem)}.cb-card-select__search:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:0}.cb-card-select__list{display:flex;flex-direction:column;gap:2px;max-height:12rem;overflow-y:auto}.cb-card-select__option{padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font:inherit;font-size:var(--cb-text-sm, .875rem);text-align:left;color:var(--cb-color-text, #334155);background:transparent;border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-card-select__option:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-card-select__option.cb-is-selected{color:var(--cb-color-primary-700, #065f46);background-color:var(--cb-color-primary-50, #ecfdf5);font-weight:var(--cb-font-weight-semibold, 600)}.cb-card-select__empty{padding:var(--cb-space-3, .75rem);font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted, #64748b);text-align:center}:host-context([data-theme=\"dark\"]) .cb-card-select{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-card-select__search{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-900, #0f172a);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-card-select__option{color:var(--cb-color-surface-100, #f1f5f9)}:host-context([data-theme=\"dark\"]) .cb-card-select__option:hover{background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-card-select__option.cb-is-selected{color:var(--cb-color-primary-200, #a7f3d0);background-color:color-mix(in srgb,var(--cb-color-primary-500, #10b981) 20%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCardSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-card-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
-    <section class="cb-card-select">
-      <input
-        class="cb-card-select__search"
-        type="search"
-        [value]="query()"
-        (input)="query.set($any($event.target).value)"
-        [attr.aria-label]="t().filterOptions"
-        [placeholder]="t().search"
-      />
-      <div
-        class="cb-card-select__list"
-        role="listbox"
-        [attr.aria-label]="(label() ?? t().options)"
-        (keydown)="onListKeydown($event)"
-      >
-        @for (item of filtered(); track $index) {
-          <button
-            type="button"
-            class="cb-card-select__option"
-            role="option"
-            [class.cb-is-selected]="selected() === item"
-            [attr.aria-selected]="selected() === item"
-            [attr.tabindex]="$index === tabbable() ? 0 : -1"
-            (click)="choose(item)"
-          >
-            {{ item }}
-          </button>
-        } @empty {
-          <span class="cb-card-select__empty">{{ t().noResults }}</span>
-        }
-      </div>
-    </section>
+            args: [{ selector: 'cb-card-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
+    <section class="cb-card-select">
+      <input
+        class="cb-card-select__search"
+        type="search"
+        [value]="query()"
+        (input)="query.set($any($event.target).value)"
+        [attr.aria-label]="t().filterOptions"
+        [placeholder]="t().search"
+      />
+      <div
+        class="cb-card-select__list"
+        role="listbox"
+        [attr.aria-label]="(label() ?? t().options)"
+        (keydown)="onListKeydown($event)"
+      >
+        @for (item of filtered(); track $index) {
+          <button
+            type="button"
+            class="cb-card-select__option"
+            role="option"
+            [class.cb-is-selected]="selected() === item"
+            [attr.aria-selected]="selected() === item"
+            [attr.tabindex]="$index === tabbable() ? 0 : -1"
+            (click)="choose(item)"
+          >
+            {{ item }}
+          </button>
+        } @empty {
+          <span class="cb-card-select__empty">{{ t().noResults }}</span>
+        }
+      </div>
+    </section>
   `, styles: [":host{display:block;width:100%;max-width:22rem}.cb-card-select{display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem);box-sizing:border-box;padding:var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem)}.cb-card-select__search{box-sizing:border-box;width:100%;padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font:inherit;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-50, #f8fafc);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-md, .5rem)}.cb-card-select__search:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:0}.cb-card-select__list{display:flex;flex-direction:column;gap:2px;max-height:12rem;overflow-y:auto}.cb-card-select__option{padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font:inherit;font-size:var(--cb-text-sm, .875rem);text-align:left;color:var(--cb-color-text, #334155);background:transparent;border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-card-select__option:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-card-select__option.cb-is-selected{color:var(--cb-color-primary-700, #065f46);background-color:var(--cb-color-primary-50, #ecfdf5);font-weight:var(--cb-font-weight-semibold, 600)}.cb-card-select__empty{padding:var(--cb-space-3, .75rem);font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted, #64748b);text-align:center}:host-context([data-theme=\"dark\"]) .cb-card-select{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-card-select__search{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-900, #0f172a);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-card-select__option{color:var(--cb-color-surface-100, #f1f5f9)}:host-context([data-theme=\"dark\"]) .cb-card-select__option:hover{background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-card-select__option.cb-is-selected{color:var(--cb-color-primary-200, #a7f3d0);background-color:color-mix(in srgb,var(--cb-color-primary-500, #10b981) 20%,transparent)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }] } });
 

package/fesm2022/caribeng-ui-carousel.mjs

@@ -134,7 +134,7 @@ class CbCarousel {
         }
       </div>
     }
-  `, isInline: true, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-carousel__Stage{display:flex;align-items:center;gap:var(--cb-space-3)}.cb-carousel__viewport{flex:1;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);overflow:hidden}.cb-carousel__slide{padding:var(--cb-space-4)}.cb-carousel__img{width:100%;max-height:180px;object-fit:cover;border-radius:var(--cb-radius-md);margin-bottom:var(--cb-space-3)}.cb-carousel__badge{display:inline-block;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--cb-color-primary-500) 15%,transparent);color:var(--cb-color-primary-500);font-size:.75rem;font-weight:var(--cb-font-semibold);margin-bottom:.375rem}.cb-carousel__title{margin:0 0 .25rem;font-size:var(--cb-text-base);font-weight:var(--cb-font-semibold)}.cb-carousel__desc{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-carousel__nav{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:999px;background:var(--cb-color-surface);color:var(--cb-color-text);cursor:pointer}.cb-carousel__indicators{display:flex;justify-content:center;gap:.5rem;margin-top:var(--cb-space-3)}.cb-carousel__dot{width:.55rem;height:.55rem;padding:0;border:none;border-radius:999px;background:var(--cb-color-border);cursor:pointer}.cb-carousel__dot.cb-is-active{width:1.4rem;background:var(--cb-color-primary-500)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-carousel__Stage{display:flex;align-items:center;gap:var(--cb-space-3)}.cb-carousel__viewport{flex:1;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);overflow:hidden}.cb-carousel__slide{padding:var(--cb-space-4)}.cb-carousel__img{width:100%;max-height:180px;object-fit:cover;border-radius:var(--cb-radius-md);margin-bottom:var(--cb-space-3)}.cb-carousel__badge{display:inline-block;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--cb-color-primary-500) 15%,transparent);color:var(--cb-color-primary-text);font-size:.75rem;font-weight:var(--cb-font-semibold);margin-bottom:.375rem}.cb-carousel__title{margin:0 0 .25rem;font-size:var(--cb-text-base);font-weight:var(--cb-font-semibold)}.cb-carousel__desc{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-carousel__nav{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:999px;background:var(--cb-color-surface);color:var(--cb-color-text);cursor:pointer}.cb-carousel__indicators{display:flex;justify-content:center;gap:.5rem;margin-top:var(--cb-space-3)}.cb-carousel__dot{width:.55rem;height:.55rem;padding:0;border:none;border-radius:999px;background:var(--cb-color-border);cursor:pointer}.cb-carousel__dot.cb-is-active{width:1.4rem;background:var(--cb-color-primary-500)}\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: CbCarousel, decorators: [{
             type: Component,
@@ -208,7 +208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       </div>
     }
-  `, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-carousel__Stage{display:flex;align-items:center;gap:var(--cb-space-3)}.cb-carousel__viewport{flex:1;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);overflow:hidden}.cb-carousel__slide{padding:var(--cb-space-4)}.cb-carousel__img{width:100%;max-height:180px;object-fit:cover;border-radius:var(--cb-radius-md);margin-bottom:var(--cb-space-3)}.cb-carousel__badge{display:inline-block;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--cb-color-primary-500) 15%,transparent);color:var(--cb-color-primary-500);font-size:.75rem;font-weight:var(--cb-font-semibold);margin-bottom:.375rem}.cb-carousel__title{margin:0 0 .25rem;font-size:var(--cb-text-base);font-weight:var(--cb-font-semibold)}.cb-carousel__desc{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-carousel__nav{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:999px;background:var(--cb-color-surface);color:var(--cb-color-text);cursor:pointer}.cb-carousel__indicators{display:flex;justify-content:center;gap:.5rem;margin-top:var(--cb-space-3)}.cb-carousel__dot{width:.55rem;height:.55rem;padding:0;border:none;border-radius:999px;background:var(--cb-color-border);cursor:pointer}.cb-carousel__dot.cb-is-active{width:1.4rem;background:var(--cb-color-primary-500)}\n"] }]
+  `, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-carousel__Stage{display:flex;align-items:center;gap:var(--cb-space-3)}.cb-carousel__viewport{flex:1;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);overflow:hidden}.cb-carousel__slide{padding:var(--cb-space-4)}.cb-carousel__img{width:100%;max-height:180px;object-fit:cover;border-radius:var(--cb-radius-md);margin-bottom:var(--cb-space-3)}.cb-carousel__badge{display:inline-block;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--cb-color-primary-500) 15%,transparent);color:var(--cb-color-primary-text);font-size:.75rem;font-weight:var(--cb-font-semibold);margin-bottom:.375rem}.cb-carousel__title{margin:0 0 .25rem;font-size:var(--cb-text-base);font-weight:var(--cb-font-semibold)}.cb-carousel__desc{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-carousel__nav{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:999px;background:var(--cb-color-surface);color:var(--cb-color-text);cursor:pointer}.cb-carousel__indicators{display:flex;justify-content:center;gap:.5rem;margin-top:var(--cb-space-3)}.cb-carousel__dot{width:.55rem;height:.55rem;padding:0;border:none;border-radius:999px;background:var(--cb-color-border);cursor:pointer}.cb-carousel__dot.cb-is-active{width:1.4rem;background:var(--cb-color-primary-500)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], circular: [{ type: i0.Input, args: [{ isSignal: true, alias: "circular", required: false }] }], showNavigators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigators", required: false }] }], showIndicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicators", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }] } });
 
 /**

package/fesm2022/caribeng-ui-cascadeselect.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, cbFieldState } from '@caribeng/ui';
@@ -49,6 +51,14 @@ class CbCascadeSelect {
         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 },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+        ];
     }
     writeValue(val) {
         this.value.set(val ?? null);
@@ -62,9 +72,14 @@ class CbCascadeSelect {
     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);
@@ -73,6 +88,7 @@ class CbCascadeSelect {
     toggleOpen() {
         if (this.isDisabled())
             return;
+        this.triggerWidth.set(this.trigger().nativeElement.offsetWidth);
         this.open.set(!this.open());
     }
     onGroupClick(group) {
@@ -116,7 +132,17 @@ class CbCascadeSelect {
       <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()"
+      [cdkConnectedOverlayMinWidth]="triggerWidth()"
+      [cdkConnectedOverlayPositions]="positions"
+      (overlayOutsideClick)="onOutsideClick($event)"
+      (overlayKeydown)="closeOnEscape($event)"
+      (detach)="open.set(false)"
+    >
       <div class="cb-cascade-select__menus">
         <ul class="cb-cascade-select__list" role="listbox">
           @for (group of options(); track group.label) {
@@ -152,12 +178,12 @@ class CbCascadeSelect {
           </ul>
         }
       </div>
-    }
-  `, isInline: true, styles: [":host{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-cascade-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-cascade-select__label.cb-is-placeholder{color:var(--cb-color-text-muted)}.cb-cascade-select__menus{position:absolute;top:calc(100% + 4px);left:0;z-index:30;display:flex;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));overflow:hidden}.cb-cascade-select__list{list-style:none;margin:0;padding:var(--cb-space-1);min-width:150px;border-right:var(--cb-border-width) solid var(--cb-color-border)}.cb-cascade-select__list:last-child{border-right:none}.cb-cascade-select__option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:.4rem .6rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-cascade-select__option.cb-is-active,.cb-cascade-select__option.cb-is-selected{background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}.cb-cascade-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-cascade-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-cascade-select__label.cb-is-placeholder{color:var(--cb-color-text-muted)}.cb-cascade-select__menus{display:flex;max-width:calc(100vw - 1rem);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));overflow:hidden}.cb-cascade-select__list{list-style:none;margin:0;padding:var(--cb-space-1);min-width:min(150px,44vw);max-height:16rem;overflow-y:auto;border-right:var(--cb-border-width) solid var(--cb-color-border)}.cb-cascade-select__list:last-child{border-right:none}.cb-cascade-select__option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:.4rem .6rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-cascade-select__option.cb-is-active,.cb-cascade-select__option.cb-is-selected{background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}.cb-cascade-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: CbCascadeSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-cascade-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], providers: [
+            args: [{ selector: 'cb-cascade-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [OverlayModule, CbIcon], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CbCascadeSelect),
@@ -186,7 +212,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()"
+      [cdkConnectedOverlayMinWidth]="triggerWidth()"
+      [cdkConnectedOverlayPositions]="positions"
+      (overlayOutsideClick)="onOutsideClick($event)"
+      (overlayKeydown)="closeOnEscape($event)"
+      (detach)="open.set(false)"
+    >
       <div class="cb-cascade-select__menus">
         <ul class="cb-cascade-select__list" role="listbox">
           @for (group of options(); track group.label) {
@@ -222,8 +258,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           </ul>
         }
       </div>
-    }
-  `, styles: [":host{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-cascade-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-cascade-select__label.cb-is-placeholder{color:var(--cb-color-text-muted)}.cb-cascade-select__menus{position:absolute;top:calc(100% + 4px);left:0;z-index:30;display:flex;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));overflow:hidden}.cb-cascade-select__list{list-style:none;margin:0;padding:var(--cb-space-1);min-width:150px;border-right:var(--cb-border-width) solid var(--cb-color-border)}.cb-cascade-select__list:last-child{border-right:none}.cb-cascade-select__option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:.4rem .6rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-cascade-select__option.cb-is-active,.cb-cascade-select__option.cb-is-selected{background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}.cb-cascade-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-cascade-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-cascade-select__label.cb-is-placeholder{color:var(--cb-color-text-muted)}.cb-cascade-select__menus{display:flex;max-width:calc(100vw - 1rem);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));overflow:hidden}.cb-cascade-select__list{list-style:none;margin:0;padding:var(--cb-space-1);min-width:min(150px,44vw);max-height:16rem;overflow-y:auto;border-right:var(--cb-border-width) solid var(--cb-color-border)}.cb-cascade-select__list:last-child{border-right:none}.cb-cascade-select__option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:.4rem .6rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-cascade-select__option.cb-is-active,.cb-cascade-select__option.cb-is-selected{background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}.cb-cascade-select__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", 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 }] }] } });
 
 /**

package/fesm2022/caribeng-ui-chart.mjs

@@ -1,6 +1,6 @@
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, input, ChangeDetectionStrategy, Component, Directive, forwardRef, booleanAttribute, numberAttribute, output, contentChildren, viewChild, inject, ElementRef, computed, DestroyRef, afterNextRender, effect, untracked, ViewEncapsulation } from '@angular/core';
+import { signal, Injectable, input, ChangeDetectionStrategy, Component, Directive, forwardRef, booleanAttribute, numberAttribute, computed, output, contentChildren, viewChild, inject, ElementRef, DestroyRef, afterNextRender, effect, untracked, ViewEncapsulation } from '@angular/core';
 import { injectCbTranslation } from '@caribeng/ui';
 
 // Tipos públicos del gráfico y modelo interno de la escena que dibuja cada renderer.
@@ -1751,9 +1751,12 @@ class CbChart {
         /** Formato de los valores (ejes, tooltip y tabla). */
         this.valueFormat = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
-        /** Locale BCP 47 para el formato (por defecto, el del navegador). */
+        /** Locale BCP 47 para el formato (por defecto, el del idioma activo de CaribeNG: `intlLocale`). */
         this.locale = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        /** Locale efectivo: el input o, si no se indica, el del idioma activo. */
+        this.intlLocale = computed(() => this.locale() ?? this.t().intlLocale, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "intlLocale" }] : /* istanbul ignore next */ []));
         /** Valor mínimo del medidor (`gauge`). */
         this.min = input(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
@@ -1824,7 +1827,7 @@ class CbChart {
         ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
         this.numberFormat = computed(() => this.formatter(this.valueFormat()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "numberFormat" }] : /* istanbul ignore next */ []));
-        this.percentFormat = computed(() => new Intl.NumberFormat(this.locale(), { style: 'percent', maximumFractionDigits: 1 }).format, /* @ts-ignore */
+        this.percentFormat = computed(() => new Intl.NumberFormat(this.intlLocale(), { style: 'percent', maximumFractionDigits: 1 }).format, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "percentFormat" }] : /* istanbul ignore next */ []));
         /** Lo declarado en los hijos, como datos planos para el renderer. */
         this.composedSpec = computed(() => {
@@ -1894,7 +1897,7 @@ class CbChart {
                 bands: this.bands(),
                 format: this.numberFormat(),
                 percent: this.percentFormat(),
-                locale: this.locale(),
+                locale: this.intlLocale(),
                 text: { total: t.chartTotal, change: t.chartChange, open: t.chartOpen, high: t.chartHigh, low: t.chartLow, close: t.chartClose },
                 composed: this.composedSpec(),
             };
@@ -1977,7 +1980,7 @@ class CbChart {
         });
     }
     formatter(vf) {
-        return typeof vf === 'function' ? vf : new Intl.NumberFormat(this.locale(), vf ?? { maximumFractionDigits: 2 }).format;
+        return typeof vf === 'function' ? vf : new Intl.NumberFormat(this.intlLocale(), vf ?? { maximumFractionDigits: 2 }).format;
     }
     setWindow(window) {
         this.active.set(null);