@caribeng/ui 22.1.1 → 22.2.0

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()"
           >
             ×

package/fesm2022/caribeng-ui-caribe-input-search.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, booleanAttribute, model, output, signal, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
 
 /**
  * Input-search de Caribe Design: campo de búsqueda con icono, botón de limpiar
@@ -14,7 +14,9 @@ import { cbFieldState } from '@caribeng/ui';
  */
 class CbInputSearch {
     constructor() {
-        this.placeholder = input('Buscar…', /* @ts-ignore */
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.placeholder = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.clearable = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
@@ -69,14 +71,15 @@ class CbInputSearch {
     >
       <span class="cb-input-search__icon" aria-hidden="true">⌕</span>
       <input
+        #field
         class="cb-input-search__field"
         [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
         [attr.aria-required]="fieldState.required() || null"
         type="search"
         [value]="value()"
-        [placeholder]="placeholder()"
+        [placeholder]="(placeholder() ?? t().search)"
         [disabled]="disabled() || cvaDisabled()"
-        [attr.aria-label]="placeholder()"
+        [attr.aria-label]="(placeholder() ?? t().search)"
         (input)="onInput($event)"
         (blur)="onTouched()"
         (keydown.enter)="search.emit(value())"
@@ -85,8 +88,8 @@ class CbInputSearch {
         <button
           type="button"
           class="cb-input-search__clear"
-          aria-label="Limpiar búsqueda"
-          (click)="clear()"
+          [attr.aria-label]="t().clearSearch"
+          (click)="clear(); field.focus()"
         >
           ×
         </button>
@@ -110,14 +113,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     >
       <span class="cb-input-search__icon" aria-hidden="true">⌕</span>
       <input
+        #field
         class="cb-input-search__field"
         [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
         [attr.aria-required]="fieldState.required() || null"
         type="search"
         [value]="value()"
-        [placeholder]="placeholder()"
+        [placeholder]="(placeholder() ?? t().search)"
         [disabled]="disabled() || cvaDisabled()"
-        [attr.aria-label]="placeholder()"
+        [attr.aria-label]="(placeholder() ?? t().search)"
         (input)="onInput($event)"
         (blur)="onTouched()"
         (keydown.enter)="search.emit(value())"
@@ -126,8 +130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <button
           type="button"
           class="cb-input-search__clear"
-          aria-label="Limpiar búsqueda"
-          (click)="clear()"
+          [attr.aria-label]="t().clearSearch"
+          (click)="clear(); field.focus()"
         >
           ×
         </button>

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, booleanAttribute, model, signal, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
 
 /**
  * Input-select de Caribe Design: desplegable nativo estilizado con etiqueta,
@@ -14,9 +14,11 @@ import { cbFieldState } from '@caribeng/ui';
  */
 class CbInputSelect {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.label = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        this.placeholder = input('Seleccione una opción', /* @ts-ignore */
+        this.placeholder = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.options = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
@@ -83,16 +85,16 @@ class CbInputSelect {
           [class.cb-is-invalid]="fieldState.invalid()"
           [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
           [attr.aria-required]="fieldState.required() || null"
-          [value]="value()"
           [disabled]="disabled() || cvaDisabled()"
           (change)="onSelect($event)"
           (blur)="onTouched()"
         >
-          @if (placeholder()) {
-            <option value="" disabled>{{ placeholder() }}</option>
+          @if ((placeholder() ?? t().select)) {
+            <option value="" disabled [selected]="!value()">{{ (placeholder() ?? t().select) }}</option>
           }
+          <!-- [selected] por opción: [value] en el <select> se aplicaría antes de crear las opciones -->
           @for (opt of options(); track opt.value) {
-            <option [value]="opt.value">{{ opt.label }}</option>
+            <option [value]="opt.value" [selected]="opt.value === value()">{{ opt.label }}</option>
           }
         </select>
         <span class="cb-input-select__chevron" aria-hidden="true">▾</span>
@@ -127,16 +129,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           [class.cb-is-invalid]="fieldState.invalid()"
           [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
           [attr.aria-required]="fieldState.required() || null"
-          [value]="value()"
           [disabled]="disabled() || cvaDisabled()"
           (change)="onSelect($event)"
           (blur)="onTouched()"
         >
-          @if (placeholder()) {
-            <option value="" disabled>{{ placeholder() }}</option>
+          @if ((placeholder() ?? t().select)) {
+            <option value="" disabled [selected]="!value()">{{ (placeholder() ?? t().select) }}</option>
           }
+          <!-- [selected] por opción: [value] en el <select> se aplicaría antes de crear las opciones -->
           @for (opt of options(); track opt.value) {
-            <option [value]="opt.value">{{ opt.label }}</option>
+            <option [value]="opt.value" [selected]="opt.value === value()">{{ opt.label }}</option>
           }
         </select>
         <span class="cb-input-select__chevron" aria-hidden="true">▾</span>