@caribeng/ui 22.1.1 → 22.2.0

package/fesm2022/caribeng-ui-caribe-coachmark.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';
 
 /**
  * Coachmark de Caribe Design: tarjeta de ayuda guiada paso a paso para resaltar
@@ -12,6 +13,10 @@ import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Compo
  */
 class CbCoachmark {
     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 CbCoachmark {
         this.stepChange = output();
     }
     previous() {
-        this.index.update((i) => Math.max(0, i - 1));
+        if (this.index() === 0)
+            return;
+        this.index.update((i) => i - 1);
         this.stepChange.emit(this.index());
     }
     next() {
@@ -38,18 +45,26 @@ class CbCoachmark {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCoachmark, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCoachmark, isStandalone: true, selector: "cb-coachmark", 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", stepChange: "stepChange" }, ngImport: i0, template: `
     @if (visible() && steps().length) {
-      <aside class="cb-coachmark" role="dialog" aria-label="Ayuda guiada">
-        <span class="cb-coachmark__counter">
-          Paso {{ index() + 1 }} de {{ steps().length }}
-        </span>
-        <h3 class="cb-coachmark__title">{{ steps()[index()] }}</h3>
+      <aside
+        class="cb-coachmark"
+        role="dialog"
+        [attr.aria-label]="t().guidedHelp"
+        (keydown.escape)="close()"
+      >
+        <!-- Región viva: al cambiar de paso se anuncian el contador y el título. -->
+        <div class="cb-coachmark__announce" aria-live="polite" aria-atomic="true">
+          <span class="cb-coachmark__counter">
+            {{ fmt(t().stepOf, index() + 1, steps().length) }}
+          </span>
+          <h3 class="cb-coachmark__title">{{ steps()[index()] }}</h3>
+        </div>
         <div class="cb-coachmark__actions">
           <button
             type="button"
             class="cb-coachmark__btn cb-coachmark__btn--ghost"
             (click)="close()"
           >
-            Omitir
+            {{ t().skip }}
           </button>
           <button
             type="button"
@@ -57,36 +72,44 @@ class CbCoachmark {
             (click)="previous()"
             [disabled]="index() === 0"
           >
-            Anterior
+            {{ t().previous }}
           </button>
           <button
             type="button"
             class="cb-coachmark__btn cb-coachmark__btn--primary"
             (click)="next()"
           >
-            {{ index() === steps().length - 1 ? 'Finalizar' : 'Siguiente' }}
+            {{ index() === steps().length - 1 ? t().finish : t().next }}
           </button>
         </div>
       </aside>
     }
-  `, isInline: true, styles: [":host{display:block;width:100%;max-width:20rem}.cb-coachmark{position:relative;display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem);box-sizing:border-box;padding:var(--cb-space-4, 1rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-surface-0, #ffffff);background-color:var(--cb-color-surface-900, #0f172a);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-lg, 0 16px 36px rgba(0, 0, 0, .3))}.cb-coachmark__counter{font-size:var(--cb-text-xs, .72rem);font-weight:var(--cb-font-weight-semibold, 600);letter-spacing:.04em;text-transform:uppercase;color:var(--cb-color-primary-300, #6ee7b7)}.cb-coachmark__title{margin:0;font-size:var(--cb-text-base, .95rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:var(--cb-line-height-normal, 1.45)}.cb-coachmark__actions{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-2, .5rem)}.cb-coachmark__btn{padding:var(--cb-space-2, .4rem) var(--cb-space-3, .75rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-surface-0, #ffffff);background-color:#ffffff1f;border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-coachmark__btn:hover:not(:disabled){background-color:#ffffff38}.cb-coachmark__btn:disabled{opacity:.4;cursor:not-allowed}.cb-coachmark__btn--ghost{background-color:transparent}.cb-coachmark__btn--primary{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857)}.cb-coachmark__btn--primary:hover:not(:disabled){background-color:var(--cb-color-primary-500, #10b981)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;max-width:20rem}.cb-coachmark{position:relative;display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem);box-sizing:border-box;padding:var(--cb-space-4, 1rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-surface-0, #ffffff);background-color:var(--cb-color-surface-900, #0f172a);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-lg, 0 16px 36px rgba(0, 0, 0, .3))}.cb-coachmark__announce{display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem)}.cb-coachmark__counter{font-size:var(--cb-text-xs, .72rem);font-weight:var(--cb-font-weight-semibold, 600);letter-spacing:.04em;text-transform:uppercase;color:var(--cb-color-primary-300, #6ee7b7)}.cb-coachmark__title{margin:0;font-size:var(--cb-text-base, .95rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:var(--cb-line-height-normal, 1.45)}.cb-coachmark__actions{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-2, .5rem)}.cb-coachmark__btn{padding:var(--cb-space-2, .4rem) var(--cb-space-3, .75rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-surface-0, #ffffff);background-color:#ffffff1f;border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-coachmark__btn:hover:not(:disabled){background-color:#ffffff38}.cb-coachmark__btn:disabled{opacity:.4;cursor:not-allowed}.cb-coachmark__btn--ghost{background-color:transparent}.cb-coachmark__btn--primary{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857)}.cb-coachmark__btn--primary:hover:not(:disabled){background-color:var(--cb-color-primary-500, #10b981)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCoachmark, decorators: [{
             type: Component,
             args: [{ selector: 'cb-coachmark', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
     @if (visible() && steps().length) {
-      <aside class="cb-coachmark" role="dialog" aria-label="Ayuda guiada">
-        <span class="cb-coachmark__counter">
-          Paso {{ index() + 1 }} de {{ steps().length }}
-        </span>
-        <h3 class="cb-coachmark__title">{{ steps()[index()] }}</h3>
+      <aside
+        class="cb-coachmark"
+        role="dialog"
+        [attr.aria-label]="t().guidedHelp"
+        (keydown.escape)="close()"
+      >
+        <!-- Región viva: al cambiar de paso se anuncian el contador y el título. -->
+        <div class="cb-coachmark__announce" aria-live="polite" aria-atomic="true">
+          <span class="cb-coachmark__counter">
+            {{ fmt(t().stepOf, index() + 1, steps().length) }}
+          </span>
+          <h3 class="cb-coachmark__title">{{ steps()[index()] }}</h3>
+        </div>
         <div class="cb-coachmark__actions">
           <button
             type="button"
             class="cb-coachmark__btn cb-coachmark__btn--ghost"
             (click)="close()"
           >
-            Omitir
+            {{ t().skip }}
           </button>
           <button
             type="button"
@@ -94,19 +117,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-coachmark__btn cb-coachmark__btn--primary"
             (click)="next()"
           >
-            {{ index() === steps().length - 1 ? 'Finalizar' : 'Siguiente' }}
+            {{ index() === steps().length - 1 ? t().finish : t().next }}
           </button>
         </div>
       </aside>
     }
-  `, styles: [":host{display:block;width:100%;max-width:20rem}.cb-coachmark{position:relative;display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem);box-sizing:border-box;padding:var(--cb-space-4, 1rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-surface-0, #ffffff);background-color:var(--cb-color-surface-900, #0f172a);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-lg, 0 16px 36px rgba(0, 0, 0, .3))}.cb-coachmark__counter{font-size:var(--cb-text-xs, .72rem);font-weight:var(--cb-font-weight-semibold, 600);letter-spacing:.04em;text-transform:uppercase;color:var(--cb-color-primary-300, #6ee7b7)}.cb-coachmark__title{margin:0;font-size:var(--cb-text-base, .95rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:var(--cb-line-height-normal, 1.45)}.cb-coachmark__actions{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-2, .5rem)}.cb-coachmark__btn{padding:var(--cb-space-2, .4rem) var(--cb-space-3, .75rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-surface-0, #ffffff);background-color:#ffffff1f;border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-coachmark__btn:hover:not(:disabled){background-color:#ffffff38}.cb-coachmark__btn:disabled{opacity:.4;cursor:not-allowed}.cb-coachmark__btn--ghost{background-color:transparent}.cb-coachmark__btn--primary{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857)}.cb-coachmark__btn--primary:hover:not(:disabled){background-color:var(--cb-color-primary-500, #10b981)}\n"] }]
+  `, styles: [":host{display:block;width:100%;max-width:20rem}.cb-coachmark{position:relative;display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem);box-sizing:border-box;padding:var(--cb-space-4, 1rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-surface-0, #ffffff);background-color:var(--cb-color-surface-900, #0f172a);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-lg, 0 16px 36px rgba(0, 0, 0, .3))}.cb-coachmark__announce{display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem)}.cb-coachmark__counter{font-size:var(--cb-text-xs, .72rem);font-weight:var(--cb-font-weight-semibold, 600);letter-spacing:.04em;text-transform:uppercase;color:var(--cb-color-primary-300, #6ee7b7)}.cb-coachmark__title{margin:0;font-size:var(--cb-text-base, .95rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:var(--cb-line-height-normal, 1.45)}.cb-coachmark__actions{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-2, .5rem)}.cb-coachmark__btn{padding:var(--cb-space-2, .4rem) var(--cb-space-3, .75rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-surface-0, #ffffff);background-color:#ffffff1f;border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-coachmark__btn:hover:not(:disabled){background-color:#ffffff38}.cb-coachmark__btn:disabled{opacity:.4;cursor:not-allowed}.cb-coachmark__btn--ghost{background-color:transparent}.cb-coachmark__btn--primary{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857)}.cb-coachmark__btn--primary:hover:not(:disabled){background-color:var(--cb-color-primary-500, #10b981)}\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"] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }] } });
 
 /**

package/fesm2022/caribeng-ui-caribe-data-table.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Data-table de Caribe Design: tabla simple de columnas y filas con mensaje de
@@ -12,21 +13,26 @@ import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@a
  */
 class CbDataTable {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.columns = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
         this.rows = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-        this.emptyMessage = input('No hay datos', /* @ts-ignore */
+        this.emptyMessage = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        /** Nombre accesible de la tabla (p. ej. "Movimientos del mes"). */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDataTable, isStandalone: true, selector: "cb-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDataTable, isStandalone: true, selector: "cb-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="cb-data-table">
-      <table class="cb-data-table__table">
+      <table class="cb-data-table__table" [attr.aria-label]="ariaLabel() || null">
         <thead>
           <tr>
             @for (col of columns(); track col) {
-              <th class="cb-data-table__th">{{ col }}</th>
+              <th class="cb-data-table__th" scope="col">{{ col }}</th>
             }
           </tr>
         </thead>
@@ -40,7 +46,7 @@ class CbDataTable {
           } @empty {
             <tr>
               <td class="cb-data-table__empty" [attr.colspan]="columns().length">
-                {{ emptyMessage() }}
+                {{ (emptyMessage() ?? t().noData) }}
               </td>
             </tr>
           }
@@ -53,11 +59,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type: Component,
             args: [{ selector: 'cb-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
     <div class="cb-data-table">
-      <table class="cb-data-table__table">
+      <table class="cb-data-table__table" [attr.aria-label]="ariaLabel() || null">
         <thead>
           <tr>
             @for (col of columns(); track col) {
-              <th class="cb-data-table__th">{{ col }}</th>
+              <th class="cb-data-table__th" scope="col">{{ col }}</th>
             }
           </tr>
         </thead>
@@ -71,7 +77,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           } @empty {
             <tr>
               <td class="cb-data-table__empty" [attr.colspan]="columns().length">
-                {{ emptyMessage() }}
+                {{ (emptyMessage() ?? t().noData) }}
               </td>
             </tr>
           }
@@ -79,7 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       </table>
     </div>
   `, styles: [":host{display:block;width:100%}.cb-data-table{width:100%;overflow-x:auto;font-family:var(--cb-font-sans, inherit);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem)}.cb-data-table__table{width:100%;border-collapse:collapse;font-size:var(--cb-text-sm, .875rem)}.cb-data-table__th{padding:var(--cb-space-3, .75rem) var(--cb-space-4, 1rem);text-align:left;font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted, #64748b);background-color:var(--cb-color-surface-50, #f8fafc);border-bottom:1px solid var(--cb-color-border, #e2e8f0);white-space:nowrap}.cb-data-table__td{padding:var(--cb-space-3, .75rem) var(--cb-space-4, 1rem);color:var(--cb-color-text, #334155);border-bottom:1px solid var(--cb-color-border, #e2e8f0)}.cb-data-table__row:last-child .cb-data-table__td{border-bottom:none}.cb-data-table__row:hover .cb-data-table__td{background-color:var(--cb-color-surface-50, #f8fafc)}.cb-data-table__empty{padding:var(--cb-space-5, 1.25rem);text-align:center;color:var(--cb-color-text-muted, #64748b)}:host-context([data-theme=\"dark\"]) .cb-data-table{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-data-table__th{color:var(--cb-color-surface-300, #cbd5e1);background-color:var(--cb-color-surface-900, #0f172a);border-bottom-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-data-table__td{color:var(--cb-color-surface-100, #f1f5f9);border-bottom-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-data-table__row:hover .cb-data-table__td{background-color:var(--cb-color-surface-700, #334155)}\n"] }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }] } });
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, model, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, model, inject, ElementRef, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 /**
  * Dots-indicator de Caribe Design: indicador de paginación por puntos. El punto
@@ -12,18 +13,43 @@ import { input, model, computed, ViewEncapsulation, ChangeDetectionStrategy, Com
  */
 class CbDotsIndicator {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         /** Número de puntos. */
         this.count = input(4, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
         /** Índice activo (two-way). */
         this.activeIndex = model(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef);
         this.indices = computed(() => Array.from({ length: Math.max(1, this.count()) }, (_, i) => i), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "indices" }] : /* istanbul ignore next */ []));
     }
