@caribeng/ui 22.1.1 → 22.4.0

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

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

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

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

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, model, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, model, signal, inject, ElementRef, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFormat, cbFieldState } from '@caribeng/ui';
 
 /**
  * Input-token de Caribe Design: entrada de código OTP con casillas por dígito,
@@ -14,6 +14,10 @@ import { cbFieldState } from '@caribeng/ui';
  */
 class CbInputToken {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         this.numInputs = input(6, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "numInputs" }] : /* istanbul ignore next */ []));
         this.unmasked = input(false, /* @ts-ignore */
@@ -30,23 +34,65 @@ class CbInputToken {
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.cvaDisabled = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef);
         this.slots = computed(() => Array.from({ length: Math.max(3, Math.min(8, this.numInputs())) }, (_, i) => i), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouched = () => { };
     }
     charAt(index) {
-        return (this.value() ?? '')[index] ?? '';
+        const ch = (this.value() ?? '')[index] ?? '';
+        return ch === ' ' ? '' : ch;
     }
+    /** Solo acepta dígitos y pasa a la casilla siguiente al escribir uno. */
     onDigitInput(event, index) {
-        const ch = (event.target.value || '').slice(-1);
-        const chars = this.slots().map((i) => this.charAt(i));
-        chars[index] = ch;
-        const next = chars.join('');
+        const el = event.target;
+        const ch = (el.value || '').slice(-1);
+        const digit = /^[0-9]$/.test(ch) ? ch : '';
+        el.value = digit;
+        this.setChar(index, digit);
+        if (digit)
+            this.focusSlot(index + 1);
+    }
+    /** Flechas mueven el foco; Backspace borra la casilla actual o, si está vacía, la anterior. */
+    onKeydown(event, index) {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            event.preventDefault();
+            this.focusSlot(index + (event.key === 'ArrowLeft' ? -1 : 1));
+        }
+        else if (event.key === 'Backspace') {
+            event.preventDefault();
+            const target = this.charAt(index) || index === 0 ? index : index - 1;
+            this.setChar(target, '');
+            this.slotEls()[target].value = '';
+            this.focusSlot(target);
+        }
+    }
+    /** Pegar reparte los dígitos entre las casillas y enfoca la última rellenada. */
+    onPaste(event) {
+        event.preventDefault();
+        const digits = (event.clipboardData?.getData('text') ?? '').replace(/[^0-9]/g, '').slice(0, this.slots().length);
+        if (!digits)
+            return;
+        this.updateValue(digits);
+        this.focusSlot(digits.length - 1);
+    }
+    setChar(index, ch) {
+        const chars = this.slots().map((i) => this.charAt(i) || ' ');
+        chars[index] = ch || ' ';
+        this.updateValue(chars.join('').trimEnd());
+    }
+    updateValue(next) {
         this.value.set(next);
         this.onChange(next);
         this.onTouched();
     }
+    slotEls() {
+        return Array.from(this.host.nativeElement.querySelectorAll('.cb-input-token__slot'));
+    }
+    focusSlot(index) {
+        this.slotEls()[index]?.focus();
+    }
     writeValue(val) {
         this.value.set(val ?? '');
     }
