@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-caribe-fab-menu.mjs

@@ -1,6 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, model, output, inject, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbOverlayFocus } from '@caribeng/ui';
 
+let nextId = 0;
 /**
  * Fab-menu de Caribe Design: botón de acción flotante que despliega una lista
  * de acciones rápidas.
@@ -12,8 +14,10 @@ import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Compo
  */
 class CbFabMenu {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Etiqueta accesible del botón flotante. */
-        this.triggerLabel = input('Menú de acciones rápidas', /* @ts-ignore */
+        this.triggerLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
         /** Acciones del menú. */
         this.items = input([], /* @ts-ignore */
@@ -23,6 +27,33 @@ class CbFabMenu {
         ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         /** Emite la acción seleccionada. */
         this.itemSelected = output();
+        this.menuId = `cb-fab-menu-${++nextId}`;
+        this.host = inject(ElementRef);
+        // Al abrir, el foco va a la primera acción; al cerrar, vuelve al botón flotante.
+        cbOverlayFocus({ open: this.open, initialFocus: () => this.menuItems()[0] });
+    }
+    menuItems() {
+        return Array.from(this.host.nativeElement.querySelectorAll('.cb-fab-menu__item'));
+    }
+    /** Patrón *menu*: flechas (circular), Inicio, Fin, y Escape / Tab cierran. */
+    onMenuKeydown(event) {
+        const items = this.menuItems();
+        const cur = items.indexOf(event.target);
+        const last = items.length - 1;
+        const target = event.key === 'ArrowDown' ? (cur < last ? cur + 1 : 0)
+            : event.key === 'ArrowUp' ? (cur > 0 ? cur - 1 : last)
+                : event.key === 'Home' ? 0
+                    : event.key === 'End' ? last
+                        : -1;
+        if (target >= 0) {
+            event.preventDefault();
+            items[target]?.focus();
+        }
+        else if (event.key === 'Escape' || event.key === 'Tab') {
+            if (event.key === 'Escape')
+                event.preventDefault();
+            this.open.set(false);
+        }
     }
     selectItem(item) {
         this.itemSelected.emit(item);
@@ -32,12 +63,19 @@ class CbFabMenu {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFabMenu, isStandalone: true, selector: "cb-fab-menu", inputs: { triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", itemSelected: "itemSelected" }, host: { classAttribute: "cb-fab-menu-host" }, ngImport: i0, template: `
     <div class="cb-fab-menu">
       @if (open()) {
-        <div class="cb-fab-menu__list" role="menu">
+        <div
+          class="cb-fab-menu__list"
+          role="menu"
+          [id]="menuId"
+          [attr.aria-label]="(triggerLabel() ?? t().quickActions)"
+          (keydown)="onMenuKeydown($event)"
+        >
           @for (item of items(); track item.id) {
             <button
               type="button"
               class="cb-fab-menu__item"
               role="menuitem"
+              tabindex="-1"
               (click)="selectItem(item)"
             >
               {{ item.label }}
@@ -49,8 +87,10 @@ class CbFabMenu {
         type="button"
         class="cb-fab-menu__trigger"
         [class.cb-is-open]="open()"
+        aria-haspopup="menu"
         [attr.aria-expanded]="open()"
-        [attr.aria-label]="triggerLabel()"
+        [attr.aria-controls]="open() ? menuId : null"
+        [attr.aria-label]="(triggerLabel() ?? t().quickActions)"
         (click)="open.set(!open())"
       >
         <span aria-hidden="true">{{ open() ? '×' : '+' }}</span>
@@ -63,12 +103,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'cb-fab-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-fab-menu-host' }, template: `
     <div class="cb-fab-menu">
       @if (open()) {
-        <div class="cb-fab-menu__list" role="menu">
+        <div
+          class="cb-fab-menu__list"
+          role="menu"
+          [id]="menuId"
+          [attr.aria-label]="(triggerLabel() ?? t().quickActions)"
+          (keydown)="onMenuKeydown($event)"
+        >
           @for (item of items(); track item.id) {
             <button
               type="button"
               class="cb-fab-menu__item"
               role="menuitem"
+              tabindex="-1"
               (click)="selectItem(item)"
             >
               {{ item.label }}
@@ -80,15 +127,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         type="button"
         class="cb-fab-menu__trigger"
         [class.cb-is-open]="open()"
+        aria-haspopup="menu"
         [attr.aria-expanded]="open()"
-        [attr.aria-label]="triggerLabel()"
+        [attr.aria-controls]="open() ? menuId : null"
+        [attr.aria-label]="(triggerLabel() ?? t().quickActions)"
         (click)="open.set(!open())"
       >
         <span aria-hidden="true">{{ open() ? '×' : '+' }}</span>
       </button>
     </div>
   `, styles: [":host{display:inline-flex}.cb-fab-menu{display:inline-flex;flex-direction:column;align-items:flex-end;gap:var(--cb-space-2, .5rem);font-family:var(--cb-font-sans, inherit)}.cb-fab-menu__list{display:flex;flex-direction:column;gap:var(--cb-space-2, .35rem);animation:cb-fab-in var(--cb-duration-fast, .12s) var(--cb-ease-out, ease-out)}.cb-fab-menu__item{padding:var(--cb-space-2, .5rem) var(--cb-space-4, 1rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-full, 999px);box-shadow:var(--cb-shadow-sm, 0 1px 2px rgba(0, 0, 0, .12));cursor:pointer;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-fab-menu__item:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-fab-menu__trigger{display:inline-flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;font-size:1.6rem;line-height:1;color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857);border:none;border-radius:var(--cb-radius-full, 999px);box-shadow:var(--cb-shadow-md, 0 6px 16px rgba(0, 0, 0, .2));cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),transform var(--cb-duration-normal, .2s) var(--cb-ease, ease)}.cb-fab-menu__trigger:hover{background-color:var(--cb-color-primary-700, #065f46)}.cb-fab-menu__trigger.cb-is-open{transform:rotate(90deg)}.cb-fab-menu__trigger:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}@keyframes cb-fab-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}:host-context([data-theme=\"dark\"]) .cb-fab-menu__item{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-fab-menu__item:hover{background-color:var(--cb-color-surface-700, #334155)}\n"] }]
-        }], propDecorators: { triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+        }], ctorParameters: () => [], propDecorators: { triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/caribeng-ui-caribe-file-download.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * File-download de Caribe Design: fila de archivo con nombre, tamaño y botón de
@@ -10,19 +11,31 @@ import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component }
  * <cb-file-download fileName="Extracto.pdf" fileSize="420 KB" (download)="go($event)" />
  * ```
  */
+let nextId = 0;
 class CbFileDownload {
     constructor() {
-        this.fileName = input('Certificado_Bancario.pdf', /* @ts-ignore */
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.fileName = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []));
-        this.fileSize = input('420 KB', /* @ts-ignore */
+        this.fileSize = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fileSize" }] : /* istanbul ignore next */ []));
+        /** Tipo de archivo mostrado en la insignia, a partir de la extensión (p. ej. PDF, XLSX). */
+        this.extension = computed(() => {
+            const name = this.fileName();
+            const dot = name.lastIndexOf('.');
+            return dot > 0 ? name.slice(dot + 1, dot + 5).toUpperCase() : '';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "extension" }] : /* istanbul ignore next */ []));
         this.href = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
-        this.buttonLabel = input('Descargar', /* @ts-ignore */
+        this.buttonLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.download = output();
+        /** Id del nombre: describe el botón ("Descargar" → "Certificado.pdf"). */
+        this.nameId = `cb-file-download-${++nextId}-name`;
     }
     onDownload() {
         if (this.disabled())
@@ -30,43 +43,71 @@ class CbFileDownload {
         this.download.emit(this.fileName());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFileDownload, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbFileDownload, isStandalone: true, selector: "cb-file-download", inputs: { fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, fileSize: { classPropertyName: "fileSize", publicName: "fileSize", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { download: "download" }, host: { classAttribute: "cb-file-download-host" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFileDownload, isStandalone: true, selector: "cb-file-download", inputs: { fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, fileSize: { classPropertyName: "fileSize", publicName: "fileSize", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { download: "download" }, host: { classAttribute: "cb-file-download-host" }, ngImport: i0, template: `
     <div class="cb-file-download">
-      <span class="cb-file-download__icon" aria-hidden="true">PDF</span>
+      <span class="cb-file-download__icon" aria-hidden="true">{{ extension() }}</span>
       <div class="cb-file-download__meta">
-        <strong class="cb-file-download__name">{{ fileName() }}</strong>
+        <strong class="cb-file-download__name" [id]="nameId">{{ fileName() }}</strong>
         <span class="cb-file-download__size">{{ fileSize() }}</span>
       </div>
-      <button
-        type="button"
-        class="cb-file-download__btn"
-        (click)="onDownload()"
-        [disabled]="disabled()"
-      >
-        {{ buttonLabel() }}
-      </button>
+      <!-- Con href, enlace de descarga nativo; sin él, botón que emite (download) para descargarlo desde la app. -->
+      @if (href() && !disabled()) {
+        <a
+          class="cb-file-download__btn"
+          [href]="href()"
+          [attr.download]="fileName() || ''"
+          [attr.aria-describedby]="fileName() ? nameId : null"
+          (click)="onDownload()"
+        >
+          {{ (buttonLabel() ?? t().download) }}
+        </a>
+      } @else {
+        <button
+          type="button"
+          class="cb-file-download__btn"
+          [attr.aria-describedby]="fileName() ? nameId : null"
+          (click)="onDownload()"
+          [disabled]="disabled()"
+        >
+          {{ (buttonLabel() ?? t().download) }}
+        </button>
+      }
     </div>
-  `, isInline: true, styles: [":host{display:block;width:100%;max-width:24rem}.cb-file-download{display:flex;align-items:center;gap:var(--cb-space-3, .75rem);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-md, .5rem)}.cb-file-download__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;font-size:.6rem;font-weight:var(--cb-font-weight-bold, 700);letter-spacing:.04em;color:var(--cb-color-danger-600, #dc2626);background-color:var(--cb-color-danger-50, #fef2f2);border-radius:var(--cb-radius-sm, .375rem)}.cb-file-download__meta{flex:1;min-width:0;display:flex;flex-direction:column}.cb-file-download__name{font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong, #0f172a);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-file-download__size{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}.cb-file-download__btn{flex:none;padding:var(--cb-space-2, .45rem) var(--cb-space-3, .85rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857);border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-file-download__btn:hover:not(:disabled){background-color:var(--cb-color-primary-700, #065f46)}.cb-file-download__btn:disabled{opacity:.55;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-file-download{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-file-download__name{color:var(--cb-color-surface-0, #f8fafc)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;max-width:24rem}.cb-file-download{display:flex;align-items:center;gap:var(--cb-space-3, .75rem);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-md, .5rem)}.cb-file-download__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;font-size:.6rem;font-weight:var(--cb-font-weight-bold, 700);letter-spacing:.04em;color:var(--cb-color-danger-600, #dc2626);background-color:var(--cb-color-danger-50, #fef2f2);border-radius:var(--cb-radius-sm, .375rem)}.cb-file-download__meta{flex:1;min-width:0;display:flex;flex-direction:column}.cb-file-download__name{font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong, #0f172a);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-file-download__size{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}.cb-file-download__btn{flex:none;padding:var(--cb-space-2, .45rem) var(--cb-space-3, .85rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857);border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;text-decoration:none;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-file-download__btn:hover:not(:disabled){background-color:var(--cb-color-primary-700, #065f46)}.cb-file-download__btn:disabled{opacity:.55;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-file-download{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-file-download__name{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: CbFileDownload, decorators: [{
             type: Component,
             args: [{ selector: 'cb-file-download', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-file-download-host' }, template: `
     <div class="cb-file-download">
-      <span class="cb-file-download__icon" aria-hidden="true">PDF</span>
+      <span class="cb-file-download__icon" aria-hidden="true">{{ extension() }}</span>
       <div class="cb-file-download__meta">
-        <strong class="cb-file-download__name">{{ fileName() }}</strong>
+        <strong class="cb-file-download__name" [id]="nameId">{{ fileName() }}</strong>
         <span class="cb-file-download__size">{{ fileSize() }}</span>
       </div>
-      <button
-        type="button"
-        class="cb-file-download__btn"
-        (click)="onDownload()"
-        [disabled]="disabled()"
-      >
-        {{ buttonLabel() }}
-      </button>
+      <!-- Con href, enlace de descarga nativo; sin él, botón que emite (download) para descargarlo desde la app. -->
+      @if (href() && !disabled()) {
+        <a
+          class="cb-file-download__btn"
+          [href]="href()"
+          [attr.download]="fileName() || ''"
+          [attr.aria-describedby]="fileName() ? nameId : null"
+          (click)="onDownload()"
+        >
+          {{ (buttonLabel() ?? t().download) }}
+        </a>
+      } @else {
+        <button
+          type="button"
+          class="cb-file-download__btn"
+          [attr.aria-describedby]="fileName() ? nameId : null"
+          (click)="onDownload()"
+          [disabled]="disabled()"
+        >
+          {{ (buttonLabel() ?? t().download) }}
+        </button>
+      }
     </div>
-  `, styles: [":host{display:block;width:100%;max-width:24rem}.cb-file-download{display:flex;align-items:center;gap:var(--cb-space-3, .75rem);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-md, .5rem)}.cb-file-download__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;font-size:.6rem;font-weight:var(--cb-font-weight-bold, 700);letter-spacing:.04em;color:var(--cb-color-danger-600, #dc2626);background-color:var(--cb-color-danger-50, #fef2f2);border-radius:var(--cb-radius-sm, .375rem)}.cb-file-download__meta{flex:1;min-width:0;display:flex;flex-direction:column}.cb-file-download__name{font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong, #0f172a);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-file-download__size{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}.cb-file-download__btn{flex:none;padding:var(--cb-space-2, .45rem) var(--cb-space-3, .85rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857);border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-file-download__btn:hover:not(:disabled){background-color:var(--cb-color-primary-700, #065f46)}.cb-file-download__btn:disabled{opacity:.55;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-file-download{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-file-download__name{color:var(--cb-color-surface-0, #f8fafc)}\n"] }]
+  `, styles: [":host{display:block;width:100%;max-width:24rem}.cb-file-download{display:flex;align-items:center;gap:var(--cb-space-3, .75rem);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-md, .5rem)}.cb-file-download__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;font-size:.6rem;font-weight:var(--cb-font-weight-bold, 700);letter-spacing:.04em;color:var(--cb-color-danger-600, #dc2626);background-color:var(--cb-color-danger-50, #fef2f2);border-radius:var(--cb-radius-sm, .375rem)}.cb-file-download__meta{flex:1;min-width:0;display:flex;flex-direction:column}.cb-file-download__name{font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong, #0f172a);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-file-download__size{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}.cb-file-download__btn{flex:none;padding:var(--cb-space-2, .45rem) var(--cb-space-3, .85rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857);border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;text-decoration:none;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-file-download__btn:hover:not(:disabled){background-color:var(--cb-color-primary-700, #065f46)}.cb-file-download__btn:disabled{opacity:.55;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-file-download{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-file-download__name{color:var(--cb-color-surface-0, #f8fafc)}\n"] }]
         }], propDecorators: { fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], fileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSize", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], download: [{ type: i0.Output, args: ["download"] }] } });
 
 /**

package/fesm2022/caribeng-ui-caribe-file-select.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 /**
  * File-select de Caribe Design: zona de selección de archivos con formatos
@@ -12,7 +13,11 @@ import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Compo
  */
 class CbFileSelect {
     constructor() {
-        this.label = input('Seleccionar documento', /* @ts-ignore */
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
+        this.label = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.accept = input('.pdf,.png,.jpg', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
@@ -34,13 +39,13 @@ class CbFileSelect {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFileSelect, isStandalone: true, selector: "cb-file-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", filesSelected: "filesSelected" }, host: { classAttribute: "cb-file-select-host" }, ngImport: i0, template: `
     <label class="cb-file-select" [class.cb-is-disabled]="disabled()">
       <span class="cb-file-select__icon" aria-hidden="true">↑</span>
-      <span class="cb-file-select__title">{{ label() }}</span>
-      <span class="cb-file-select__hint">Formatos: {{ accept() }}</span>
-      @if (files().length) {
-        <span class="cb-file-select__count">
-          {{ files().length }} archivo(s) seleccionado(s)
-        </span>
-      }
+      <span class="cb-file-select__title">{{ (label() ?? t().selectDocument) }}</span>
+      <span class="cb-file-select__hint">{{ fmt(t().formats, accept()) }}</span>
+      <span class="cb-file-select__count" aria-live="polite">
+        @if (files().length) {
+          {{ fmt(t().filesSelected, files().length) }}
+        }
+      </span>
       <input
         class="cb-file-select__input"
         type="file"
@@ -50,20 +55,20 @@ class CbFileSelect {
         (change)="onFileChange($event)"
       />
     </label>
-  `, isInline: true, styles: [":host{display:block;width:100%;max-width:24rem}.cb-file-select{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-1, .25rem);box-sizing:border-box;padding:var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);text-align:center;color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-50, #f8fafc);border:1.5px dashed var(--cb-color-border-strong, #94a3b8);border-radius:var(--cb-radius-lg, .75rem);cursor:pointer;transition:border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-file-select:hover:not(.cb-is-disabled){border-color:var(--cb-color-primary-400, #34d399);background-color:var(--cb-color-primary-50, #ecfdf5)}.cb-file-select.cb-is-disabled{opacity:.6;cursor:not-allowed}.cb-file-select__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;font-size:1.2rem;color:var(--cb-color-primary-600, #047857);background-color:var(--cb-color-primary-50, #ecfdf5);border-radius:var(--cb-radius-full, 999px)}.cb-file-select__title{font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-file-select__hint{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}.cb-file-select__count{margin-top:var(--cb-space-1, .25rem);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-700, #065f46)}.cb-file-select__input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}:host-context([data-theme=\"dark\"]) .cb-file-select{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-file-select:hover:not(.cb-is-disabled){border-color:var(--cb-color-primary-500, #10b981);background-color:color-mix(in srgb,var(--cb-color-primary-500, #10b981) 12%,transparent)}:host-context([data-theme=\"dark\"]) .cb-file-select__icon{color:var(--cb-color-primary-300, #6ee7b7);background-color:color-mix(in srgb,var(--cb-color-primary-500, #10b981) 18%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;max-width:24rem}.cb-file-select{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-1, .25rem);box-sizing:border-box;padding:var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);text-align:center;color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-50, #f8fafc);border:1.5px dashed var(--cb-color-border-strong, #94a3b8);border-radius:var(--cb-radius-lg, .75rem);cursor:pointer;transition:border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-file-select:hover:not(.cb-is-disabled){border-color:var(--cb-color-primary-400, #34d399);background-color:var(--cb-color-primary-50, #ecfdf5)}.cb-file-select.cb-is-disabled{opacity:.6;cursor:not-allowed}.cb-file-select__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;font-size:1.2rem;color:var(--cb-color-primary-600, #047857);background-color:var(--cb-color-primary-50, #ecfdf5);border-radius:var(--cb-radius-full, 999px)}.cb-file-select__title{font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-file-select__hint{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}.cb-file-select__count{margin-top:var(--cb-space-1, .25rem);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-700, #065f46)}.cb-file-select__count:empty{margin-top:0}.cb-file-select__input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.cb-file-select:has(.cb-file-select__input:focus-visible){outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}:host-context([data-theme=\"dark\"]) .cb-file-select{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-file-select:hover:not(.cb-is-disabled){border-color:var(--cb-color-primary-500, #10b981);background-color:color-mix(in srgb,var(--cb-color-primary-500, #10b981) 12%,transparent)}:host-context([data-theme=\"dark\"]) .cb-file-select__icon{color:var(--cb-color-primary-300, #6ee7b7);background-color:color-mix(in srgb,var(--cb-color-primary-500, #10b981) 18%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFileSelect, decorators: [{
             type: Component,
             args: [{ selector: 'cb-file-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-file-select-host' }, template: `
     <label class="cb-file-select" [class.cb-is-disabled]="disabled()">
       <span class="cb-file-select__icon" aria-hidden="true">↑</span>
-      <span class="cb-file-select__title">{{ label() }}</span>
-      <span class="cb-file-select__hint">Formatos: {{ accept() }}</span>
-      @if (files().length) {
-        <span class="cb-file-select__count">
-          {{ files().length }} archivo(s) seleccionado(s)
-        </span>
-      }
+      <span class="cb-file-select__title">{{ (label() ?? t().selectDocument) }}</span>
+      <span class="cb-file-select__hint">{{ fmt(t().formats, accept()) }}</span>
+      <span class="cb-file-select__count" aria-live="polite">
+        @if (files().length) {
+          {{ fmt(t().filesSelected, files().length) }}
+        }
+      </span>
       <input
         class="cb-file-select__input"
         type="file"
@@ -73,7 +78,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         (change)="onFileChange($event)"
       />
     </label>
-  `, styles: [":host{display:block;width:100%;max-width:24rem}.cb-file-select{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-1, .25rem);box-sizing:border-box;padding:var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);text-align:center;color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-50, #f8fafc);border:1.5px dashed var(--cb-color-border-strong, #94a3b8);border-radius:var(--cb-radius-lg, .75rem);cursor:pointer;transition:border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-file-select:hover:not(.cb-is-disabled){border-color:var(--cb-color-primary-400, #34d399);background-color:var(--cb-color-primary-50, #ecfdf5)}.cb-file-select.cb-is-disabled{opacity:.6;cursor:not-allowed}.cb-file-select__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;font-size:1.2rem;color:var(--cb-color-primary-600, #047857);background-color:var(--cb-color-primary-50, #ecfdf5);border-radius:var(--cb-radius-full, 999px)}.cb-file-select__title{font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-file-select__hint{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}.cb-file-select__count{margin-top:var(--cb-space-1, .25rem);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-700, #065f46)}.cb-file-select__input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}:host-context([data-theme=\"dark\"]) .cb-file-select{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-file-select:hover:not(.cb-is-disabled){border-color:var(--cb-color-primary-500, #10b981);background-color:color-mix(in srgb,var(--cb-color-primary-500, #10b981) 12%,transparent)}:host-context([data-theme=\"dark\"]) .cb-file-select__icon{color:var(--cb-color-primary-300, #6ee7b7);background-color:color-mix(in srgb,var(--cb-color-primary-500, #10b981) 18%,transparent)}\n"] }]
+  `, styles: [":host{display:block;width:100%;max-width:24rem}.cb-file-select{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-1, .25rem);box-sizing:border-box;padding:var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);text-align:center;color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-50, #f8fafc);border:1.5px dashed var(--cb-color-border-strong, #94a3b8);border-radius:var(--cb-radius-lg, .75rem);cursor:pointer;transition:border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-file-select:hover:not(.cb-is-disabled){border-color:var(--cb-color-primary-400, #34d399);background-color:var(--cb-color-primary-50, #ecfdf5)}.cb-file-select.cb-is-disabled{opacity:.6;cursor:not-allowed}.cb-file-select__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;font-size:1.2rem;color:var(--cb-color-primary-600, #047857);background-color:var(--cb-color-primary-50, #ecfdf5);border-radius:var(--cb-radius-full, 999px)}.cb-file-select__title{font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-file-select__hint{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}.cb-file-select__count{margin-top:var(--cb-space-1, .25rem);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-700, #065f46)}.cb-file-select__count:empty{margin-top:0}.cb-file-select__input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.cb-file-select:has(.cb-file-select__input:focus-visible){outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}:host-context([data-theme=\"dark\"]) .cb-file-select{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-file-select:hover:not(.cb-is-disabled){border-color:var(--cb-color-primary-500, #10b981);background-color:color-mix(in srgb,var(--cb-color-primary-500, #10b981) 12%,transparent)}:host-context([data-theme=\"dark\"]) .cb-file-select__icon{color:var(--cb-color-primary-300, #6ee7b7);background-color:color-mix(in srgb,var(--cb-color-primary-500, #10b981) 18%,transparent)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }] } });
 
 /**

package/fesm2022/caribeng-ui-caribe-float-menu.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Float-menu de Caribe Design: menú flotante en forma de píldora con opciones
@@ -12,6 +13,8 @@ import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component }
  */
 class CbFloatMenu {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Opciones del menú. */
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
@@ -19,14 +22,14 @@ class CbFloatMenu {
         this.activeId = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
         /** Etiqueta accesible. */
-        this.ariaLabel = input('Menú flotante', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         /** Emite la opción seleccionada. */
         this.select = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFloatMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFloatMenu, isStandalone: true, selector: "cb-float-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { classAttribute: "cb-float-menu-host" }, ngImport: i0, template: `
-    <nav class="cb-float-menu" [attr.aria-label]="ariaLabel()">
+    <nav class="cb-float-menu" [attr.aria-label]="(ariaLabel() ?? t().floatingMenu)">
       @for (item of items(); track item.id) {
         <button
           type="button"
@@ -44,7 +47,7 @@ class CbFloatMenu {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFloatMenu, decorators: [{
             type: Component,
             args: [{ selector: 'cb-float-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-float-menu-host' }, template: `
-    <nav class="cb-float-menu" [attr.aria-label]="ariaLabel()">
+    <nav class="cb-float-menu" [attr.aria-label]="(ariaLabel() ?? t().floatingMenu)">
       @for (item of items(); track item.id) {
         <button
           type="button"

package/fesm2022/caribeng-ui-caribe-footer.mjs

@@ -13,13 +13,15 @@ import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@a
 class CbFooter {
     constructor() {
         /** Texto de copyright. */
-        this.copyright = input('© 2026 CaribeNG Design System. Todos los derechos reservados.', /* @ts-ignore */
+        this.copyright = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "copyright" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbFooter, isStandalone: true, selector: "cb-footer", inputs: { copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-footer-host" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFooter, isStandalone: true, selector: "cb-footer", inputs: { copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-footer-host" }, ngImport: i0, template: `
     <footer class="cb-footer">
-      <span class="cb-footer__copy">{{ copyright() }}</span>
+      @if (copyright()) {
+        <span class="cb-footer__copy">{{ copyright() }}</span>
+      }
       <div class="cb-footer__links">
         <ng-content />
       </div>
@@ -30,7 +32,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type: Component,
             args: [{ selector: 'cb-footer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-footer-host' }, template: `
     <footer class="cb-footer">
-      <span class="cb-footer__copy">{{ copyright() }}</span>
+      @if (copyright()) {
+        <span class="cb-footer__copy">{{ copyright() }}</span>
+      }
       <div class="cb-footer__links">
         <ng-content />
       </div>

package/fesm2022/caribeng-ui-caribe-header.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Header de Caribe Design: cabecera de pantalla con título, subtítulo opcional,
@@ -12,8 +13,10 @@ import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component }
  */
 class CbHeader {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Título principal. */
-        this.title = input('CaribeNG', /* @ts-ignore */
+        this.title = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         /** Subtítulo opcional. */
         this.subtitle = input('', /* @ts-ignore */
@@ -32,7 +35,7 @@ class CbHeader {
           <button
             type="button"
             class="cb-header__back"
-            aria-label="Volver"
+            [attr.aria-label]="t().back"
             (click)="backClick.emit()"
           >
             <span aria-hidden="true">←</span>
@@ -60,7 +63,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <button
             type="button"
             class="cb-header__back"
-            aria-label="Volver"
+            [attr.aria-label]="t().back"
             (click)="backClick.emit()"
           >
             <span aria-hidden="true">←</span>

package/fesm2022/caribeng-ui-caribe-icon-button.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Icon-button de Caribe Design: botón circular con un único icono. Útil para
@@ -13,11 +14,13 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbIconButton {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Nombre del icono del set núcleo. */
         this.icon = input('plus', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         /** Etiqueta accesible del botón. */
-        this.ariaLabel = input('Acción', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         /** Variante visual. */
         this.variant = input('solid', /* @ts-ignore */
@@ -35,7 +38,7 @@ class CbIconButton {
       class="cb-icon-button"
       [class.cb-icon-button--ghost]="variant() === 'ghost'"
       [disabled]="disabled()"
-      [attr.aria-label]="ariaLabel() || icon()"
+      [attr.aria-label]="(ariaLabel() ?? t().action) || icon()"
       (click)="!disabled() && pressed.emit($event)"
     >
       <cb-icon [name]="icon()" [size]="18" aria-hidden="true" />
@@ -50,7 +53,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       class="cb-icon-button"
       [class.cb-icon-button--ghost]="variant() === 'ghost'"
       [disabled]="disabled()"
-      [attr.aria-label]="ariaLabel() || icon()"
+      [attr.aria-label]="(ariaLabel() ?? t().action) || icon()"
       (click)="!disabled() && pressed.emit($event)"
     >
       <cb-icon [name]="icon()" [size]="18" aria-hidden="true" />

package/fesm2022/caribeng-ui-caribe-illustration.mjs

@@ -1,13 +1,16 @@
 import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 class CbIllustration {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.name = input('transfer-success', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
         this.size = input('160px', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.alt = input('Ilustración Caribe', /* @ts-ignore */
+        this.alt = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbIllustration, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -15,7 +18,7 @@ class CbIllustration {
     <svg
       viewBox="0 0 160 120"
       role="img"
-      [attr.aria-label]="alt() || name()"
+      [attr.aria-label]="(alt() ?? t().illustration) || name()"
       style="width: 100%; height: auto"
     >
       <rect x="12" y="14" width="136" height="92" rx="16" fill="var(--cb-color-primary-50, #ecfdf5)" />
@@ -34,7 +37,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <svg
       viewBox="0 0 160 120"
       role="img"
-      [attr.aria-label]="alt() || name()"
+      [attr.aria-label]="(alt() ?? t().illustration) || name()"
       style="width: 100%; height: auto"
     >
       <rect x="12" y="14" width="136" height="92" rx="16" fill="var(--cb-color-primary-50, #ecfdf5)" />

package/fesm2022/caribeng-ui-caribe-inline-alert.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Inline-alert de Caribe Design: aviso compacto en línea para formularios y
@@ -12,6 +13,8 @@ import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Compo
  */
 class CbInlineAlert {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.title = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         this.status = input('info', /* @ts-ignore */
@@ -53,7 +56,7 @@ class CbInlineAlert {
           <button
             type="button"
             class="cb-inline-alert__close"
-            aria-label="Cerrar"
+            [attr.aria-label]="t().close"
             (click)="close()"
           >
             ×
@@ -79,7 +82,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <button
             type="button"
             class="cb-inline-alert__close"
-            aria-label="Cerrar"
+            [attr.aria-label]="t().close"
             (click)="close()"
           >
             ×