+    /** Patrón *tabs*: flechas (circular), Inicio y Fin cambian de página y mueven el foco. */
+    onKeydown(event) {
+        const last = this.indices().length - 1;
+        const cur = this.activeIndex();
+        const target = event.key === 'ArrowRight' ? (cur < last ? cur + 1 : 0)
+            : event.key === 'ArrowLeft' ? (cur > 0 ? cur - 1 : last)
+                : event.key === 'Home' ? 0
+                    : event.key === 'End' ? last
+                        : -1;
+        if (target < 0)
+            return;
+        event.preventDefault();
+        this.activeIndex.set(target);
+        this.host.nativeElement.querySelectorAll('.cb-dots-indicator__dot')[target]?.focus();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDotsIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDotsIndicator, isStandalone: true, selector: "cb-dots-indicator", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { classAttribute: "cb-dots-indicator-host" }, ngImport: i0, template: `
-    <div class="cb-dots-indicator" role="tablist" aria-label="Indicador de páginas">
+    <div
+      class="cb-dots-indicator"
+      role="tablist"
+      [attr.aria-label]="t().pageIndicator"
+      (keydown)="onKeydown($event)"
+    >
       @for (idx of indices(); track idx) {
         <button
           type="button"
@@ -31,7 +57,8 @@ class CbDotsIndicator {
           [class.cb-dots-indicator__dot--active]="activeIndex() === idx"
           role="tab"
           [attr.aria-selected]="activeIndex() === idx"
-          [attr.aria-label]="'Página ' + (idx + 1)"
+          [attr.tabindex]="activeIndex() === idx ? 0 : -1"
+          [attr.aria-label]="fmt(t().page, idx + 1)"
           (click)="activeIndex.set(idx)"
         ></button>
       }
@@ -41,7 +68,12 @@ class CbDotsIndicator {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDotsIndicator, decorators: [{
             type: Component,
             args: [{ selector: 'cb-dots-indicator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-dots-indicator-host' }, template: `
-    <div class="cb-dots-indicator" role="tablist" aria-label="Indicador de páginas">
+    <div
+      class="cb-dots-indicator"
+      role="tablist"
+      [attr.aria-label]="t().pageIndicator"
+      (keydown)="onKeydown($event)"
+    >
       @for (idx of indices(); track idx) {
         <button
           type="button"
@@ -49,7 +81,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           [class.cb-dots-indicator__dot--active]="activeIndex() === idx"
           role="tab"
           [attr.aria-selected]="activeIndex() === idx"
-          [attr.aria-label]="'Página ' + (idx + 1)"
+          [attr.tabindex]="activeIndex() === idx ? 0 : -1"
+          [attr.aria-label]="fmt(t().page, idx + 1)"
           (click)="activeIndex.set(idx)"
         ></button>
       }

package/fesm2022/caribeng-ui-caribe-expansion-panel.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, model, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Expansion-panel de Caribe Design: panel colapsable con cabecera pulsable y
@@ -10,14 +11,20 @@ import { input, model, ViewEncapsulation, ChangeDetectionStrategy, Component } f
  * <cb-expansion-panel title="Detalles" [(expanded)]="open">…</cb-expansion-panel>
  * ```
  */
+let nextId = 0;
 class CbExpansionPanel {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Título de la cabecera. */
-        this.title = input('Detalles', /* @ts-ignore */
+        this.title = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         /** Estado abierto/cerrado (two-way). */
         this.expanded = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.uid = ++nextId;
+        this.headerId = `cb-expansion-panel-${this.uid}-header`;
+        this.bodyId = `cb-expansion-panel-${this.uid}-body`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbExpansionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbExpansionPanel, isStandalone: true, selector: "cb-expansion-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { classAttribute: "cb-expansion-panel-host" }, ngImport: i0, template: `
@@ -25,14 +32,16 @@ class CbExpansionPanel {
       <button
         type="button"
         class="cb-expansion-panel__header"
+        [id]="headerId"
         [attr.aria-expanded]="expanded()"
+        [attr.aria-controls]="expanded() ? bodyId : null"
         (click)="expanded.set(!expanded())"
       >
-        <span class="cb-expansion-panel__title">{{ title() }}</span>
+        <span class="cb-expansion-panel__title">{{ (title() ?? t().details) }}</span>
         <span class="cb-expansion-panel__chevron" aria-hidden="true">▾</span>
       </button>
       @if (expanded()) {
-        <div class="cb-expansion-panel__body">
+        <div class="cb-expansion-panel__body" role="region" [id]="bodyId" [attr.aria-labelledby]="headerId">
           <ng-content />
         </div>
       }
@@ -46,14 +55,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <button
         type="button"
         class="cb-expansion-panel__header"
+        [id]="headerId"
         [attr.aria-expanded]="expanded()"
+        [attr.aria-controls]="expanded() ? bodyId : null"
         (click)="expanded.set(!expanded())"
       >
-        <span class="cb-expansion-panel__title">{{ title() }}</span>
+        <span class="cb-expansion-panel__title">{{ (title() ?? t().details) }}</span>
         <span class="cb-expansion-panel__chevron" aria-hidden="true">▾</span>
       </button>
       @if (expanded()) {
-        <div class="cb-expansion-panel__body">
+        <div class="cb-expansion-panel__body" role="region" [id]="bodyId" [attr.aria-labelledby]="headerId">
           <ng-content />
         </div>
       }

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

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