@caribeng/ui 22.1.1 → 22.4.0

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, model, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, model, output, inject, ElementRef, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Card-select de Caribe Design: tarjeta con buscador y lista de opciones
@@ -12,18 +13,47 @@ import { input, model, output, computed, ViewEncapsulation, ChangeDetectionStrat
  */
 class CbCardSelect {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.label = input('Opciones', /* @ts-ignore */
+        this.label = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.selected = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
         this.selectionChange = output();
         this.query = model('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef);
+        /** Opción que entra en el orden de tabulación: la elegida o, si no está visible, la primera. */
+        this.tabbable = computed(() => Math.max(0, this.filtered().indexOf(this.selected() ?? '')), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabbable" }] : /* istanbul ignore next */ []));
         this.filtered = computed(() => this.items().filter((x) => x.toLocaleLowerCase().includes(this.query().toLocaleLowerCase())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
     }
+    choose(item) {
+        this.selected.set(item);
+        this.selectionChange.emit(item);
+    }
+    /** Patrón *listbox*: flechas (circular), Inicio y Fin mueven el foco; Enter / Espacio eligen (botón nativo). */
+    onListKeydown(event) {
+        const options = Array.from(this.host.nativeElement.querySelectorAll('.cb-card-select__option'));
+        const cur = options.indexOf(event.target);
+        if (cur < 0)
+            return;
+        const last = options.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)
+            return;
+        event.preventDefault();
+        for (const [i, option] of options.entries())
+            option.tabIndex = i === target ? 0 : -1;
+        options[target].focus();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCardSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCardSelect, isStandalone: true, selector: "cb-card-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChange: "selectionChange", query: "queryChange" }, ngImport: i0, template: `
     <section class="cb-card-select">
@@ -32,23 +62,29 @@ class CbCardSelect {
         type="search"
         [value]="query()"
         (input)="query.set($any($event.target).value)"
-        aria-label="Buscar opciones"
-        placeholder="Buscar"
+        [attr.aria-label]="t().filterOptions"
+        [placeholder]="t().search"
       />
-      <div class="cb-card-select__list" role="listbox" [attr.aria-label]="label()">
-        @for (item of filtered(); track item) {
+      <div
+        class="cb-card-select__list"
+        role="listbox"
+        [attr.aria-label]="(label() ?? t().options)"
+        (keydown)="onListKeydown($event)"
+      >
+        @for (item of filtered(); track $index) {
           <button
             type="button"
             class="cb-card-select__option"
             role="option"
             [class.cb-is-selected]="selected() === item"
             [attr.aria-selected]="selected() === item"
-            (click)="selected.set(item); selectionChange.emit(item)"
+            [attr.tabindex]="$index === tabbable() ? 0 : -1"
+            (click)="choose(item)"
           >
             {{ item }}
           </button>
         } @empty {
-          <span class="cb-card-select__empty">Sin resultados</span>
+          <span class="cb-card-select__empty">{{ t().noResults }}</span>
         }
       </div>
     </section>
@@ -63,23 +99,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         type="search"
         [value]="query()"
         (input)="query.set($any($event.target).value)"
-        aria-label="Buscar opciones"
-        placeholder="Buscar"
+        [attr.aria-label]="t().filterOptions"
+        [placeholder]="t().search"
       />
-      <div class="cb-card-select__list" role="listbox" [attr.aria-label]="label()">
-        @for (item of filtered(); track item) {
+      <div
+        class="cb-card-select__list"
+        role="listbox"
+        [attr.aria-label]="(label() ?? t().options)"
+        (keydown)="onListKeydown($event)"
+      >
+        @for (item of filtered(); track $index) {
           <button
             type="button"
             class="cb-card-select__option"
             role="option"
             [class.cb-is-selected]="selected() === item"
             [attr.aria-selected]="selected() === item"
-            (click)="selected.set(item); selectionChange.emit(item)"
+            [attr.tabindex]="$index === tabbable() ? 0 : -1"
+            (click)="choose(item)"
           >
             {{ item }}
           </button>
         } @empty {
-          <span class="cb-card-select__empty">Sin resultados</span>
+          <span class="cb-card-select__empty">{{ t().noResults }}</span>
         }
       </div>
     </section>

package/fesm2022/caribeng-ui-caribe-circle-loading.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';
 
 /**
  * Circle-loading de Caribe Design: progreso circular determinado o
@@ -13,13 +14,15 @@ import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component
  */
 class CbCircleLoading {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.progress = input(65, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
         this.size = input(48, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.indeterminate = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
-        this.label = input('Cargando', /* @ts-ignore */
+        this.label = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.circumference = 2 * Math.PI * 20;
         this.dashOffset = computed(() => {
@@ -38,7 +41,7 @@ class CbCircleLoading {
       [attr.aria-valuenow]="indeterminate() ? null : progress()"
       aria-valuemin="0"
       aria-valuemax="100"
-      [attr.aria-label]="label()"
+      [attr.aria-label]="(label() ?? t().loading)"
     >
       <svg
         class="cb-circle-loading__svg"
@@ -68,8 +71,8 @@ class CbCircleLoading {
           transform="rotate(-90 24 24)"
         />
       </svg>
-      @if (label()) {
-        <span class="cb-circle-loading__label">{{ label() }}</span>
+      @if ((label() ?? t().loading)) {
+        <span class="cb-circle-loading__label">{{ (label() ?? t().loading) }}</span>
       }
     </div>
   `, isInline: true, styles: [":host{display:inline-flex}.cb-circle-loading{display:inline-flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .4rem);font-family:var(--cb-font-sans, inherit)}.cb-circle-loading__track{stroke:var(--cb-color-surface-200, #e2e8f0)}.cb-circle-loading__bar{stroke:var(--cb-color-primary-500, #10b981);transition:stroke-dashoffset var(--cb-duration-normal, .2s) var(--cb-ease, ease)}.cb-circle-loading__svg.cb-is-indeterminate{animation:cb-circle-spin .9s linear infinite;transform-origin:center}.cb-circle-loading__label{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}@keyframes cb-circle-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.cb-circle-loading__svg.cb-is-indeterminate{animation-duration:2.4s}}:host-context([data-theme=\"dark\"]) .cb-circle-loading__track{stroke:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-circle-loading__label{color:var(--cb-color-surface-300, #cbd5e1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -83,7 +86,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       [attr.aria-valuenow]="indeterminate() ? null : progress()"
       aria-valuemin="0"
       aria-valuemax="100"
-      [attr.aria-label]="label()"
+      [attr.aria-label]="(label() ?? t().loading)"
     >
       <svg
         class="cb-circle-loading__svg"
@@ -113,8 +116,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           transform="rotate(-90 24 24)"
         />
       </svg>
-      @if (label()) {
-        <span class="cb-circle-loading__label">{{ label() }}</span>
+      @if ((label() ?? t().loading)) {
+        <span class="cb-circle-loading__label">{{ (label() ?? t().loading) }}</span>
       }
     </div>
   `, styles: [":host{display:inline-flex}.cb-circle-loading{display:inline-flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .4rem);font-family:var(--cb-font-sans, inherit)}.cb-circle-loading__track{stroke:var(--cb-color-surface-200, #e2e8f0)}.cb-circle-loading__bar{stroke:var(--cb-color-primary-500, #10b981);transition:stroke-dashoffset var(--cb-duration-normal, .2s) var(--cb-ease, ease)}.cb-circle-loading__svg.cb-is-indeterminate{animation:cb-circle-spin .9s linear infinite;transform-origin:center}.cb-circle-loading__label{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}@keyframes cb-circle-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.cb-circle-loading__svg.cb-is-indeterminate{animation-duration:2.4s}}:host-context([data-theme=\"dark\"]) .cb-circle-loading__track{stroke:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-circle-loading__label{color:var(--cb-color-surface-300, #cbd5e1)}\n"] }]

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>
       }