@@ -71,7 +117,7 @@ class CbInputToken {
       <div
         class="cb-input-token__slots"
         role="group"
-        aria-label="Código de verificación"
+        [attr.aria-label]="t().verificationCode"
       >
         @for (slot of slots(); track slot) {
           <input
@@ -83,8 +129,10 @@ class CbInputToken {
             inputmode="numeric"
             [value]="charAt(slot)"
             [disabled]="disabled() || cvaDisabled()"
-            [attr.aria-label]="'Dígito ' + (slot + 1)"
+            [attr.aria-label]="fmt(t().digit, slot + 1)"
             (input)="onDigitInput($event, slot)"
+            (keydown)="onKeydown($event, slot)"
+            (paste)="onPaste($event)"
             (blur)="onTouched()"
           />
         }
@@ -108,7 +156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <div
         class="cb-input-token__slots"
         role="group"
-        aria-label="Código de verificación"
+        [attr.aria-label]="t().verificationCode"
       >
         @for (slot of slots(); track slot) {
           <input
@@ -120,8 +168,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             inputmode="numeric"
             [value]="charAt(slot)"
             [disabled]="disabled() || cvaDisabled()"
-            [attr.aria-label]="'Dígito ' + (slot + 1)"
+            [attr.aria-label]="fmt(t().digit, slot + 1)"
             (input)="onDigitInput($event, slot)"
+            (keydown)="onKeydown($event, slot)"
+            (paste)="onPaste($event)"
             (blur)="onTouched()"
           />
         }

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Enlace de Caribe Design. Renderiza un ancla accesible con estilos de marca,
@@ -13,6 +14,8 @@ import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@a
  */
 class CbLink {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Destino del enlace. */
         this.href = input('#', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
@@ -41,9 +44,10 @@ class CbLink {
       <span class="cb-link__label">{{ label() }}<ng-content /></span>
       @if (external()) {
         <span class="cb-link__external" aria-hidden="true">↗</span>
+        <span class="cb-link__sr">{{ t().opensInNewTab }}</span>
       }
     </a>
-  `, isInline: true, styles: [":host{display:inline-flex;align-items:center}.cb-link{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);line-height:var(--cb-line-height-normal, 1.5);color:var(--cb-color-primary-600, #047857);text-decoration:none;cursor:pointer;border-radius:var(--cb-radius-sm, .25rem);transition:color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-link__label{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.cb-link:hover{color:var(--cb-color-primary-700, #065f46)}.cb-link:active{color:var(--cb-color-primary-800, #064e3b)}.cb-link:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-link__external{font-size:.85em;line-height:1}.cb-link.cb-is-disabled{color:var(--cb-color-text-muted, #94a3b8);pointer-events:none;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-link{color:var(--cb-color-primary-400, #34d399)}:host-context([data-theme=\"dark\"]) .cb-link:hover{color:var(--cb-color-primary-300, #6ee7b7)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center}.cb-link{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);line-height:var(--cb-line-height-normal, 1.5);color:var(--cb-color-primary-600, #047857);text-decoration:none;cursor:pointer;border-radius:var(--cb-radius-sm, .25rem);transition:color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-link__label{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.cb-link:hover{color:var(--cb-color-primary-700, #065f46)}.cb-link:active{color:var(--cb-color-primary-800, #064e3b)}.cb-link:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-link__external{font-size:.85em;line-height:1}.cb-link.cb-is-disabled{color:var(--cb-color-text-muted, #94a3b8);pointer-events:none;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-link{color:var(--cb-color-primary-400, #34d399)}:host-context([data-theme=\"dark\"]) .cb-link:hover{color:var(--cb-color-primary-300, #6ee7b7)}.cb-link__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: CbLink, decorators: [{
             type: Component,
@@ -61,9 +65,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <span class="cb-link__label">{{ label() }}<ng-content /></span>
       @if (external()) {
         <span class="cb-link__external" aria-hidden="true">↗</span>
+        <span class="cb-link__sr">{{ t().opensInNewTab }}</span>
       }
     </a>
-  `, styles: [":host{display:inline-flex;align-items:center}.cb-link{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);line-height:var(--cb-line-height-normal, 1.5);color:var(--cb-color-primary-600, #047857);text-decoration:none;cursor:pointer;border-radius:var(--cb-radius-sm, .25rem);transition:color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-link__label{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.cb-link:hover{color:var(--cb-color-primary-700, #065f46)}.cb-link:active{color:var(--cb-color-primary-800, #064e3b)}.cb-link:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-link__external{font-size:.85em;line-height:1}.cb-link.cb-is-disabled{color:var(--cb-color-text-muted, #94a3b8);pointer-events:none;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-link{color:var(--cb-color-primary-400, #34d399)}:host-context([data-theme=\"dark\"]) .cb-link:hover{color:var(--cb-color-primary-300, #6ee7b7)}\n"] }]
+  `, styles: [":host{display:inline-flex;align-items:center}.cb-link{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);line-height:var(--cb-line-height-normal, 1.5);color:var(--cb-color-primary-600, #047857);text-decoration:none;cursor:pointer;border-radius:var(--cb-radius-sm, .25rem);transition:color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-link__label{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.cb-link:hover{color:var(--cb-color-primary-700, #065f46)}.cb-link:active{color:var(--cb-color-primary-800, #064e3b)}.cb-link:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-link__external{font-size:.85em;line-height:1}.cb-link.cb-is-disabled{color:var(--cb-color-text-muted, #94a3b8);pointer-events:none;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-link{color:var(--cb-color-primary-400, #34d399)}:host-context([data-theme=\"dark\"]) .cb-link:hover{color:var(--cb-color-primary-300, #6ee7b7)}.cb-link__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: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], external: [{ type: i0.Input, args: [{ isSignal: true, alias: "external", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Loader de Caribe Design: indicador de carga en línea con spinner y texto.
@@ -11,7 +12,9 @@ import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@a
  */
 class CbLoader {
     constructor() {
-        this.text = input('Cargando información…', /* @ts-ignore */
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.text = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
         this.size = input('md', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -20,8 +23,8 @@ class CbLoader {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbLoader, isStandalone: true, selector: "cb-loader", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-loader-host" }, ngImport: i0, template: `
     <div class="cb-loader cb-loader--{{ size() }}" role="status" aria-live="polite">
       <span class="cb-loader__spinner" aria-hidden="true"></span>
-      @if (text()) {
-        <span class="cb-loader__text">{{ text() }}</span>
+      @if ((text() ?? t().loadingMessage)) {
+        <span class="cb-loader__text">{{ (text() ?? t().loadingMessage) }}</span>
       }
     </div>
   `, isInline: true, styles: [":host{display:inline-flex}.cb-loader{display:inline-flex;align-items:center;gap:var(--cb-space-2, .65rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text, #334155)}.cb-loader__spinner{flex:none;display:inline-block;width:1.1rem;height:1.1rem;border:2px solid var(--cb-color-surface-300, #cbd5e1);border-top-color:var(--cb-color-primary-500, #10b981);border-radius:var(--cb-radius-full, 999px);animation:cb-loader-spin .7s linear infinite}.cb-loader--sm .cb-loader__spinner{width:.85rem;height:.85rem}.cb-loader--lg .cb-loader__spinner{width:1.5rem;height:1.5rem;border-width:3px}@keyframes cb-loader-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.cb-loader__spinner{animation-duration:2s}}:host-context([data-theme=\"dark\"]) .cb-loader{color:var(--cb-color-surface-100, #f1f5f9)}:host-context([data-theme=\"dark\"]) .cb-loader__spinner{border-color:var(--cb-color-surface-600, #475569);border-top-color:var(--cb-color-primary-500, #10b981)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -31,8 +34,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'cb-loader', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-loader-host' }, template: `
     <div class="cb-loader cb-loader--{{ size() }}" role="status" aria-live="polite">
       <span class="cb-loader__spinner" aria-hidden="true"></span>
-      @if (text()) {
-        <span class="cb-loader__text">{{ text() }}</span>
+      @if ((text() ?? t().loadingMessage)) {
+        <span class="cb-loader__text">{{ (text() ?? t().loadingMessage) }}</span>
       }
     </div>
   `, styles: [":host{display:inline-flex}.cb-loader{display:inline-flex;align-items:center;gap:var(--cb-space-2, .65rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text, #334155)}.cb-loader__spinner{flex:none;display:inline-block;width:1.1rem;height:1.1rem;border:2px solid var(--cb-color-surface-300, #cbd5e1);border-top-color:var(--cb-color-primary-500, #10b981);border-radius:var(--cb-radius-full, 999px);animation:cb-loader-spin .7s linear infinite}.cb-loader--sm .cb-loader__spinner{width:.85rem;height:.85rem}.cb-loader--lg .cb-loader__spinner{width:1.5rem;height:1.5rem;border-width:3px}@keyframes cb-loader-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.cb-loader__spinner{animation-duration:2s}}:host-context([data-theme=\"dark\"]) .cb-loader{color:var(--cb-color-surface-100, #f1f5f9)}:host-context([data-theme=\"dark\"]) .cb-loader__spinner{border-color:var(--cb-color-surface-600, #475569);border-top-color:var(--cb-color-primary-500, #10b981)}\n"] }]

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

@@ -1,6 +1,9 @@
 import * as i0 from '@angular/core';
-import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, model, output, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
 import { CbButton } from '@caribeng/ui/button';
+import { injectCbTranslation, cbOverlayFocus } from '@caribeng/ui';
 
 /**
  * Modal de Caribe Design: diálogo centrado con backdrop, cabecera, contenido y
@@ -11,38 +14,48 @@ import { CbButton } from '@caribeng/ui/button';
  * <cb-modal title="Confirmar" [(visible)]="open" (confirm)="ok()">…</cb-modal>
  * ```
  */
+let nextId = 0;
 class CbModal {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.title = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.confirmLabel = input('Aceptar', /* @ts-ignore */
+        this.confirmLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
         this.visible = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
         this.confirm = output();
         this.closed = output();
+        this.titleId = `cb-modal-${++nextId}-title`;
+        this.closeBtn = viewChild('closeBtn', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeBtn" }] : /* istanbul ignore next */ []));
+        cbOverlayFocus({ open: this.visible, initialFocus: () => this.closeBtn()?.nativeElement });
     }
     close() {
         this.visible.set(false);
         this.closed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbModal, isStandalone: true, selector: "cb-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", confirm: "confirm", closed: "closed" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbModal, isStandalone: true, selector: "cb-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", confirm: "confirm", closed: "closed" }, viewQueries: [{ propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (visible()) {
       <div class="cb-modal__backdrop" (click)="close()">
         <div
           class="cb-modal"
           role="dialog"
           aria-modal="true"
-          [attr.aria-label]="title()"
+          [attr.aria-labelledby]="title() ? titleId : null"
+          cdkTrapFocus
           (click)="$event.stopPropagation()"
+          (keydown.escape)="close()"
         >
           <header class="cb-modal__head">
-            <h2 class="cb-modal__title">{{ title() }}</h2>
+            <h2 class="cb-modal__title" [id]="titleId">{{ title() }}</h2>
             <button
+              #closeBtn
               type="button"
               class="cb-modal__close"
-              aria-label="Cerrar"
+              [attr.aria-label]="t().close"
               (click)="close()"
             >
               ×
@@ -51,33 +64,36 @@ class CbModal {
           <div class="cb-modal__body"><ng-content /></div>
           <footer class="cb-modal__foot">
             <cb-button variant="text" severity="secondary" (click)="close()">
-              Cancelar
+              {{ t().cancel }}
             </cb-button>
-            <cb-button (click)="confirm.emit()">{{ confirmLabel() }}</cb-button>
+            <cb-button (click)="confirm.emit()">{{ (confirmLabel() ?? t().accept) }}</cb-button>
           </footer>
         </div>
       </div>
     }
-  `, isInline: true, styles: [":host{display:contents}.cb-modal__backdrop{position:fixed;inset:0;z-index:var(--cb-z-modal, 1000);display:flex;align-items:center;justify-content:center;padding:var(--cb-space-4, 1rem);background-color:var(--cb-color-overlay, rgba(15, 23, 42, .55));animation:cb-modal-fade var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-modal{display:flex;flex-direction:column;width:100%;max-width:28rem;max-height:90vh;overflow:hidden;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-lg, 0 24px 48px rgba(0, 0, 0, .28));animation:cb-modal-in var(--cb-duration-normal, .2s) var(--cb-ease-out, ease-out)}.cb-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);padding:var(--cb-space-4, 1rem) var(--cb-space-5, 1.25rem);border-bottom:1px solid var(--cb-color-border, #e2e8f0)}.cb-modal__title{margin:0;font-size:var(--cb-text-lg, 1.05rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-modal__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:1.25rem;line-height:1;color:var(--cb-color-text-muted, #64748b);background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer}.cb-modal__close:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-modal__body{flex:1;overflow-y:auto;padding:var(--cb-space-5, 1.25rem);font-size:var(--cb-text-sm, .9375rem);color:var(--cb-color-text, #334155);line-height:var(--cb-line-height-relaxed, 1.6)}.cb-modal__foot{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem);padding:var(--cb-space-4, 1rem) var(--cb-space-5, 1.25rem);border-top:1px solid var(--cb-color-border, #e2e8f0)}@keyframes cb-modal-fade{0%{opacity:0}to{opacity:1}}@keyframes cb-modal-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}:host-context([data-theme=\"dark\"]) .cb-modal{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b)}:host-context([data-theme=\"dark\"]) .cb-modal__head,:host-context([data-theme=\"dark\"]) .cb-modal__foot{border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-modal__body{color:var(--cb-color-surface-200, #e2e8f0)}\n"], dependencies: [{ kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:contents}.cb-modal__backdrop{position:fixed;inset:0;z-index:var(--cb-z-modal, 1000);display:flex;align-items:center;justify-content:center;padding:var(--cb-space-4, 1rem);background-color:var(--cb-color-overlay, rgba(15, 23, 42, .55));animation:cb-modal-fade var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-modal{display:flex;flex-direction:column;width:100%;max-width:28rem;max-height:90vh;overflow:hidden;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-lg, 0 24px 48px rgba(0, 0, 0, .28));animation:cb-modal-in var(--cb-duration-normal, .2s) var(--cb-ease-out, ease-out)}.cb-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);padding:var(--cb-space-4, 1rem) var(--cb-space-5, 1.25rem);border-bottom:1px solid var(--cb-color-border, #e2e8f0)}.cb-modal__title{margin:0;font-size:var(--cb-text-lg, 1.05rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-modal__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:1.25rem;line-height:1;color:var(--cb-color-text-muted, #64748b);background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer}.cb-modal__close:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-modal__body{flex:1;overflow-y:auto;padding:var(--cb-space-5, 1.25rem);font-size:var(--cb-text-sm, .9375rem);color:var(--cb-color-text, #334155);line-height:var(--cb-line-height-relaxed, 1.6)}.cb-modal__foot{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem);padding:var(--cb-space-4, 1rem) var(--cb-space-5, 1.25rem);border-top:1px solid var(--cb-color-border, #e2e8f0)}@keyframes cb-modal-fade{0%{opacity:0}to{opacity:1}}@keyframes cb-modal-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}:host-context([data-theme=\"dark\"]) .cb-modal{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b)}:host-context([data-theme=\"dark\"]) .cb-modal__head,:host-context([data-theme=\"dark\"]) .cb-modal__foot{border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-modal__body{color:var(--cb-color-surface-200, #e2e8f0)}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbModal, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-modal', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbButton], template: `
+            args: [{ selector: 'cb-modal', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [A11yModule, CbButton], template: `
     @if (visible()) {
       <div class="cb-modal__backdrop" (click)="close()">
         <div
           class="cb-modal"
           role="dialog"
           aria-modal="true"
-          [attr.aria-label]="title()"
+          [attr.aria-labelledby]="title() ? titleId : null"
+          cdkTrapFocus
           (click)="$event.stopPropagation()"
+          (keydown.escape)="close()"
         >
           <header class="cb-modal__head">
-            <h2 class="cb-modal__title">{{ title() }}</h2>
+            <h2 class="cb-modal__title" [id]="titleId">{{ title() }}</h2>
             <button
+              #closeBtn
               type="button"
               class="cb-modal__close"
-              aria-label="Cerrar"
+              [attr.aria-label]="t().close"
               (click)="close()"
             >
               ×
@@ -86,15 +102,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <div class="cb-modal__body"><ng-content /></div>
           <footer class="cb-modal__foot">
             <cb-button variant="text" severity="secondary" (click)="close()">
-              Cancelar
+              {{ t().cancel }}
             </cb-button>
-            <cb-button (click)="confirm.emit()">{{ confirmLabel() }}</cb-button>
+            <cb-button (click)="confirm.emit()">{{ (confirmLabel() ?? t().accept) }}</cb-button>
           </footer>
         </div>
       </div>
     }
   `, styles: [":host{display:contents}.cb-modal__backdrop{position:fixed;inset:0;z-index:var(--cb-z-modal, 1000);display:flex;align-items:center;justify-content:center;padding:var(--cb-space-4, 1rem);background-color:var(--cb-color-overlay, rgba(15, 23, 42, .55));animation:cb-modal-fade var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-modal{display:flex;flex-direction:column;width:100%;max-width:28rem;max-height:90vh;overflow:hidden;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-lg, 0 24px 48px rgba(0, 0, 0, .28));animation:cb-modal-in var(--cb-duration-normal, .2s) var(--cb-ease-out, ease-out)}.cb-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);padding:var(--cb-space-4, 1rem) var(--cb-space-5, 1.25rem);border-bottom:1px solid var(--cb-color-border, #e2e8f0)}.cb-modal__title{margin:0;font-size:var(--cb-text-lg, 1.05rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-modal__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:1.25rem;line-height:1;color:var(--cb-color-text-muted, #64748b);background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer}.cb-modal__close:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-modal__body{flex:1;overflow-y:auto;padding:var(--cb-space-5, 1.25rem);font-size:var(--cb-text-sm, .9375rem);color:var(--cb-color-text, #334155);line-height:var(--cb-line-height-relaxed, 1.6)}.cb-modal__foot{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem);padding:var(--cb-space-4, 1rem) var(--cb-space-5, 1.25rem);border-top:1px solid var(--cb-color-border, #e2e8f0)}@keyframes cb-modal-fade{0%{opacity:0}to{opacity:1}}@keyframes cb-modal-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}:host-context([data-theme=\"dark\"]) .cb-modal{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b)}:host-context([data-theme=\"dark\"]) .cb-modal__head,:host-context([data-theme=\"dark\"]) .cb-modal__foot{border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-modal__body{color:var(--cb-color-surface-200, #e2e8f0)}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], confirm: [{ type: i0.Output, args: ["confirm"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], confirm: [{ type: i0.Output, args: ["confirm"] }], closed: [{ type: i0.Output, args: ["closed"] }], closeBtn: [{ type: i0.ViewChild, args: ['closeBtn', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/caribeng-ui-caribe-off-canvas.mjs

@@ -1,5 +1,8 @@
 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 * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { injectCbTranslation, cbOverlayFocus } from '@caribeng/ui';
 
 /**
  * Off-canvas de Caribe Design: panel lateral deslizable con cabecera, botón de
@@ -12,8 +15,10 @@ import { input, model, ViewEncapsulation, ChangeDetectionStrategy, Component } f
  */
 class CbOffCanvas {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Título del panel. */
-        this.title = input('Panel lateral', /* @ts-ignore */
+        this.title = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         /** Lado de aparición. */
         this.position = input('right', /* @ts-ignore */
@@ -21,22 +26,28 @@ class CbOffCanvas {
         /** Estado abierto/cerrado (two-way). */
         this.open = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.closeBtn = viewChild('closeBtn', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeBtn" }] : /* istanbul ignore next */ []));
+        cbOverlayFocus({ open: this.open, initialFocus: () => this.closeBtn()?.nativeElement });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbOffCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbOffCanvas, isStandalone: true, selector: "cb-off-canvas", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "cb-off-canvas-host" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbOffCanvas, isStandalone: true, selector: "cb-off-canvas", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "cb-off-canvas-host" }, viewQueries: [{ propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (open()) {
       <aside
         class="cb-off-canvas cb-off-canvas--{{ position() }}"
         role="dialog"
         aria-modal="true"
-        [attr.aria-label]="title()"
+        [attr.aria-label]="(title() ?? t().sidePanel)"
+        cdkTrapFocus
+        (keydown.escape)="open.set(false)"
       >
         <div class="cb-off-canvas__header">
-          <strong class="cb-off-canvas__title">{{ title() }}</strong>
+          <strong class="cb-off-canvas__title">{{ (title() ?? t().sidePanel) }}</strong>
           <button
+            #closeBtn
             type="button"
             class="cb-off-canvas__close"
-            aria-label="Cerrar panel"
+            [attr.aria-label]="t().close"
             (click)="open.set(false)"
           >
             <span aria-hidden="true">×</span>
@@ -47,24 +58,27 @@ class CbOffCanvas {
         </div>
       </aside>
     }
-  `, isInline: true, styles: [":host{display:block}.cb-off-canvas{display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-width:20rem;min-height:12rem;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);box-shadow:var(--cb-shadow-lg, 0 12px 32px rgba(0, 0, 0, .18));animation:cb-off-canvas-in var(--cb-duration-normal, .2s) var(--cb-ease-out, ease-out)}.cb-off-canvas--bottom{max-width:none}.cb-off-canvas__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);margin-bottom:var(--cb-space-3, .75rem);padding-bottom:var(--cb-space-3, .75rem);border-bottom:1px solid var(--cb-color-border, #e2e8f0)}.cb-off-canvas__title{font-size:var(--cb-text-lg, 1rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-off-canvas__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:1.25rem;line-height:1;color:inherit;background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-off-canvas__close:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-off-canvas__body{flex:1;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text, #334155)}@keyframes cb-off-canvas-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}:host-context([data-theme=\"dark\"]) .cb-off-canvas{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-off-canvas__header{border-bottom-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-off-canvas__close:hover{background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-off-canvas__body{color:var(--cb-color-surface-200, #e2e8f0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.cb-off-canvas{display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-width:20rem;min-height:12rem;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);box-shadow:var(--cb-shadow-lg, 0 12px 32px rgba(0, 0, 0, .18));animation:cb-off-canvas-in var(--cb-duration-normal, .2s) var(--cb-ease-out, ease-out)}.cb-off-canvas--bottom{max-width:none}.cb-off-canvas__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);margin-bottom:var(--cb-space-3, .75rem);padding-bottom:var(--cb-space-3, .75rem);border-bottom:1px solid var(--cb-color-border, #e2e8f0)}.cb-off-canvas__title{font-size:var(--cb-text-lg, 1rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-off-canvas__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:1.25rem;line-height:1;color:inherit;background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-off-canvas__close:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-off-canvas__body{flex:1;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text, #334155)}@keyframes cb-off-canvas-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}:host-context([data-theme=\"dark\"]) .cb-off-canvas{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-off-canvas__header{border-bottom-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-off-canvas__close:hover{background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-off-canvas__body{color:var(--cb-color-surface-200, #e2e8f0)}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbOffCanvas, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-off-canvas', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-off-canvas-host' }, template: `
+            args: [{ selector: 'cb-off-canvas', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [A11yModule], host: { class: 'cb-off-canvas-host' }, template: `
     @if (open()) {
       <aside
         class="cb-off-canvas cb-off-canvas--{{ position() }}"
         role="dialog"
         aria-modal="true"
-        [attr.aria-label]="title()"
+        [attr.aria-label]="(title() ?? t().sidePanel)"
+        cdkTrapFocus
+        (keydown.escape)="open.set(false)"
       >
         <div class="cb-off-canvas__header">
-          <strong class="cb-off-canvas__title">{{ title() }}</strong>
+          <strong class="cb-off-canvas__title">{{ (title() ?? t().sidePanel) }}</strong>
           <button
+            #closeBtn
             type="button"
             class="cb-off-canvas__close"
-            aria-label="Cerrar panel"
+            [attr.aria-label]="t().close"
             (click)="open.set(false)"
           >
             <span aria-hidden="true">×</span>
@@ -76,7 +90,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       </aside>
     }
   `, styles: [":host{display:block}.cb-off-canvas{display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-width:20rem;min-height:12rem;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);box-shadow:var(--cb-shadow-lg, 0 12px 32px rgba(0, 0, 0, .18));animation:cb-off-canvas-in var(--cb-duration-normal, .2s) var(--cb-ease-out, ease-out)}.cb-off-canvas--bottom{max-width:none}.cb-off-canvas__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);margin-bottom:var(--cb-space-3, .75rem);padding-bottom:var(--cb-space-3, .75rem);border-bottom:1px solid var(--cb-color-border, #e2e8f0)}.cb-off-canvas__title{font-size:var(--cb-text-lg, 1rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-off-canvas__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:1.25rem;line-height:1;color:inherit;background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-off-canvas__close:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-off-canvas__body{flex:1;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text, #334155)}@keyframes cb-off-canvas-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}:host-context([data-theme=\"dark\"]) .cb-off-canvas{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-off-canvas__header{border-bottom-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-off-canvas__close:hover{background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-off-canvas__body{color:var(--cb-color-surface-200, #e2e8f0)}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeBtn: [{ type: i0.ViewChild, args: ['closeBtn', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.