@caribeng/ui 22.1.1 → 22.2.0

package/fesm2022/caribeng-ui-orderlist.mjs

@@ -1,28 +1,247 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { model, input, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, ElementRef, Injector, model, input, output, contentChild, signal, computed, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
 
+/** Plantilla de cada elemento de un `<cb-orderlist>`. */
+class CbOrderListItemTemplate {
+    constructor() {
+        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: CbOrderListItemTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: CbOrderListItemTemplate, isStandalone: true, selector: "ng-template[cbOrderListItem]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbOrderListItemTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[cbOrderListItem]' }]
+        }] });
+let nextUid = 0;
+/**
+ * Lista reordenable de CaribeNG. Selecciona un elemento y muévelo con los
+ * botones o con Alt + ↑/↓.
+ *
+ * @example
+ * ```html
+ * <cb-orderlist [(value)]="pasos" header="Orden de aprobación">
+ *   <ng-template cbOrderListItem let-paso>{{ paso.nombre }}</ng-template>
+ * </cb-orderlist>
+ * ```
+ */
 class CbOrderList {
     constructor() {
+        this.t = injectCbTranslation();
+        this.host = inject(ElementRef);
+        this.injector = inject(Injector);
+        this.headerId = `cb-orderlist-${++nextUid}-header`;
+        /** Elementos, en orden (two-way). */
         this.value = model([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Lista ordenable', /* @ts-ignore */
+        /** Título visible de la lista (también la nombra para el lector de pantalla). */
+        this.header = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+        /** Nombre accesible cuando no hay `header`. Por defecto, el del idioma activo. */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        this.selected = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        /** Se emite tras mover un elemento. */
+        this.reorder = output();
+        this.itemTemplate = contentChild(CbOrderListItemTemplate, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        /** Índice seleccionado (se guarda por posición: admite elementos repetidos). */
+        this.selectedIndex = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+        this.focusedIndex = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+        this.tabbableIndex = computed(() => {
+            const focused = this.focusedIndex();
+            if (focused >= 0 && focused < this.value().length)
+                return focused;
+            return this.selectedIndex() >= 0 ? this.selectedIndex() : 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabbableIndex" }] : /* istanbul ignore next */ []));
+        this.listLabel = computed(() => this.ariaLabel() ?? this.t().sortableList, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listLabel" }] : /* istanbul ignore next */ []));
+        this.canMoveUp = computed(() => this.selectedIndex() > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canMoveUp" }] : /* istanbul ignore next */ []));
+        this.canMoveDown = computed(() => {
+            const i = this.selectedIndex();
+            return i >= 0 && i < this.value().length - 1;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canMoveDown" }] : /* istanbul ignore next */ []));
+    }
+    select(index) {
+        this.selectedIndex.set(index);
+        this.focusedIndex.set(index);
+    }
+    moveBy(delta) {
+        this.moveTo(this.selectedIndex() + delta);
+    }
+    moveTo(to) {
+        const from = this.selectedIndex();
+        const items = this.value();
+        if (from < 0 || to < 0 || to >= items.length || to === from)
+            return;
+        const next = [...items];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        this.value.set(next);
+        this.selectedIndex.set(to);
+        this.focusedIndex.set(to);
+        this.reorder.emit({ from, to, value: next });
+    }
+    onKeydown(event) {
+        const count = this.value().length;
+        if (!count)
+            return;
+        const current = this.tabbableIndex();
+        let target = -1;
+        if (event.altKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+            // Alt + flechas mueve el elemento seleccionado (o el enfocado).
+            if (this.selectedIndex() < 0)
+                this.selectedIndex.set(current);
+            this.moveBy(event.key === 'ArrowUp' ? -1 : 1);
+            target = this.selectedIndex();
+        }
+        else {
+            switch (event.key) {
+                case 'ArrowDown':
+                    target = Math.min(count - 1, current + 1);
+                    break;
+                case 'ArrowUp':
+                    target = Math.max(0, current - 1);
+                    break;
+                case 'Home':
+                    target = 0;
+                    break;
+                case 'End':
+                    target = count - 1;
+                    break;
+                case 'Enter':
+                case ' ':
+                    this.select(current);
+                    break;
+                default:
+                    return;
+            }
+        }
+        event.preventDefault();
+        if (target >= 0)
+            this.focusItem(target);
+    }
+    focusItem(index) {
+        this.focusedIndex.set(index);
+        // La lista puede haberse reordenado: se enfoca tras el siguiente render.
+        afterNextRender(() => this.host.nativeElement.querySelectorAll('[role="option"]')[index]?.focus(), {
+            injector: this.injector,
+        });
     }
-    index() { return this.value().indexOf(this.selected()); }
-    move(direction) { const from = this.index(), to = from + direction; if (from < 0 || to < 0 || to >= this.value().length)
-        return; const next = [...this.value()]; [next[from], next[to]] = [next[to], next[from]]; this.value.set(next); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbOrderList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbOrderList, isStandalone: true, selector: "cb-orderlist", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `<section class="cb-orderlist"><ul role="listbox" [attr.aria-label]="ariaLabel()">@for(item of value();track $index){<li role="option" [attr.aria-selected]="selected()===item" (click)="selected.set(item)" (keydown.enter)="selected.set(item)" tabindex="0">{{item}}</li>}</ul><div class="cb-orderlist__controls"><button type="button" (click)="move(-1)" [disabled]="index()<=0">Subir</button><button type="button" (click)="move(1)" [disabled]="index()<0||index()>=value().length-1">Bajar</button></div></section>`, isInline: true, styles: [":host{display:block}.cb-orderlist{display:flex;gap:.75rem}.cb-orderlist ul{list-style:none;padding:.25rem;margin:0;flex:1;border:1px solid var(--cb-color-border,#d1d5db);border-radius:.5rem}.cb-orderlist li{padding:.6rem;cursor:pointer;color:var(--cb-color-text,#111827)}.cb-orderlist li[aria-selected=true]{background:var(--cb-color-primary,#10b981);color:#fff}.cb-orderlist__controls{display:flex;flex-direction:column;gap:.4rem}.cb-orderlist button{padding:.4rem .65rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbOrderList, isStandalone: true, selector: "cb-orderlist", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", reorder: "reorder" }, host: { classAttribute: "cb-orderlist-host" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: CbOrderListItemTemplate, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="cb-orderlist">
+      <div class="cb-orderlist__controls" role="group" [attr.aria-label]="listLabel()">
+        <button type="button" class="cb-orderlist__btn" [attr.aria-label]="t().moveTop" [disabled]="!canMoveUp()" (click)="moveTo(0)">
+          <cb-icon name="chevrons-up" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-orderlist__btn" [attr.aria-label]="t().moveUp" [disabled]="!canMoveUp()" (click)="moveBy(-1)">
+          <cb-icon name="chevron-up" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-orderlist__btn" [attr.aria-label]="t().moveDown" [disabled]="!canMoveDown()" (click)="moveBy(1)">
+          <cb-icon name="chevron-down" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-orderlist__btn" [attr.aria-label]="t().moveBottom" [disabled]="!canMoveDown()" (click)="moveTo(value().length - 1)">
+          <cb-icon name="chevrons-down" [size]="16" aria-hidden="true" />
+        </button>
+      </div>
+
+      <div class="cb-orderlist__panel">
+        @if (header()) {
+          <div class="cb-orderlist__header" [id]="headerId">{{ header() }}</div>
+        }
+        <ul
+          class="cb-orderlist__list"
+          role="listbox"
+          [attr.aria-labelledby]="header() ? headerId : null"
+          [attr.aria-label]="header() ? null : listLabel()"
+          (keydown)="onKeydown($event)"
+        >
+          @for (item of value(); track $index; let i = $index) {
+            <li
+              class="cb-orderlist__item"
+              role="option"
+              [attr.aria-selected]="selectedIndex() === i"
+              [attr.tabindex]="i === tabbableIndex() ? 0 : -1"
+              (focus)="focusedIndex.set(i)"
+              (click)="select(i)"
+            >
+              @if (itemTemplate(); as tpl) {
+                <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: item, index: i }" />
+              } @else {
+                {{ item }}
+              }
+            </li>
+          }
+        </ul>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;color:var(--cb-color-text)}.cb-orderlist{display:flex;gap:var(--cb-space-3, .75rem)}.cb-orderlist__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--cb-space-2, .5rem)}.cb-orderlist__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);cursor:pointer}.cb-orderlist__btn:hover:not(:disabled){border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-600)}.cb-orderlist__btn:disabled{opacity:.45;cursor:not-allowed}.cb-orderlist__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500));outline-offset:2px}.cb-orderlist__panel{flex:1;min-width:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);overflow:hidden}.cb-orderlist__header{padding:.65rem .85rem;font-weight:var(--cb-font-weight-semibold, 600);border-bottom:1px solid var(--cb-color-border)}.cb-orderlist__list{max-height:16rem;margin:0;padding:var(--cb-space-1, .25rem);list-style:none;overflow-y:auto}.cb-orderlist__item{padding:.6rem .75rem;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;outline:none;font-size:var(--cb-text-sm, .875rem)}.cb-orderlist__item:hover{background:color-mix(in srgb,var(--cb-color-text) 6%,transparent)}.cb-orderlist__item[aria-selected=true]{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent);font-weight:var(--cb-font-weight-medium, 500)}.cb-orderlist__item:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}:host-context([data-theme=\"dark\"]) .cb-orderlist__item[aria-selected=true]{color:var(--cb-color-primary-300)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: CbOrderList, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-orderlist', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<section class="cb-orderlist"><ul role="listbox" [attr.aria-label]="ariaLabel()">@for(item of value();track $index){<li role="option" [attr.aria-selected]="selected()===item" (click)="selected.set(item)" (keydown.enter)="selected.set(item)" tabindex="0">{{item}}</li>}</ul><div class="cb-orderlist__controls"><button type="button" (click)="move(-1)" [disabled]="index()<=0">Subir</button><button type="button" (click)="move(1)" [disabled]="index()<0||index()>=value().length-1">Bajar</button></div></section>`, styles: [":host{display:block}.cb-orderlist{display:flex;gap:.75rem}.cb-orderlist ul{list-style:none;padding:.25rem;margin:0;flex:1;border:1px solid var(--cb-color-border,#d1d5db);border-radius:.5rem}.cb-orderlist li{padding:.6rem;cursor:pointer;color:var(--cb-color-text,#111827)}.cb-orderlist li[aria-selected=true]{background:var(--cb-color-primary,#10b981);color:#fff}.cb-orderlist__controls{display:flex;flex-direction:column;gap:.4rem}.cb-orderlist button{padding:.4rem .65rem}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+            args: [{ selector: 'cb-orderlist', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet, CbIcon], host: { class: 'cb-orderlist-host' }, template: `
+    <div class="cb-orderlist">
+      <div class="cb-orderlist__controls" role="group" [attr.aria-label]="listLabel()">
+        <button type="button" class="cb-orderlist__btn" [attr.aria-label]="t().moveTop" [disabled]="!canMoveUp()" (click)="moveTo(0)">
+          <cb-icon name="chevrons-up" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-orderlist__btn" [attr.aria-label]="t().moveUp" [disabled]="!canMoveUp()" (click)="moveBy(-1)">
+          <cb-icon name="chevron-up" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-orderlist__btn" [attr.aria-label]="t().moveDown" [disabled]="!canMoveDown()" (click)="moveBy(1)">
+          <cb-icon name="chevron-down" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-orderlist__btn" [attr.aria-label]="t().moveBottom" [disabled]="!canMoveDown()" (click)="moveTo(value().length - 1)">
+          <cb-icon name="chevrons-down" [size]="16" aria-hidden="true" />
+        </button>
+      </div>
+
+      <div class="cb-orderlist__panel">
+        @if (header()) {
+          <div class="cb-orderlist__header" [id]="headerId">{{ header() }}</div>
+        }
+        <ul
+          class="cb-orderlist__list"
+          role="listbox"
+          [attr.aria-labelledby]="header() ? headerId : null"
+          [attr.aria-label]="header() ? null : listLabel()"
+          (keydown)="onKeydown($event)"
+        >
+          @for (item of value(); track $index; let i = $index) {
+            <li
+              class="cb-orderlist__item"
+              role="option"
+              [attr.aria-selected]="selectedIndex() === i"
+              [attr.tabindex]="i === tabbableIndex() ? 0 : -1"
+              (focus)="focusedIndex.set(i)"
+              (click)="select(i)"
+            >
+              @if (itemTemplate(); as tpl) {
+                <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: item, index: i }" />
+              } @else {
+                {{ item }}
+              }
+            </li>
+          }
+        </ul>
+      </div>
+    </div>
+  `, styles: [":host{display:block;color:var(--cb-color-text)}.cb-orderlist{display:flex;gap:var(--cb-space-3, .75rem)}.cb-orderlist__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--cb-space-2, .5rem)}.cb-orderlist__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);cursor:pointer}.cb-orderlist__btn:hover:not(:disabled){border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-600)}.cb-orderlist__btn:disabled{opacity:.45;cursor:not-allowed}.cb-orderlist__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500));outline-offset:2px}.cb-orderlist__panel{flex:1;min-width:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);overflow:hidden}.cb-orderlist__header{padding:.65rem .85rem;font-weight:var(--cb-font-weight-semibold, 600);border-bottom:1px solid var(--cb-color-border)}.cb-orderlist__list{max-height:16rem;margin:0;padding:var(--cb-space-1, .25rem);list-style:none;overflow-y:auto}.cb-orderlist__item{padding:.6rem .75rem;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;outline:none;font-size:var(--cb-text-sm, .875rem)}.cb-orderlist__item:hover{background:color-mix(in srgb,var(--cb-color-text) 6%,transparent)}.cb-orderlist__item[aria-selected=true]{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent);font-weight:var(--cb-font-weight-medium, 500)}.cb-orderlist__item:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}:host-context([data-theme=\"dark\"]) .cb-orderlist__item[aria-selected=true]{color:var(--cb-color-primary-300)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], reorder: [{ type: i0.Output, args: ["reorder"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbOrderListItemTemplate), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CbOrderList };
+export { CbOrderList, CbOrderListItemTemplate };

package/fesm2022/caribeng-ui-organizationchart.mjs

@@ -2,14 +2,19 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, model, signal, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 class CbOrganizationChart {
     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 = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.selection = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Organigrama', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.expanded = signal(new Set(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
@@ -24,7 +29,7 @@ class CbOrganizationChart {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbOrganizationChart, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbOrganizationChart, isStandalone: true, selector: "cb-organization-chart", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange" }, ngImport: i0, template: `
-    <div class="cb-organization-chart" role="tree" [attr.aria-label]="ariaLabel()">
+    <div class="cb-organization-chart" role="tree" [attr.aria-label]="(ariaLabel() ?? t().orgChart)">
       <ng-container
         [ngTemplateOutlet]="nodesTemplate"
         [ngTemplateOutletContext]="{ $implicit: value() }"
@@ -46,7 +51,7 @@ class CbOrganizationChart {
                 class="cb-organization-chart__select"
                 type="button"
                 (click)="selection.set(node)"
-                [attr.aria-label]="'Seleccionar ' + node.label"
+                [attr.aria-label]="fmt(t().selectItem, node.label)"
               >
                 @if (node.icon) {
                   <cb-icon class="cb-organization-chart__icon" [name]="node.icon" [size]="18" aria-hidden="true" />
@@ -60,7 +65,7 @@ class CbOrganizationChart {
                   class="cb-organization-chart__toggle"
                   type="button"
                   (click)="toggle(node.key)"
-                  [attr.aria-label]="(expanded().has(node.key) ? 'Contraer ' : 'Expandir ') + node.label"
+                  [attr.aria-label]="fmt(expanded().has(node.key) ? t().collapseItem : t().expandItem, node.label)"
                   [attr.aria-expanded]="expanded().has(node.key)"
                 >{{ expanded().has(node.key) ? '−' : '+' }}</button>
               }
@@ -80,7 +85,7 @@ class CbOrganizationChart {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbOrganizationChart, decorators: [{
             type: Component,
             args: [{ selector: 'cb-organization-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, CbIcon], template: `
-    <div class="cb-organization-chart" role="tree" [attr.aria-label]="ariaLabel()">
+    <div class="cb-organization-chart" role="tree" [attr.aria-label]="(ariaLabel() ?? t().orgChart)">
       <ng-container
         [ngTemplateOutlet]="nodesTemplate"
         [ngTemplateOutletContext]="{ $implicit: value() }"
@@ -102,7 +107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 class="cb-organization-chart__select"
                 type="button"
                 (click)="selection.set(node)"
-                [attr.aria-label]="'Seleccionar ' + node.label"
+                [attr.aria-label]="fmt(t().selectItem, node.label)"
               >
                 @if (node.icon) {
                   <cb-icon class="cb-organization-chart__icon" [name]="node.icon" [size]="18" aria-hidden="true" />
@@ -116,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                   class="cb-organization-chart__toggle"
                   type="button"
                   (click)="toggle(node.key)"
-                  [attr.aria-label]="(expanded().has(node.key) ? 'Contraer ' : 'Expandir ') + node.label"
+                  [attr.aria-label]="fmt(expanded().has(node.key) ? t().collapseItem : t().expandItem, node.label)"
                   [attr.aria-expanded]="expanded().has(node.key)"
                 >{{ expanded().has(node.key) ? '−' : '+' }}</button>
               }

package/fesm2022/caribeng-ui-paginator.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, model, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Paginator de CaribeNG: control de paginación reutilizable (standalone o junto
@@ -14,6 +15,8 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbPaginator {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.totalRecords = input(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
         this.rows = model(10, /* @ts-ignore */
@@ -43,7 +46,7 @@ class CbPaginator {
         this.report = computed(() => {
             const total = this.totalRecords();
             if (total === 0)
-                return '0 registros';
+                return this.t().noRecords;
             const from = this.first() + 1;
             const to = Math.min(this.first() + this.rows(), total);
             return `${from}–${to} de ${total}`;
@@ -73,7 +76,7 @@ class CbPaginator {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPaginator, isStandalone: true, selector: "cb-paginator", inputs: { totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, showReport: { classPropertyName: "showReport", publicName: "showReport", isSignal: true, isRequired: false, transformFunction: null }, maxPageLinks: { classPropertyName: "maxPageLinks", publicName: "maxPageLinks", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", first: "firstChange", pageChange: "pageChange" }, host: { attributes: { "role": "navigation", "aria-label": "Paginaci\u00F3n" }, classAttribute: "cb-paginator" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPaginator, isStandalone: true, selector: "cb-paginator", inputs: { totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, showReport: { classPropertyName: "showReport", publicName: "showReport", isSignal: true, isRequired: false, transformFunction: null }, maxPageLinks: { classPropertyName: "maxPageLinks", publicName: "maxPageLinks", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", first: "firstChange", pageChange: "pageChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "t().pagination" }, classAttribute: "cb-paginator" }, ngImport: i0, template: `
     @if (showReport()) {
       <span class="cb-paginator__report">{{ report() }}</span>
     }
@@ -81,7 +84,7 @@ class CbPaginator {
     <button
       type="button"
       class="cb-paginator__btn"
-      aria-label="Primera página"
+      [attr.aria-label]="t().firstPage"
       [disabled]="page() === 0"
       (click)="goToPage(0)"
     >
@@ -90,7 +93,7 @@ class CbPaginator {
     <button
       type="button"
       class="cb-paginator__btn"
-      aria-label="Página anterior"
+      [attr.aria-label]="t().previousPage"
       [disabled]="page() === 0"
       (click)="goToPage(page() - 1)"
     >
@@ -112,7 +115,7 @@ class CbPaginator {
     <button
       type="button"
       class="cb-paginator__btn"
-      aria-label="Página siguiente"
+      [attr.aria-label]="t().nextPage"
       [disabled]="page() >= pageCount() - 1"
       (click)="goToPage(page() + 1)"
     >
@@ -121,7 +124,7 @@ class CbPaginator {
     <button
       type="button"
       class="cb-paginator__btn"
-      aria-label="Última página"
+      [attr.aria-label]="t().lastPage"
       [disabled]="page() >= pageCount() - 1"
       (click)="goToPage(pageCount() - 1)"
     >
@@ -131,7 +134,7 @@ class CbPaginator {
     @if (rowsPerPageOptions().length) {
       <select
         class="cb-paginator__rows"
-        aria-label="Registros por página"
+        [attr.aria-label]="t().rowsPerPage"
         [value]="rows()"
         (change)="onRowsChange($event)"
       >
@@ -140,11 +143,11 @@ class CbPaginator {
         }
       </select>
     }
-  `, isInline: true, styles: [":host{display:flex;align-items:center;flex-wrap:wrap;gap:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);color:var(--cb-color-text)}.cb-paginator__report{margin-right:auto;color:var(--cb-color-text-muted)}.cb-paginator__btn,.cb-paginator__page{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 var(--cb-space-2);border:none;background:transparent;color:var(--cb-color-text);border-radius:var(--cb-radius-md);font:inherit;cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-paginator__btn:hover:not(:disabled),.cb-paginator__page:hover:not(.cb-is-active){background-color:var(--cb-color-surface-100)}.cb-paginator__btn:focus-visible,.cb-paginator__page:focus-visible,.cb-paginator__rows:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-paginator__btn:disabled{color:var(--cb-color-text-muted);opacity:.5;cursor:default}.cb-paginator__page.cb-is-active{background-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast);font-weight:var(--cb-font-weight-medium)}.cb-paginator__rows{height:2rem;margin-left:var(--cb-space-2);padding:0 var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;cursor:pointer}:host-context([data-theme=\"dark\"]) .cb-paginator__btn:hover:not(:disabled),:host-context([data-theme=\"dark\"]) .cb-paginator__page:hover:not(.cb-is-active){background-color:var(--cb-color-surface-200)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:flex;align-items:center;flex-wrap:wrap;gap:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);color:var(--cb-color-text)}.cb-paginator__report{margin-right:auto;color:var(--cb-color-text-muted)}.cb-paginator__btn,.cb-paginator__page{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 var(--cb-space-2);border:none;background:transparent;color:var(--cb-color-text);border-radius:var(--cb-radius-md);font:inherit;cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-paginator__btn:hover:not(:disabled),.cb-paginator__page:hover:not(.cb-is-active){background-color:var(--cb-color-surface-hover)}.cb-paginator__btn:focus-visible,.cb-paginator__page:focus-visible,.cb-paginator__rows:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-paginator__btn:disabled{color:var(--cb-color-text-muted);opacity:.5;cursor:default}.cb-paginator__page.cb-is-active{background-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast);font-weight:var(--cb-font-weight-medium)}.cb-paginator__rows{height:2rem;margin-left:var(--cb-space-2);padding:0 var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;cursor:pointer}\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: CbPaginator, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-paginator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-paginator', role: 'navigation', 'aria-label': 'Paginación' }, template: `
+            args: [{ selector: 'cb-paginator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-paginator', role: 'navigation', '[attr.aria-label]': 't().pagination' }, template: `
     @if (showReport()) {
       <span class="cb-paginator__report">{{ report() }}</span>
     }
@@ -152,7 +155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <button
       type="button"
       class="cb-paginator__btn"
-      aria-label="Primera página"
+      [attr.aria-label]="t().firstPage"
       [disabled]="page() === 0"
       (click)="goToPage(0)"
     >
@@ -161,7 +164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <button
       type="button"
       class="cb-paginator__btn"
-      aria-label="Página anterior"
+      [attr.aria-label]="t().previousPage"
       [disabled]="page() === 0"
       (click)="goToPage(page() - 1)"
     >
@@ -183,7 +186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <button
       type="button"
       class="cb-paginator__btn"
-      aria-label="Página siguiente"
+      [attr.aria-label]="t().nextPage"
       [disabled]="page() >= pageCount() - 1"
       (click)="goToPage(page() + 1)"
     >
@@ -192,7 +195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <button
       type="button"
       class="cb-paginator__btn"
-      aria-label="Última página"
+      [attr.aria-label]="t().lastPage"
       [disabled]="page() >= pageCount() - 1"
       (click)="goToPage(pageCount() - 1)"
     >
@@ -202,7 +205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     @if (rowsPerPageOptions().length) {
       <select
         class="cb-paginator__rows"
-        aria-label="Registros por página"
+        [attr.aria-label]="t().rowsPerPage"
         [value]="rows()"
         (change)="onRowsChange($event)"
       >
@@ -211,7 +214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       </select>
     }
-  `, styles: [":host{display:flex;align-items:center;flex-wrap:wrap;gap:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);color:var(--cb-color-text)}.cb-paginator__report{margin-right:auto;color:var(--cb-color-text-muted)}.cb-paginator__btn,.cb-paginator__page{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 var(--cb-space-2);border:none;background:transparent;color:var(--cb-color-text);border-radius:var(--cb-radius-md);font:inherit;cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-paginator__btn:hover:not(:disabled),.cb-paginator__page:hover:not(.cb-is-active){background-color:var(--cb-color-surface-100)}.cb-paginator__btn:focus-visible,.cb-paginator__page:focus-visible,.cb-paginator__rows:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-paginator__btn:disabled{color:var(--cb-color-text-muted);opacity:.5;cursor:default}.cb-paginator__page.cb-is-active{background-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast);font-weight:var(--cb-font-weight-medium)}.cb-paginator__rows{height:2rem;margin-left:var(--cb-space-2);padding:0 var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;cursor:pointer}:host-context([data-theme=\"dark\"]) .cb-paginator__btn:hover:not(:disabled),:host-context([data-theme=\"dark\"]) .cb-paginator__page:hover:not(.cb-is-active){background-color:var(--cb-color-surface-200)}\n"] }]
+  `, styles: [":host{display:flex;align-items:center;flex-wrap:wrap;gap:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);color:var(--cb-color-text)}.cb-paginator__report{margin-right:auto;color:var(--cb-color-text-muted)}.cb-paginator__btn,.cb-paginator__page{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 var(--cb-space-2);border:none;background:transparent;color:var(--cb-color-text);border-radius:var(--cb-radius-md);font:inherit;cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-paginator__btn:hover:not(:disabled),.cb-paginator__page:hover:not(.cb-is-active){background-color:var(--cb-color-surface-hover)}.cb-paginator__btn:focus-visible,.cb-paginator__page:focus-visible,.cb-paginator__rows:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-paginator__btn:disabled{color:var(--cb-color-text-muted);opacity:.5;cursor:default}.cb-paginator__page.cb-is-active{background-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast);font-weight:var(--cb-font-weight-medium)}.cb-paginator__rows{height:2rem;margin-left:var(--cb-space-2);padding:0 var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;cursor:pointer}\n"] }]
         }], propDecorators: { totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }, { type: i0.Output, args: ["firstChange"] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], showReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showReport", required: false }] }], maxPageLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPageLinks", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-panel.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 let nextPanelUid = 0;
 /**
@@ -16,6 +17,8 @@ let nextPanelUid = 0;
  */
 class CbPanel {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.uid = ++nextPanelUid;
         /** Título mostrado en la cabecera del panel. */
         this.header = input('', /* @ts-ignore */
@@ -49,7 +52,7 @@ class CbPanel {
             class="cb-panel__toggler"
             [attr.aria-expanded]="!collapsed()"
             [attr.aria-controls]="contentId"
-            [attr.aria-label]="header() || 'Alternar panel'"
+            [attr.aria-label]="header() || t().togglePanel"
             (click)="toggle()"
           >
             <cb-icon
@@ -93,7 +96,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             class="cb-panel__toggler"
             [attr.aria-expanded]="!collapsed()"
             [attr.aria-controls]="contentId"
-            [attr.aria-label]="header() || 'Alternar panel'"
+            [attr.aria-label]="header() || t().togglePanel"
             (click)="toggle()"
           >
             <cb-icon

package/fesm2022/caribeng-ui-panelmenu.mjs

@@ -1,15 +1,18 @@
 import * as i0 from '@angular/core';
 import { input, output, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 let nextPanelMenuId = 0;
 /** Vertical menu with collapsible sections. */
 class CbPanelMenu {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.uid = ++nextPanelMenuId;
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Panel menu', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.multiple = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
@@ -32,7 +35,7 @@ class CbPanelMenu {
         this.itemSelect.emit(item); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPanelMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPanelMenu, isStandalone: true, selector: "cb-panelmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { classAttribute: "cb-panelmenu" }, ngImport: i0, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+    <nav [attr.aria-label]="(ariaLabel() ?? t().panelMenu)">
       <ul class="cb-panelmenu__list">
         @for (item of items(); track $index; let i = $index) {
           <li class="cb-panelmenu__entry">
@@ -77,7 +80,7 @@ class CbPanelMenu {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPanelMenu, decorators: [{
             type: Component,
             args: [{ selector: 'cb-panelmenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-panelmenu' }, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+    <nav [attr.aria-label]="(ariaLabel() ?? t().panelMenu)">
       <ul class="cb-panelmenu__list">
         @for (item of items(); track $index; let i = $index) {
           <li class="cb-panelmenu__entry">

package/fesm2022/caribeng-ui-password.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, model, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
 
 /**
  * Password de CaribeNG: campo de contraseña con alternancia de visibilidad,
@@ -9,6 +9,8 @@ import { cbFieldState } from '@caribeng/ui';
  */
 class CbPassword {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.placeholder = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, /* @ts-ignore */
@@ -63,11 +65,11 @@ class CbPassword {
         this.strengthLabel = computed(() => {
             switch (this.strength()) {
                 case 'weak':
-                    return 'Fortaleza: Débil';
+                    return this.t().passwordWeak;
                 case 'medium':
-                    return 'Fortaleza: Media';
+                    return this.t().passwordMedium;
                 case 'strong':
-                    return 'Fortaleza: Fuerte';
+                    return this.t().passwordStrong;
                 default:
                     return '';
             }
@@ -128,7 +130,7 @@ class CbPassword {
           type="button"
           class="cb-password__toggle"
           [disabled]="isDisabled()"
-          [attr.aria-label]="revealed() ? 'Ocultar contraseña' : 'Mostrar contraseña'"
+          [attr.aria-label]="revealed() ? t().hidePassword : t().showPassword"
           [attr.aria-pressed]="revealed()"
           (click)="toggleReveal()"
         >
@@ -207,7 +209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           type="button"
           class="cb-password__toggle"
           [disabled]="isDisabled()"
-          [attr.aria-label]="revealed() ? 'Ocultar contraseña' : 'Mostrar contraseña'"
+          [attr.aria-label]="revealed() ? t().hidePassword : t().showPassword"
           [attr.aria-pressed]="revealed()"
           (click)="toggleReveal()"
         >