@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-caribe-onboarding.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';
 
 /**
  * Onboarding de Caribe Design: panel de bienvenida paso a paso con progreso y
@@ -12,6 +13,10 @@ import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Compo
  */
 class CbOnboarding {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         this.steps = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
         this.visible = model(true, /* @ts-ignore */
@@ -21,7 +26,9 @@ class CbOnboarding {
         this.currentStepIndex = output();
     }
     previous() {
-        this.index.update((i) => Math.max(0, i - 1));
+        if (this.index() === 0)
+            return;
+        this.index.update((i) => i - 1);
         this.currentStepIndex.emit(this.index());
     }
     next() {
@@ -36,7 +43,12 @@ class CbOnboarding {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbOnboarding, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbOnboarding, isStandalone: true, selector: "cb-onboarding", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", index: "indexChange", currentStepIndex: "currentStepIndex" }, ngImport: i0, template: `
     @if (visible() && steps().length) {
-      <section class="cb-onboarding" role="dialog" aria-label="Onboarding">
+      <section
+        class="cb-onboarding"
+        role="dialog"
+        [attr.aria-label]="t().onboarding"
+        (keydown.escape)="visible.set(false)"
+      >
         <div class="cb-onboarding__dots" aria-hidden="true">
           @for (step of steps(); track $index) {
             <span
@@ -45,10 +57,14 @@ class CbOnboarding {
             ></span>
           }
         </div>
-        <span class="cb-onboarding__counter">
-          {{ index() + 1 }} / {{ steps().length }}
-        </span>
-        <h2 class="cb-onboarding__title">{{ steps()[index()] }}</h2>
+        <!-- Región viva: al cambiar de paso se anuncian el contador y el título. -->
+        <div class="cb-onboarding__announce" aria-live="polite" aria-atomic="true">
+          <span class="cb-onboarding__counter" aria-hidden="true">
+            {{ index() + 1 }} / {{ steps().length }}
+          </span>
+          <span class="cb-onboarding__sr">{{ fmt(t().stepOf, index() + 1, steps().length) }}</span>
+          <h2 class="cb-onboarding__title">{{ steps()[index()] }}</h2>
+        </div>
         <div class="cb-onboarding__body"><ng-content /></div>
         <div class="cb-onboarding__actions">
           <button
@@ -56,7 +72,7 @@ class CbOnboarding {
             class="cb-onboarding__btn cb-onboarding__btn--ghost"
             (click)="visible.set(false)"
           >
-            Omitir
+            {{ t().skip }}
           </button>
           <button
             type="button"
@@ -64,25 +80,30 @@ class CbOnboarding {
             (click)="previous()"
             [disabled]="index() === 0"
           >
-            Anterior
+            {{ t().previous }}
           </button>
           <button
             type="button"
             class="cb-onboarding__btn cb-onboarding__btn--primary"
             (click)="next()"
           >
-            {{ index() === steps().length - 1 ? 'Comenzar' : 'Continuar' }}
+            {{ index() === steps().length - 1 ? t().start : t().continue }}
           </button>
         </div>
       </section>
     }
-  `, isInline: true, styles: [":host{display:block;width:100%;max-width:24rem}.cb-onboarding{display:flex;flex-direction:column;gap:var(--cb-space-3, .75rem);box-sizing:border-box;padding:var(--cb-space-6, 1.5rem);font-family:var(--cb-font-sans, inherit);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-lg, .75rem);box-shadow:var(--cb-shadow-md, 0 8px 24px rgba(0, 0, 0, .12));text-align:center}.cb-onboarding__dots{display:flex;justify-content:center;gap:var(--cb-space-1, .3rem)}.cb-onboarding__dot{width:.5rem;height:.5rem;border-radius:var(--cb-radius-full, 999px);background-color:var(--cb-color-surface-300, #cbd5e1);transition:all var(--cb-duration-normal, .2s) var(--cb-ease, ease)}.cb-onboarding__dot.cb-is-active{width:1.25rem;background-color:var(--cb-color-primary-500, #10b981)}.cb-onboarding__counter{font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted, #64748b)}.cb-onboarding__title{margin:0;font-size:var(--cb-text-xl, 1.25rem);font-weight:var(--cb-font-weight-bold, 700)}.cb-onboarding__body{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text, #334155);line-height:var(--cb-line-height-relaxed, 1.6)}.cb-onboarding__body:empty{display:none}.cb-onboarding__actions{display:flex;justify-content:center;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-2, .5rem)}.cb-onboarding__btn{padding:var(--cb-space-2, .5rem) var(--cb-space-4, 1rem);font:inherit;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-100, #f1f5f9);border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-onboarding__btn:hover:not(:disabled){background-color:var(--cb-color-surface-200, #e2e8f0)}.cb-onboarding__btn:disabled{opacity:.4;cursor:not-allowed}.cb-onboarding__btn--ghost{background-color:transparent;color:var(--cb-color-text-muted, #64748b)}.cb-onboarding__btn--primary{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857)}.cb-onboarding__btn--primary:hover:not(:disabled){background-color:var(--cb-color-primary-700, #065f46)}:host-context([data-theme=\"dark\"]) .cb-onboarding{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-onboarding__body{color:var(--cb-color-surface-200, #e2e8f0)}:host-context([data-theme=\"dark\"]) .cb-onboarding__btn{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-onboarding__btn--ghost{background-color:transparent;color:var(--cb-color-surface-300, #cbd5e1)}:host-context([data-theme=\"dark\"]) .cb-onboarding__btn--primary{background-color:var(--cb-color-primary-500, #10b981)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;max-width:24rem}.cb-onboarding{display:flex;flex-direction:column;gap:var(--cb-space-3, .75rem);box-sizing:border-box;padding:var(--cb-space-6, 1.5rem);font-family:var(--cb-font-sans, inherit);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-lg, .75rem);box-shadow:var(--cb-shadow-md, 0 8px 24px rgba(0, 0, 0, .12));text-align:center}.cb-onboarding__dots{display:flex;justify-content:center;gap:var(--cb-space-1, .3rem)}.cb-onboarding__dot{width:.5rem;height:.5rem;border-radius:var(--cb-radius-full, 999px);background-color:var(--cb-color-surface-300, #cbd5e1);transition:all var(--cb-duration-normal, .2s) var(--cb-ease, ease)}.cb-onboarding__dot.cb-is-active{width:1.25rem;background-color:var(--cb-color-primary-500, #10b981)}.cb-onboarding__announce{display:flex;flex-direction:column;gap:var(--cb-space-3, .75rem)}.cb-onboarding__counter{font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted, #64748b)}.cb-onboarding__title{margin:0;font-size:var(--cb-text-xl, 1.25rem);font-weight:var(--cb-font-weight-bold, 700)}.cb-onboarding__body{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text, #334155);line-height:var(--cb-line-height-relaxed, 1.6)}.cb-onboarding__body:empty{display:none}.cb-onboarding__actions{display:flex;justify-content:center;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-2, .5rem)}.cb-onboarding__btn{padding:var(--cb-space-2, .5rem) var(--cb-space-4, 1rem);font:inherit;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-100, #f1f5f9);border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-onboarding__btn:hover:not(:disabled){background-color:var(--cb-color-surface-200, #e2e8f0)}.cb-onboarding__btn:disabled{opacity:.4;cursor:not-allowed}.cb-onboarding__btn--ghost{background-color:transparent;color:var(--cb-color-text-muted, #64748b)}.cb-onboarding__btn--primary{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857)}.cb-onboarding__btn--primary:hover:not(:disabled){background-color:var(--cb-color-primary-700, #065f46)}:host-context([data-theme=\"dark\"]) .cb-onboarding{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-onboarding__body{color:var(--cb-color-surface-200, #e2e8f0)}:host-context([data-theme=\"dark\"]) .cb-onboarding__btn{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-onboarding__btn--ghost{background-color:transparent;color:var(--cb-color-surface-300, #cbd5e1)}:host-context([data-theme=\"dark\"]) .cb-onboarding__btn--primary{background-color:var(--cb-color-primary-500, #10b981)}.cb-onboarding__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbOnboarding, decorators: [{
             type: Component,
             args: [{ selector: 'cb-onboarding', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
     @if (visible() && steps().length) {
-      <section class="cb-onboarding" role="dialog" aria-label="Onboarding">
+      <section
+        class="cb-onboarding"
+        role="dialog"
+        [attr.aria-label]="t().onboarding"
+        (keydown.escape)="visible.set(false)"
+      >
         <div class="cb-onboarding__dots" aria-hidden="true">
           @for (step of steps(); track $index) {
             <span
@@ -91,10 +112,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             ></span>
           }
         </div>
-        <span class="cb-onboarding__counter">
-          {{ index() + 1 }} / {{ steps().length }}
-        </span>
-        <h2 class="cb-onboarding__title">{{ steps()[index()] }}</h2>
+        <!-- Región viva: al cambiar de paso se anuncian el contador y el título. -->
+        <div class="cb-onboarding__announce" aria-live="polite" aria-atomic="true">
+          <span class="cb-onboarding__counter" aria-hidden="true">
+            {{ index() + 1 }} / {{ steps().length }}
+          </span>
+          <span class="cb-onboarding__sr">{{ fmt(t().stepOf, index() + 1, steps().length) }}</span>
+          <h2 class="cb-onboarding__title">{{ steps()[index()] }}</h2>
+        </div>
         <div class="cb-onboarding__body"><ng-content /></div>
         <div class="cb-onboarding__actions">
           <button
@@ -102,7 +127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             class="cb-onboarding__btn cb-onboarding__btn--ghost"
             (click)="visible.set(false)"
           >
-            Omitir
+            {{ t().skip }}
           </button>
           <button
             type="button"
@@ -110,19 +135,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             (click)="previous()"
             [disabled]="index() === 0"
           >
-            Anterior
+            {{ t().previous }}
           </button>
           <button
             type="button"
             class="cb-onboarding__btn cb-onboarding__btn--primary"
             (click)="next()"
           >
-            {{ index() === steps().length - 1 ? 'Comenzar' : 'Continuar' }}
+            {{ index() === steps().length - 1 ? t().start : t().continue }}
           </button>
         </div>
       </section>
     }
-  `, styles: [":host{display:block;width:100%;max-width:24rem}.cb-onboarding{display:flex;flex-direction:column;gap:var(--cb-space-3, .75rem);box-sizing:border-box;padding:var(--cb-space-6, 1.5rem);font-family:var(--cb-font-sans, inherit);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-lg, .75rem);box-shadow:var(--cb-shadow-md, 0 8px 24px rgba(0, 0, 0, .12));text-align:center}.cb-onboarding__dots{display:flex;justify-content:center;gap:var(--cb-space-1, .3rem)}.cb-onboarding__dot{width:.5rem;height:.5rem;border-radius:var(--cb-radius-full, 999px);background-color:var(--cb-color-surface-300, #cbd5e1);transition:all var(--cb-duration-normal, .2s) var(--cb-ease, ease)}.cb-onboarding__dot.cb-is-active{width:1.25rem;background-color:var(--cb-color-primary-500, #10b981)}.cb-onboarding__counter{font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted, #64748b)}.cb-onboarding__title{margin:0;font-size:var(--cb-text-xl, 1.25rem);font-weight:var(--cb-font-weight-bold, 700)}.cb-onboarding__body{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text, #334155);line-height:var(--cb-line-height-relaxed, 1.6)}.cb-onboarding__body:empty{display:none}.cb-onboarding__actions{display:flex;justify-content:center;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-2, .5rem)}.cb-onboarding__btn{padding:var(--cb-space-2, .5rem) var(--cb-space-4, 1rem);font:inherit;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-100, #f1f5f9);border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-onboarding__btn:hover:not(:disabled){background-color:var(--cb-color-surface-200, #e2e8f0)}.cb-onboarding__btn:disabled{opacity:.4;cursor:not-allowed}.cb-onboarding__btn--ghost{background-color:transparent;color:var(--cb-color-text-muted, #64748b)}.cb-onboarding__btn--primary{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857)}.cb-onboarding__btn--primary:hover:not(:disabled){background-color:var(--cb-color-primary-700, #065f46)}:host-context([data-theme=\"dark\"]) .cb-onboarding{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-onboarding__body{color:var(--cb-color-surface-200, #e2e8f0)}:host-context([data-theme=\"dark\"]) .cb-onboarding__btn{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-onboarding__btn--ghost{background-color:transparent;color:var(--cb-color-surface-300, #cbd5e1)}:host-context([data-theme=\"dark\"]) .cb-onboarding__btn--primary{background-color:var(--cb-color-primary-500, #10b981)}\n"] }]
+  `, styles: [":host{display:block;width:100%;max-width:24rem}.cb-onboarding{display:flex;flex-direction:column;gap:var(--cb-space-3, .75rem);box-sizing:border-box;padding:var(--cb-space-6, 1.5rem);font-family:var(--cb-font-sans, inherit);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-lg, .75rem);box-shadow:var(--cb-shadow-md, 0 8px 24px rgba(0, 0, 0, .12));text-align:center}.cb-onboarding__dots{display:flex;justify-content:center;gap:var(--cb-space-1, .3rem)}.cb-onboarding__dot{width:.5rem;height:.5rem;border-radius:var(--cb-radius-full, 999px);background-color:var(--cb-color-surface-300, #cbd5e1);transition:all var(--cb-duration-normal, .2s) var(--cb-ease, ease)}.cb-onboarding__dot.cb-is-active{width:1.25rem;background-color:var(--cb-color-primary-500, #10b981)}.cb-onboarding__announce{display:flex;flex-direction:column;gap:var(--cb-space-3, .75rem)}.cb-onboarding__counter{font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted, #64748b)}.cb-onboarding__title{margin:0;font-size:var(--cb-text-xl, 1.25rem);font-weight:var(--cb-font-weight-bold, 700)}.cb-onboarding__body{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text, #334155);line-height:var(--cb-line-height-relaxed, 1.6)}.cb-onboarding__body:empty{display:none}.cb-onboarding__actions{display:flex;justify-content:center;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-2, .5rem)}.cb-onboarding__btn{padding:var(--cb-space-2, .5rem) var(--cb-space-4, 1rem);font:inherit;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-100, #f1f5f9);border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-onboarding__btn:hover:not(:disabled){background-color:var(--cb-color-surface-200, #e2e8f0)}.cb-onboarding__btn:disabled{opacity:.4;cursor:not-allowed}.cb-onboarding__btn--ghost{background-color:transparent;color:var(--cb-color-text-muted, #64748b)}.cb-onboarding__btn--primary{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857)}.cb-onboarding__btn--primary:hover:not(:disabled){background-color:var(--cb-color-primary-700, #065f46)}:host-context([data-theme=\"dark\"]) .cb-onboarding{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-onboarding__body{color:var(--cb-color-surface-200, #e2e8f0)}:host-context([data-theme=\"dark\"]) .cb-onboarding__btn{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-onboarding__btn--ghost{background-color:transparent;color:var(--cb-color-surface-300, #cbd5e1)}:host-context([data-theme=\"dark\"]) .cb-onboarding__btn--primary{background-color:var(--cb-color-primary-500, #10b981)}.cb-onboarding__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
         }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }, { type: i0.Output, args: ["indexChange"] }], currentStepIndex: [{ type: i0.Output, args: ["currentStepIndex"] }] } });
 
 /**

package/fesm2022/caribeng-ui-caribe-pictogram.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 CbPictogram {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.name = input('security-shield', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
         this.size = input('56px', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.alt = input('Pictograma', /* @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: CbPictogram, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -15,7 +18,7 @@ class CbPictogram {
     <svg
       viewBox="0 0 64 64"
       role="img"
-      [attr.aria-label]="alt() || name()"
+      [attr.aria-label]="(alt() ?? t().pictogram) || name()"
       style="width: 100%; height: 100%"
     >
       <circle cx="32" cy="32" r="28" fill="var(--cb-color-primary-100, #d1fae5)" />
@@ -33,7 +36,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <svg
       viewBox="0 0 64 64"
       role="img"
-      [attr.aria-label]="alt() || name()"
+      [attr.aria-label]="(alt() ?? t().pictogram) || name()"
       style="width: 100%; height: 100%"
     >
       <circle cx="32" cy="32" r="28" fill="var(--cb-color-primary-100, #d1fae5)" />

package/fesm2022/caribeng-ui-caribe-pop-over.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, model, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, model, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbOverlayFocus } from '@caribeng/ui';
 
 /**
  * Pop-over de Caribe Design: disparador con panel flotante de contenido
@@ -10,30 +11,45 @@ import { input, model, ViewEncapsulation, ChangeDetectionStrategy, Component } f
  * <cb-pop-over triggerLabel="Más info">Detalle contextual…</cb-pop-over>
  * ```
  */
+let nextId = 0;
 class CbPopOver {
     constructor() {
-        this.triggerLabel = input('Mostrar información', /* @ts-ignore */
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.triggerLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
         this.visible = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        this.panelId = `cb-pop-over-${++nextId}`;
+        this.closeBtn = viewChild('closeBtn', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeBtn" }] : /* istanbul ignore next */ []));
+        cbOverlayFocus({ open: this.visible, initialFocus: () => this.closeBtn()?.nativeElement });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPopOver, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPopOver, isStandalone: true, selector: "cb-pop-over", inputs: { triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPopOver, isStandalone: true, selector: "cb-pop-over", inputs: { triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, viewQueries: [{ propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="cb-pop-over">
       <button
         type="button"
         class="cb-pop-over__trigger"
         [attr.aria-expanded]="visible()"
+        [attr.aria-controls]="visible() ? panelId : null"
         (click)="visible.update((v) => !v)"
       >
-        {{ triggerLabel() }}
+        {{ (triggerLabel() ?? t().showInfo) }}
       </button>
       @if (visible()) {
-        <section class="cb-pop-over__panel" role="dialog">
+        <section
+          class="cb-pop-over__panel"
+          role="dialog"
+          [id]="panelId"
+          [attr.aria-label]="triggerLabel() ?? t().showInfo"
+          (keydown.escape)="visible.set(false)"
+        >
           <button
+            #closeBtn
             type="button"
             class="cb-pop-over__close"
-            aria-label="Cerrar"
+            [attr.aria-label]="t().close"
             (click)="visible.set(false)"
           >
             ×
@@ -52,16 +68,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         type="button"
         class="cb-pop-over__trigger"
         [attr.aria-expanded]="visible()"
+        [attr.aria-controls]="visible() ? panelId : null"
         (click)="visible.update((v) => !v)"
       >
-        {{ triggerLabel() }}
+        {{ (triggerLabel() ?? t().showInfo) }}
       </button>
       @if (visible()) {
-        <section class="cb-pop-over__panel" role="dialog">
+        <section
+          class="cb-pop-over__panel"
+          role="dialog"
+          [id]="panelId"
+          [attr.aria-label]="triggerLabel() ?? t().showInfo"
+          (keydown.escape)="visible.set(false)"
+        >
           <button
+            #closeBtn
             type="button"
             class="cb-pop-over__close"
-            aria-label="Cerrar"
+            [attr.aria-label]="t().close"
             (click)="visible.set(false)"
           >
             ×
@@ -71,7 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       }
     </div>
   `, styles: [":host{display:inline-block}.cb-pop-over{position:relative;display:inline-block;font-family:var(--cb-font-sans, inherit)}.cb-pop-over__trigger{padding:var(--cb-space-2, .5rem) var(--cb-space-4, 1rem);font:inherit;font-size:var(--cb-text-sm, .875rem);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, #cbd5e1);border-radius:var(--cb-radius-md, .5rem);cursor:pointer}.cb-pop-over__trigger:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-pop-over__panel{position:absolute;top:calc(100% + var(--cb-space-2, .5rem));left:0;z-index:var(--cb-z-popover, 900);min-width:14rem;max-width:20rem;padding:var(--cb-space-4, 1rem);padding-right:var(--cb-space-6, 2rem);font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text, #334155);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-md, .5rem);box-shadow:var(--cb-shadow-lg, 0 12px 28px rgba(0, 0, 0, .18));animation:cb-pop-in var(--cb-duration-fast, .12s) var(--cb-ease-out, ease-out)}.cb-pop-over__close{position:absolute;top:var(--cb-space-1, .25rem);right:var(--cb-space-1, .25rem);display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:1rem;line-height:1;color:var(--cb-color-text-muted, #64748b);background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer}.cb-pop-over__close:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}@keyframes cb-pop-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}:host-context([data-theme=\"dark\"]) .cb-pop-over__trigger,:host-context([data-theme=\"dark\"]) .cb-pop-over__panel{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-pop-over__trigger:hover{background-color:var(--cb-color-surface-700, #334155)}\n"] }]
-        }], propDecorators: { triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], closeBtn: [{ type: i0.ViewChild, args: ['closeBtn', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Preloader de Caribe Design: pantalla/bloque de carga inicial con marca,
@@ -12,22 +13,24 @@ import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@a
  */
 class CbPreloader {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.active = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-        this.title = input('CaribeNG', /* @ts-ignore */
+        this.title = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.label = input('Preparando tu sesión segura…', /* @ts-ignore */
+        this.label = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPreloader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPreloader, isStandalone: true, selector: "cb-preloader", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-preloader-host" }, ngImport: i0, template: `
     @if (active()) {
-      <div class="cb-preloader" role="alert" aria-busy="true">
+      <div class="cb-preloader" role="alert">
         <strong class="cb-preloader__title">{{ title() }}</strong>
         <div class="cb-preloader__bar" aria-hidden="true">
           <span class="cb-preloader__bar-fill"></span>
         </div>
-        <span class="cb-preloader__label">{{ label() }}</span>
+        <span class="cb-preloader__label">{{ (label() ?? t().preparingSession) }}</span>
       </div>
     }
   `, isInline: true, styles: [":host{display:inline-flex}.cb-preloader{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-3, .75rem);box-sizing:border-box;min-width:15rem;padding:var(--cb-space-6, 1.5rem) var(--cb-space-8, 2rem);font-family:var(--cb-font-sans, inherit);text-align:center;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-lg, .75rem);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08))}.cb-preloader__title{font-size:var(--cb-text-lg, 1.05rem);font-weight:var(--cb-font-weight-bold, 700);color:var(--cb-color-primary-600, #047857)}.cb-preloader__bar{position:relative;width:100%;height:.375rem;overflow:hidden;background-color:var(--cb-color-surface-200, #e2e8f0);border-radius:var(--cb-radius-full, 999px)}.cb-preloader__bar-fill{position:absolute;top:0;left:0;width:40%;height:100%;background-color:var(--cb-color-primary-500, #10b981);border-radius:var(--cb-radius-full, 999px);animation:cb-preloader-slide 1.3s ease-in-out infinite}.cb-preloader__label{font-size:var(--cb-text-sm, .8125rem);color:var(--cb-color-text-muted, #64748b)}@keyframes cb-preloader-slide{0%{left:-40%}to{left:100%}}@media(prefers-reduced-motion:reduce){.cb-preloader__bar-fill{animation-duration:3s}}:host-context([data-theme=\"dark\"]) .cb-preloader{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-preloader__bar{background-color:var(--cb-color-surface-700, #334155)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -36,12 +39,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type: Component,
             args: [{ selector: 'cb-preloader', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-preloader-host' }, template: `
     @if (active()) {
-      <div class="cb-preloader" role="alert" aria-busy="true">
+      <div class="cb-preloader" role="alert">
         <strong class="cb-preloader__title">{{ title() }}</strong>
         <div class="cb-preloader__bar" aria-hidden="true">
           <span class="cb-preloader__bar-fill"></span>
         </div>
-        <span class="cb-preloader__label">{{ label() }}</span>
+        <span class="cb-preloader__label">{{ (label() ?? t().preparingSession) }}</span>
       </div>
     }
   `, styles: [":host{display:inline-flex}.cb-preloader{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-3, .75rem);box-sizing:border-box;min-width:15rem;padding:var(--cb-space-6, 1.5rem) var(--cb-space-8, 2rem);font-family:var(--cb-font-sans, inherit);text-align:center;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-lg, .75rem);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08))}.cb-preloader__title{font-size:var(--cb-text-lg, 1.05rem);font-weight:var(--cb-font-weight-bold, 700);color:var(--cb-color-primary-600, #047857)}.cb-preloader__bar{position:relative;width:100%;height:.375rem;overflow:hidden;background-color:var(--cb-color-surface-200, #e2e8f0);border-radius:var(--cb-radius-full, 999px)}.cb-preloader__bar-fill{position:absolute;top:0;left:0;width:40%;height:100%;background-color:var(--cb-color-primary-500, #10b981);border-radius:var(--cb-radius-full, 999px);animation:cb-preloader-slide 1.3s ease-in-out infinite}.cb-preloader__label{font-size:var(--cb-text-sm, .8125rem);color:var(--cb-color-text-muted, #64748b)}@keyframes cb-preloader-slide{0%{left:-40%}to{left:100%}}@media(prefers-reduced-motion:reduce){.cb-preloader__bar-fill{animation-duration:3s}}:host-context([data-theme=\"dark\"]) .cb-preloader{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-preloader__bar{background-color:var(--cb-color-surface-700, #334155)}\n"] }]

package/fesm2022/caribeng-ui-caribe-progress-bar.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Progress-bar de Caribe Design: barra de progreso determinada (0–100) con
@@ -12,6 +13,8 @@ import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component
  */
 class CbProgressBar {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Valor actual (0–100). */
         this.value = input(60, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -41,7 +44,7 @@ class CbProgressBar {
         [attr.aria-valuenow]="clamped()"
         aria-valuemin="0"
         aria-valuemax="100"
-        [attr.aria-label]="label() || 'Progreso'"
+        [attr.aria-label]="label() || t().progress"
       >
         <div class="cb-progress-bar__fill" [style.width.%]="clamped()"></div>
       </div>
@@ -66,7 +69,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         [attr.aria-valuenow]="clamped()"
         aria-valuemin="0"
         aria-valuemax="100"
-        [attr.aria-label]="label() || 'Progreso'"
+        [attr.aria-label]="label() || t().progress"
       >
         <div class="cb-progress-bar__fill" [style.width.%]="clamped()"></div>
       </div>

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

@@ -14,7 +14,7 @@ import { CbIcon } from '@caribeng/ui/icon';
 class CbShortcut {
     constructor() {
         /** Texto del acceso directo. */
-        this.label = input('Transferir', /* @ts-ignore */
+        this.label = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /** Icono del set núcleo. */
         this.icon = input('arrow-right', /* @ts-ignore */
@@ -22,14 +22,18 @@ class CbShortcut {
         /** Deshabilita el acceso. */
         this.disabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Nombre accesible cuando el atajo no tiene `label` visible. */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         /** Emite al activar el acceso. */
         this.action = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbShortcut, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbShortcut, isStandalone: true, selector: "cb-shortcut", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { classAttribute: "cb-shortcut-host" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbShortcut, isStandalone: true, selector: "cb-shortcut", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { classAttribute: "cb-shortcut-host" }, ngImport: i0, template: `
     <button
       type="button"
       class="cb-shortcut"
+      [attr.aria-label]="ariaLabel() || null"
       [disabled]="disabled()"
       (click)="!disabled() && action.emit()"
     >
@@ -46,6 +50,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <button
       type="button"
       class="cb-shortcut"
+      [attr.aria-label]="ariaLabel() || null"
       [disabled]="disabled()"
       (click)="!disabled() && action.emit()"
     >
@@ -55,7 +60,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <span class="cb-shortcut__label">{{ label() }}</span>
     </button>
   `, styles: [":host{display:inline-flex}.cb-shortcut{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--cb-space-2, .5rem);min-width:6rem;padding:var(--cb-space-4, 1rem);font-family:var(--cb-font-sans, inherit);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-lg, .75rem);cursor:pointer;transition:border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),box-shadow var(--cb-duration-fast, .12s) var(--cb-ease, ease),transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-shortcut__icon{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;color:var(--cb-color-primary-600, #047857);background-color:var(--cb-color-primary-50, #ecfdf5);border-radius:var(--cb-radius-full, 999px)}.cb-shortcut__label{font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-semibold, 600);text-align:center}.cb-shortcut:hover:not(:disabled){border-color:var(--cb-color-primary-300, #6ee7b7);box-shadow:var(--cb-shadow-md, 0 4px 12px rgba(0, 0, 0, .1));transform:translateY(-1px)}.cb-shortcut:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-shortcut:disabled{opacity:.55;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-shortcut{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-shortcut__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 }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/caribeng-ui-caribe-step-indicator.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 /**
  * Step-indicator de Caribe Design: progreso por segmentos para flujos de varios
@@ -13,6 +14,10 @@ import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component
  */
 class CbStepIndicator {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         /** Paso actual (1-based). */
         this.currentStep = input(1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
@@ -20,7 +25,7 @@ class CbStepIndicator {
         this.totalSteps = input(4, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "totalSteps" }] : /* istanbul ignore next */ []));
         /** Leyenda del paso actual. */
-        this.label = input('Datos de destino', /* @ts-ignore */
+        this.label = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.total = computed(() => Math.max(1, this.totalSteps()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
@@ -37,7 +42,8 @@ class CbStepIndicator {
       [attr.aria-valuenow]="current()"
       aria-valuemin="1"
       [attr.aria-valuemax]="total()"
-      [attr.aria-label]="label() || 'Progreso de pasos'"
+      [attr.aria-valuetext]="fmt(t().stepOf, current(), total())"
+      [attr.aria-label]="label() || t().stepsProgress"
     >
       <div class="cb-step-indicator__track" aria-hidden="true">
         @for (step of steps(); track step) {
@@ -49,7 +55,7 @@ class CbStepIndicator {
         }
       </div>
       <div class="cb-step-indicator__caption">
-        <strong class="cb-step-indicator__count">Paso {{ current() }} de {{ total() }}</strong>
+        <strong class="cb-step-indicator__count">{{ fmt(t().stepOf, current(), total()) }}</strong>
         @if (label()) {
           <span class="cb-step-indicator__label">· {{ label() }}</span>
         }
@@ -66,7 +72,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       [attr.aria-valuenow]="current()"
       aria-valuemin="1"
       [attr.aria-valuemax]="total()"
-      [attr.aria-label]="label() || 'Progreso de pasos'"
+      [attr.aria-valuetext]="fmt(t().stepOf, current(), total())"
+      [attr.aria-label]="label() || t().stepsProgress"
     >
       <div class="cb-step-indicator__track" aria-hidden="true">
         @for (step of steps(); track step) {
@@ -78,7 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       </div>
       <div class="cb-step-indicator__caption">
-        <strong class="cb-step-indicator__count">Paso {{ current() }} de {{ total() }}</strong>
+        <strong class="cb-step-indicator__count">{{ fmt(t().stepOf, current(), total()) }}</strong>
         @if (label()) {
           <span class="cb-step-indicator__label">· {{ label() }}</span>
         }

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

@@ -1,8 +1,11 @@
 import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 class CbStroke {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.name = input('01', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
         this.size = input('220px', /* @ts-ignore */
@@ -11,7 +14,7 @@ class CbStroke {
         ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.ariaHidden = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []));
-        this.alt = input('Trazo decorativo', /* @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: CbStroke, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -21,7 +24,7 @@ class CbStroke {
       viewBox="0 0 240 36"
       [attr.role]="ariaHidden() ? null : 'img'"
       [attr.aria-hidden]="ariaHidden() ? 'true' : null"
-      [attr.aria-label]="ariaHidden() ? null : alt()"
+      [attr.aria-label]="ariaHidden() ? null : (alt() ?? t().decorativeStroke)"
       style="width: 100%; height: auto"
     >
       <path
@@ -45,7 +48,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       viewBox="0 0 240 36"
       [attr.role]="ariaHidden() ? null : 'img'"
       [attr.aria-hidden]="ariaHidden() ? 'true' : null"
-      [attr.aria-label]="ariaHidden() ? null : alt()"
+      [attr.aria-label]="ariaHidden() ? null : (alt() ?? t().decorativeStroke)"
       style="width: 100%; height: auto"
     >
       <path

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, model, output, signal, computed, 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';
 
 let nextUid = 0;
 /**
@@ -17,6 +17,8 @@ let nextUid = 0;
  */
 class CbSwitch {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Etiqueta visible junto al control. */
         this.label = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -102,7 +104,7 @@ class CbSwitch {
         [disabled]="isDisabled()"
         [attr.aria-checked]="checked()"
         [attr.aria-required]="fieldState.required() || null"
-        [attr.aria-label]="label() ? null : 'Interruptor'"
+        [attr.aria-label]="label() ? null : t().switch"
         (change)="toggle()"
         (blur)="handleBlur()"
       />
@@ -148,7 +150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         [disabled]="isDisabled()"
         [attr.aria-checked]="checked()"
         [attr.aria-required]="fieldState.required() || null"
-        [attr.aria-label]="label() ? null : 'Interruptor'"
+        [attr.aria-label]="label() ? null : t().switch"
         (change)="toggle()"
         (blur)="handleBlur()"
       />

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

@@ -13,7 +13,7 @@ import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Compo
 class CbTagButton {
     constructor() {
         /** Texto del tag. */
-        this.label = input('Filtro', /* @ts-ignore */
+        this.label = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /** Deshabilita la interacción. */
         this.disabled = input(false, /* @ts-ignore */