@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-descriptions.mjs

@@ -0,0 +1,124 @@
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, contentChildren, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+/** Plantilla del valor de un elemento: `<ng-template cbDescriptionsValue="estado" let-valor>`. */
+class CbDescriptionsValue {
+    constructor() {
+        this.cbDescriptionsValue = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cbDescriptionsValue" }] : /* istanbul ignore next */ []));
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDescriptionsValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbDescriptionsValue, isStandalone: true, selector: "ng-template[cbDescriptionsValue]", inputs: { cbDescriptionsValue: { classPropertyName: "cbDescriptionsValue", publicName: "cbDescriptionsValue", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDescriptionsValue, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[cbDescriptionsValue]',
+                    standalone: true,
+                }]
+        }], propDecorators: { cbDescriptionsValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "cbDescriptionsValue", required: true }] }] } });
+let nextId = 0;
+/**
+ * Descriptions de CaribeNG: lista de pares etiqueta / valor (detalle de un
+ * cliente, de una transacción…) en una o varias columnas, sobre una lista de
+ * descripción (`<dl>`) nativa.
+ *
+ * @example
+ * ```html
+ * <cb-descriptions title="Detalle de la transferencia" [columns]="2" [items]="[
+ *   { label: 'Origen', value: 'Ahorros **** 1234' },
+ *   { label: 'Valor', value: '$ 250.000' },
+ *   { label: 'Estado', key: 'estado', value: 'Aprobada' },
+ * ]">
+ *   <ng-template cbDescriptionsValue="estado" let-estado><cb-tag [value]="estado" severity="success" /></ng-template>
+ * </cb-descriptions>
+ * ```
+ */
+class CbDescriptions {
+    constructor() {
+        this.valueTemplates = contentChildren(CbDescriptionsValue, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueTemplates" }] : /* istanbul ignore next */ []));
+        this.titleId = `cb-descriptions-${++nextId}-title`;
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Título del bloque (se anuncia como encabezado). */
+        this.title = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Nivel del encabezado del título (por defecto 3). */
+        this.headingLevel = input(3, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
+        /** Columnas en pantallas anchas (en móvil siempre 1). */
+        this.columns = input(2, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /** Etiqueta encima del valor (`vertical`) o a su lado (`horizontal`). */
+        this.layout = input('vertical', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        /** Bordes entre elementos. */
+        this.bordered = input(false, { ...(ngDevMode ? { debugName: "bordered" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    }
+    valueTemplate(item) {
+        return item.key ? this.valueTemplates().find((t) => t.cbDescriptionsValue() === item.key) : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDescriptions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDescriptions, isStandalone: true, selector: "cb-descriptions", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-descriptions--bordered": "bordered()", "class.cb-descriptions--vertical": "layout() === 'vertical'", "style.--cb-descriptions-columns": "columns()" }, classAttribute: "cb-descriptions" }, queries: [{ propertyName: "valueTemplates", predicate: CbDescriptionsValue, isSignal: true }], ngImport: i0, template: `
+    @if (title()) {
+      <div class="cb-descriptions__title" role="heading" [attr.aria-level]="headingLevel()" [id]="titleId">{{ title() }}</div>
+    }
+    <dl class="cb-descriptions__list" [attr.aria-labelledby]="title() ? titleId : null">
+      @for (item of items(); track $index) {
+        <div class="cb-descriptions__item" [style.grid-column]="item.span && item.span > 1 ? 'span ' + item.span : null">
+          <dt class="cb-descriptions__label">{{ item.label }}</dt>
+          <dd class="cb-descriptions__value">
+            @if (valueTemplate(item); as tpl) {
+              <ng-container [ngTemplateOutlet]="tpl.template" [ngTemplateOutletContext]="{ $implicit: item.value, item }" />
+            } @else {
+              {{ item.value ?? '—' }}
+            }
+          </dd>
+        </div>
+      }
+    </dl>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text)}.cb-descriptions__title{margin:0 0 var(--cb-space-3, .75rem);font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}.cb-descriptions__list{display:grid;grid-template-columns:repeat(var(--cb-descriptions-columns, 2),minmax(0,1fr));gap:var(--cb-space-4, 1rem) var(--cb-space-6, 1.5rem);margin:0}.cb-descriptions__item{display:flex;flex-direction:column;gap:.15rem;min-width:0}:host(:not(.cb-descriptions--vertical)) .cb-descriptions__item{flex-direction:row;align-items:baseline;gap:var(--cb-space-2, .5rem)}.cb-descriptions__label{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted)}:host(:not(.cb-descriptions--vertical)) .cb-descriptions__label{flex:none;font-size:var(--cb-text-sm, .875rem)}:host(:not(.cb-descriptions--vertical)) .cb-descriptions__label:after{content:\":\"}.cb-descriptions__value{margin:0;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text-strong);overflow-wrap:anywhere}:host(.cb-descriptions--bordered) .cb-descriptions__list{gap:0;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem)}:host(.cb-descriptions--bordered) .cb-descriptions__item{padding:var(--cb-space-3, .75rem) var(--cb-space-4, 1rem);border-right:1px solid var(--cb-color-border);border-bottom:1px solid var(--cb-color-border);margin:0 -1px -1px 0}:host(.cb-descriptions--bordered) .cb-descriptions__label{font-weight:var(--cb-font-weight-medium, 500)}@media(max-width:600px){.cb-descriptions__list{grid-template-columns:minmax(0,1fr)}.cb-descriptions__item{grid-column:auto!important}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDescriptions, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-descriptions', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet], host: {
+                        class: 'cb-descriptions',
+                        '[class.cb-descriptions--bordered]': 'bordered()',
+                        '[class.cb-descriptions--vertical]': "layout() === 'vertical'",
+                        '[style.--cb-descriptions-columns]': 'columns()',
+                    }, template: `
+    @if (title()) {
+      <div class="cb-descriptions__title" role="heading" [attr.aria-level]="headingLevel()" [id]="titleId">{{ title() }}</div>
+    }
+    <dl class="cb-descriptions__list" [attr.aria-labelledby]="title() ? titleId : null">
+      @for (item of items(); track $index) {
+        <div class="cb-descriptions__item" [style.grid-column]="item.span && item.span > 1 ? 'span ' + item.span : null">
+          <dt class="cb-descriptions__label">{{ item.label }}</dt>
+          <dd class="cb-descriptions__value">
+            @if (valueTemplate(item); as tpl) {
+              <ng-container [ngTemplateOutlet]="tpl.template" [ngTemplateOutletContext]="{ $implicit: item.value, item }" />
+            } @else {
+              {{ item.value ?? '—' }}
+            }
+          </dd>
+        </div>
+      }
+    </dl>
+  `, styles: [":host{display:block;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text)}.cb-descriptions__title{margin:0 0 var(--cb-space-3, .75rem);font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}.cb-descriptions__list{display:grid;grid-template-columns:repeat(var(--cb-descriptions-columns, 2),minmax(0,1fr));gap:var(--cb-space-4, 1rem) var(--cb-space-6, 1.5rem);margin:0}.cb-descriptions__item{display:flex;flex-direction:column;gap:.15rem;min-width:0}:host(:not(.cb-descriptions--vertical)) .cb-descriptions__item{flex-direction:row;align-items:baseline;gap:var(--cb-space-2, .5rem)}.cb-descriptions__label{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted)}:host(:not(.cb-descriptions--vertical)) .cb-descriptions__label{flex:none;font-size:var(--cb-text-sm, .875rem)}:host(:not(.cb-descriptions--vertical)) .cb-descriptions__label:after{content:\":\"}.cb-descriptions__value{margin:0;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text-strong);overflow-wrap:anywhere}:host(.cb-descriptions--bordered) .cb-descriptions__list{gap:0;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem)}:host(.cb-descriptions--bordered) .cb-descriptions__item{padding:var(--cb-space-3, .75rem) var(--cb-space-4, 1rem);border-right:1px solid var(--cb-color-border);border-bottom:1px solid var(--cb-color-border);margin:0 -1px -1px 0}:host(.cb-descriptions--bordered) .cb-descriptions__label{font-weight:var(--cb-font-weight-medium, 500)}@media(max-width:600px){.cb-descriptions__list{grid-template-columns:minmax(0,1fr)}.cb-descriptions__item{grid-column:auto!important}}\n"] }]
+        }], propDecorators: { valueTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbDescriptionsValue), { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/descriptions
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbDescriptions, CbDescriptionsValue };

package/fesm2022/caribeng-ui-dialog.mjs

@@ -6,6 +6,7 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 let nextUid = 0;
 /**
@@ -26,6 +27,8 @@ let nextUid = 0;
  */
 class CbDialog {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.overlay = inject(Overlay);
         this.vcr = inject(ViewContainerRef);
         this.document = inject(DOCUMENT);
@@ -45,7 +48,7 @@ class CbDialog {
         this.width = input('32rem', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
         /** Nombre accesible cuando no hay `header`. */
-        this.ariaLabel = input('Diálogo', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         /** Se emite cuando el diálogo se cierra. */
         this.onHide = output();
@@ -114,7 +117,7 @@ class CbDialog {
           role="dialog"
           aria-modal="true"
           [attr.aria-labelledby]="header() ? titleId : null"
-          [attr.aria-label]="header() ? null : ariaLabel()"
+          [attr.aria-label]="header() ? null : (ariaLabel() ?? t().dialog)"
           [style.width]="width()"
           cdkTrapFocus
           cdkTrapFocusAutoCapture
@@ -128,7 +131,7 @@ class CbDialog {
                 <button
                   type="button"
                   class="cb-dialog__close"
-                  aria-label="Cerrar"
+                  [attr.aria-label]="t().close"
                   (click)="close()"
                 >
                   <cb-icon name="x" size="sm" />
@@ -145,7 +148,7 @@ class CbDialog {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, styles: [".cb-dialog__mask{display:contents}.cb-dialog{display:flex;flex-direction:column;box-sizing:border-box;max-width:calc(100vw - 2 * var(--cb-space-4));max-height:calc(100vh - 2 * var(--cb-space-6));background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg);box-shadow:var(--cb-shadow-lg);font-family:var(--cb-font-sans);overflow:hidden;animation:cb-dialog-in var(--cb-duration-normal) var(--cb-ease-out)}.cb-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-4);padding:var(--cb-space-5) var(--cb-space-6);border-bottom:1px solid var(--cb-color-border)}.cb-dialog__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong)}.cb-dialog__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--cb-radius-md);border:none;background:transparent;color:var(--cb-color-text-muted);font-size:var(--cb-text-base);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-dialog__close:hover{background:var(--cb-color-surface-100);color:var(--cb-color-text)}.cb-dialog__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-dialog__body{padding:var(--cb-space-6);overflow-y:auto}.cb-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-6);border-top:1px solid var(--cb-color-border)}.cb-dialog__footer:empty{display:none}@keyframes cb-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.cb-dialog{animation:none}}\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 }); }
+  `, isInline: true, styles: [".cb-dialog__mask{display:contents}.cb-dialog{display:flex;flex-direction:column;box-sizing:border-box;max-width:calc(100vw - 2 * var(--cb-space-4));max-height:calc(100vh - 2 * var(--cb-space-6));background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg);box-shadow:var(--cb-shadow-lg);font-family:var(--cb-font-sans);overflow:hidden;animation:cb-dialog-in var(--cb-duration-normal) var(--cb-ease-out)}.cb-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-4);padding:var(--cb-space-5) var(--cb-space-6);border-bottom:1px solid var(--cb-color-border)}.cb-dialog__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong)}.cb-dialog__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--cb-radius-md);border:none;background:transparent;color:var(--cb-color-text-muted);font-size:var(--cb-text-base);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-dialog__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-dialog__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-dialog__body{padding:var(--cb-space-6);overflow-y:auto}.cb-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-6);border-top:1px solid var(--cb-color-border)}.cb-dialog__footer:empty{display:none}@keyframes cb-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.cb-dialog{animation:none}}\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: CbDialog, decorators: [{
             type: Component,
@@ -157,7 +160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           role="dialog"
           aria-modal="true"
           [attr.aria-labelledby]="header() ? titleId : null"
-          [attr.aria-label]="header() ? null : ariaLabel()"
+          [attr.aria-label]="header() ? null : (ariaLabel() ?? t().dialog)"
           [style.width]="width()"
           cdkTrapFocus
           cdkTrapFocusAutoCapture
@@ -171,7 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 <button
                   type="button"
                   class="cb-dialog__close"
-                  aria-label="Cerrar"
+                  [attr.aria-label]="t().close"
                   (click)="close()"
                 >
                   <cb-icon name="x" size="sm" />
@@ -188,7 +191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         </div>
       </div>
     </ng-template>
-  `, styles: [".cb-dialog__mask{display:contents}.cb-dialog{display:flex;flex-direction:column;box-sizing:border-box;max-width:calc(100vw - 2 * var(--cb-space-4));max-height:calc(100vh - 2 * var(--cb-space-6));background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg);box-shadow:var(--cb-shadow-lg);font-family:var(--cb-font-sans);overflow:hidden;animation:cb-dialog-in var(--cb-duration-normal) var(--cb-ease-out)}.cb-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-4);padding:var(--cb-space-5) var(--cb-space-6);border-bottom:1px solid var(--cb-color-border)}.cb-dialog__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong)}.cb-dialog__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--cb-radius-md);border:none;background:transparent;color:var(--cb-color-text-muted);font-size:var(--cb-text-base);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-dialog__close:hover{background:var(--cb-color-surface-100);color:var(--cb-color-text)}.cb-dialog__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-dialog__body{padding:var(--cb-space-6);overflow-y:auto}.cb-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-6);border-top:1px solid var(--cb-color-border)}.cb-dialog__footer:empty{display:none}@keyframes cb-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.cb-dialog{animation:none}}\n"] }]
+  `, styles: [".cb-dialog__mask{display:contents}.cb-dialog{display:flex;flex-direction:column;box-sizing:border-box;max-width:calc(100vw - 2 * var(--cb-space-4));max-height:calc(100vh - 2 * var(--cb-space-6));background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg);box-shadow:var(--cb-shadow-lg);font-family:var(--cb-font-sans);overflow:hidden;animation:cb-dialog-in var(--cb-duration-normal) var(--cb-ease-out)}.cb-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-4);padding:var(--cb-space-5) var(--cb-space-6);border-bottom:1px solid var(--cb-color-border)}.cb-dialog__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong)}.cb-dialog__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--cb-radius-md);border:none;background:transparent;color:var(--cb-color-text-muted);font-size:var(--cb-text-base);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-dialog__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-dialog__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-dialog__body{padding:var(--cb-space-6);overflow-y:auto}.cb-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-6);border-top:1px solid var(--cb-color-border)}.cb-dialog__footer:empty{display:none}@keyframes cb-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.cb-dialog{animation:none}}\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 }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-dock.mjs

@@ -1,30 +1,73 @@
 import * as i0 from '@angular/core';
-import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, input, output, computed, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
-/** Compact application launcher with configurable orientation. */
+/**
+ * Compact application launcher with configurable orientation.
+ *
+ * Sigue el patrón WAI-ARIA *toolbar*: un solo elemento entra en el orden de
+ * tabulación y las flechas (según la orientación), Inicio y Fin recorren el resto.
+ */
 class CbDock {
     constructor() {
+        this.host = inject(ElementRef);
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         this.position = input('bottom', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Application dock', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.itemSelect = output();
+        this.vertical = computed(() => this.position() === 'left' || this.position() === 'right', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
+        /** Último elemento enfocado (el que recibe Tab al volver). */
+        this.active = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        /** Elemento con `tabindex="0"`: el activo si se puede enfocar, si no el primero habilitado. */
+        this.tabStop = computed(() => {
+            const items = this.items();
+            if (items[this.active()] && !items[this.active()].disabled)
+                return this.active();
+            return items.findIndex((item) => !item.disabled);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabStop" }] : /* istanbul ignore next */ []));
     }
     select(item) { if (!item.disabled)
         this.itemSelect.emit(item); }
+    onKeydown(event) {
+        const [prev, next] = this.vertical() ? ['ArrowUp', 'ArrowDown'] : ['ArrowLeft', 'ArrowRight'];
+        const enabled = this.items().flatMap((item, i) => (item.disabled ? [] : [i]));
+        if (!enabled.length)
+            return;
+        const at = enabled.indexOf(this.tabStop());
+        let target;
+        if (event.key === next)
+            target = enabled[(at + 1) % enabled.length];
+        else if (event.key === prev)
+            target = enabled[(at - 1 + enabled.length) % enabled.length];
+        else if (event.key === 'Home')
+            target = enabled[0];
+        else if (event.key === 'End')
+            target = enabled[enabled.length - 1];
+        else
+            return;
+        event.preventDefault();
+        this.active.set(target);
+        this.host.nativeElement.querySelectorAll('.cb-dock__item')[target]?.focus();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDock, isStandalone: true, selector: "cb-dock", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "class.cb-dock--top": "position() === \"top\"", "class.cb-dock--right": "position() === \"right\"", "class.cb-dock--bottom": "position() === \"bottom\"", "class.cb-dock--left": "position() === \"left\"" }, classAttribute: "cb-dock" }, ngImport: i0, template: `
-    <nav [attr.aria-label]="ariaLabel()">
-      <ul class="cb-dock__list" role="toolbar" [attr.aria-orientation]="position() === 'left' || position() === 'right' ? 'vertical' : 'horizontal'">
-        @for (item of items(); track $index) {
-          <li>
+    <nav [attr.aria-label]="(ariaLabel() ?? t().appDock)">
+      <ul class="cb-dock__list" role="toolbar" [attr.aria-orientation]="vertical() ? 'vertical' : 'horizontal'" (keydown)="onKeydown($event)">
+        @for (item of items(); track $index; let i = $index) {
+          <li role="none">
             @if (item.url && !item.disabled) {
-              <a class="cb-dock__item" [href]="item.url" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></a>
+              <a class="cb-dock__item" [href]="item.url" [attr.tabindex]="i === tabStop() ? 0 : -1" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)" (focus)="active.set(i)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></a>
             } @else {
-              <button class="cb-dock__item" type="button" [disabled]="item.disabled" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></button>
+              <button class="cb-dock__item" type="button" [disabled]="item.disabled" [attr.tabindex]="i === tabStop() ? 0 : -1" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)" (focus)="active.set(i)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></button>
             }
           </li>
         }
@@ -41,14 +84,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[class.cb-dock--bottom]': 'position() === "bottom"',
                         '[class.cb-dock--left]': 'position() === "left"',
                     }, template: `
-    <nav [attr.aria-label]="ariaLabel()">
-      <ul class="cb-dock__list" role="toolbar" [attr.aria-orientation]="position() === 'left' || position() === 'right' ? 'vertical' : 'horizontal'">
-        @for (item of items(); track $index) {
-          <li>
+    <nav [attr.aria-label]="(ariaLabel() ?? t().appDock)">
+      <ul class="cb-dock__list" role="toolbar" [attr.aria-orientation]="vertical() ? 'vertical' : 'horizontal'" (keydown)="onKeydown($event)">
+        @for (item of items(); track $index; let i = $index) {
+          <li role="none">
             @if (item.url && !item.disabled) {
-              <a class="cb-dock__item" [href]="item.url" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></a>
+              <a class="cb-dock__item" [href]="item.url" [attr.tabindex]="i === tabStop() ? 0 : -1" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)" (focus)="active.set(i)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></a>
             } @else {
-              <button class="cb-dock__item" type="button" [disabled]="item.disabled" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></button>
+              <button class="cb-dock__item" type="button" [disabled]="item.disabled" [attr.tabindex]="i === tabStop() ? 0 : -1" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)" (focus)="active.set(i)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></button>
             }
           </li>
         }

package/fesm2022/caribeng-ui-drawer.mjs

@@ -6,6 +6,7 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Drawer (panel lateral) de CaribeNG sobre CDK Overlay: se desliza desde un
@@ -21,6 +22,8 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbDrawer {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.overlay = inject(Overlay);
         this.vcr = inject(ViewContainerRef);
         this.document = inject(DOCUMENT);
@@ -33,8 +36,11 @@ class CbDrawer {
         this.closable = input(true, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: toBoolean });
         this.dismissableMask = input(true, { ...(ngDevMode ? { debugName: "dismissableMask" } : /* istanbul ignore next */ {}), transform: toBoolean });
         this.closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: toBoolean });
-        this.ariaLabel = input('Panel', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Ancho (izquierda/derecha) o alto (arriba/abajo) del panel, p. ej. `'32rem'`. */
+        this.size = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.onShow = output();
         this.onHide = output();
         this.titleId = `cb-drawer-${nextUid()}-title`;
@@ -96,15 +102,16 @@ class CbDrawer {
         this.onHide.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDrawer, isStandalone: true, selector: "cb-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onShow: "onShow", onHide: "onHide" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDrawer, isStandalone: true, selector: "cb-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onShow: "onShow", onHide: "onHide" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #tpl>
       <div
         class="cb-drawer"
         [class]="'cb-drawer--' + position()"
+        [style.--cb-drawer-size]="size() || null"
         role="dialog"
         aria-modal="true"
         [attr.aria-labelledby]="header() ? titleId : null"
-        [attr.aria-label]="header() ? null : ariaLabel()"
+        [attr.aria-label]="header() ? null : (ariaLabel() ?? t().panel)"
         cdkTrapFocus
         cdkTrapFocusAutoCapture
       >
@@ -114,7 +121,7 @@ class CbDrawer {
               <h2 class="cb-drawer__title" [id]="titleId">{{ header() }}</h2>
             }
             @if (closable()) {
-              <button type="button" class="cb-drawer__close" aria-label="Cerrar" (click)="close()">
+              <button type="button" class="cb-drawer__close" [attr.aria-label]="t().close" (click)="close()">
                 <cb-icon name="x" [size]="18" aria-hidden="true" />
               </button>
             }
@@ -124,7 +131,7 @@ class CbDrawer {
         <footer class="cb-drawer__footer"><ng-content select="[cb-drawer-footer]" /></footer>
       </div>
     </ng-template>
-  `, isInline: true, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(22rem,100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(18rem,100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-100);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\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 }); }
+  `, isInline: true, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(var(--cb-drawer-size, 22rem),100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(var(--cb-drawer-size, 18rem),100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\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: CbDrawer, decorators: [{
             type: Component,
@@ -133,10 +140,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <div
         class="cb-drawer"
         [class]="'cb-drawer--' + position()"
+        [style.--cb-drawer-size]="size() || null"
         role="dialog"
         aria-modal="true"
         [attr.aria-labelledby]="header() ? titleId : null"
-        [attr.aria-label]="header() ? null : ariaLabel()"
+        [attr.aria-label]="header() ? null : (ariaLabel() ?? t().panel)"
         cdkTrapFocus
         cdkTrapFocusAutoCapture
       >
@@ -146,7 +154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               <h2 class="cb-drawer__title" [id]="titleId">{{ header() }}</h2>
             }
             @if (closable()) {
-              <button type="button" class="cb-drawer__close" aria-label="Cerrar" (click)="close()">
+              <button type="button" class="cb-drawer__close" [attr.aria-label]="t().close" (click)="close()">
                 <cb-icon name="x" [size]="18" aria-hidden="true" />
               </button>
             }
@@ -156,8 +164,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <footer class="cb-drawer__footer"><ng-content select="[cb-drawer-footer]" /></footer>
       </div>
     </ng-template>
-  `, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(22rem,100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(18rem,100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-100);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\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 }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
+  `, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(var(--cb-drawer-size, 22rem),100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(var(--cb-drawer-size, 18rem),100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\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 }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
 let uid = 0;
 function nextUid() {
     return ++uid;