@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-empty.mjs

@@ -0,0 +1,80 @@
+import * as i0 from '@angular/core';
+import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
+
+/**
+ * Empty de CaribeNG: estado vacío con icono o imagen, mensaje y acciones
+ * opcionales (proyectadas). Úsalo cuando una lista, búsqueda o tabla no tiene
+ * datos.
+ *
+ * @example
+ * ```html
+ * <cb-empty title="Aún no tienes movimientos" description="Cuando hagas tu primera compra aparecerá aquí.">
+ *   <cb-button size="sm">Hacer una transferencia</cb-button>
+ * </cb-empty>
+ * ```
+ */
+class CbEmpty {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Mensaje principal. Por defecto, "Sin datos" del idioma activo. */
+        this.title = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Texto de apoyo opcional. */
+        this.description = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        /** Icono (se ignora si hay `image`). */
+        this.icon = input('folder', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Ilustración opcional (decorativa). */
+        this.image = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
+        /** `sm` para tablas, listas y paneles pequeños. */
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbEmpty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbEmpty, isStandalone: true, selector: "cb-empty", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-empty--sm": "size() === 'sm'" }, classAttribute: "cb-empty" }, ngImport: i0, template: `
+    @if (image()) {
+      <img class="cb-empty__image" [src]="image()" alt="" />
+    } @else {
+      <span class="cb-empty__icon" aria-hidden="true">
+        <cb-icon [name]="icon()" [size]="size() === 'sm' ? 22 : 32" />
+      </span>
+    }
+    <p class="cb-empty__title">{{ title() ?? t().noData }}</p>
+    @if (description()) {
+      <p class="cb-empty__description">{{ description() }}</p>
+    }
+    <div class="cb-empty__actions"><ng-content /></div>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .5rem);padding:var(--cb-space-8, 2rem) var(--cb-space-4, 1rem);text-align:center;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text)}:host(.cb-empty--sm){padding:var(--cb-space-4, 1rem);gap:var(--cb-space-1, .25rem)}.cb-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;margin-bottom:var(--cb-space-1, .25rem);color:var(--cb-color-text-muted);background-color:var(--cb-color-surface-subtle);border-radius:999px}:host(.cb-empty--sm) .cb-empty__icon{width:2.75rem;height:2.75rem}.cb-empty__image{max-width:10rem;max-height:8rem;margin-bottom:var(--cb-space-2, .5rem)}.cb-empty__title{margin:0;font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}:host(.cb-empty--sm) .cb-empty__title{font-size:var(--cb-text-sm, .875rem)}.cb-empty__description{max-width:28rem;margin:0;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted)}.cb-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-2, .5rem)}.cb-empty__actions:empty{display:none}\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: CbEmpty, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-empty', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-empty', '[class.cb-empty--sm]': "size() === 'sm'" }, template: `
+    @if (image()) {
+      <img class="cb-empty__image" [src]="image()" alt="" />
+    } @else {
+      <span class="cb-empty__icon" aria-hidden="true">
+        <cb-icon [name]="icon()" [size]="size() === 'sm' ? 22 : 32" />
+      </span>
+    }
+    <p class="cb-empty__title">{{ title() ?? t().noData }}</p>
+    @if (description()) {
+      <p class="cb-empty__description">{{ description() }}</p>
+    }
+    <div class="cb-empty__actions"><ng-content /></div>
+  `, styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .5rem);padding:var(--cb-space-8, 2rem) var(--cb-space-4, 1rem);text-align:center;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text)}:host(.cb-empty--sm){padding:var(--cb-space-4, 1rem);gap:var(--cb-space-1, .25rem)}.cb-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;margin-bottom:var(--cb-space-1, .25rem);color:var(--cb-color-text-muted);background-color:var(--cb-color-surface-subtle);border-radius:999px}:host(.cb-empty--sm) .cb-empty__icon{width:2.75rem;height:2.75rem}.cb-empty__image{max-width:10rem;max-height:8rem;margin-bottom:var(--cb-space-2, .5rem)}.cb-empty__title{margin:0;font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}:host(.cb-empty--sm) .cb-empty__title{font-size:var(--cb-text-sm, .875rem)}.cb-empty__description{max-width:28rem;margin:0;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted)}.cb-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-2, .5rem)}.cb-empty__actions:empty{display:none}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/empty
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbEmpty };

