@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-tabmenu.mjs

@@ -1,15 +1,21 @@
 import * as i0 from '@angular/core';
-import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 /** Horizontal navigation menu with an active item. */
 class CbTabMenu {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Items sin los de `visible: false`. */
+        this.visibleItems = computed(() => cbVisibleItems(this.items()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
         this.activeIndex = model(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Section navigation', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.itemSelect = output();
     }
@@ -17,13 +23,14 @@ class CbTabMenu {
         if (item.disabled)
             return;
         this.activeIndex.set(index);
+        cbRunCommand(item);
         this.itemSelect.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTabMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTabMenu, isStandalone: true, selector: "cb-tabmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", itemSelect: "itemSelect" }, host: { classAttribute: "cb-tabmenu" }, ngImport: i0, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+    <nav [attr.aria-label]="(ariaLabel() ?? t().sectionNavigation)">
       <ul class="cb-tabmenu__list">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li class="cb-tabmenu__entry">
             @if (item.url && !item.disabled) {
               <a class="cb-tabmenu__link" [href]="item.url" [attr.aria-current]="activeIndex() === i ? 'page' : null" [attr.tabindex]="item.disabled ? -1 : 0" (click)="select(item, i)">
@@ -45,9 +52,9 @@ class CbTabMenu {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTabMenu, decorators: [{
             type: Component,
             args: [{ selector: 'cb-tabmenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-tabmenu' }, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+    <nav [attr.aria-label]="(ariaLabel() ?? t().sectionNavigation)">
       <ul class="cb-tabmenu__list">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li class="cb-tabmenu__entry">
             @if (item.url && !item.disabled) {
               <a class="cb-tabmenu__link" [href]="item.url" [attr.aria-current]="activeIndex() === i ? 'page' : null" [attr.tabindex]="item.disabled ? -1 : 0" (click)="select(item, i)">

package/fesm2022/caribeng-ui-tag.mjs

@@ -31,7 +31,7 @@ class CbTag {
       <span class="cb-tag__label">{{ value() }}</span>
     }
     <ng-content />
-  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:var(--cb-radius-sm);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);line-height:1.4;color:var(--_fg);background-color:var(--_bg)}:host(.cb-tag--rounded){border-radius:var(--cb-radius-full);padding-inline:.625rem}:host(.cb-tag--primary){--_bg: var(--cb-color-primary-100);--_fg: var(--cb-color-primary-500)}:host(.cb-tag--secondary){--_bg: var(--cb-color-surface-100);--_fg: var(--cb-color-text-muted)}:host(.cb-tag--success){--_bg: var(--cb-color-success-100);--_fg: var(--cb-color-success-500)}:host(.cb-tag--info){--_bg: var(--cb-color-info-100);--_fg: var(--cb-color-info-500)}:host(.cb-tag--warning){--_bg: var(--cb-color-warning-100);--_fg: var(--cb-color-warning-500)}:host(.cb-tag--danger){--_bg: var(--cb-color-danger-100);--_fg: var(--cb-color-danger-500)}:host(.cb-tag--help){--_bg: var(--cb-color-help-100);--_fg: var(--cb-color-help-500)}:host(.cb-tag--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}:host-context([data-theme=\"dark\"]){--_bg: color-mix(in srgb, var(--_fg) 22%, transparent)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:var(--cb-radius-sm);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);line-height:1.4;color:var(--_fg);background-color:var(--_bg)}:host(.cb-tag--rounded){border-radius:var(--cb-radius-full);padding-inline:.625rem}:host(.cb-tag--primary){--_bg: var(--cb-color-primary-100);--_fg: var(--cb-color-primary-500)}:host(.cb-tag--secondary){--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text-muted)}:host(.cb-tag--success){--_bg: var(--cb-color-success-100);--_fg: var(--cb-color-success-500)}:host(.cb-tag--info){--_bg: var(--cb-color-info-100);--_fg: var(--cb-color-info-500)}:host(.cb-tag--warning){--_bg: var(--cb-color-warning-100);--_fg: var(--cb-color-warning-500)}:host(.cb-tag--danger){--_bg: var(--cb-color-danger-100);--_fg: var(--cb-color-danger-500)}:host(.cb-tag--help){--_bg: var(--cb-color-help-100);--_fg: var(--cb-color-help-500)}:host(.cb-tag--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}:host-context([data-theme=\"dark\"]){--_bg: color-mix(in srgb, var(--_fg) 22%, transparent)}\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: CbTag, decorators: [{
             type: Component,
@@ -47,7 +47,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <span class="cb-tag__label">{{ value() }}</span>
     }
     <ng-content />
-  `, styles: [":host{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:var(--cb-radius-sm);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);line-height:1.4;color:var(--_fg);background-color:var(--_bg)}:host(.cb-tag--rounded){border-radius:var(--cb-radius-full);padding-inline:.625rem}:host(.cb-tag--primary){--_bg: var(--cb-color-primary-100);--_fg: var(--cb-color-primary-500)}:host(.cb-tag--secondary){--_bg: var(--cb-color-surface-100);--_fg: var(--cb-color-text-muted)}:host(.cb-tag--success){--_bg: var(--cb-color-success-100);--_fg: var(--cb-color-success-500)}:host(.cb-tag--info){--_bg: var(--cb-color-info-100);--_fg: var(--cb-color-info-500)}:host(.cb-tag--warning){--_bg: var(--cb-color-warning-100);--_fg: var(--cb-color-warning-500)}:host(.cb-tag--danger){--_bg: var(--cb-color-danger-100);--_fg: var(--cb-color-danger-500)}:host(.cb-tag--help){--_bg: var(--cb-color-help-100);--_fg: var(--cb-color-help-500)}:host(.cb-tag--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}:host-context([data-theme=\"dark\"]){--_bg: color-mix(in srgb, var(--_fg) 22%, transparent)}\n"] }]
+  `, styles: [":host{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:var(--cb-radius-sm);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);line-height:1.4;color:var(--_fg);background-color:var(--_bg)}:host(.cb-tag--rounded){border-radius:var(--cb-radius-full);padding-inline:.625rem}:host(.cb-tag--primary){--_bg: var(--cb-color-primary-100);--_fg: var(--cb-color-primary-500)}:host(.cb-tag--secondary){--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text-muted)}:host(.cb-tag--success){--_bg: var(--cb-color-success-100);--_fg: var(--cb-color-success-500)}:host(.cb-tag--info){--_bg: var(--cb-color-info-100);--_fg: var(--cb-color-info-500)}:host(.cb-tag--warning){--_bg: var(--cb-color-warning-100);--_fg: var(--cb-color-warning-500)}:host(.cb-tag--danger){--_bg: var(--cb-color-danger-100);--_fg: var(--cb-color-danger-500)}:host(.cb-tag--help){--_bg: var(--cb-color-help-100);--_fg: var(--cb-color-help-500)}:host(.cb-tag--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}:host-context([data-theme=\"dark\"]){--_bg: color-mix(in srgb, var(--_fg) 22%, transparent)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-terminal.mjs

@@ -1,11 +1,14 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, output, signal, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Terminal de CaribeNG: consola interactiva basada en señales con historial de comandos.
  */
 class CbTerminal {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.welcomeMessage = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "welcomeMessage" }] : /* istanbul ignore next */ []));
         this.prompt = input('caribeng $', /* @ts-ignore */
@@ -15,6 +18,17 @@ class CbTerminal {
         ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
         this.currentCommand = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentCommand" }] : /* istanbul ignore next */ []));
+        /** Posición en el historial al recorrerlo con flechas (`null` = escribiendo uno nuevo). */
+        this.historyIndex = null;
+        this.commandInput = viewChild('commandInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "commandInput" }] : /* istanbul ignore next */ []));
+    }
+    /** Fija el comando actual también en el DOM (el binding no detecta '' → '' si no hubo render entre medias). */
+    setCommand(value) {
+        this.currentCommand.set(value);
+        const input = this.commandInput()?.nativeElement;
+        if (input)
+            input.value = value;
     }
     onInput(event) {
         this.currentCommand.set(event.target.value);
@@ -25,13 +39,29 @@ class CbTerminal {
             return;
         if (cmd === 'clear') {
             this.entries.set([]);
-            this.currentCommand.set('');
+            this.setCommand('');
             return;
         }
         this.entries.update((list) => [...list, { command: cmd }]);
-        this.currentCommand.set('');
+        this.setCommand('');
+        this.historyIndex = null;
         this.commandEntered.emit(cmd);
     }
+    /** Flecha arriba / abajo recorren los comandos anteriores. */
+    recall(event, step) {
+        const commands = this.entries().map((e) => e.command);
+        if (!commands.length)
+            return;
+        event.preventDefault();
+        const next = (this.historyIndex ?? commands.length) + step;
+        if (next >= commands.length) {
+            this.historyIndex = null;
+            this.setCommand('');
+            return;
+        }
+        this.historyIndex = Math.max(0, next);
+        this.setCommand(commands[this.historyIndex]);
+    }
     sendResponse(response) {
         this.entries.update((list) => {
             if (list.length === 0)
@@ -42,11 +72,11 @@ class CbTerminal {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTerminal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTerminal, isStandalone: true, selector: "cb-terminal", inputs: { welcomeMessage: { classPropertyName: "welcomeMessage", publicName: "welcomeMessage", isSignal: true, isRequired: false, transformFunction: null }, prompt: { classPropertyName: "prompt", publicName: "prompt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commandEntered: "commandEntered" }, host: { classAttribute: "cb-terminal" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTerminal, isStandalone: true, selector: "cb-terminal", inputs: { welcomeMessage: { classPropertyName: "welcomeMessage", publicName: "welcomeMessage", isSignal: true, isRequired: false, transformFunction: null }, prompt: { classPropertyName: "prompt", publicName: "prompt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commandEntered: "commandEntered" }, host: { classAttribute: "cb-terminal" }, viewQueries: [{ propertyName: "commandInput", first: true, predicate: ["commandInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (welcomeMessage()) {
       <div class="cb-terminal__welcome">{{ welcomeMessage() }}</div>
     }
-    <div class="cb-terminal__history">
+    <div class="cb-terminal__history" role="log" aria-live="polite">
       @for (entry of entries(); track $index) {
         <div class="cb-terminal__entry">
           <div class="cb-terminal__line">
@@ -62,12 +92,15 @@ class CbTerminal {
     <div class="cb-terminal__input-row">
       <span class="cb-terminal__prompt">{{ prompt() }}</span>
       <input
+        #commandInput
         type="text"
         class="cb-terminal__input"
         [value]="currentCommand()"
-        [attr.aria-label]="prompt() || 'Comando'"
+        [attr.aria-label]="prompt() || t().command"
         (input)="onInput($event)"
         (keydown.enter)="submitCommand()"
+        (keydown.arrowup)="recall($event, -1)"
+        (keydown.arrowdown)="recall($event, 1)"
       />
     </div>
   `, isInline: true, styles: [":host{display:block;width:100%;padding:var(--cb-space-4);border-radius:var(--cb-radius-lg);background:#0f172a;color:#e2e8f0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;box-sizing:border-box}.cb-terminal__welcome{margin-bottom:var(--cb-space-2);color:#94a3b8}.cb-terminal__entry{margin-bottom:.375rem}.cb-terminal__line,.cb-terminal__input-row{display:flex;align-items:center;gap:.5rem}.cb-terminal__prompt{color:#10b981;font-weight:600;white-space:nowrap}.cb-terminal__response{margin-top:.125rem;color:#cbd5e1;white-space:pre-wrap}.cb-terminal__input{flex:1;border:none;background:transparent;color:#f8fafc;font-family:inherit;font-size:inherit;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -78,7 +111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     @if (welcomeMessage()) {
       <div class="cb-terminal__welcome">{{ welcomeMessage() }}</div>
     }
-    <div class="cb-terminal__history">
+    <div class="cb-terminal__history" role="log" aria-live="polite">
       @for (entry of entries(); track $index) {
         <div class="cb-terminal__entry">
           <div class="cb-terminal__line">
@@ -94,16 +127,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <div class="cb-terminal__input-row">
       <span class="cb-terminal__prompt">{{ prompt() }}</span>
       <input
+        #commandInput
         type="text"
         class="cb-terminal__input"
         [value]="currentCommand()"
-        [attr.aria-label]="prompt() || 'Comando'"
+        [attr.aria-label]="prompt() || t().command"
         (input)="onInput($event)"
         (keydown.enter)="submitCommand()"
+        (keydown.arrowup)="recall($event, -1)"
+        (keydown.arrowdown)="recall($event, 1)"
       />
     </div>
   `, styles: [":host{display:block;width:100%;padding:var(--cb-space-4);border-radius:var(--cb-radius-lg);background:#0f172a;color:#e2e8f0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;box-sizing:border-box}.cb-terminal__welcome{margin-bottom:var(--cb-space-2);color:#94a3b8}.cb-terminal__entry{margin-bottom:.375rem}.cb-terminal__line,.cb-terminal__input-row{display:flex;align-items:center;gap:.5rem}.cb-terminal__prompt{color:#10b981;font-weight:600;white-space:nowrap}.cb-terminal__response{margin-top:.125rem;color:#cbd5e1;white-space:pre-wrap}.cb-terminal__input{flex:1;border:none;background:transparent;color:#f8fafc;font-family:inherit;font-size:inherit;outline:none}\n"] }]
-        }], propDecorators: { welcomeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "welcomeMessage", required: false }] }], prompt: [{ type: i0.Input, args: [{ isSignal: true, alias: "prompt", required: false }] }], commandEntered: [{ type: i0.Output, args: ["commandEntered"] }] } });
+        }], propDecorators: { welcomeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "welcomeMessage", required: false }] }], prompt: [{ type: i0.Input, args: [{ isSignal: true, alias: "prompt", required: false }] }], commandEntered: [{ type: i0.Output, args: ["commandEntered"] }], commandInput: [{ type: i0.ViewChild, args: ['commandInput', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/caribeng-ui-themetoggle.mjs

@@ -0,0 +1,82 @@
+import * as i0 from '@angular/core';
+import { inject, input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, CbThemeService } from '@caribeng/ui';
+import { CbButton } from '@caribeng/ui/button';
+import { CbIcon } from '@caribeng/ui/icon';
+
+/**
+ * Botón de cambio de tema claro / oscuro sobre `CbThemeService` (con
+ * `provideCaribeNG({ persistTheme: true })` recuerda la elección).
+ *
+ * Su nombre accesible describe la acción ("Cambiar a tema oscuro"), por eso
+ * no usa `aria-pressed`.
+ *
+ * @example
+ * ```html
+ * <cb-theme-toggle />
+ * <cb-theme-toggle showLabel size="sm" />
+ * ```
+ */
+class CbThemeToggle {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.theme = inject(CbThemeService);
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Muestra el texto además del icono. */
+        this.showLabel = input(false, { ...(ngDevMode ? { debugName: "showLabel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Acción que hará el botón: cambiar al tema contrario al actual. */
+        this.label = computed(() => (this.theme.isDark() ? this.t().switchToLight : this.t().switchToDark), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbThemeToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbThemeToggle, isStandalone: true, selector: "cb-theme-toggle", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-theme-toggle" }, ngImport: i0, template: `
+    <cb-button
+      variant="text"
+      severity="secondary"
+      [size]="size()"
+      [ariaLabel]="showLabel() ? undefined : label()"
+      (click)="theme.toggle()"
+    >
+      <cb-icon [name]="theme.isDark() ? 'sun' : 'moon'" [size]="18" aria-hidden="true" />
+      @if (showLabel()) {
+        {{ label() }}
+      }
+    </cb-button>
+  `, isInline: true, dependencies: [{ kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }, { 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: CbThemeToggle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cb-theme-toggle',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.Emulated,
+                    imports: [CbButton, CbIcon],
+                    host: { class: 'cb-theme-toggle' },
+                    template: `
+    <cb-button
+      variant="text"
+      severity="secondary"
+      [size]="size()"
+      [ariaLabel]="showLabel() ? undefined : label()"
+      (click)="theme.toggle()"
+    >
+      <cb-icon [name]="theme.isDark() ? 'sun' : 'moon'" [size]="18" aria-hidden="true" />
+      @if (showLabel()) {
+        {{ label() }}
+      }
+    </cb-button>
+  `,
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/themetoggle
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbThemeToggle };

package/fesm2022/caribeng-ui-tieredmenu.mjs

@@ -1,20 +1,26 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, DestroyRef, input, output, signal, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ViewContainerRef, DestroyRef, input, computed, output, signal, viewChild, Injector, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 /** Popup menu with cascading submenus. */
 class CbTieredMenu {
     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 */
+        /** Items sin los de `visible: false`. */
+        this.visibleItems = computed(() => cbVisibleItems(this.items()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        this.triggerLabel = input('Menu', /* @ts-ignore */
+        this.triggerLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
         this.itemSelect = output();
         this.isOpen = signal(false, /* @ts-ignore */
@@ -30,6 +36,8 @@ class CbTieredMenu {
             { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
             { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
         ];
+        this.injector = inject(Injector);
+        this.trigger = viewChild.required('trigger');
         this.destroyRef.onDestroy(() => this.overlayRef?.dispose());
     }
     toggle(event) { if (this.overlayRef)
@@ -43,26 +51,111 @@ class CbTieredMenu {
         this.overlayRef = ref;
         this.isOpen.set(true);
         ref.attach(new TemplatePortal(this.content(), this.vcr));
-        ref.backdropClick().subscribe(() => this.hide());
+        ref.backdropClick().subscribe(() => this.hide(false));
         ref.keydownEvents().subscribe((event) => { if (event.key === 'Escape') {
             event.preventDefault();
             this.hide();
         } });
+        // Patrón WAI-ARIA menu: al abrir, el foco pasa al primer item.
+        afterNextRender(() => this.focusFirst(ref.overlayElement.querySelector('.cb-tieredmenu__list')), { injector: this.injector });
     }
     select(item) { if (item.disabled)
-        return; this.itemSelect.emit(item); this.hide(); }
-    hide() { this.overlayRef?.dispose(); this.overlayRef = null; this.isOpen.set(false); this.openIndex.set(null); this.openChildIndex.set(null); }
+        return; cbRunCommand(item); this.itemSelect.emit(item); this.hide(); }
+    /** Cierra el menú; con `restoreFocus` (por defecto) el foco vuelve al botón que lo abre. */
+    hide(restoreFocus = true) {
+        const wasOpen = !!this.overlayRef;
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.isOpen.set(false);
+        this.openIndex.set(null);
+        this.openChildIndex.set(null);
+        if (wasOpen && restoreFocus)
+            this.trigger().nativeElement.focus();
+    }
+    onTriggerKeydown(event) {
+        if (event.key !== 'ArrowDown' || this.overlayRef)
+            return;
+        event.preventDefault();
+        this.show(event.currentTarget);
+    }
+    /** Flechas, Inicio y Fin dentro de cada nivel; derecha abre el submenú e izquierda vuelve al nivel anterior. */
+    onMenuKeydown(event) {
+        const item = event.target.closest('[role="menuitem"]');
+        const menu = item?.closest('[role="menu"]');
+        if (!item || !menu)
+            return;
+        const items = this.menuItems(menu);
+        const at = items.indexOf(item);
+        const opensSubmenu = item.getAttribute('aria-haspopup') === 'menu';
+        switch (event.key) {
+            case 'ArrowDown':
+                items[(at + 1) % items.length]?.focus();
+                break;
+            case 'ArrowUp':
+                items[(at - 1 + items.length) % items.length]?.focus();
+                break;
+            case 'Home':
+                items[0]?.focus();
+                break;
+            case 'End':
+                items[items.length - 1]?.focus();
+                break;
+            case 'ArrowRight':
+            case 'Enter':
+            case ' ':
+                if (!opensSubmenu)
+                    return;
+                this.openSubmenu(item);
+                break;
+            case 'ArrowLeft': {
+                if (menu.classList.contains('cb-tieredmenu__list'))
+                    break;
+                const parent = menu.parentElement?.querySelector(':scope > [role="menuitem"]');
+                if (parent?.dataset['level'] === '1') {
+                    this.openIndex.set(null);
+                    this.openChildIndex.set(null);
+                }
+                else
+                    this.openChildIndex.set(null);
+                parent?.focus();
+                break;
+            }
+            case 'Tab':
+                this.hide();
+                break;
+            default: return;
+        }
+        event.preventDefault();
+    }
+    openSubmenu(item) {
+        const index = Number(item.dataset['index']);
+        if (item.dataset['level'] === '1') {
+            this.openIndex.set(index);
+            this.openChildIndex.set(null);
+        }
+        else
+            this.openChildIndex.set(index);
+        // El submenú se pinta en el siguiente render (zoneless): se enfoca después.
+        afterNextRender(() => this.focusFirst(item.parentElement?.querySelector(':scope > [role="menu"]') ?? null), { injector: this.injector });
+    }
+    menuItems(menu) {
+        return Array.from(menu.querySelectorAll(':scope > li > [role="menuitem"]')).filter((el) => !el.hasAttribute('disabled'));
+    }
+    focusFirst(menu) {
+        if (menu)
+            this.menuItems(menu)[0]?.focus();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTieredMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTieredMenu, isStandalone: true, selector: "cb-tieredmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <button class="cb-tieredmenu__trigger" type="button" [attr.aria-expanded]="isOpen()" aria-haspopup="menu" (click)="toggle($event)">{{ triggerLabel() }}</button>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTieredMenu, isStandalone: true, selector: "cb-tieredmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button #trigger class="cb-tieredmenu__trigger" type="button" [attr.aria-expanded]="isOpen()" aria-haspopup="menu" (click)="toggle($event)" (keydown)="onTriggerKeydown($event)">{{ (triggerLabel() ?? t().menu) }}</button>
     <ng-template #content>
-      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="ariaLabel()">
-        @for (item of items(); track $index; let i = $index) {
+      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu)" (keydown)="onMenuKeydown($event)">
+        @for (item of visibleItems(); track $index; let i = $index) {
           @if (item.separator) { <li class="cb-tieredmenu__separator" role="separator"></li> }
           @else {
-            <li class="cb-tieredmenu__entry" [class.cb-tieredmenu__entry--open]="openIndex() === i">
+            <li class="cb-tieredmenu__entry" role="none" [class.cb-tieredmenu__entry--open]="openIndex() === i">
               @if (item.items?.length) {
-                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(openIndex() === i ? null : i)">
+                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" data-level="1" [attr.data-index]="i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(openIndex() === i ? null : i)">
                   @if (item.icon) { <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" /> }<span>{{ item.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                 </button>
                 @if (openIndex() === i) {
@@ -70,7 +163,7 @@ class CbTieredMenu {
                     @for (child of item.items; track $index; let j = $index) {
                       <li role="none">
                         @if (child.items?.length) {
-                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(openChildIndex() === j ? null : j)">
+                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" data-level="2" [attr.data-index]="j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(openChildIndex() === j ? null : j)">
                             @if (child.icon) { <cb-icon [name]="child.icon" [size]="16" aria-hidden="true" /> }<span>{{ child.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                           </button>
                           @if (openChildIndex() === j) {
@@ -102,15 +195,15 @@ class CbTieredMenu {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTieredMenu, decorators: [{
             type: Component,
             args: [{ selector: 'cb-tieredmenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], template: `
-    <button class="cb-tieredmenu__trigger" type="button" [attr.aria-expanded]="isOpen()" aria-haspopup="menu" (click)="toggle($event)">{{ triggerLabel() }}</button>
+    <button #trigger class="cb-tieredmenu__trigger" type="button" [attr.aria-expanded]="isOpen()" aria-haspopup="menu" (click)="toggle($event)" (keydown)="onTriggerKeydown($event)">{{ (triggerLabel() ?? t().menu) }}</button>
     <ng-template #content>
-      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="ariaLabel()">
-        @for (item of items(); track $index; let i = $index) {
+      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu)" (keydown)="onMenuKeydown($event)">
+        @for (item of visibleItems(); track $index; let i = $index) {
           @if (item.separator) { <li class="cb-tieredmenu__separator" role="separator"></li> }
           @else {
-            <li class="cb-tieredmenu__entry" [class.cb-tieredmenu__entry--open]="openIndex() === i">
+            <li class="cb-tieredmenu__entry" role="none" [class.cb-tieredmenu__entry--open]="openIndex() === i">
               @if (item.items?.length) {
-                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(openIndex() === i ? null : i)">
+                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" data-level="1" [attr.data-index]="i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(openIndex() === i ? null : i)">
                   @if (item.icon) { <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" /> }<span>{{ item.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                 </button>
                 @if (openIndex() === i) {
@@ -118,7 +211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     @for (child of item.items; track $index; let j = $index) {
                       <li role="none">
                         @if (child.items?.length) {
-                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(openChildIndex() === j ? null : j)">
+                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" data-level="2" [attr.data-index]="j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(openChildIndex() === j ? null : j)">
                             @if (child.icon) { <cb-icon [name]="child.icon" [size]="16" aria-hidden="true" /> }<span>{{ child.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                           </button>
                           @if (openChildIndex() === j) {
@@ -146,7 +239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       </ul>
     </ng-template>
   `, styles: [":host{display:inline-block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tieredmenu__trigger{min-height:2.5rem;padding:.5rem .875rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);color:inherit;font:inherit;cursor:pointer}.cb-tieredmenu__trigger:hover,.cb-tieredmenu__trigger:focus-visible{outline:none;border-color:var(--cb-color-primary)}.cb-tieredmenu__list,.cb-tieredmenu__submenu{min-width:13rem;margin:0;padding:.375rem;list-style:none;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)}.cb-tieredmenu__entry{position:relative}.cb-tieredmenu__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;cursor:pointer}.cb-tieredmenu__item span{flex:1}.cb-tieredmenu__item:hover:not(:disabled),.cb-tieredmenu__item:focus-visible,.cb-tieredmenu__entry--open>.cb-tieredmenu__item{outline:none;background:var(--cb-color-surface)}.cb-tieredmenu__item:disabled{opacity:.5;cursor:default}.cb-tieredmenu__submenu{position:absolute;z-index:2;top:-.375rem;left:calc(100% + .25rem)}.cb-tieredmenu__submenu--third{z-index:3}.cb-tieredmenu__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 }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", 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 }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.