@caribeng/ui 22.1.1 → 22.2.0

package/fesm2022/caribeng-ui-keyfilter.mjs

@@ -0,0 +1,72 @@
+import * as i0 from '@angular/core';
+import { input, Directive } from '@angular/core';
+
+/** Caracteres permitidos por cada filtro predefinido (se comprueba carácter a carácter). */
+const PRESETS = {
+    int: /[\d-]/,
+    pint: /\d/,
+    num: /[\d\-.,]/,
+    pnum: /[\d.,]/,
+    money: /[\d.,]/,
+    alpha: /[a-záéíóúüñ\s]/i,
+    alphanum: /[a-z0-9áéíóúüñ\s]/i,
+    hex: /[0-9a-f]/i,
+    email: /[a-z0-9@._+-]/i,
+};
+/**
+ * KeyFilter de CaribeNG: limita los caracteres que se pueden escribir en un
+ * `input` o `textarea`. Usa el evento `beforeinput`, así filtra lo tecleado,
+ * lo pegado y lo autocompletado (no solo las teclas).
+ *
+ * Solo restringe la entrada: valida el formato final con Validators en el formulario.
+ *
+ * @example
+ * ```html
+ * <input cbKeyFilter="pint" inputmode="numeric" aria-label="Número de cédula" />
+ * <input [cbKeyFilter]="/[A-Z0-9]/" aria-label="Placa" />
+ * ```
+ */
+class CbKeyFilter {
+    constructor() {
+        /** Filtro predefinido o expresión que debe cumplir cada carácter. */
+        this.cbKeyFilter = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cbKeyFilter" }] : /* istanbul ignore next */ []));
+    }
+    /** ¿Se acepta este texto? (cada carácter debe cumplir el filtro). */
+    allows(text) {
+        const filter = this.cbKeyFilter();
+        const pattern = filter instanceof RegExp ? new RegExp(filter.source, filter.flags.replace('g', '')) : PRESETS[filter];
+        if (!pattern)
+            return true;
+        return [...text].every((ch) => pattern.test(ch));
+    }
+    onBeforeInput(e) {
+        const event = e;
+        // Borrar, deshacer o mover texto siempre se permite; solo se filtra lo que se inserta.
+        if (!event.inputType?.startsWith('insert'))
+            return;
+        const text = event.data ?? event.dataTransfer?.getData('text/plain') ?? '';
+        if (text && !this.allows(text))
+            event.preventDefault();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbKeyFilter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbKeyFilter, isStandalone: true, selector: "input[cbKeyFilter], textarea[cbKeyFilter]", inputs: { cbKeyFilter: { classPropertyName: "cbKeyFilter", publicName: "cbKeyFilter", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "beforeinput": "onBeforeInput($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbKeyFilter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[cbKeyFilter], textarea[cbKeyFilter]',
+                    standalone: true,
+                    host: { '(beforeinput)': 'onBeforeInput($event)' },
+                }]
+        }], propDecorators: { cbKeyFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "cbKeyFilter", required: true }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/keyfilter
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbKeyFilter };

package/fesm2022/caribeng-ui-listbox.mjs

