@caribeng/ui 22.1.0 → 22.2.0

package/fesm2022/caribeng-ui-chip.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, output, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 /**
  * Chip de CaribeNG: píldora compacta para representar entidades, filtros o etiquetas
@@ -8,6 +9,10 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbChip {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         this.label = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.icon = input('', /* @ts-ignore */
@@ -27,7 +32,7 @@ class CbChip {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbChip, isStandalone: true, selector: "cb-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "style.display": "visible() ? \"inline-flex\" : \"none\"" }, classAttribute: "cb-chip" }, ngImport: i0, template: `
     @if (image()) {
-      <img class="cb-chip__img" [src]="image()" [alt]="label()" />
+      <img class="cb-chip__img" [src]="image()" alt="" />
     } @else if (icon()) {
       <cb-icon class="cb-chip__icon" [name]="icon()" [size]="14" aria-hidden="true" />
     }
@@ -36,7 +41,7 @@ class CbChip {
       <button
         type="button"
         class="cb-chip__remove"
-        [attr.aria-label]="'Quitar ' + label()"
+        [attr.aria-label]="fmt(t().removeItem, label())"
         (click)="onRemove($event)"
       >
         <cb-icon name="x" [size]="13" aria-hidden="true" />
@@ -51,7 +56,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[style.display]': 'visible() ? "inline-flex" : "none"',
                     }, template: `
     @if (image()) {
-      <img class="cb-chip__img" [src]="image()" [alt]="label()" />
+      <img class="cb-chip__img" [src]="image()" alt="" />
     } @else if (icon()) {
       <cb-icon class="cb-chip__icon" [name]="icon()" [size]="14" aria-hidden="true" />
     }
@@ -60,7 +65,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <button
         type="button"
         class="cb-chip__remove"
-        [attr.aria-label]="'Quitar ' + label()"
+        [attr.aria-label]="fmt(t().removeItem, label())"
         (click)="onRemove($event)"
       >
         <cb-icon name="x" [size]="13" aria-hidden="true" />

