@caribeng/ui 22.1.0 → 22.2.0

package/fesm2022/caribeng-ui-image.mjs

@@ -1,6 +1,9 @@
 import * as i0 from '@angular/core';
-import { input, viewChild, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, viewChild, inject, Injector, signal, computed, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 /**
  * Image de CaribeNG: imagen con previsualización lightbox accesible y controles
@@ -8,6 +11,10 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbImage {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         this.src = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
         this.alt = input('', /* @ts-ignore */
@@ -20,6 +27,11 @@ class CbImage {
         ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
         this.lightboxEl = viewChild('lightbox', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lightboxEl" }] : /* istanbul ignore next */ []));
+        this.overlayBtn = viewChild('overlay', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayBtn" }] : /* istanbul ignore next */ []));
+        this.closeBtn = viewChild('closeBtn', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeBtn" }] : /* istanbul ignore next */ []));
+        this.injector = inject(Injector);
         this.lightboxOpen = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lightboxOpen" }] : /* istanbul ignore next */ []));
         this.scale = signal(1, /* @ts-ignore */
@@ -43,9 +55,14 @@ class CbImage {
             return;
         this.reset();
         this.lightboxOpen.set(true);
+        afterNextRender(() => this.closeBtn()?.nativeElement.focus(), { injector: this.injector });
     }
+    /** Cierra la previsualización y devuelve el foco al botón que la abrió. */
     closePreview() {
+        if (!this.lightboxOpen())
+            return;
         this.lightboxOpen.set(false);
+        afterNextRender(() => this.overlayBtn()?.nativeElement.focus(), { injector: this.injector });
     }
     zoomIn() {
         this.scale.set(Math.min(3, Number((this.scale() + 0.25).toFixed(2))));
@@ -90,7 +107,7 @@ class CbImage {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbImage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbImage, isStandalone: true, selector: "cb-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-image--preview": "preview()" }, classAttribute: "cb-image" }, viewQueries: [{ propertyName: "lightboxEl", first: true, predicate: ["lightbox"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbImage, isStandalone: true, selector: "cb-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-image--preview": "preview()" }, classAttribute: "cb-image" }, viewQueries: [{ propertyName: "lightboxEl", first: true, predicate: ["lightbox"], descendants: true, isSignal: true }, { propertyName: "overlayBtn", first: true, predicate: ["overlay"], descendants: true, isSignal: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="cb-image__wrapper">
       <img
         class="cb-image__img"
@@ -101,9 +118,10 @@ class CbImage {
       />
       @if (preview()) {
         <button
+          #overlay
           type="button"
           class="cb-image__overlay"
-          [attr.aria-label]="'Ampliar ' + (alt() || 'imagen')"
+          [attr.aria-label]="fmt(t().enlargeImage, alt() || t().image)"
           (click)="openPreview()"
         >
           <cb-icon name="search" [size]="20" aria-hidden="true" />
@@ -117,23 +135,25 @@ class CbImage {
         class="cb-image__lightbox"
         role="dialog"
         aria-modal="true"
-        [attr.aria-label]="alt() || 'Previsualización de imagen'"
+        [attr.aria-label]="alt() || t().imagePreview"
+        cdkTrapFocus
         (click)="closePreview()"
+        (keydown.escape)="closePreview()"
       >
         <div class="cb-image__toolbar" (click)="$event.stopPropagation()">
-          <button type="button" class="cb-image__tool" (click)="rotateLeft()" aria-label="Rotar a la izquierda">
+          <button type="button" class="cb-image__tool" (click)="rotateLeft()" [attr.aria-label]="t().rotateLeft">
             <cb-icon name="rotate-ccw" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="rotateRight()" aria-label="Rotar a la derecha">
+          <button type="button" class="cb-image__tool" (click)="rotateRight()" [attr.aria-label]="t().rotateRight">
             <cb-icon name="rotate-cw" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="flipHorizontal()" aria-label="Voltear horizontal">
+          <button type="button" class="cb-image__tool" (click)="flipHorizontal()" [attr.aria-label]="t().flipHorizontal">
             <cb-icon name="flip-horizontal" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="flipVertical()" aria-label="Voltear vertical">
+          <button type="button" class="cb-image__tool" (click)="flipVertical()" [attr.aria-label]="t().flipVertical">
             <cb-icon name="flip-vertical" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="zoomIn()" aria-label="Acercar">
+          <button type="button" class="cb-image__tool" (click)="zoomIn()" [attr.aria-label]="t().zoomIn">
             <cb-icon name="plus" [size]="18" aria-hidden="true" />
           </button>
           <button
@@ -141,20 +161,20 @@ class CbImage {
             class="cb-image__tool"
             (click)="zoomOut()"
             [disabled]="scale() <= 0.5"
-            aria-label="Alejar"
+            [attr.aria-label]="t().zoomOut"
           >
             <cb-icon name="minus" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="reset()" aria-label="Restablecer">
+          <button type="button" class="cb-image__tool" (click)="reset()" [attr.aria-label]="t().reset">
             <cb-icon name="refresh-cw" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="download()" aria-label="Descargar">
+          <button type="button" class="cb-image__tool" (click)="download()" [attr.aria-label]="t().download">
             <cb-icon name="download" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="toggleFullscreen()" aria-label="Pantalla completa">
+          <button type="button" class="cb-image__tool" (click)="toggleFullscreen()" [attr.aria-label]="t().fullscreen">
             <cb-icon name="expand" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="closePreview()" aria-label="Cerrar">
+          <button #closeBtn type="button" class="cb-image__tool" (click)="closePreview()" [attr.aria-label]="t().close">
             <cb-icon name="x" [size]="18" aria-hidden="true" />
           </button>
         </div>
@@ -167,11 +187,11 @@ class CbImage {
         />
       </div>
     }
-  `, isInline: true, styles: [":host{display:inline-block;font-family:var(--cb-font-sans)}.cb-image__wrapper{position:relative;display:inline-block;border-radius:var(--cb-radius-md);overflow:hidden}.cb-image__img{display:block;max-width:100%;border-radius:var(--cb-radius-md)}.cb-image__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:none;background:#0f172a73;color:#fff;opacity:0;cursor:pointer;transition:opacity .15s ease}.cb-image__wrapper:hover .cb-image__overlay,.cb-image__overlay:focus-visible{opacity:1}.cb-image__lightbox{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0f172ad1;padding:var(--cb-space-4)}.cb-image__toolbar{position:absolute;top:1rem;right:1rem;display:inline-flex;gap:.375rem}.cb-image__tool{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:999px;background:#ffffff24;color:#fff;cursor:pointer}.cb-image__lightbox-img{max-width:85vw;max-height:80vh;border-radius:var(--cb-radius-md);transition:transform .16s ease}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:inline-block;font-family:var(--cb-font-sans)}.cb-image__wrapper{position:relative;display:inline-block;border-radius:var(--cb-radius-md);overflow:hidden}.cb-image__img{display:block;max-width:100%;border-radius:var(--cb-radius-md)}.cb-image__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:none;background:#0f172a73;color:#fff;opacity:0;cursor:pointer;transition:opacity .15s ease}.cb-image__wrapper:hover .cb-image__overlay,.cb-image__overlay:focus-visible{opacity:1}.cb-image__lightbox{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0f172ad1;padding:var(--cb-space-4)}.cb-image__toolbar{position:absolute;top:1rem;right:1rem;display:inline-flex;gap:.375rem}.cb-image__tool{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:999px;background:#ffffff24;color:#fff;cursor:pointer}.cb-image__lightbox-img{max-width:85vw;max-height:80vh;border-radius:var(--cb-radius-md);transition:transform .16s ease}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbImage, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-image', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: {
+            args: [{ selector: 'cb-image', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [A11yModule, CbIcon], host: {
                         class: 'cb-image',
                         '[class.cb-image--preview]': 'preview()',
                     }, template: `
@@ -185,9 +205,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       />
       @if (preview()) {
         <button
+          #overlay
           type="button"
           class="cb-image__overlay"
-          [attr.aria-label]="'Ampliar ' + (alt() || 'imagen')"
+          [attr.aria-label]="fmt(t().enlargeImage, alt() || t().image)"
           (click)="openPreview()"
         >
           <cb-icon name="search" [size]="20" aria-hidden="true" />
@@ -201,23 +222,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         class="cb-image__lightbox"
         role="dialog"
         aria-modal="true"
-        [attr.aria-label]="alt() || 'Previsualización de imagen'"
+        [attr.aria-label]="alt() || t().imagePreview"
+        cdkTrapFocus
         (click)="closePreview()"
+        (keydown.escape)="closePreview()"
       >
         <div class="cb-image__toolbar" (click)="$event.stopPropagation()">
-          <button type="button" class="cb-image__tool" (click)="rotateLeft()" aria-label="Rotar a la izquierda">
+          <button type="button" class="cb-image__tool" (click)="rotateLeft()" [attr.aria-label]="t().rotateLeft">
             <cb-icon name="rotate-ccw" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="rotateRight()" aria-label="Rotar a la derecha">
+          <button type="button" class="cb-image__tool" (click)="rotateRight()" [attr.aria-label]="t().rotateRight">
             <cb-icon name="rotate-cw" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="flipHorizontal()" aria-label="Voltear horizontal">
+          <button type="button" class="cb-image__tool" (click)="flipHorizontal()" [attr.aria-label]="t().flipHorizontal">
             <cb-icon name="flip-horizontal" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="flipVertical()" aria-label="Voltear vertical">
+          <button type="button" class="cb-image__tool" (click)="flipVertical()" [attr.aria-label]="t().flipVertical">
             <cb-icon name="flip-vertical" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="zoomIn()" aria-label="Acercar">
+          <button type="button" class="cb-image__tool" (click)="zoomIn()" [attr.aria-label]="t().zoomIn">
             <cb-icon name="plus" [size]="18" aria-hidden="true" />
           </button>
           <button
@@ -225,20 +248,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             class="cb-image__tool"
             (click)="zoomOut()"
             [disabled]="scale() <= 0.5"
-            aria-label="Alejar"
+            [attr.aria-label]="t().zoomOut"
           >
             <cb-icon name="minus" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="reset()" aria-label="Restablecer">
+          <button type="button" class="cb-image__tool" (click)="reset()" [attr.aria-label]="t().reset">
             <cb-icon name="refresh-cw" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="download()" aria-label="Descargar">
+          <button type="button" class="cb-image__tool" (click)="download()" [attr.aria-label]="t().download">
             <cb-icon name="download" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="toggleFullscreen()" aria-label="Pantalla completa">
+          <button type="button" class="cb-image__tool" (click)="toggleFullscreen()" [attr.aria-label]="t().fullscreen">
             <cb-icon name="expand" [size]="18" aria-hidden="true" />
           </button>
-          <button type="button" class="cb-image__tool" (click)="closePreview()" aria-label="Cerrar">
+          <button #closeBtn type="button" class="cb-image__tool" (click)="closePreview()" [attr.aria-label]="t().close">
             <cb-icon name="x" [size]="18" aria-hidden="true" />
           </button>
         </div>
@@ -252,7 +275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       </div>
     }
   `, styles: [":host{display:inline-block;font-family:var(--cb-font-sans)}.cb-image__wrapper{position:relative;display:inline-block;border-radius:var(--cb-radius-md);overflow:hidden}.cb-image__img{display:block;max-width:100%;border-radius:var(--cb-radius-md)}.cb-image__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:none;background:#0f172a73;color:#fff;opacity:0;cursor:pointer;transition:opacity .15s ease}.cb-image__wrapper:hover .cb-image__overlay,.cb-image__overlay:focus-visible{opacity:1}.cb-image__lightbox{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0f172ad1;padding:var(--cb-space-4)}.cb-image__toolbar{position:absolute;top:1rem;right:1rem;display:inline-flex;gap:.375rem}.cb-image__tool{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:999px;background:#ffffff24;color:#fff;cursor:pointer}.cb-image__lightbox-img{max-width:85vw;max-height:80vh;border-radius:var(--cb-radius-md);transition:transform .16s ease}\n"] }]
-        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], lightboxEl: [{ type: i0.ViewChild, args: ['lightbox', { isSignal: true }] }] } });
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], lightboxEl: [{ type: i0.ViewChild, args: ['lightbox', { isSignal: true }] }], overlayBtn: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }], closeBtn: [{ type: i0.ViewChild, args: ['closeBtn', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/caribeng-ui-inplace.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, model, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, model, inject, ElementRef, Injector, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Inplace de CaribeNG: alterna entre una vista previa (`[cb-inplace-display]`)
@@ -8,22 +9,36 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbInplace {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.closable = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.active = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef);
+        this.injector = inject(Injector);
     }
+    /** Muestra el contenido y mueve el foco a su primer elemento enfocable. */
     open() {
-        if (!this.disabled())
-            this.active.set(true);
+        if (this.disabled())
+            return;
+        this.active.set(true);
+        this.focusAfterRender('.cb-inplace__content :is(input, select, textarea, button, a[href], [tabindex]:not([tabindex="-1"]))');
     }
+    /** Vuelve a la vista previa y devuelve el foco a ella. */
     close() {
         this.active.set(false);
+        this.focusAfterRender('.cb-inplace__display');
+    }
+    focusAfterRender(selector) {
+        afterNextRender(() => this.host.nativeElement.querySelector(selector)?.focus(), {
+            injector: this.injector,
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbInplace, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbInplace, isStandalone: true, selector: "cb-inplace", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { properties: { "class.cb-is-active": "active()" }, classAttribute: "cb-inplace" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbInplace, isStandalone: true, selector: "cb-inplace", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { listeners: { "keydown.escape": "closable() && active() && close()" }, properties: { "class.cb-is-active": "active()" }, classAttribute: "cb-inplace" }, ngImport: i0, template: `
     @if (!active()) {
       <button
         type="button"
@@ -40,7 +55,7 @@ class CbInplace {
           <button
             type="button"
             class="cb-inplace__close"
-            aria-label="Cerrar edición"
+            [attr.aria-label]="t().closeEditing"
             (click)="close()"
           >
             <cb-icon name="x" [size]="15" aria-hidden="true" />
@@ -55,6 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'cb-inplace', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: {
                         class: 'cb-inplace',
                         '[class.cb-is-active]': 'active()',
+                        '(keydown.escape)': 'closable() && active() && close()',
                     }, template: `
     @if (!active()) {
       <button
@@ -72,7 +88,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <button
             type="button"
             class="cb-inplace__close"
-            aria-label="Cerrar edición"
+            [attr.aria-label]="t().closeEditing"
             (click)="close()"
           >
             <cb-icon name="x" [size]="15" aria-hidden="true" />

package/fesm2022/caribeng-ui-input-number.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { model, input, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
 import { CbIcon } from '@caribeng/ui/icon';
 
 let nextUid = 0;
@@ -18,6 +18,8 @@ let nextUid = 0;
  */
 class CbInputNumber {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Valor numérico (two-way opcional fuera de Angular Forms). */
         this.value = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -295,7 +297,7 @@ class CbInputNumber {
             type="button"
             class="cb-input-number__btn cb-input-number__btn--up"
             tabindex="-1"
-            aria-label="Incrementar"
+            [attr.aria-label]="t().increment"
             [disabled]="isDisabled() || readonly() || isAtMax()"
             (click)="increment()"
           >
@@ -305,7 +307,7 @@ class CbInputNumber {
             type="button"
             class="cb-input-number__btn cb-input-number__btn--down"
             tabindex="-1"
-            aria-label="Decrementar"
+            [attr.aria-label]="t().decrement"
             [disabled]="isDisabled() || readonly() || isAtMin()"
             (click)="decrement()"
           >
@@ -324,7 +326,7 @@ class CbInputNumber {
         {{ hint() }}
       </p>
     }
-  `, isInline: true, styles: [":host{display:block}.cb-input-number__label{display:block;margin-bottom:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-input-number__required{color:var(--cb-color-danger);margin-left:2px}.cb-input-number{position:relative;display:flex;align-items:stretch;box-sizing:border-box;width:100%;background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-input-number:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-input-number:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-input-number.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-input-number.cb-is-invalid:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-input-number.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-input-number__field{flex:1 1 auto;min-width:0;box-sizing:border-box;font-family:var(--cb-font-sans);color:var(--cb-color-text);background:transparent;border:none;border-radius:inherit;text-align:right}.cb-input-number__field::placeholder{color:var(--cb-color-text-muted)}.cb-input-number__field:focus{outline:none}.cb-input-number__field:disabled{color:var(--cb-color-text-muted);cursor:not-allowed}.cb-input-number--sm .cb-input-number__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-input-number--md .cb-input-number__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-input-number--lg .cb-input-number__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-input-number__buttons{display:flex;flex:none;flex-direction:column;border-left:var(--cb-border-width) solid var(--cb-color-border)}.cb-input-number__btn{display:flex;flex:1 1 50%;align-items:center;justify-content:center;width:2rem;padding:0;color:var(--cb-color-text-muted);background-color:var(--cb-color-surface-50);border:none;cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-input-number__btn:hover:not(:disabled){background-color:var(--cb-color-surface-100);color:var(--cb-color-text)}.cb-input-number__btn:disabled{opacity:.4;cursor:not-allowed}.cb-input-number__btn--up{border-top-right-radius:var(--cb-radius-md);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-input-number__btn--down{border-bottom-right-radius:var(--cb-radius-md)}.cb-input-number__btn cb-icon{color:currentColor}.cb-input-number__message{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-input-number__message--hint{color:var(--cb-color-text-muted)}.cb-input-number__message--error{color:var(--cb-color-danger)}.cb-input-number__required--required,.cb-input-number__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.cb-input-number__label{display:block;margin-bottom:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-input-number__required{color:var(--cb-color-danger);margin-left:2px}.cb-input-number{position:relative;display:flex;align-items:stretch;box-sizing:border-box;width:100%;background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-input-number:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-input-number:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-input-number.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-input-number.cb-is-invalid:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-input-number.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-input-number__field{flex:1 1 auto;min-width:0;box-sizing:border-box;font-family:var(--cb-font-sans);color:var(--cb-color-text);background:transparent;border:none;border-radius:inherit;text-align:right}.cb-input-number__field::placeholder{color:var(--cb-color-text-muted)}.cb-input-number__field:focus{outline:none}.cb-input-number__field:disabled{color:var(--cb-color-text-muted);cursor:not-allowed}.cb-input-number--sm .cb-input-number__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-input-number--md .cb-input-number__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-input-number--lg .cb-input-number__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-input-number__buttons{display:flex;flex:none;flex-direction:column;border-left:var(--cb-border-width) solid var(--cb-color-border)}.cb-input-number__btn{display:flex;flex:1 1 50%;align-items:center;justify-content:center;width:2rem;padding:0;color:var(--cb-color-text-muted);background-color:var(--cb-color-surface-subtle);border:none;cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-input-number__btn:hover:not(:disabled){background-color:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-input-number__btn:disabled{opacity:.4;cursor:not-allowed}.cb-input-number__btn--up{border-top-right-radius:var(--cb-radius-md);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-input-number__btn--down{border-bottom-right-radius:var(--cb-radius-md)}.cb-input-number__btn cb-icon{color:currentColor}.cb-input-number__message{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-input-number__message--hint{color:var(--cb-color-text-muted)}.cb-input-number__message--error{color:var(--cb-color-danger)}.cb-input-number__required--required,.cb-input-number__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbInputNumber, decorators: [{
             type: Component,
@@ -383,7 +385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type="button"
             class="cb-input-number__btn cb-input-number__btn--up"
             tabindex="-1"
-            aria-label="Incrementar"
+            [attr.aria-label]="t().increment"
             [disabled]="isDisabled() || readonly() || isAtMax()"
             (click)="increment()"
           >
@@ -393,7 +395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type="button"
             class="cb-input-number__btn cb-input-number__btn--down"
             tabindex="-1"
-            aria-label="Decrementar"
+            [attr.aria-label]="t().decrement"
             [disabled]="isDisabled() || readonly() || isAtMin()"
             (click)="decrement()"
           >
@@ -412,7 +414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         {{ hint() }}
       </p>
     }
-  `, styles: [":host{display:block}.cb-input-number__label{display:block;margin-bottom:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-input-number__required{color:var(--cb-color-danger);margin-left:2px}.cb-input-number{position:relative;display:flex;align-items:stretch;box-sizing:border-box;width:100%;background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-input-number:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-input-number:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-input-number.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-input-number.cb-is-invalid:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-input-number.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-input-number__field{flex:1 1 auto;min-width:0;box-sizing:border-box;font-family:var(--cb-font-sans);color:var(--cb-color-text);background:transparent;border:none;border-radius:inherit;text-align:right}.cb-input-number__field::placeholder{color:var(--cb-color-text-muted)}.cb-input-number__field:focus{outline:none}.cb-input-number__field:disabled{color:var(--cb-color-text-muted);cursor:not-allowed}.cb-input-number--sm .cb-input-number__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-input-number--md .cb-input-number__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-input-number--lg .cb-input-number__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-input-number__buttons{display:flex;flex:none;flex-direction:column;border-left:var(--cb-border-width) solid var(--cb-color-border)}.cb-input-number__btn{display:flex;flex:1 1 50%;align-items:center;justify-content:center;width:2rem;padding:0;color:var(--cb-color-text-muted);background-color:var(--cb-color-surface-50);border:none;cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-input-number__btn:hover:not(:disabled){background-color:var(--cb-color-surface-100);color:var(--cb-color-text)}.cb-input-number__btn:disabled{opacity:.4;cursor:not-allowed}.cb-input-number__btn--up{border-top-right-radius:var(--cb-radius-md);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-input-number__btn--down{border-bottom-right-radius:var(--cb-radius-md)}.cb-input-number__btn cb-icon{color:currentColor}.cb-input-number__message{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-input-number__message--hint{color:var(--cb-color-text-muted)}.cb-input-number__message--error{color:var(--cb-color-danger)}.cb-input-number__required--required,.cb-input-number__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}\n"] }]
+  `, styles: [":host{display:block}.cb-input-number__label{display:block;margin-bottom:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-input-number__required{color:var(--cb-color-danger);margin-left:2px}.cb-input-number{position:relative;display:flex;align-items:stretch;box-sizing:border-box;width:100%;background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-input-number:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-input-number:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-input-number.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-input-number.cb-is-invalid:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-input-number.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-input-number__field{flex:1 1 auto;min-width:0;box-sizing:border-box;font-family:var(--cb-font-sans);color:var(--cb-color-text);background:transparent;border:none;border-radius:inherit;text-align:right}.cb-input-number__field::placeholder{color:var(--cb-color-text-muted)}.cb-input-number__field:focus{outline:none}.cb-input-number__field:disabled{color:var(--cb-color-text-muted);cursor:not-allowed}.cb-input-number--sm .cb-input-number__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-input-number--md .cb-input-number__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-input-number--lg .cb-input-number__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-input-number__buttons{display:flex;flex:none;flex-direction:column;border-left:var(--cb-border-width) solid var(--cb-color-border)}.cb-input-number__btn{display:flex;flex:1 1 50%;align-items:center;justify-content:center;width:2rem;padding:0;color:var(--cb-color-text-muted);background-color:var(--cb-color-surface-subtle);border:none;cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-input-number__btn:hover:not(:disabled){background-color:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-input-number__btn:disabled{opacity:.4;cursor:not-allowed}.cb-input-number__btn--up{border-top-right-radius:var(--cb-radius-md);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-input-number__btn--down{border-bottom-right-radius:var(--cb-radius-md)}.cb-input-number__btn cb-icon{color:currentColor}.cb-input-number__message{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-input-number__message--hint{color:var(--cb-color-text-muted)}.cb-input-number__message--error{color:var(--cb-color-danger)}.cb-input-number__required--required,.cb-input-number__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], requiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredIndicator", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-inputgroup.mjs

@@ -30,14 +30,14 @@ class CbInputGroupAddon {
         this.button = input(false, { ...(ngDevMode ? { debugName: "button" } : /* istanbul ignore next */ {}), transform: toBoolean });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbInputGroupAddon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbInputGroupAddon, isStandalone: true, selector: "cb-input-group-addon", inputs: { button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-input-group-addon--button": "button()" }, classAttribute: "cb-input-group-addon" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-2);padding:0 var(--cb-space-3);white-space:nowrap;color:var(--cb-color-text-muted);background-color:var(--cb-color-surface-100);border:var(--cb-border-width) solid var(--cb-color-border-strong);font-size:var(--cb-text-sm);font-family:var(--cb-font-sans)}:host(.cb-input-group-addon--button){padding:0;background-color:transparent;border:none}:host-context([data-theme=\"dark\"]){background-color:var(--cb-color-surface-200)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbInputGroupAddon, isStandalone: true, selector: "cb-input-group-addon", inputs: { button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-input-group-addon--button": "button()" }, classAttribute: "cb-input-group-addon" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-2);padding:0 var(--cb-space-3);white-space:nowrap;color:var(--cb-color-text-muted);background-color:var(--cb-color-surface-hover);border:var(--cb-border-width) solid var(--cb-color-border-strong);font-size:var(--cb-text-sm);font-family:var(--cb-font-sans)}:host(.cb-input-group-addon--button){padding:0;background-color:transparent;border:none}:host-context([data-theme=\"dark\"]){background-color:var(--cb-color-surface-subtle)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbInputGroupAddon, decorators: [{
             type: Component,
             args: [{ selector: 'cb-input-group-addon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
                         class: 'cb-input-group-addon',
                         '[class.cb-input-group-addon--button]': 'button()',
-                    }, template: `<ng-content />`, styles: [":host{display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-2);padding:0 var(--cb-space-3);white-space:nowrap;color:var(--cb-color-text-muted);background-color:var(--cb-color-surface-100);border:var(--cb-border-width) solid var(--cb-color-border-strong);font-size:var(--cb-text-sm);font-family:var(--cb-font-sans)}:host(.cb-input-group-addon--button){padding:0;background-color:transparent;border:none}:host-context([data-theme=\"dark\"]){background-color:var(--cb-color-surface-200)}\n"] }]
+                    }, template: `<ng-content />`, styles: [":host{display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-2);padding:0 var(--cb-space-3);white-space:nowrap;color:var(--cb-color-text-muted);background-color:var(--cb-color-surface-hover);border:var(--cb-border-width) solid var(--cb-color-border-strong);font-size:var(--cb-text-sm);font-family:var(--cb-font-sans)}:host(.cb-input-group-addon--button){padding:0;background-color:transparent;border:none}:host-context([data-theme=\"dark\"]){background-color:var(--cb-color-surface-subtle)}\n"] }]
         }], propDecorators: { button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: false }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-inputmask.mjs

@@ -64,17 +64,22 @@ class CbInputMask {
     onBlur() {
         this.onTouched();
     }
+    /**
+     * Aplica la máscara. Los literales (`-`, `(`, espacios…) se escriben solo
+     * cuando llega el carácter siguiente: así un literal inicial aparece y
+     * Backspace puede borrar el último literal sin que vuelva a añadirse.
+     */
     applyMask(raw, mask) {
-        const cleanChars = Array.from(raw);
+        const chars = Array.from(raw);
         let rawIdx = 0;
         let masked = '';
         let unmasked = '';
-        for (let mIdx = 0; mIdx < mask.length; mIdx++) {
-            const mChar = mask[mIdx];
+        let pending = '';
+        for (const mChar of mask) {
             if (mChar === '9' || mChar === 'a' || mChar === '*') {
                 let matched = '';
-                while (rawIdx < cleanChars.length) {
-                    const candidate = cleanChars[rawIdx++];
+                while (rawIdx < chars.length) {
+                    const candidate = chars[rawIdx++];
                     if (this.matchesToken(candidate, mChar)) {
                         matched = candidate;
                         break;
@@ -82,16 +87,14 @@ class CbInputMask {
                 }
                 if (!matched)
                     break;
-                masked += matched;
+                masked += pending + matched;
                 unmasked += matched;
+                pending = '';
             }
             else {
-                if (rawIdx < cleanChars.length && cleanChars[rawIdx] === mChar) {
+                if (chars[rawIdx] === mChar)
                     rawIdx++;
-                }
-                if (rawIdx <= cleanChars.length && unmasked.length > 0) {
-                    masked += mChar;
-                }
+                pending += mChar;
             }
         }
         return { masked, unmasked };

package/fesm2022/caribeng-ui-inputotp.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, input, booleanAttribute, model, signal, 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';
 
 /**
  * InputOTP de CaribeNG: entrada de código de verificación en casillas individuales
@@ -9,6 +9,10 @@ import { cbFieldState } from '@caribeng/ui';
  */
 class CbInputOtp {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         this.hostRef = inject(ElementRef);
         this.length = input(6, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
@@ -22,7 +26,7 @@ class CbInputOtp {
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Estado de validación: inputs manuales + estado de Angular Forms. */
         this.fieldState = cbFieldState({ invalid: () => this.invalid() });
-        this.ariaLabel = input('Código de verificación', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.value = model('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -87,6 +91,8 @@ class CbInputOtp {
         const next = cleaned.slice(0, this.length());
         this.value.set(next);
         this.onChange(next);
+        if (next)
+            this.focusSlot(Math.min(next.length, this.length()) - 1);
     }
     onBlur() {
         this.onTouched();
@@ -96,7 +102,7 @@ class CbInputOtp {
         slots[idx]?.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbInputOtp, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbInputOtp, isStandalone: true, selector: "cb-input-otp", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, integerOnly: { classPropertyName: "integerOnly", publicName: "integerOnly", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() || \"C\u00F3digo de verificaci\u00F3n\"" }, classAttribute: "cb-input-otp" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbInputOtp, isStandalone: true, selector: "cb-input-otp", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, integerOnly: { classPropertyName: "integerOnly", publicName: "integerOnly", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "(ariaLabel() ?? t().verificationCode)" }, classAttribute: "cb-input-otp" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CbInputOtp),
@@ -113,7 +119,7 @@ class CbInputOtp {
         [attr.inputmode]="integerOnly() ? 'numeric' : 'text'"
         [value]="charAt(idx)"
         [disabled]="isDisabled()"
-        [attr.aria-label]="'Dígito ' + (idx + 1)"
+        [attr.aria-label]="fmt(t().digit, idx + 1)"
         (input)="onSlotInput($event, idx)"
         (keydown)="onSlotKeydown($event, idx)"
         (paste)="onPaste($event)"
@@ -133,7 +139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], host: {
                         class: 'cb-input-otp',
                         role: 'group',
-                        '[attr.aria-label]': 'ariaLabel() || "Código de verificación"',
+                        '[attr.aria-label]': '(ariaLabel() ?? t().verificationCode)',
                     }, template: `
     @for (idx of indices(); track idx) {
       <input
@@ -145,7 +151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         [attr.inputmode]="integerOnly() ? 'numeric' : 'text'"
         [value]="charAt(idx)"
         [disabled]="isDisabled()"
-        [attr.aria-label]="'Dígito ' + (idx + 1)"
+        [attr.aria-label]="fmt(t().digit, idx + 1)"
         (input)="onSlotInput($event, idx)"
         (keydown)="onSlotKeydown($event, idx)"
         (paste)="onPaste($event)"