package/fesm2022/caribeng-ui-fieldset.mjs

@@ -42,7 +42,7 @@ class CbFieldset {
             type="button"
             class="cb-fieldset__toggler"
             [attr.aria-expanded]="!collapsed()"
-            [attr.aria-controls]="contentId"
+            [attr.aria-controls]="collapsed() ? null : contentId"
             (click)="toggle()"
           >
             <cb-icon
@@ -84,7 +84,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type="button"
             class="cb-fieldset__toggler"
             [attr.aria-expanded]="!collapsed()"
-            [attr.aria-controls]="contentId"
+            [attr.aria-controls]="collapsed() ? null : contentId"
             (click)="toggle()"
           >
             <cb-icon

package/fesm2022/caribeng-ui-file-card.mjs

@@ -1,20 +1,32 @@
 import * as i0 from '@angular/core';
-import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { viewChild, input, booleanAttribute, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { CbMenu } from '@caribeng/ui/menu';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Tarjeta de categoría/almacenamiento de CaribeNG: icono con tinte, título y
  * subtítulo a la izquierda; dos valores alineados a la derecha. Útil para
  * resúmenes de media, almacenamiento o métricas de categoría.
  *
+ * Como `cb-folder-card`: con `actions` muestra un botón ⋮ con un menú
+ * (`actionSelect`) y con `clickable` toda la tarjeta emite `open`.
+ *
  * @example
  * ```html
  * <cb-file-card icon="image" color="#10b981" title="Imágenes"
- *   subtitle="17% usado" value="245 archivos" valueSub="26.4 GB" />
+ *   subtitle="17% usado" value="245 archivos" valueSub="26.4 GB"
+ *   clickable (open)="verImagenes()" />
  * ```
  */
 class CbFileCard {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.menu = viewChild('menu', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+        this.trigger = viewChild('trigger', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
         /** Nombre del icono (del set de CaribeNG). */
         this.icon = input('file', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
@@ -33,55 +45,160 @@ class CbFileCard {
         /** Valor secundario a la derecha (p. ej. "26.4 GB"). */
         this.valueSub = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valueSub" }] : /* istanbul ignore next */ []));
+        /** Acciones del menú ⋮. Sin acciones no se muestra el botón. */
+        this.actions = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+        /** Nombre del botón ⋮ y del menú. Por defecto, "Más acciones: {título}" del idioma activo. */
+        this.actionsAriaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionsAriaLabel" }] : /* istanbul ignore next */ []));
+        /** Toda la tarjeta es pulsable y emite `open` (clic, Enter o Espacio). */
+        this.clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Acción elegida en el menú ⋮. */
+        this.actionSelect = output();
+        /** Se pulsó la tarjeta (solo con `clickable`). */
+        this.open = output();
+        this.menuOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+        this.menuLabel = computed(() => {
+            const custom = this.actionsAriaLabel();
+            if (custom)
+                return custom;
+            const title = this.title();
+            return title ? `${this.t().moreActions}: ${title}` : this.t().moreActions;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []));
     }
-    /** Fondo tintado derivado del color (con alpha). */
+    /** Fondo tintado derivado del color (cualquier color CSS: hex, rgb(), var(--…)). */
     tintBg() {
         const c = this.color();
-        return c ? `${c}1f` : null;
+        return c ? `color-mix(in srgb, ${c} 12%, transparent)` : null;
+    }
+    /** Abre o cierra el menú de acciones anclado al botón ⋮. */
+    toggleMenu() {
+        const menu = this.menu();
+        const trigger = this.trigger()?.nativeElement;
+        if (!menu || !trigger)
+            return;
+        if (menu.isOpen) {
+            menu.hide();
+            return;
+        }
+        menu.show(trigger);
+        this.menuOpen.set(true);
+    }
+    openFromKeyboard(event) {
+        event.preventDefault();
+        if (!this.menu()?.isOpen)
+            this.toggleMenu();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFileCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFileCard, isStandalone: true, selector: "cb-file-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueSub: { classPropertyName: "valueSub", publicName: "valueSub", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-file-card" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFileCard, isStandalone: true, selector: "cb-file-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueSub: { classPropertyName: "valueSub", publicName: "valueSub", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, actionsAriaLabel: { classPropertyName: "actionsAriaLabel", publicName: "actionsAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelect: "actionSelect", open: "open" }, host: { properties: { "class.cb-file-card--clickable": "clickable()" }, classAttribute: "cb-file-card" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="cb-file-card__left">
       <span class="cb-file-card__icon" [style.background]="tintBg()" [style.color]="color() || null">
         <cb-icon [name]="icon()" [size]="20" aria-hidden="true" />
       </span>
       <div class="cb-file-card__text">
-        <span class="cb-file-card__title">{{ title() }}</span>
+        @if (clickable()) {
+          <button type="button" class="cb-file-card__title cb-file-card__open" (click)="open.emit($event)">{{ title() }}</button>
+        } @else {
+          <span class="cb-file-card__title">{{ title() }}</span>
+        }
         @if (subtitle()) {
           <span class="cb-file-card__subtitle">{{ subtitle() }}</span>
         }
       </div>
     </div>
-    <div class="cb-file-card__values">
-      <span class="cb-file-card__value">{{ value() }}</span>
-      @if (valueSub()) {
-        <span class="cb-file-card__value-sub">{{ valueSub() }}</span>
+    <div class="cb-file-card__end">
+      <div class="cb-file-card__values">
+        <span class="cb-file-card__value">{{ value() }}</span>
+        @if (valueSub()) {
+          <span class="cb-file-card__value-sub">{{ valueSub() }}</span>
+        }
+      </div>
+      @if (actions().length) {
+        <button
+          #trigger
+          type="button"
+          class="cb-file-card__menu-button"
+          [attr.aria-label]="menuLabel()"
+          aria-haspopup="menu"
+          [attr.aria-expanded]="menuOpen()"
+          (click)="toggleMenu()"
+          (keydown.arrowdown)="openFromKeyboard($event)"
+        >
+          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
+            <circle cx="12" cy="5" r="2" />
+            <circle cx="12" cy="12" r="2" />
+            <circle cx="12" cy="19" r="2" />
+          </svg>
+        </button>
+        <cb-menu
+          #menu
+          [items]="actions()"
+          [ariaLabel]="menuLabel()"
+          (itemSelect)="actionSelect.emit($event)"
+          (hidden)="menuOpen.set(false)"
+        />
       }
     </div>
-  `, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);padding:.9rem 1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-file-card__left{display:flex;align-items:center;gap:.75rem;min-width:0}.cb-file-card__icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--cb-radius-md, 10px);flex:none;color:var(--cb-color-primary-600, #059669)}.cb-file-card__text{display:flex;flex-direction:column;min-width:0}.cb-file-card__title{font-weight:600;font-size:.9rem}.cb-file-card__subtitle{font-size:.8rem;color:var(--cb-color-text-muted)}.cb-file-card__values{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}.cb-file-card__value,.cb-file-card__value-sub{font-size:.85rem;color:var(--cb-color-text-muted)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);padding:.9rem 1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}:host(.cb-file-card--clickable){cursor:pointer;transition:background-color .15s ease}:host(.cb-file-card--clickable:hover){background:var(--cb-color-surface-hover)}:host(.cb-file-card--clickable:has(.cb-file-card__open:focus-visible)){outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-file-card__left{display:flex;align-items:center;gap:.75rem;min-width:0}.cb-file-card__icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--cb-radius-md, 10px);flex:none;color:var(--cb-color-primary-600, #059669)}.cb-file-card__text{display:flex;flex-direction:column;min-width:0}.cb-file-card__title{font-weight:600;font-size:.9rem}.cb-file-card__open{padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;font-size:.9rem;text-align:start;cursor:pointer}.cb-file-card__open:focus-visible{outline:none}.cb-file-card__open:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.cb-file-card__subtitle{font-size:.8rem;color:var(--cb-color-text-muted)}.cb-file-card__end{display:flex;align-items:center;gap:.25rem;flex:none}.cb-file-card__menu-button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-right:-.5rem;padding:0;border:0;border-radius:var(--cb-radius-md, 8px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-file-card__menu-button:hover,.cb-file-card__menu-button[aria-expanded=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-file-card__menu-button:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-file-card__values{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}.cb-file-card__value,.cb-file-card__value-sub{font-size:.85rem;color:var(--cb-color-text-muted)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbMenu, selector: "cb-menu", inputs: ["items", "ariaLabel"], outputs: ["itemSelect", "hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFileCard, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-file-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-file-card' }, template: `
+            args: [{ selector: 'cb-file-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon, CbMenu], host: {
+                        class: 'cb-file-card',
+                        '[class.cb-file-card--clickable]': 'clickable()',
+                    }, template: `
     <div class="cb-file-card__left">
       <span class="cb-file-card__icon" [style.background]="tintBg()" [style.color]="color() || null">
         <cb-icon [name]="icon()" [size]="20" aria-hidden="true" />
       </span>
       <div class="cb-file-card__text">
-        <span class="cb-file-card__title">{{ title() }}</span>
+        @if (clickable()) {
+          <button type="button" class="cb-file-card__title cb-file-card__open" (click)="open.emit($event)">{{ title() }}</button>
+        } @else {
+          <span class="cb-file-card__title">{{ title() }}</span>
+        }
         @if (subtitle()) {
           <span class="cb-file-card__subtitle">{{ subtitle() }}</span>
         }
       </div>
     </div>
-    <div class="cb-file-card__values">
-      <span class="cb-file-card__value">{{ value() }}</span>
-      @if (valueSub()) {
-        <span class="cb-file-card__value-sub">{{ valueSub() }}</span>
+    <div class="cb-file-card__end">
+      <div class="cb-file-card__values">
+        <span class="cb-file-card__value">{{ value() }}</span>
+        @if (valueSub()) {
+          <span class="cb-file-card__value-sub">{{ valueSub() }}</span>
+        }
+      </div>
+      @if (actions().length) {
+        <button
+          #trigger
+          type="button"
+          class="cb-file-card__menu-button"
+          [attr.aria-label]="menuLabel()"
+          aria-haspopup="menu"
+          [attr.aria-expanded]="menuOpen()"
+          (click)="toggleMenu()"
+          (keydown.arrowdown)="openFromKeyboard($event)"
+        >
+          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
+            <circle cx="12" cy="5" r="2" />
+            <circle cx="12" cy="12" r="2" />
+            <circle cx="12" cy="19" r="2" />
+          </svg>
+        </button>
+        <cb-menu
+          #menu
+          [items]="actions()"
+          [ariaLabel]="menuLabel()"
+          (itemSelect)="actionSelect.emit($event)"
+          (hidden)="menuOpen.set(false)"
+        />
       }
     </div>
-  `, styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);padding:.9rem 1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-file-card__left{display:flex;align-items:center;gap:.75rem;min-width:0}.cb-file-card__icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--cb-radius-md, 10px);flex:none;color:var(--cb-color-primary-600, #059669)}.cb-file-card__text{display:flex;flex-direction:column;min-width:0}.cb-file-card__title{font-weight:600;font-size:.9rem}.cb-file-card__subtitle{font-size:.8rem;color:var(--cb-color-text-muted)}.cb-file-card__values{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}.cb-file-card__value,.cb-file-card__value-sub{font-size:.85rem;color:var(--cb-color-text-muted)}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueSub: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueSub", required: false }] }] } });
+  `, styles: [":host{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);padding:.9rem 1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}:host(.cb-file-card--clickable){cursor:pointer;transition:background-color .15s ease}:host(.cb-file-card--clickable:hover){background:var(--cb-color-surface-hover)}:host(.cb-file-card--clickable:has(.cb-file-card__open:focus-visible)){outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-file-card__left{display:flex;align-items:center;gap:.75rem;min-width:0}.cb-file-card__icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--cb-radius-md, 10px);flex:none;color:var(--cb-color-primary-600, #059669)}.cb-file-card__text{display:flex;flex-direction:column;min-width:0}.cb-file-card__title{font-weight:600;font-size:.9rem}.cb-file-card__open{padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;font-size:.9rem;text-align:start;cursor:pointer}.cb-file-card__open:focus-visible{outline:none}.cb-file-card__open:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.cb-file-card__subtitle{font-size:.8rem;color:var(--cb-color-text-muted)}.cb-file-card__end{display:flex;align-items:center;gap:.25rem;flex:none}.cb-file-card__menu-button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-right:-.5rem;padding:0;border:0;border-radius:var(--cb-radius-md, 8px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-file-card__menu-button:hover,.cb-file-card__menu-button[aria-expanded=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-file-card__menu-button:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-file-card__values{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}.cb-file-card__value,.cb-file-card__value-sub{font-size:.85rem;color:var(--cb-color-text-muted)}\n"] }]
+        }], propDecorators: { menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueSub: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueSub", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionsAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsAriaLabel", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], actionSelect: [{ type: i0.Output, args: ["actionSelect"] }], open: [{ type: i0.Output, args: ["open"] }] } });
 
 /*
  * Public API Surface de @caribeng/ui/file-card

package/fesm2022/caribeng-ui-fileupload.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, output, signal, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 /**
  * FileUpload de CaribeNG: selector de archivos con arrastrar y soltar,
@@ -8,6 +9,10 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbFileUpload {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         this.accept = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
         this.multiple = input(false, /* @ts-ignore */
@@ -16,14 +21,19 @@ class CbFileUpload {
         ...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        this.chooseLabel = input('Elegir archivo', /* @ts-ignore */
+        this.chooseLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "chooseLabel" }] : /* istanbul ignore next */ []));
-        this.uploadLabel = input('Subir', /* @ts-ignore */
+        this.uploadLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "uploadLabel" }] : /* istanbul ignore next */ []));
         this.selectFiles = output();
         this.uploadHandler = output();
+        /** Se emite con los archivos descartados por tamaño (`maxFileSize`) o tipo (`accept`). */
+        this.rejectFiles = output();
         this.files = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+        /** Archivos descartados en la última selección (se muestran como aviso). */
+        this.rejected = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rejected" }] : /* istanbul ignore next */ []));
         this.dragging = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
         this.fileInputRef = viewChild('fileInput', /* @ts-ignore */
@@ -60,10 +70,28 @@ class CbFileUpload {
             this.addFiles(Array.from(dropped));
         }
     }
+    /** Añade archivos validando `accept` y `maxFileSize`; ignora los repetidos. */
     addFiles(incoming) {
         const max = this.maxFileSize();
-        const valid = max != null ? incoming.filter((f) => f.size <= max) : incoming;
-        const next = this.multiple() ? [...this.files(), ...valid] : valid.slice(0, 1);
+        const valid = [];
+        const rejected = [];
+        for (const file of incoming) {
+            if (!this.isAccepted(file))
+                rejected.push({ file, reason: 'type' });
+            else if (max != null && file.size > max)
+                rejected.push({ file, reason: 'size' });
+            else
+                valid.push(file);
+        }
+        this.rejected.set(rejected);
+        if (rejected.length)
+            this.rejectFiles.emit({ files: rejected });
+        if (!valid.length)
+            return;
+        const same = (a, b) => a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+        const next = this.multiple()
+            ? [...this.files(), ...valid.filter((f, i) => !this.files().some((e) => same(e, f)) && valid.findIndex((v) => same(v, f)) === i)]
+            : valid.slice(0, 1);
         this.files.set(next);
         this.selectFiles.emit({ files: next });
     }
@@ -73,6 +101,7 @@ class CbFileUpload {
     }
     clear() {
         this.files.set([]);
+        this.rejected.set([]);
     }
     triggerUpload() {
         this.uploadHandler.emit({ files: [...this.files()] });
@@ -80,10 +109,30 @@ class CbFileUpload {
     formatSize(bytes) {
         if (bytes < 1024)
             return `${bytes} B`;
-        return `${(bytes / 1024).toFixed(1)} KB`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    /** Comprueba `accept` (extensiones `.pdf`, tipos `image/png` o comodines `image/*`). */
+    isAccepted(file) {
+        const rules = this.accept()
+            .split(',')
+            .map((r) => r.trim().toLowerCase())
+            .filter(Boolean);
+        if (!rules.length)
+            return true;
+        const name = file.name.toLowerCase();
+        const type = (file.type || '').toLowerCase();
+        return rules.some((rule) => {
+            if (rule.startsWith('.'))
+                return name.endsWith(rule);
+            if (rule.endsWith('/*'))
+                return type.startsWith(rule.slice(0, -1));
+            return type === rule;
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFileUpload, isStandalone: true, selector: "cb-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chooseLabel: { classPropertyName: "chooseLabel", publicName: "chooseLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectFiles: "selectFiles", uploadHandler: "uploadHandler" }, host: { properties: { "class.cb-is-dragover": "dragging()" }, classAttribute: "cb-file-upload" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFileUpload, isStandalone: true, selector: "cb-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chooseLabel: { classPropertyName: "chooseLabel", publicName: "chooseLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectFiles: "selectFiles", uploadHandler: "uploadHandler", rejectFiles: "rejectFiles" }, host: { properties: { "class.cb-is-dragover": "dragging()" }, classAttribute: "cb-file-upload" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <input
       #fileInput
       type="file"
@@ -107,7 +156,7 @@ class CbFileUpload {
           (click)="openPicker()"
         >
           <cb-icon name="upload" [size]="15" aria-hidden="true" />
-          <span>{{ chooseLabel() }}</span>
+          <span>{{ (chooseLabel() ?? t().chooseFile) }}</span>
         </button>
         @if (files().length > 0) {
           <button
@@ -117,7 +166,7 @@ class CbFileUpload {
             (click)="triggerUpload()"
           >
             <cb-icon name="check" [size]="15" aria-hidden="true" />
-            <span>{{ uploadLabel() }}</span>
+            <span>{{ (uploadLabel() ?? t().upload) }}</span>
           </button>
           <button
             type="button"
@@ -126,13 +175,27 @@ class CbFileUpload {
             (click)="clear()"
           >
             <cb-icon name="x" [size]="15" aria-hidden="true" />
-            <span>Limpiar</span>
+            <span>{{ t().clear }}</span>
           </button>
         }
       </div>
 
+      @if (rejected().length) {
+        <ul class="cb-file-upload__errors" role="alert">
+          @for (r of rejected(); track $index) {
+            <li>
+              {{
+                r.reason === 'size'
+                  ? fmt(t().fileTooLarge, r.file.name, formatSize(maxFileSize() ?? 0))
+                  : fmt(t().fileTypeNotAllowed, r.file.name)
+              }}
+            </li>
+          }
+        </ul>
+      }
+
       @if (files().length === 0) {
-        <p class="cb-file-upload__empty">Arrastra archivos aquí o pulsa "{{ chooseLabel() }}".</p>
+        <p class="cb-file-upload__empty">{{ fmt(t().dropFiles, (chooseLabel() ?? t().chooseFile)) }}</p>
       } @else {
         <ul class="cb-file-upload__list">
           @for (file of files(); track file.name + file.size; let idx = $index) {
@@ -142,7 +205,7 @@ class CbFileUpload {
               <button
                 type="button"
                 class="cb-file-upload__remove"
-                [attr.aria-label]="'Quitar ' + file.name"
+                [attr.aria-label]="fmt(t().removeItem, file.name)"
                 (click)="removeAt(idx)"
               >
                 <cb-icon name="x" [size]="14" aria-hidden="true" />
@@ -152,7 +215,7 @@ class CbFileUpload {
         </ul>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-file-upload__native{display:none}.cb-file-upload__dropzone{padding:var(--cb-space-4);border:1px dashed var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);transition:border-color .14s ease,background-color .14s ease}:host(.cb-is-dragover) .cb-file-upload__dropzone{border-color:var(--cb-color-primary-500);background:color-mix(in srgb,var(--cb-color-primary-500) 8%,transparent)}.cb-file-upload__actions{display:flex;flex-wrap:wrap;gap:var(--cb-space-2);margin-bottom:var(--cb-space-3)}.cb-file-upload__btn{display:inline-flex;align-items:center;gap:.375rem;padding:.4rem .75rem;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);font-weight:var(--cb-font-medium);cursor:pointer}.cb-file-upload__btn--primary{background:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast, #fff)}.cb-file-upload__empty{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-file-upload__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}.cb-file-upload__item{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:.375rem .625rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);font-size:var(--cb-text-sm)}.cb-file-upload__size{margin-left:auto;color:var(--cb-color-text-muted);font-size:.75rem}.cb-file-upload__remove{border:none;background:transparent;color:var(--cb-color-text-muted);cursor:pointer;padding:.125rem}\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-file-upload__native{display:none}.cb-file-upload__dropzone{padding:var(--cb-space-4);border:1px dashed var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);transition:border-color .14s ease,background-color .14s ease}:host(.cb-is-dragover) .cb-file-upload__dropzone{border-color:var(--cb-color-primary-500);background:color-mix(in srgb,var(--cb-color-primary-500) 8%,transparent)}.cb-file-upload__actions{display:flex;flex-wrap:wrap;gap:var(--cb-space-2);margin-bottom:var(--cb-space-3)}.cb-file-upload__btn{display:inline-flex;align-items:center;gap:.375rem;padding:.4rem .75rem;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);font-weight:var(--cb-font-medium);cursor:pointer}.cb-file-upload__btn--primary{background:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast, #fff)}.cb-file-upload__errors{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;font-size:var(--cb-text-sm);color:var(--cb-color-danger)}.cb-file-upload__empty{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-file-upload__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}.cb-file-upload__item{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:.375rem .625rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);font-size:var(--cb-text-sm)}.cb-file-upload__size{margin-left:auto;color:var(--cb-color-text-muted);font-size:.75rem}.cb-file-upload__remove{border:none;background:transparent;color:var(--cb-color-text-muted);cursor:pointer;padding:.125rem}\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: CbFileUpload, decorators: [{
             type: Component,
@@ -183,7 +246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           (click)="openPicker()"
         >
           <cb-icon name="upload" [size]="15" aria-hidden="true" />
-          <span>{{ chooseLabel() }}</span>
+          <span>{{ (chooseLabel() ?? t().chooseFile) }}</span>
         </button>
         @if (files().length > 0) {
           <button
@@ -193,7 +256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             (click)="triggerUpload()"
           >
             <cb-icon name="check" [size]="15" aria-hidden="true" />
-            <span>{{ uploadLabel() }}</span>
+            <span>{{ (uploadLabel() ?? t().upload) }}</span>
           </button>
           <button
             type="button"
@@ -202,13 +265,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             (click)="clear()"
           >
             <cb-icon name="x" [size]="15" aria-hidden="true" />
-            <span>Limpiar</span>
+            <span>{{ t().clear }}</span>
           </button>
         }
       </div>
 
+      @if (rejected().length) {
+        <ul class="cb-file-upload__errors" role="alert">
+          @for (r of rejected(); track $index) {
+            <li>
+              {{
+                r.reason === 'size'
+                  ? fmt(t().fileTooLarge, r.file.name, formatSize(maxFileSize() ?? 0))
+                  : fmt(t().fileTypeNotAllowed, r.file.name)
+              }}
+            </li>
+          }
+        </ul>
+      }
+
       @if (files().length === 0) {
-        <p class="cb-file-upload__empty">Arrastra archivos aquí o pulsa "{{ chooseLabel() }}".</p>
+        <p class="cb-file-upload__empty">{{ fmt(t().dropFiles, (chooseLabel() ?? t().chooseFile)) }}</p>
       } @else {
         <ul class="cb-file-upload__list">
           @for (file of files(); track file.name + file.size; let idx = $index) {
@@ -218,7 +295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               <button
                 type="button"
                 class="cb-file-upload__remove"
-                [attr.aria-label]="'Quitar ' + file.name"
+                [attr.aria-label]="fmt(t().removeItem, file.name)"
                 (click)="removeAt(idx)"
               >
                 <cb-icon name="x" [size]="14" aria-hidden="true" />
@@ -228,8 +305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         </ul>
       }
     </div>
-  `, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-file-upload__native{display:none}.cb-file-upload__dropzone{padding:var(--cb-space-4);border:1px dashed var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);transition:border-color .14s ease,background-color .14s ease}:host(.cb-is-dragover) .cb-file-upload__dropzone{border-color:var(--cb-color-primary-500);background:color-mix(in srgb,var(--cb-color-primary-500) 8%,transparent)}.cb-file-upload__actions{display:flex;flex-wrap:wrap;gap:var(--cb-space-2);margin-bottom:var(--cb-space-3)}.cb-file-upload__btn{display:inline-flex;align-items:center;gap:.375rem;padding:.4rem .75rem;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);font-weight:var(--cb-font-medium);cursor:pointer}.cb-file-upload__btn--primary{background:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast, #fff)}.cb-file-upload__empty{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-file-upload__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}.cb-file-upload__item{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:.375rem .625rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);font-size:var(--cb-text-sm)}.cb-file-upload__size{margin-left:auto;color:var(--cb-color-text-muted);font-size:.75rem}.cb-file-upload__remove{border:none;background:transparent;color:var(--cb-color-text-muted);cursor:pointer;padding:.125rem}\n"] }]
-        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chooseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseLabel", required: false }] }], uploadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadLabel", required: false }] }], selectFiles: [{ type: i0.Output, args: ["selectFiles"] }], uploadHandler: [{ type: i0.Output, args: ["uploadHandler"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+  `, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-file-upload__native{display:none}.cb-file-upload__dropzone{padding:var(--cb-space-4);border:1px dashed var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);transition:border-color .14s ease,background-color .14s ease}:host(.cb-is-dragover) .cb-file-upload__dropzone{border-color:var(--cb-color-primary-500);background:color-mix(in srgb,var(--cb-color-primary-500) 8%,transparent)}.cb-file-upload__actions{display:flex;flex-wrap:wrap;gap:var(--cb-space-2);margin-bottom:var(--cb-space-3)}.cb-file-upload__btn{display:inline-flex;align-items:center;gap:.375rem;padding:.4rem .75rem;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);font-weight:var(--cb-font-medium);cursor:pointer}.cb-file-upload__btn--primary{background:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast, #fff)}.cb-file-upload__errors{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;font-size:var(--cb-text-sm);color:var(--cb-color-danger)}.cb-file-upload__empty{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-file-upload__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}.cb-file-upload__item{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:.375rem .625rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);font-size:var(--cb-text-sm)}.cb-file-upload__size{margin-left:auto;color:var(--cb-color-text-muted);font-size:.75rem}.cb-file-upload__remove{border:none;background:transparent;color:var(--cb-color-text-muted);cursor:pointer;padding:.125rem}\n"] }]
+        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chooseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseLabel", required: false }] }], uploadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadLabel", required: false }] }], selectFiles: [{ type: i0.Output, args: ["selectFiles"] }], uploadHandler: [{ type: i0.Output, args: ["uploadHandler"] }], rejectFiles: [{ type: i0.Output, args: ["rejectFiles"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/caribeng-ui-floatlabel.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, signal, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, input, signal, afterEveryRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * FloatLabel de CaribeNG: contenedor que eleva visualmente la etiqueta `<label>`
@@ -14,7 +14,9 @@ class CbFloatLabel {
         ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
         this.filled = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
-        afterNextRender(() => {
+        // Tras cada render: detecta también valores asignados por código (p. ej. `patchValue`),
+        // que no disparan los eventos `input` / `change`.
+        afterEveryRender(() => {
             this.checkFilled();
         });
     }