package/fesm2022/caribeng-ui-chips.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { model, input, output, viewChild, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CbIcon } from '@caribeng/ui/icon';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFormat, cbFieldState } from '@caribeng/ui';
 
 let nextUid = 0;
 /**
@@ -16,6 +16,10 @@ let nextUid = 0;
  */
 class CbChips {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         this.value = model([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.placeholder = input('', /* @ts-ignore */
@@ -127,7 +131,7 @@ class CbChips {
             <button
               type="button"
               class="cb-chips__remove"
-              [attr.aria-label]="'Quitar ' + chip"
+              [attr.aria-label]="fmt(t().removeItem, chip)"
               (click)="remove($index); $event.stopPropagation()"
             >
               <cb-icon name="x" [size]="14" aria-hidden="true" />
@@ -151,7 +155,7 @@ class CbChips {
         (blur)="onBlur()"
       />
     </div>
-  `, isInline: true, styles: [":host{display:block}.cb-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-2);width:100%;min-height:2.5rem;padding:var(--cb-space-1) var(--cb-space-2);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);cursor:text;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-chips:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-chips--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-chips--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-chips__chip{display:inline-flex;align-items:center;gap:var(--cb-space-1);padding:.125rem .25rem .125rem .5rem;background-color:var(--cb-color-primary-50);color:var(--cb-color-primary-700);border-radius:var(--cb-radius-sm);font-size:.875em}.cb-chips__remove{display:inline-flex;padding:1px;border:none;background:transparent;color:inherit;border-radius:var(--cb-radius-full);cursor:pointer;opacity:.7}.cb-chips__remove:hover{opacity:1;background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)}.cb-chips__input{flex:1 1 60px;min-width:60px;border:none;outline:none;background:transparent;color:var(--cb-color-text);font:inherit;padding:var(--cb-space-1) 0}.cb-chips.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-chips.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default;background-color:var(--cb-color-surface-100)}:host-context([data-theme=\"dark\"]) .cb-chips__chip{background-color:color-mix(in srgb,var(--cb-color-primary-500) 22%,transparent);color:var(--cb-color-primary-200)}\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-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-2);width:100%;min-height:2.5rem;padding:var(--cb-space-1) var(--cb-space-2);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);cursor:text;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-chips:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-chips--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-chips--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-chips__chip{display:inline-flex;align-items:center;gap:var(--cb-space-1);padding:.125rem .25rem .125rem .5rem;background-color:var(--cb-color-primary-50);color:var(--cb-color-primary-700);border-radius:var(--cb-radius-sm);font-size:.875em}.cb-chips__remove{display:inline-flex;padding:1px;border:none;background:transparent;color:inherit;border-radius:var(--cb-radius-full);cursor:pointer;opacity:.7}.cb-chips__remove:hover{opacity:1;background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)}.cb-chips__input{flex:1 1 60px;min-width:60px;border:none;outline:none;background:transparent;color:var(--cb-color-text);font:inherit;padding:var(--cb-space-1) 0}.cb-chips.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-chips.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default;background-color:var(--cb-color-surface)}:host-context([data-theme=\"dark\"]) .cb-chips__chip{background-color:color-mix(in srgb,var(--cb-color-primary-500) 22%,transparent);color:var(--cb-color-primary-200)}\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: CbChips, decorators: [{
             type: Component,
@@ -170,7 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             <button
               type="button"
               class="cb-chips__remove"
-              [attr.aria-label]="'Quitar ' + chip"
+              [attr.aria-label]="fmt(t().removeItem, chip)"
               (click)="remove($index); $event.stopPropagation()"
             >
               <cb-icon name="x" [size]="14" aria-hidden="true" />
@@ -200,7 +204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             useExisting: forwardRef(() => CbChips),
                             multi: true,
                         },
-                    ], styles: [":host{display:block}.cb-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-2);width:100%;min-height:2.5rem;padding:var(--cb-space-1) var(--cb-space-2);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);cursor:text;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-chips:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-chips--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-chips--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-chips__chip{display:inline-flex;align-items:center;gap:var(--cb-space-1);padding:.125rem .25rem .125rem .5rem;background-color:var(--cb-color-primary-50);color:var(--cb-color-primary-700);border-radius:var(--cb-radius-sm);font-size:.875em}.cb-chips__remove{display:inline-flex;padding:1px;border:none;background:transparent;color:inherit;border-radius:var(--cb-radius-full);cursor:pointer;opacity:.7}.cb-chips__remove:hover{opacity:1;background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)}.cb-chips__input{flex:1 1 60px;min-width:60px;border:none;outline:none;background:transparent;color:var(--cb-color-text);font:inherit;padding:var(--cb-space-1) 0}.cb-chips.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-chips.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default;background-color:var(--cb-color-surface-100)}:host-context([data-theme=\"dark\"]) .cb-chips__chip{background-color:color-mix(in srgb,var(--cb-color-primary-500) 22%,transparent);color:var(--cb-color-primary-200)}\n"] }]
+                    ], styles: [":host{display:block}.cb-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-2);width:100%;min-height:2.5rem;padding:var(--cb-space-1) var(--cb-space-2);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);cursor:text;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-chips:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-chips--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-chips--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-chips__chip{display:inline-flex;align-items:center;gap:var(--cb-space-1);padding:.125rem .25rem .125rem .5rem;background-color:var(--cb-color-primary-50);color:var(--cb-color-primary-700);border-radius:var(--cb-radius-sm);font-size:.875em}.cb-chips__remove{display:inline-flex;padding:1px;border:none;background:transparent;color:inherit;border-radius:var(--cb-radius-full);cursor:pointer;opacity:.7}.cb-chips__remove:hover{opacity:1;background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)}.cb-chips__input{flex:1 1 60px;min-width:60px;border:none;outline:none;background:transparent;color:var(--cb-color-text);font:inherit;padding:var(--cb-space-1) 0}.cb-chips.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-chips.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default;background-color:var(--cb-color-surface)}:host-context([data-theme=\"dark\"]) .cb-chips__chip{background-color:color-mix(in srgb,var(--cb-color-primary-500) 22%,transparent);color:var(--cb-color-primary-200)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], allowDuplicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-colorpicker.mjs

@@ -3,7 +3,7 @@ import { model, input, signal, viewChild, computed, forwardRef, ViewEncapsulatio
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
 
 let nextUid = 0;
 const DEFAULT_PRESETS = [
@@ -23,6 +23,8 @@ const DEFAULT_PRESETS = [
  */
 class CbColorPicker {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Color seleccionado (hex `#rrggbb`). Two-way opcional fuera de Forms. */
         this.value = model('#10b981', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -191,7 +193,7 @@ class CbColorPicker {
       [disabled]="isDisabled()"
       [attr.aria-haspopup]="'dialog'"
       [attr.aria-expanded]="open()"
-      [attr.aria-label]="(ariaLabel() || 'Color') + ': ' + value()"
+      [attr.aria-label]="(ariaLabel() || t().color) + ': ' + value()"
       (click)="toggle()"
     >
       <span class="cb-colorpicker__swatch" [style.background-color]="value()"></span>
@@ -210,7 +212,7 @@ class CbColorPicker {
       (overlayKeydown)="onOverlayKeydown($event)"
       (detach)="close()"
     >
-      <div class="cb-colorpicker__panel" role="dialog" [attr.aria-label]="ariaLabel() || 'Selector de color'">
+      <div class="cb-colorpicker__panel" role="dialog" [attr.aria-label]="ariaLabel() || t().colorPicker">
         <div
           #sv
           class="cb-colorpicker__sv"
@@ -244,7 +246,7 @@ class CbColorPicker {
             type="text"
             spellcheck="false"
             autocomplete="off"
-            aria-label="Color hexadecimal"
+            [attr.aria-label]="t().hexColor"
             [value]="value()"
             (change)="onHexInput($event)"
           />
@@ -288,7 +290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       [disabled]="isDisabled()"
       [attr.aria-haspopup]="'dialog'"
       [attr.aria-expanded]="open()"
-      [attr.aria-label]="(ariaLabel() || 'Color') + ': ' + value()"
+      [attr.aria-label]="(ariaLabel() || t().color) + ': ' + value()"
       (click)="toggle()"
     >
       <span class="cb-colorpicker__swatch" [style.background-color]="value()"></span>
@@ -307,7 +309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       (overlayKeydown)="onOverlayKeydown($event)"
       (detach)="close()"
     >
-      <div class="cb-colorpicker__panel" role="dialog" [attr.aria-label]="ariaLabel() || 'Selector de color'">
+      <div class="cb-colorpicker__panel" role="dialog" [attr.aria-label]="ariaLabel() || t().colorPicker">
         <div
           #sv
           class="cb-colorpicker__sv"
@@ -341,7 +343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type="text"
             spellcheck="false"
             autocomplete="off"
-            aria-label="Color hexadecimal"
+            [attr.aria-label]="t().hexColor"
             [value]="value()"
             (change)="onHexInput($event)"
           />

package/fesm2022/caribeng-ui-confirmdialog.mjs

@@ -1,27 +1,48 @@
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, model, input, output, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, model, input, output, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
+import { injectCbTranslation } from '@caribeng/ui';
+import { CbButton } from '@caribeng/ui/button';
 
 let nextUid = 0;
 /**
  * Diálogo de confirmación (`role="alertdialog"`) con trampa de foco, cierre con
- * Escape (equivale a cancelar) y restauración del foco al cerrarse.
+ * Escape (equivale a cancelar) y restauración del foco al cerrarse. Al abrirse,
+ * el foco va al botón de cancelar (la opción segura).
+ *
+ * @example
+ * ```html
+ * <cb-confirm-dialog
+ *   [(visible)]="confirmar"
+ *   header="Eliminar cuenta"
+ *   message="Esta acción no se puede deshacer."
+ *   acceptSeverity="danger"
+ *   (accepted)="eliminar()"
+ * />
+ * ```
  */
 class CbConfirmDialog {
     constructor() {
+        this.t = injectCbTranslation();
         this.document = inject(DOCUMENT);
+        /** Visibilidad (two-way). */
         this.visible = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.header = input('Confirmar', /* @ts-ignore */
+        /** Título. Por defecto, "Confirmar" del idioma activo. */
+        this.header = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
-        this.message = input('¿Deseas continuar?', /* @ts-ignore */
+        /** Mensaje. Por defecto, "¿Deseas continuar?" del idioma activo. */
+        this.message = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
-        this.acceptLabel = input('Aceptar', /* @ts-ignore */
+        this.acceptLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "acceptLabel" }] : /* istanbul ignore next */ []));
-        this.rejectLabel = input('Cancelar', /* @ts-ignore */
+        this.rejectLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rejectLabel" }] : /* istanbul ignore next */ []));
+        /** Severidad del botón de aceptar (p. ej. `danger` para acciones destructivas). */
+        this.acceptSeverity = input('primary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "acceptSeverity" }] : /* istanbul ignore next */ []));
         this.accepted = output();
         this.rejected = output();
         this.titleId = `cb-confirm-dialog-${++nextUid}-title`;
@@ -52,12 +73,56 @@ class CbConfirmDialog {
         this.visible.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbConfirmDialog, isStandalone: true, selector: "cb-confirm-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, acceptLabel: { classPropertyName: "acceptLabel", publicName: "acceptLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectLabel: { classPropertyName: "rejectLabel", publicName: "rejectLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", accepted: "accepted", rejected: "rejected" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `@if(visible()){<div class="cb-confirm-dialog__mask" (click)="reject()"><section class="cb-confirm-dialog" role="alertdialog" aria-modal="true" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="messageId" cdkTrapFocus cdkTrapFocusAutoCapture (click)="$event.stopPropagation()"><h2 [id]="titleId">{{header()}}</h2><p [id]="messageId">{{message()}}</p><footer><button type="button" (click)="reject()">{{rejectLabel()}}</button><button type="button" (click)="confirm()">{{acceptLabel()}}</button></footer></section></div>}`, isInline: true, styles: [":host{display:contents}.cb-confirm-dialog__mask{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#0006}.cb-confirm-dialog{width:min(28rem,calc(100vw - 2rem));padding:1.25rem;border-radius:.75rem;background:var(--cb-color-surface,#fff);color:var(--cb-color-text,#111827);box-shadow:0 1rem 3rem #0003}.cb-confirm-dialog h2{margin:0 0 .75rem;font-size:1.15rem}.cb-confirm-dialog footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.25rem}.cb-confirm-dialog button{padding:.5rem .8rem}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbConfirmDialog, isStandalone: true, selector: "cb-confirm-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, acceptLabel: { classPropertyName: "acceptLabel", publicName: "acceptLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectLabel: { classPropertyName: "rejectLabel", publicName: "rejectLabel", isSignal: true, isRequired: false, transformFunction: null }, acceptSeverity: { classPropertyName: "acceptSeverity", publicName: "acceptSeverity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", accepted: "accepted", rejected: "rejected" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `
+    @if (visible()) {
+      <div class="cb-confirm-dialog__mask" (click)="reject()">
+        <section
+          class="cb-confirm-dialog"
+          role="alertdialog"
+          aria-modal="true"
+          [attr.aria-labelledby]="titleId"
+          [attr.aria-describedby]="messageId"
+          cdkTrapFocus
+          cdkTrapFocusAutoCapture
+          (click)="$event.stopPropagation()"
+        >
+          <h2 class="cb-confirm-dialog__title" [id]="titleId">{{ header() ?? t().confirm }}</h2>
+          <p class="cb-confirm-dialog__message" [id]="messageId">{{ message() ?? t().confirmMessage }}</p>
+          <footer class="cb-confirm-dialog__actions">
+            <cb-button variant="text" severity="secondary" (click)="reject()">{{ rejectLabel() ?? t().cancel }}</cb-button>
+            <cb-button [severity]="acceptSeverity()" (click)="confirm()">{{ acceptLabel() ?? t().accept }}</cb-button>
+          </footer>
+        </section>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:contents}.cb-confirm-dialog__mask{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:var(--cb-space-4, 1rem);background:color-mix(in srgb,#000 40%,transparent)}.cb-confirm-dialog{box-sizing:border-box;width:min(28rem,100%);padding:var(--cb-space-6, 1.5rem);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);box-shadow:var(--cb-shadow-lg, 0 1rem 3rem rgb(0 0 0 / 20%))}.cb-confirm-dialog__title{margin:0 0 var(--cb-space-2, .5rem);font-size:var(--cb-text-lg, 1.125rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}.cb-confirm-dialog__message{margin:0;color:var(--cb-color-text-muted);line-height:1.55}.cb-confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-6, 1.5rem)}\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: CbConfirmDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-confirm-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [A11yModule], host: { '(document:keydown.escape)': 'onEscape()' }, template: `@if(visible()){<div class="cb-confirm-dialog__mask" (click)="reject()"><section class="cb-confirm-dialog" role="alertdialog" aria-modal="true" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="messageId" cdkTrapFocus cdkTrapFocusAutoCapture (click)="$event.stopPropagation()"><h2 [id]="titleId">{{header()}}</h2><p [id]="messageId">{{message()}}</p><footer><button type="button" (click)="reject()">{{rejectLabel()}}</button><button type="button" (click)="confirm()">{{acceptLabel()}}</button></footer></section></div>}`, styles: [":host{display:contents}.cb-confirm-dialog__mask{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#0006}.cb-confirm-dialog{width:min(28rem,calc(100vw - 2rem));padding:1.25rem;border-radius:.75rem;background:var(--cb-color-surface,#fff);color:var(--cb-color-text,#111827);box-shadow:0 1rem 3rem #0003}.cb-confirm-dialog h2{margin:0 0 .75rem;font-size:1.15rem}.cb-confirm-dialog footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.25rem}.cb-confirm-dialog button{padding:.5rem .8rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], acceptLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptLabel", required: false }] }], rejectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectLabel", required: false }] }], accepted: [{ type: i0.Output, args: ["accepted"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
+            args: [{ selector: 'cb-confirm-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [A11yModule, CbButton], host: { '(document:keydown.escape)': 'onEscape()' }, template: `
+    @if (visible()) {
+      <div class="cb-confirm-dialog__mask" (click)="reject()">
+        <section
+          class="cb-confirm-dialog"
+          role="alertdialog"
+          aria-modal="true"
+          [attr.aria-labelledby]="titleId"
+          [attr.aria-describedby]="messageId"
+          cdkTrapFocus
+          cdkTrapFocusAutoCapture
+          (click)="$event.stopPropagation()"
+        >
+          <h2 class="cb-confirm-dialog__title" [id]="titleId">{{ header() ?? t().confirm }}</h2>
+          <p class="cb-confirm-dialog__message" [id]="messageId">{{ message() ?? t().confirmMessage }}</p>
+          <footer class="cb-confirm-dialog__actions">
+            <cb-button variant="text" severity="secondary" (click)="reject()">{{ rejectLabel() ?? t().cancel }}</cb-button>
+            <cb-button [severity]="acceptSeverity()" (click)="confirm()">{{ acceptLabel() ?? t().accept }}</cb-button>
+          </footer>
+        </section>
+      </div>
+    }
+  `, styles: [":host{display:contents}.cb-confirm-dialog__mask{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:var(--cb-space-4, 1rem);background:color-mix(in srgb,#000 40%,transparent)}.cb-confirm-dialog{box-sizing:border-box;width:min(28rem,100%);padding:var(--cb-space-6, 1.5rem);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);box-shadow:var(--cb-shadow-lg, 0 1rem 3rem rgb(0 0 0 / 20%))}.cb-confirm-dialog__title{margin:0 0 var(--cb-space-2, .5rem);font-size:var(--cb-text-lg, 1.125rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}.cb-confirm-dialog__message{margin:0;color:var(--cb-color-text-muted);line-height:1.55}.cb-confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-6, 1.5rem)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], acceptLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptLabel", required: false }] }], rejectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectLabel", required: false }] }], acceptSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptSeverity", required: false }] }], accepted: [{ type: i0.Output, args: ["accepted"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/caribeng-ui-confirmpopup.mjs

@@ -1,28 +1,153 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { model, input, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ViewContainerRef, Injector, model, input, output, viewChild, signal, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { injectCbTranslation } from '@caribeng/ui';
+import { CbButton } from '@caribeng/ui/button';
 
+let nextUid = 0;
+/**
+ * Confirmación breve de CaribeNG. Ábrela anclada al botón que la dispara con
+ * `confirm($event)` (como PrimeNG), o en línea con `[(visible)]`. Escape o un
+ * clic fuera la cancelan; el foco vuelve al disparador al cerrarse.
+ *
+ * @example
+ * ```html
+ * <cb-button severity="danger" (click)="borrar.confirm($event)">Eliminar</cb-button>
+ * <cb-confirm-popup #borrar message="¿Eliminar este archivo?" (accepted)="eliminar()" />
+ * ```
+ */
 class CbConfirmPopup {
     constructor() {
+        this.t = injectCbTranslation();
+        this.overlay = inject(Overlay);
+        this.vcr = inject(ViewContainerRef);
+        this.injector = inject(Injector);
+        this.messageId = `cb-confirm-popup-${++nextUid}-message`;
+        /** Visibilidad (two-way). Con `[(visible)]` se muestra en línea. */
         this.visible = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.message = input('¿Confirmas la acción?', /* @ts-ignore */
+        /** Pregunta a confirmar. Por defecto, la del idioma activo. */
+        this.message = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
-        this.acceptLabel = input('Aceptar', /* @ts-ignore */
+        this.acceptLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "acceptLabel" }] : /* istanbul ignore next */ []));
-        this.rejectLabel = input('Cancelar', /* @ts-ignore */
+        this.rejectLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rejectLabel" }] : /* istanbul ignore next */ []));
+        /** Severidad del botón de aceptar (p. ej. `danger` para acciones destructivas). */
+        this.acceptSeverity = input('primary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "acceptSeverity" }] : /* istanbul ignore next */ []));
         this.accepted = output();
         this.rejected = output();
+        this.panel = viewChild.required('panel');
+        /** Abierta como overlay anclado a un disparador. */
+        this.anchored = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "anchored" }] : /* istanbul ignore next */ []));
+        this.overlayRef = null;
+        this.trigger = null;
+        this.positions = [
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -8 },
+        ];
+    }
+    /** Abre la confirmación anclada al elemento que recibió el evento. */
+    confirm(event) {
+        this.show(event.currentTarget);
+    }
+    /** Abre la confirmación anclada a `target`. */
+    show(target) {
+        if (this.overlayRef)
+            return;
+        this.trigger = target;
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay.position().flexibleConnectedTo(target).withPositions(this.positions).withPush(true),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+        });
+        this.overlayRef.attach(new TemplatePortal(this.panel(), this.vcr));
+        this.overlayRef.backdropClick().subscribe(() => this.reject());
+        this.anchored.set(true);
+        this.visible.set(true);
+        // Foco en la opción segura (cancelar), como en ConfirmDialog.
+        afterNextRender(() => this.overlayRef?.overlayElement.querySelector('button')?.focus(), {
+            injector: this.injector,
+        });
+    }
+    accept() {
+        this.accepted.emit();
+        this.close();
+    }
+    reject() {
+        this.rejected.emit();
+        this.close();
+    }
+    close() {
+        this.visible.set(false);
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+            this.anchored.set(false);
+            this.trigger?.focus();
+            this.trigger = null;
+        }
     }
-    confirm() { this.accepted.emit(); this.visible.set(false); }
-    reject() { this.rejected.emit(); this.visible.set(false); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbConfirmPopup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbConfirmPopup, isStandalone: true, selector: "cb-confirm-popup", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, acceptLabel: { classPropertyName: "acceptLabel", publicName: "acceptLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectLabel: { classPropertyName: "rejectLabel", publicName: "rejectLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", accepted: "accepted", rejected: "rejected" }, ngImport: i0, template: `@if(visible()){<section class="cb-confirm-popup" role="alertdialog" aria-modal="false"><p>{{message()}}</p><div><button type="button" (click)="reject()">{{rejectLabel()}}</button><button type="button" (click)="confirm()">{{acceptLabel()}}</button></div></section>}`, isInline: true, styles: [":host{display:inline-block}.cb-confirm-popup{min-width:14rem;padding:1rem;border:1px solid var(--cb-color-border,#d1d5db);border-radius:.65rem;background:var(--cb-color-surface,#fff);color:var(--cb-color-text,#111827);box-shadow:0 .5rem 1.5rem #0002}.cb-confirm-popup p{margin:0 0 .75rem}.cb-confirm-popup div{display:flex;justify-content:flex-end;gap:.4rem}.cb-confirm-popup button{padding:.4rem .65rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbConfirmPopup, isStandalone: true, selector: "cb-confirm-popup", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, acceptLabel: { classPropertyName: "acceptLabel", publicName: "acceptLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectLabel: { classPropertyName: "rejectLabel", publicName: "rejectLabel", isSignal: true, isRequired: false, transformFunction: null }, acceptSeverity: { classPropertyName: "acceptSeverity", publicName: "acceptSeverity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", accepted: "accepted", rejected: "rejected" }, host: { classAttribute: "cb-confirm-popup-host" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (visible() && !anchored()) {
+      <ng-container *ngTemplateOutlet="panel" />
+    }
+
+    <ng-template #panel>
+      <section
+        class="cb-confirm-popup"
+        role="alertdialog"
+        aria-modal="false"
+        [attr.aria-describedby]="messageId"
+        (keydown.escape)="reject()"
+      >
+        <p class="cb-confirm-popup__message" [id]="messageId">{{ message() ?? t().confirmMessage }}</p>
+        <div class="cb-confirm-popup__actions">
+          <cb-button size="sm" variant="text" severity="secondary" (click)="reject()">
+            {{ rejectLabel() ?? t().cancel }}
+          </cb-button>
+          <cb-button size="sm" [severity]="acceptSeverity()" (click)="accept()">
+            {{ acceptLabel() ?? t().accept }}
+          </cb-button>
+        </div>
+      </section>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:inline-block}.cb-confirm-popup{min-width:15rem;max-width:22rem;padding:var(--cb-space-4, 1rem);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);box-shadow:0 .75rem 2rem color-mix(in srgb,#000 18%,transparent)}.cb-confirm-popup__message{margin:0 0 var(--cb-space-3, .75rem);font-size:var(--cb-text-sm, .875rem);line-height:1.5}.cb-confirm-popup__actions{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: CbConfirmPopup, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-confirm-popup', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `@if(visible()){<section class="cb-confirm-popup" role="alertdialog" aria-modal="false"><p>{{message()}}</p><div><button type="button" (click)="reject()">{{rejectLabel()}}</button><button type="button" (click)="confirm()">{{acceptLabel()}}</button></div></section>}`, styles: [":host{display:inline-block}.cb-confirm-popup{min-width:14rem;padding:1rem;border:1px solid var(--cb-color-border,#d1d5db);border-radius:.65rem;background:var(--cb-color-surface,#fff);color:var(--cb-color-text,#111827);box-shadow:0 .5rem 1.5rem #0002}.cb-confirm-popup p{margin:0 0 .75rem}.cb-confirm-popup div{display:flex;justify-content:flex-end;gap:.4rem}.cb-confirm-popup button{padding:.4rem .65rem}\n"] }]
-        }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], acceptLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptLabel", required: false }] }], rejectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectLabel", required: false }] }], accepted: [{ type: i0.Output, args: ["accepted"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
+            args: [{ selector: 'cb-confirm-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet, CbButton], host: { class: 'cb-confirm-popup-host' }, template: `
+    @if (visible() && !anchored()) {
+      <ng-container *ngTemplateOutlet="panel" />
+    }
+
+    <ng-template #panel>
+      <section
+        class="cb-confirm-popup"
+        role="alertdialog"
+        aria-modal="false"
+        [attr.aria-describedby]="messageId"
+        (keydown.escape)="reject()"
+      >
+        <p class="cb-confirm-popup__message" [id]="messageId">{{ message() ?? t().confirmMessage }}</p>
+        <div class="cb-confirm-popup__actions">
+          <cb-button size="sm" variant="text" severity="secondary" (click)="reject()">
+            {{ rejectLabel() ?? t().cancel }}
+          </cb-button>
+          <cb-button size="sm" [severity]="acceptSeverity()" (click)="accept()">
+            {{ acceptLabel() ?? t().accept }}
+          </cb-button>
+        </div>
+      </section>
+    </ng-template>
+  `, styles: [":host{display:inline-block}.cb-confirm-popup{min-width:15rem;max-width:22rem;padding:var(--cb-space-4, 1rem);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);box-shadow:0 .75rem 2rem color-mix(in srgb,#000 18%,transparent)}.cb-confirm-popup__message{margin:0 0 var(--cb-space-3, .75rem);font-size:var(--cb-text-sm, .875rem);line-height:1.5}.cb-confirm-popup__actions{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem)}\n"] }]
+        }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], acceptLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptLabel", required: false }] }], rejectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectLabel", required: false }] }], acceptSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptSeverity", required: false }] }], accepted: [{ type: i0.Output, args: ["accepted"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/caribeng-ui-contextmenu.mjs

@@ -3,16 +3,19 @@ import { inject, ViewContainerRef, DestroyRef, input, output, viewChild, ViewEnc
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /** Context menu that opens at the pointer position on right click. */
 class CbContextMenu {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.overlay = inject(Overlay);
         this.vcr = inject(ViewContainerRef);
         this.destroyRef = inject(DestroyRef);
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Context menu', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.itemSelect = output();
         this.content = viewChild.required('content');
@@ -66,7 +69,7 @@ class CbContextMenu {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbContextMenu, isStandalone: true, selector: "cb-contextmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "contextmenu": "open($event)" }, classAttribute: "cb-contextmenu" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-content />
     <ng-template #content>
-      <div class="cb-contextmenu__panel" role="menu" [attr.aria-label]="ariaLabel()">
+      <div class="cb-contextmenu__panel" role="menu" [attr.aria-label]="(ariaLabel() ?? t().contextMenu)">
         @for (item of items(); track $index) {
           @if (item.separator) { <div class="cb-contextmenu__separator" role="separator"></div> }
           @else {
@@ -85,7 +88,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'cb-contextmenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-contextmenu', '(contextmenu)': 'open($event)' }, template: `
     <ng-content />
     <ng-template #content>
-      <div class="cb-contextmenu__panel" role="menu" [attr.aria-label]="ariaLabel()">
+      <div class="cb-contextmenu__panel" role="menu" [attr.aria-label]="(ariaLabel() ?? t().contextMenu)">
         @for (item of items(); track $index) {
           @if (item.separator) { <div class="cb-contextmenu__separator" role="separator"></div> }
           @else {