@@ -2,7 +2,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 { CbIcon } from '@caribeng/ui/icon';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
 
 let nextUid = 0;
 /**
@@ -18,6 +18,8 @@ let nextUid = 0;
  */
 class CbListBox {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.options = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         this.optionLabel = input('label', /* @ts-ignore */
@@ -28,9 +30,9 @@ class CbListBox {
         ...(ngDevMode ? [{ debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
         this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: toBoolean });
         this.filter = input(false, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: toBoolean });
-        this.filterPlaceholder = input('Buscar…', /* @ts-ignore */
+        this.filterPlaceholder = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
-        this.emptyMessage = input('Sin resultados', /* @ts-ignore */
+        this.emptyMessage = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: toBoolean });
         /** Marca visual y ARIA de estado inválido (también se activa con Angular Forms). */
@@ -187,11 +189,11 @@ class CbListBox {
           <input
             type="text"
             class="cb-listbox__filter-input"
-            [placeholder]="filterPlaceholder()"
+            [placeholder]="(filterPlaceholder() ?? t().search)"
             [value]="filterText()"
             [disabled]="isDisabled()"
             (input)="onFilter($event)"
-            aria-label="Filtrar opciones"
+            [attr.aria-label]="t().filterOptions"
           />
         </div>
       }
@@ -230,12 +232,12 @@ class CbListBox {
           </li>
         } @empty {
           <li class="cb-listbox__empty" role="option" aria-disabled="true">
-            {{ emptyMessage() }}
+            {{ (emptyMessage() ?? t().noResults) }}
           </li>
         }
       </ul>
     </div>
-  `, isInline: true, styles: [":host{display:block}.cb-listbox{border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);font-family:var(--cb-font-sans);overflow:hidden}.cb-listbox.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55)}.cb-listbox__filter{padding:var(--cb-space-2);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-listbox__filter-input{width:100%;padding:var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;outline:none}.cb-listbox__filter-input:focus{border-color:var(--cb-color-primary-500)}.cb-listbox__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:15rem;overflow-y:auto;outline:none}.cb-listbox__list:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring);border-radius:var(--cb-radius-sm)}.cb-listbox__option{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);color:var(--cb-color-text);cursor:pointer}.cb-listbox__option.cb-is-active{background-color:var(--cb-color-surface-100)}.cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:var(--cb-color-primary-50)}.cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-700);font-weight:var(--cb-font-weight-medium)}.cb-listbox__option.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-listbox__check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast)}.cb-listbox__check.cb-is-checked{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-listbox__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);text-align:center}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-200)}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:color-mix(in srgb,var(--cb-color-primary-500) 18%,transparent)}.cb-listbox.cb-is-invalid{border-color:var(--cb-color-danger)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.cb-listbox{border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);font-family:var(--cb-font-sans);overflow:hidden}.cb-listbox.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55)}.cb-listbox__filter{padding:var(--cb-space-2);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-listbox__filter-input{width:100%;padding:var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;outline:none}.cb-listbox__filter-input:focus{border-color:var(--cb-color-primary-500)}.cb-listbox__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:15rem;overflow-y:auto;outline:none}.cb-listbox__list:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring);border-radius:var(--cb-radius-sm)}.cb-listbox__option{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);color:var(--cb-color-text);cursor:pointer}.cb-listbox__option.cb-is-active{background-color:var(--cb-color-surface-hover)}.cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:var(--cb-color-primary-50)}.cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-700);font-weight:var(--cb-font-weight-medium)}.cb-listbox__option.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-listbox__check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast)}.cb-listbox__check.cb-is-checked{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-listbox__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);text-align:center}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-200)}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:color-mix(in srgb,var(--cb-color-primary-500) 18%,transparent)}.cb-listbox.cb-is-invalid{border-color:var(--cb-color-danger)}\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: CbListBox, decorators: [{
             type: Component,
@@ -252,11 +254,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <input
             type="text"
             class="cb-listbox__filter-input"
-            [placeholder]="filterPlaceholder()"
+            [placeholder]="(filterPlaceholder() ?? t().search)"
             [value]="filterText()"
             [disabled]="isDisabled()"
             (input)="onFilter($event)"
-            aria-label="Filtrar opciones"
+            [attr.aria-label]="t().filterOptions"
           />
         </div>
       }
@@ -295,12 +297,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           </li>
         } @empty {
           <li class="cb-listbox__empty" role="option" aria-disabled="true">
-            {{ emptyMessage() }}
+            {{ (emptyMessage() ?? t().noResults) }}
           </li>
         }
       </ul>
     </div>
-  `, styles: [":host{display:block}.cb-listbox{border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);font-family:var(--cb-font-sans);overflow:hidden}.cb-listbox.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55)}.cb-listbox__filter{padding:var(--cb-space-2);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-listbox__filter-input{width:100%;padding:var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;outline:none}.cb-listbox__filter-input:focus{border-color:var(--cb-color-primary-500)}.cb-listbox__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:15rem;overflow-y:auto;outline:none}.cb-listbox__list:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring);border-radius:var(--cb-radius-sm)}.cb-listbox__option{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);color:var(--cb-color-text);cursor:pointer}.cb-listbox__option.cb-is-active{background-color:var(--cb-color-surface-100)}.cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:var(--cb-color-primary-50)}.cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-700);font-weight:var(--cb-font-weight-medium)}.cb-listbox__option.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-listbox__check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast)}.cb-listbox__check.cb-is-checked{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-listbox__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);text-align:center}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-200)}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:color-mix(in srgb,var(--cb-color-primary-500) 18%,transparent)}.cb-listbox.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
+  `, styles: [":host{display:block}.cb-listbox{border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);font-family:var(--cb-font-sans);overflow:hidden}.cb-listbox.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55)}.cb-listbox__filter{padding:var(--cb-space-2);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-listbox__filter-input{width:100%;padding:var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;outline:none}.cb-listbox__filter-input:focus{border-color:var(--cb-color-primary-500)}.cb-listbox__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:15rem;overflow-y:auto;outline:none}.cb-listbox__list:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring);border-radius:var(--cb-radius-sm)}.cb-listbox__option{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);color:var(--cb-color-text);cursor:pointer}.cb-listbox__option.cb-is-active{background-color:var(--cb-color-surface-hover)}.cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:var(--cb-color-primary-50)}.cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-700);font-weight:var(--cb-font-weight-medium)}.cb-listbox__option.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-listbox__check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast)}.cb-listbox__check.cb-is-checked{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-listbox__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);text-align:center}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-200)}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:color-mix(in srgb,var(--cb-color-primary-500) 18%,transparent)}.cb-listbox.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-megamenu.mjs

@@ -1,43 +1,185 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, output, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, Injector, input, output, signal, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 import { CbIcon } from '@caribeng/ui/icon';
 
-/** Horizontal category menu with multi-column panels. */
+let nextUid = 0;
+/**
+ * Menú de categorías con paneles de varias columnas (patrón *disclosure
+ * navigation* de WAI-ARIA). Teclado: ←/→ entre categorías, ↓ abre el panel y
+ * entra al primer enlace, ↑/↓ recorre los enlaces y Escape cierra devolviendo
+ * el foco a la categoría.
+ *
+ * @example
+ * ```html
+ * <cb-megamenu [items]="categorias" (itemSelect)="navegar($event)" />
+ * ```
+ */
 class CbMegaMenu {
     constructor() {
-        this.host = inject((ElementRef));
+        this.t = injectCbTranslation();
+        this.host = inject(ElementRef);
+        this.injector = inject(Injector);
+        this.panelId = `cb-megamenu-${++nextUid}-panel`;
+        /** Categorías con sus grupos de enlaces. */
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Categories', /* @ts-ignore */
+        /** Nombre accesible de la navegación. Por defecto, "Categorías" del idioma activo. */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Se emite al elegir un enlace. */
         this.itemSelect = output();
         this.openIndex = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "openIndex" }] : /* istanbul ignore next */ []));
     }
-    toggle(index) { this.openIndex.update((current) => current === index ? null : index); }
-    select(link) { if (!link.disabled) {
+    toggle(index) {
+        this.openIndex.update((current) => (current === index ? null : index));
+    }
+    select(link) {
+        if (link.disabled)
+            return;
         this.itemSelect.emit(link);
         this.close();
-    } }
-    close() { this.openIndex.set(null); }
-    onDocumentClick(event) { if (!this.host.nativeElement.contains(event.target))
-        this.close(); }
+    }
+    close() {
+        this.openIndex.set(null);
+    }
+    onDocumentClick(event) {
+        if (!this.host.nativeElement.contains(event.target))
+            this.close();
+    }
+    /** Al salir el foco del componente (p. ej. con Tab), se cierra el panel. */
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next && !this.host.nativeElement.contains(next))
+            this.close();
+    }
+    onTriggerKeydown(event, index) {
+        const count = this.items().length;
+        switch (event.key) {
+            case 'ArrowRight':
+                this.focusTrigger((index + 1) % count);
+                break;
+            case 'ArrowLeft':
+                this.focusTrigger((index - 1 + count) % count);
+                break;
+            case 'Home':
+                this.focusTrigger(0);
+                break;
+            case 'End':
+                this.focusTrigger(count - 1);
+                break;
+            case 'ArrowDown':
+                this.openIndex.set(index);
+                afterNextRender(() => this.links()[0]?.focus(), { injector: this.injector });
+                break;
+            case 'Escape':
+                this.close();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    onPanelKeydown(event) {
+        const links = this.links();
+        const current = links.indexOf(document.activeElement);
+        switch (event.key) {
+            case 'ArrowDown':
+                links[Math.min(links.length - 1, current + 1)]?.focus();
+                break;
+            case 'ArrowUp':
+                if (current <= 0)
+                    this.focusTrigger(this.openIndex());
+                else
+                    links[current - 1].focus();
+                break;
+            case 'Home':
+                links[0]?.focus();
+                break;
+            case 'End':
+                links[links.length - 1]?.focus();
+                break;
+            case 'Escape': {
+                const index = this.openIndex();
+                this.close();
+                this.focusTrigger(index);
+                break;
+            }
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    /** Enlaces navegables del panel abierto, en orden de lectura. */
+    links() {
+        return Array.from(this.host.nativeElement.querySelectorAll('.cb-megamenu__panel .cb-megamenu__link:not([disabled])'));
+    }
+    focusTrigger(index) {
+        this.host.nativeElement.querySelectorAll('.cb-megamenu__trigger')[index]?.focus();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMegaMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMegaMenu, isStandalone: true, selector: "cb-megamenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "close()" }, classAttribute: "cb-megamenu" }, ngImport: i0, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMegaMenu, isStandalone: true, selector: "cb-megamenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:click": "onDocumentClick($event)", "focusout": "onFocusOut($event)" }, classAttribute: "cb-megamenu" }, ngImport: i0, template: `
+    <nav [attr.aria-label]="ariaLabel() ?? t().categories">
       <ul class="cb-megamenu__bar">
         @for (item of items(); track $index; let i = $index) {
-          <li><button class="cb-megamenu__trigger" type="button" [attr.aria-expanded]="openIndex() === i" aria-haspopup="true" (click)="toggle(i)">@if (item.icon) { <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" /> }{{ item.label }}<cb-icon class="cb-megamenu__chevron" [class.cb-megamenu__chevron--open]="openIndex() === i" name="chevron-down" [size]="14" aria-hidden="true" /></button></li>
+          <li>
+            <button
+              class="cb-megamenu__trigger"
+              type="button"
+              [attr.aria-expanded]="openIndex() === i"
+              [attr.aria-controls]="openIndex() === i ? panelId : null"
+              (click)="toggle(i)"
+              (keydown)="onTriggerKeydown($event, i)"
+            >
+              @if (item.icon) {
+                <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" />
+              }
+              {{ item.label }}
+              <cb-icon
+                class="cb-megamenu__chevron"
+                [class.cb-megamenu__chevron--open]="openIndex() === i"
+                name="chevron-down"
+                [size]="14"
+                aria-hidden="true"
+              />
+            </button>
+          </li>
         }
       </ul>
       @if (openIndex() !== null) {
-        <section class="cb-megamenu__panel" role="region" [attr.aria-label]="items()[openIndex()!].label">
-          @for (group of items()[openIndex()!] .groups; track $index) {
-            <div class="cb-megamenu__group"><h3>{{ group.label }}</h3><ul>
-              @for (link of group.items; track $index) {
-                <li>@if (link.url && !link.disabled) { <a class="cb-megamenu__link" [href]="link.url" (click)="select(link)">@if (link.icon) { <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" /> }{{ link.label }}</a> } @else { <button class="cb-megamenu__link" type="button" [disabled]="link.disabled" (click)="select(link)">@if (link.icon) { <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" /> }{{ link.label }}</button> }</li>
-              }
-            </ul></div>
+        <section
+          class="cb-megamenu__panel"
+          [id]="panelId"
+          role="region"
+          [attr.aria-label]="items()[openIndex()!].label"
+          (keydown)="onPanelKeydown($event)"
+        >
+          @for (group of items()[openIndex()!].groups; track $index) {
+            <div class="cb-megamenu__group">
+              <h3>{{ group.label }}</h3>
+              <ul>
+                @for (link of group.items; track $index) {
+                  <li>
+                    @if (link.url && !link.disabled) {
+                      <a class="cb-megamenu__link" [href]="link.url" (click)="select(link)">
+                        @if (link.icon) {
+                          <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" />
+                        }
+                        {{ link.label }}
+                      </a>
+                    } @else {
+                      <button class="cb-megamenu__link" type="button" [disabled]="link.disabled" (click)="select(link)">
+                        @if (link.icon) {
+                          <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" />
+                        }
+                        {{ link.label }}
+                      </button>
+                    }
+                  </li>
+                }
+              </ul>
+            </div>
           }
         </section>
       }
@@ -46,21 +188,71 @@ class CbMegaMenu {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMegaMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-megamenu', '(document:click)': 'onDocumentClick($event)', '(keydown.escape)': 'close()' }, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+            args: [{ selector: 'cb-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: {
+                        class: 'cb-megamenu',
+                        '(document:click)': 'onDocumentClick($event)',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, template: `
+    <nav [attr.aria-label]="ariaLabel() ?? t().categories">
       <ul class="cb-megamenu__bar">
         @for (item of items(); track $index; let i = $index) {
-          <li><button class="cb-megamenu__trigger" type="button" [attr.aria-expanded]="openIndex() === i" aria-haspopup="true" (click)="toggle(i)">@if (item.icon) { <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" /> }{{ item.label }}<cb-icon class="cb-megamenu__chevron" [class.cb-megamenu__chevron--open]="openIndex() === i" name="chevron-down" [size]="14" aria-hidden="true" /></button></li>
+          <li>
+            <button
+              class="cb-megamenu__trigger"
+              type="button"
+              [attr.aria-expanded]="openIndex() === i"
+              [attr.aria-controls]="openIndex() === i ? panelId : null"
+              (click)="toggle(i)"
+              (keydown)="onTriggerKeydown($event, i)"
+            >
+              @if (item.icon) {
+                <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" />
+              }
+              {{ item.label }}
+              <cb-icon
+                class="cb-megamenu__chevron"
+                [class.cb-megamenu__chevron--open]="openIndex() === i"
+                name="chevron-down"
+                [size]="14"
+                aria-hidden="true"
+              />
+            </button>
+          </li>
         }
       </ul>
       @if (openIndex() !== null) {
-        <section class="cb-megamenu__panel" role="region" [attr.aria-label]="items()[openIndex()!].label">
-          @for (group of items()[openIndex()!] .groups; track $index) {
-            <div class="cb-megamenu__group"><h3>{{ group.label }}</h3><ul>
-              @for (link of group.items; track $index) {
-                <li>@if (link.url && !link.disabled) { <a class="cb-megamenu__link" [href]="link.url" (click)="select(link)">@if (link.icon) { <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" /> }{{ link.label }}</a> } @else { <button class="cb-megamenu__link" type="button" [disabled]="link.disabled" (click)="select(link)">@if (link.icon) { <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" /> }{{ link.label }}</button> }</li>
-              }
-            </ul></div>
+        <section
+          class="cb-megamenu__panel"
+          [id]="panelId"
+          role="region"
+          [attr.aria-label]="items()[openIndex()!].label"
+          (keydown)="onPanelKeydown($event)"
+        >
+          @for (group of items()[openIndex()!].groups; track $index) {
+            <div class="cb-megamenu__group">
+              <h3>{{ group.label }}</h3>
+              <ul>
+                @for (link of group.items; track $index) {
+                  <li>
+                    @if (link.url && !link.disabled) {
+                      <a class="cb-megamenu__link" [href]="link.url" (click)="select(link)">
+                        @if (link.icon) {
+                          <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" />
+                        }
+                        {{ link.label }}
+                      </a>
+                    } @else {
+                      <button class="cb-megamenu__link" type="button" [disabled]="link.disabled" (click)="select(link)">
+                        @if (link.icon) {
+                          <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" />
+                        }
+                        {{ link.label }}
+                      </button>
+                    }
+                  </li>
+                }
+              </ul>
+            </div>
           }
         </section>
       }

package/fesm2022/caribeng-ui-menu.mjs

@@ -3,18 +3,23 @@ import { inject, ViewContainerRef, DestroyRef, input, output, viewChild, ViewEnc
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /** Popup menu anchored to any trigger element. */
 class CbMenu {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.overlay = inject(Overlay);
         this.vcr = inject(ViewContainerRef);
         this.destroyRef = inject(DestroyRef);
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Menu', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.itemSelect = output();
+        /** Se emite al cerrarse el menú (clic fuera, Escape o al elegir una opción). */
+        this.hidden = output();
         this.content = viewChild.required('content');
         this.overlayRef = null;
         this.trigger = null;
@@ -59,6 +64,7 @@ class CbMenu {
         const trigger = this.trigger;
         this.trigger = null;
         trigger?.focus();
+        this.hidden.emit();
     }
     activate(item, event) {
         if (item.disabled || item.separator) {
@@ -91,9 +97,9 @@ class CbMenu {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMenu, isStandalone: true, selector: "cb-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMenu, isStandalone: true, selector: "cb-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", hidden: "hidden" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #content>
-      <div class="cb-menu__panel" role="menu" [attr.aria-label]="ariaLabel() || null" (click)="onPanelClick($event)">
+      <div class="cb-menu__panel" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu) || null" (click)="onPanelClick($event)">
         @for (item of items(); track $index) {
           @if (item.separator) {
             <div class="cb-menu__separator" role="separator"></div>
@@ -133,7 +139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type: Component,
             args: [{ selector: 'cb-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], template: `
     <ng-template #content>
-      <div class="cb-menu__panel" role="menu" [attr.aria-label]="ariaLabel() || null" (click)="onPanelClick($event)">
+      <div class="cb-menu__panel" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu) || null" (click)="onPanelClick($event)">
         @for (item of items(); track $index) {
           @if (item.separator) {
             <div class="cb-menu__separator" role="separator"></div>
@@ -168,7 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       </div>
     </ng-template>
   `, styles: [".cb-menu__panel{min-width:12rem;padding:.375rem;background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-lg);color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-menu__item{display:flex;align-items:center;gap:.625rem;width:100%;min-height:2.25rem;padding:.5rem .625rem;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer}.cb-menu__item:hover:not(:disabled):not([aria-disabled=true]),.cb-menu__item:focus-visible{outline:none;background:var(--cb-color-surface)}.cb-menu__item:disabled,.cb-menu__item[aria-disabled=true]{opacity:.5;cursor:default}.cb-menu__separator{height:1px;margin:.375rem .25rem;background:var(--cb-color-border)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], hidden: [{ type: i0.Output, args: ["hidden"] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/caribeng-ui-menubar.mjs

@@ -1,14 +1,18 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, output, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, Injector, input, output, signal, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /** Horizontal navigation bar with optional one-level dropdown menus. */
 class CbMenubar {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.host = inject((ElementRef));
+        this.injector = inject(Injector);
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Main navigation', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.itemSelect = output();
         this.openIndex = signal(null, /* @ts-ignore */
@@ -56,7 +60,8 @@ class CbMenubar {
         if (event.key === 'ArrowDown' && root && this.items()[rootIndex]?.items?.length) {
             event.preventDefault();
             this.openIndex.set(rootIndex);
-            queueMicrotask(() => this.host.nativeElement.querySelector('.cb-menubar__submenu [role="menuitem"]:not([aria-disabled="true"]):not(:disabled)')?.focus());
+            // El submenú se pinta en el siguiente render (zoneless): se enfoca después.
+            afterNextRender(() => this.host.nativeElement.querySelector('.cb-menubar__submenu [role="menuitem"]:not([aria-disabled="true"]):not(:disabled)')?.focus(), { injector: this.injector });
         }
         if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && target.closest('.cb-menubar__submenu')) {
             const children = Array.from(target.closest('.cb-menubar__submenu').querySelectorAll('[role="menuitem"]:not([aria-disabled="true"]):not(:disabled)'));
@@ -68,7 +73,7 @@ class CbMenubar {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMenubar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMenubar, isStandalone: true, selector: "cb-menubar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "keydown": "onKeydown($event)", "document:click": "onDocumentClick($event)" }, classAttribute: "cb-menubar" }, ngImport: i0, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+    <nav [attr.aria-label]="(ariaLabel() ?? t().mainNavigation)">
       <ul class="cb-menubar__list" role="menubar">
         @for (item of items(); track $index; let i = $index) {
           <li class="cb-menubar__entry" role="none">
@@ -129,7 +134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '(keydown)': 'onKeydown($event)',
                         '(document:click)': 'onDocumentClick($event)',
                     }, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+    <nav [attr.aria-label]="(ariaLabel() ?? t().mainNavigation)">
       <ul class="cb-menubar__list" role="menubar">
         @for (item of items(); track $index; let i = $index) {
           <li class="cb-menubar__entry" role="none">