@caribeng/ui 22.1.0 → 22.2.0

package/fesm2022/caribeng-ui-tabmenu.mjs

@@ -1,15 +1,18 @@
 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';
 
 /** 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 */ []));
         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();
     }
@@ -21,7 +24,7 @@ class CbTabMenu {
     }
     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) {
           <li class="cb-tabmenu__entry">
@@ -45,7 +48,7 @@ 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) {
           <li class="cb-tabmenu__entry">

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

@@ -3,18 +3,21 @@ import { inject, ViewContainerRef, DestroyRef, input, output, signal, viewChild,
 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 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 */
+        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 */
@@ -54,9 +57,9 @@ class CbTieredMenu {
     hide() { this.overlayRef?.dispose(); this.overlayRef = null; this.isOpen.set(false); this.openIndex.set(null); this.openChildIndex.set(null); }
     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>
+    <button class="cb-tieredmenu__trigger" type="button" [attr.aria-expanded]="isOpen()" aria-haspopup="menu" (click)="toggle($event)">{{ (triggerLabel() ?? t().menu) }}</button>
     <ng-template #content>
-      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="ariaLabel()">
+      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu)">
         @for (item of items(); track $index; let i = $index) {
           @if (item.separator) { <li class="cb-tieredmenu__separator" role="separator"></li> }
           @else {
@@ -102,9 +105,9 @@ 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 class="cb-tieredmenu__trigger" type="button" [attr.aria-expanded]="isOpen()" aria-haspopup="menu" (click)="toggle($event)">{{ (triggerLabel() ?? t().menu) }}</button>
     <ng-template #content>
-      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="ariaLabel()">
+      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu)">
         @for (item of items(); track $index; let i = $index) {
           @if (item.separator) { <li class="cb-tieredmenu__separator" role="separator"></li> }
           @else {

package/fesm2022/caribeng-ui-timeline.mjs

@@ -1,25 +1,194 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, input, contentChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
 
+/** Plantilla del contenido de cada evento. */
+class CbTimelineContentTemplate {
+    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: CbTimelineContentTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: CbTimelineContentTemplate, isStandalone: true, selector: "ng-template[cbTimelineContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTimelineContentTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[cbTimelineContent]' }]
+        }] });
+/** Plantilla del lado opuesto al contenido (p. ej. la fecha). */
+class CbTimelineOppositeTemplate {
+    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: CbTimelineOppositeTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: CbTimelineOppositeTemplate, isStandalone: true, selector: "ng-template[cbTimelineOpposite]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTimelineOppositeTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[cbTimelineOpposite]' }]
+        }] });
+/** Plantilla del marcador de cada evento. */
+class CbTimelineMarkerTemplate {
+    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: CbTimelineMarkerTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: CbTimelineMarkerTemplate, isStandalone: true, selector: "ng-template[cbTimelineMarker]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTimelineMarkerTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[cbTimelineMarker]' }]
+        }] });
+/**
+ * Línea de tiempo de CaribeNG: eventos en vertical u horizontal, alineados a
+ * un lado o alternados, con plantillas para el contenido, el lado opuesto y
+ * el marcador.
+ *
+ * @example
+ * ```html
+ * <cb-timeline [value]="eventos" align="alternate" />
+ *
+ * <cb-timeline [value]="eventos">
+ *   <ng-template cbTimelineContent let-evento>{{ evento.title }}</ng-template>
+ * </cb-timeline>
+ * ```
+ */
 class CbTimeline {
     constructor() {
+        this.t = injectCbTranslation();
+        /** Eventos, en orden. */
         this.value = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Disposición: vertical (por defecto) u horizontal. */
         this.orientation = input('vertical', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Cronología', /* @ts-ignore */
+        /** Lado del contenido respecto a la línea: izquierda, derecha o alternado. */
+        this.align = input('left', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        /** Nombre accesible de la lista. Por defecto, el del idioma activo. */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.contentTemplate = contentChild(CbTimelineContentTemplate, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+        this.oppositeTemplate = contentChild(CbTimelineOppositeTemplate, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "oppositeTemplate" }] : /* istanbul ignore next */ []));
+        this.markerTemplate = contentChild(CbTimelineMarkerTemplate, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "markerTemplate" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTimeline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTimeline, isStandalone: true, selector: "cb-timeline", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ol class="cb-timeline" [class.cb-timeline--horizontal]="orientation()==='horizontal'" [attr.aria-label]="ariaLabel()">@for(item of value();track $index){<li><span class="cb-timeline__marker" aria-hidden="true"></span><div><time>{{item.date}}</time><strong>{{item.title}}</strong>@if(item.description){<p>{{item.description}}</p>}</div></li>}</ol>`, isInline: true, styles: [":host{display:block}.cb-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.cb-timeline li{display:flex;gap:.75rem;min-height:4rem;color:var(--cb-color-text,#111827)}.cb-timeline__marker{width:.75rem;height:.75rem;flex:none;border-radius:50%;background:var(--cb-color-primary,#10b981);margin-top:.3rem;box-shadow:0 0 0 3px var(--cb-color-surface,#fff),0 0 0 4px var(--cb-color-border,#d1d5db)}time{display:block;color:var(--cb-color-text-muted,#6b7280);font-size:.8rem}p{margin:.25rem 0}.cb-timeline--horizontal{flex-direction:row;overflow:auto}.cb-timeline--horizontal li{min-width:10rem;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTimeline, isStandalone: true, selector: "cb-timeline", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-timeline-host" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: CbTimelineContentTemplate, descendants: true, isSignal: true }, { propertyName: "oppositeTemplate", first: true, predicate: CbTimelineOppositeTemplate, descendants: true, isSignal: true }, { propertyName: "markerTemplate", first: true, predicate: CbTimelineMarkerTemplate, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ol
+      class="cb-timeline"
+      [class]="'cb-timeline cb-timeline--' + orientation() + ' cb-timeline--' + align()"
+      [attr.aria-label]="ariaLabel() ?? t().timeline"
+    >
+      @for (event of value(); track $index; let i = $index; let last = $last) {
+        <li class="cb-timeline__event" [class.cb-timeline__event--alt]="align() === 'alternate' && i % 2 === 1">
+          <div class="cb-timeline__opposite">
+            @if (oppositeTemplate(); as tpl) {
+              <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: event, index: i }" />
+            }
+          </div>
+          <div class="cb-timeline__separator" aria-hidden="true">
+            @if (markerTemplate(); as tpl) {
+              <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: event, index: i }" />
+            } @else {
+              <span
+                class="cb-timeline__marker"
+                [class.cb-timeline__marker--icon]="!!event.icon"
+                [style.--cb-timeline-color]="event.color || null"
+              >
+                @if (event.icon) {
+                  <cb-icon [name]="event.icon" [size]="14" />
+                }
+              </span>
+            }
+            @if (!last) {
+              <span class="cb-timeline__connector"></span>
+            }
+          </div>
+          <div class="cb-timeline__content">
+            @if (contentTemplate(); as tpl) {
+              <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: event, index: i }" />
+            } @else {
+              @if (event.date) {
+                <time class="cb-timeline__date" [attr.datetime]="event.datetime || null">{{ event.date }}</time>
+              }
+              <strong class="cb-timeline__title">{{ event.title }}</strong>
+              @if (event.description) {
+                <p class="cb-timeline__description">{{ event.description }}</p>
+              }
+            }
+          </div>
+        </li>
+      }
+    </ol>
+  `, isInline: true, styles: [":host{display:block;color:var(--cb-color-text);--cb-timeline-color: var(--cb-color-primary-500)}.cb-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.cb-timeline__event{display:flex;gap:var(--cb-space-3, .75rem);min-height:4.5rem}.cb-timeline__opposite,.cb-timeline__content{flex:1;min-width:0;padding-bottom:var(--cb-space-4, 1rem)}.cb-timeline--left .cb-timeline__opposite:empty,.cb-timeline--right .cb-timeline__opposite:empty{display:none}.cb-timeline--left .cb-timeline__opposite{flex:0 0 auto;text-align:right}.cb-timeline--right .cb-timeline__event{flex-direction:row-reverse}.cb-timeline--right .cb-timeline__content{text-align:right}.cb-timeline--right .cb-timeline__opposite{flex:0 0 auto}.cb-timeline--alternate .cb-timeline__opposite{text-align:right}.cb-timeline--alternate .cb-timeline__event--alt{flex-direction:row-reverse}.cb-timeline--alternate .cb-timeline__event--alt .cb-timeline__opposite{text-align:left}.cb-timeline--alternate .cb-timeline__event--alt .cb-timeline__content{text-align:right}.cb-timeline__separator{display:flex;flex-direction:column;align-items:center;flex:none}.cb-timeline__marker{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:.875rem;height:.875rem;margin-top:.2rem;border-radius:50%;background:var(--cb-timeline-color);color:#fff;box-shadow:0 0 0 3px var(--cb-color-bg, #fff),0 0 0 4px var(--cb-color-border)}.cb-timeline__marker--icon{width:1.75rem;height:1.75rem;margin-top:0}.cb-timeline__connector{flex:1;width:2px;margin:.25rem 0;background:var(--cb-color-border)}.cb-timeline__date{display:block;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-timeline__title{display:block;color:var(--cb-color-text-strong)}.cb-timeline__description{margin:.25rem 0 0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem)}.cb-timeline--horizontal{flex-direction:row;overflow-x:auto}.cb-timeline--horizontal .cb-timeline__event{flex:1 0 10rem;flex-direction:column;min-height:0;gap:var(--cb-space-2, .5rem)}.cb-timeline--horizontal .cb-timeline__event--alt{flex-direction:column-reverse}.cb-timeline--horizontal .cb-timeline__opposite,.cb-timeline--horizontal .cb-timeline__content{flex:0 0 auto;padding-bottom:0;padding-inline-end:var(--cb-space-3, .75rem);text-align:left}.cb-timeline--horizontal .cb-timeline__separator{flex-direction:row}.cb-timeline--horizontal .cb-timeline__marker{margin-top:0}.cb-timeline--horizontal .cb-timeline__connector{width:auto;height:2px;margin:0 .25rem}\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: CbTimeline, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-timeline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<ol class="cb-timeline" [class.cb-timeline--horizontal]="orientation()==='horizontal'" [attr.aria-label]="ariaLabel()">@for(item of value();track $index){<li><span class="cb-timeline__marker" aria-hidden="true"></span><div><time>{{item.date}}</time><strong>{{item.title}}</strong>@if(item.description){<p>{{item.description}}</p>}</div></li>}</ol>`, styles: [":host{display:block}.cb-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.cb-timeline li{display:flex;gap:.75rem;min-height:4rem;color:var(--cb-color-text,#111827)}.cb-timeline__marker{width:.75rem;height:.75rem;flex:none;border-radius:50%;background:var(--cb-color-primary,#10b981);margin-top:.3rem;box-shadow:0 0 0 3px var(--cb-color-surface,#fff),0 0 0 4px var(--cb-color-border,#d1d5db)}time{display:block;color:var(--cb-color-text-muted,#6b7280);font-size:.8rem}p{margin:.25rem 0}.cb-timeline--horizontal{flex-direction:row;overflow:auto}.cb-timeline--horizontal li{min-width:10rem;flex-direction:column}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+            args: [{ selector: 'cb-timeline', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet, CbIcon], host: { class: 'cb-timeline-host' }, template: `
+    <ol
+      class="cb-timeline"
+      [class]="'cb-timeline cb-timeline--' + orientation() + ' cb-timeline--' + align()"
+      [attr.aria-label]="ariaLabel() ?? t().timeline"
+    >
+      @for (event of value(); track $index; let i = $index; let last = $last) {
+        <li class="cb-timeline__event" [class.cb-timeline__event--alt]="align() === 'alternate' && i % 2 === 1">
+          <div class="cb-timeline__opposite">
+            @if (oppositeTemplate(); as tpl) {
+              <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: event, index: i }" />
+            }
+          </div>
+          <div class="cb-timeline__separator" aria-hidden="true">
+            @if (markerTemplate(); as tpl) {
+              <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: event, index: i }" />
+            } @else {
+              <span
+                class="cb-timeline__marker"
+                [class.cb-timeline__marker--icon]="!!event.icon"
+                [style.--cb-timeline-color]="event.color || null"
+              >
+                @if (event.icon) {
+                  <cb-icon [name]="event.icon" [size]="14" />
+                }
+              </span>
+            }
+            @if (!last) {
+              <span class="cb-timeline__connector"></span>
+            }
+          </div>
+          <div class="cb-timeline__content">
+            @if (contentTemplate(); as tpl) {
+              <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: event, index: i }" />
+            } @else {
+              @if (event.date) {
+                <time class="cb-timeline__date" [attr.datetime]="event.datetime || null">{{ event.date }}</time>
+              }
+              <strong class="cb-timeline__title">{{ event.title }}</strong>
+              @if (event.description) {
+                <p class="cb-timeline__description">{{ event.description }}</p>
+              }
+            }
+          </div>
+        </li>
+      }
+    </ol>
+  `, styles: [":host{display:block;color:var(--cb-color-text);--cb-timeline-color: var(--cb-color-primary-500)}.cb-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.cb-timeline__event{display:flex;gap:var(--cb-space-3, .75rem);min-height:4.5rem}.cb-timeline__opposite,.cb-timeline__content{flex:1;min-width:0;padding-bottom:var(--cb-space-4, 1rem)}.cb-timeline--left .cb-timeline__opposite:empty,.cb-timeline--right .cb-timeline__opposite:empty{display:none}.cb-timeline--left .cb-timeline__opposite{flex:0 0 auto;text-align:right}.cb-timeline--right .cb-timeline__event{flex-direction:row-reverse}.cb-timeline--right .cb-timeline__content{text-align:right}.cb-timeline--right .cb-timeline__opposite{flex:0 0 auto}.cb-timeline--alternate .cb-timeline__opposite{text-align:right}.cb-timeline--alternate .cb-timeline__event--alt{flex-direction:row-reverse}.cb-timeline--alternate .cb-timeline__event--alt .cb-timeline__opposite{text-align:left}.cb-timeline--alternate .cb-timeline__event--alt .cb-timeline__content{text-align:right}.cb-timeline__separator{display:flex;flex-direction:column;align-items:center;flex:none}.cb-timeline__marker{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:.875rem;height:.875rem;margin-top:.2rem;border-radius:50%;background:var(--cb-timeline-color);color:#fff;box-shadow:0 0 0 3px var(--cb-color-bg, #fff),0 0 0 4px var(--cb-color-border)}.cb-timeline__marker--icon{width:1.75rem;height:1.75rem;margin-top:0}.cb-timeline__connector{flex:1;width:2px;margin:.25rem 0;background:var(--cb-color-border)}.cb-timeline__date{display:block;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-timeline__title{display:block;color:var(--cb-color-text-strong)}.cb-timeline__description{margin:.25rem 0 0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem)}.cb-timeline--horizontal{flex-direction:row;overflow-x:auto}.cb-timeline--horizontal .cb-timeline__event{flex:1 0 10rem;flex-direction:column;min-height:0;gap:var(--cb-space-2, .5rem)}.cb-timeline--horizontal .cb-timeline__event--alt{flex-direction:column-reverse}.cb-timeline--horizontal .cb-timeline__opposite,.cb-timeline--horizontal .cb-timeline__content{flex:0 0 auto;padding-bottom:0;padding-inline-end:var(--cb-space-3, .75rem);text-align:left}.cb-timeline--horizontal .cb-timeline__separator{flex-direction:row}.cb-timeline--horizontal .cb-timeline__marker{margin-top:0}.cb-timeline--horizontal .cb-timeline__connector{width:auto;height:2px;margin:0 .25rem}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], contentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbTimelineContentTemplate), { isSignal: true }] }], oppositeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbTimelineOppositeTemplate), { isSignal: true }] }], markerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbTimelineMarkerTemplate), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CbTimeline };
+export { CbTimeline, CbTimelineContentTemplate, CbTimelineMarkerTemplate, CbTimelineOppositeTemplate };

package/fesm2022/caribeng-ui-toast.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { signal, Injectable, inject, input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 import { CbIcon } from '@caribeng/ui/icon';
 
 let nextId = 0;
@@ -94,6 +95,8 @@ const ICONS = {
  */
 class CbToast {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.service = inject(CbToastService);
         this.position = input('top-right', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
@@ -125,7 +128,7 @@ class CbToast {
             <button
               type="button"
               class="cb-toast__close"
-              aria-label="Cerrar"
+              [attr.aria-label]="t().close"
               (click)="service.remove(toast.id)"
             >
               <cb-icon name="x" size="sm" />
@@ -134,7 +137,7 @@ class CbToast {
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:contents}.cb-toast-wrap{position:fixed;z-index:var(--cb-z-toast);display:flex;flex-direction:column;gap:var(--cb-space-3);width:22rem;max-width:calc(100vw - 2 * var(--cb-space-4));pointer-events:none}.cb-toast-wrap--top-right{top:var(--cb-space-5);right:var(--cb-space-5)}.cb-toast-wrap--top-left{top:var(--cb-space-5);left:var(--cb-space-5)}.cb-toast-wrap--top-center{top:var(--cb-space-5);left:50%;transform:translate(-50%)}.cb-toast-wrap--bottom-right{bottom:var(--cb-space-5);right:var(--cb-space-5);flex-direction:column-reverse}.cb-toast-wrap--bottom-left{bottom:var(--cb-space-5);left:var(--cb-space-5);flex-direction:column-reverse}.cb-toast-wrap--bottom-center{bottom:var(--cb-space-5);left:50%;transform:translate(-50%);flex-direction:column-reverse}.cb-toast{--_accent: var(--cb-color-info-500);pointer-events:auto;display:flex;align-items:flex-start;gap:var(--cb-space-3);padding:var(--cb-space-4);background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border);border-left:4px solid var(--_accent);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-lg);font-family:var(--cb-font-sans);animation:cb-toast-in var(--cb-duration-normal) var(--cb-ease-out)}.cb-toast--success{--_accent: var(--cb-color-success-500)}.cb-toast--info{--_accent: var(--cb-color-info-500)}.cb-toast--warning{--_accent: var(--cb-color-warning-500)}.cb-toast--danger{--_accent: var(--cb-color-danger-500)}.cb-toast--help{--_accent: var(--cb-color-help-500)}.cb-toast--primary{--_accent: var(--cb-color-primary-500)}.cb-toast--secondary{--_accent: var(--cb-color-surface-500)}.cb-toast--contrast{--_accent: var(--cb-color-surface-900)}.cb-toast__icon{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:var(--cb-radius-full);background:color-mix(in srgb,var(--_accent) 16%,transparent);color:var(--_accent);font-weight:var(--cb-font-weight-bold);font-size:var(--cb-text-sm)}.cb-toast__content{flex:1 1 auto;min-width:0}.cb-toast__summary{margin:0;font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong)}.cb-toast__detail{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-toast__close{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-toast__close:hover{background:var(--cb-color-surface-100);color:var(--cb-color-text)}.cb-toast__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}@keyframes cb-toast-in{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.cb-toast{animation:none}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:contents}.cb-toast-wrap{position:fixed;z-index:var(--cb-z-toast);display:flex;flex-direction:column;gap:var(--cb-space-3);width:22rem;max-width:calc(100vw - 2 * var(--cb-space-4));pointer-events:none}.cb-toast-wrap--top-right{top:var(--cb-space-5);right:var(--cb-space-5)}.cb-toast-wrap--top-left{top:var(--cb-space-5);left:var(--cb-space-5)}.cb-toast-wrap--top-center{top:var(--cb-space-5);left:50%;transform:translate(-50%)}.cb-toast-wrap--bottom-right{bottom:var(--cb-space-5);right:var(--cb-space-5);flex-direction:column-reverse}.cb-toast-wrap--bottom-left{bottom:var(--cb-space-5);left:var(--cb-space-5);flex-direction:column-reverse}.cb-toast-wrap--bottom-center{bottom:var(--cb-space-5);left:50%;transform:translate(-50%);flex-direction:column-reverse}.cb-toast{--_accent: var(--cb-color-info-500);pointer-events:auto;display:flex;align-items:flex-start;gap:var(--cb-space-3);padding:var(--cb-space-4);background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border);border-left:4px solid var(--_accent);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-lg);font-family:var(--cb-font-sans);animation:cb-toast-in var(--cb-duration-normal) var(--cb-ease-out)}.cb-toast--success{--_accent: var(--cb-color-success-500)}.cb-toast--info{--_accent: var(--cb-color-info-500)}.cb-toast--warning{--_accent: var(--cb-color-warning-500)}.cb-toast--danger{--_accent: var(--cb-color-danger-500)}.cb-toast--help{--_accent: var(--cb-color-help-500)}.cb-toast--primary{--_accent: var(--cb-color-primary-500)}.cb-toast--secondary{--_accent: var(--cb-color-surface-500)}.cb-toast--contrast{--_accent: var(--cb-color-surface-900)}.cb-toast__icon{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:var(--cb-radius-full);background:color-mix(in srgb,var(--_accent) 16%,transparent);color:var(--_accent);font-weight:var(--cb-font-weight-bold);font-size:var(--cb-text-sm)}.cb-toast__content{flex:1 1 auto;min-width:0}.cb-toast__summary{margin:0;font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong)}.cb-toast__detail{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-toast__close{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-toast__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-toast__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}@keyframes cb-toast-in{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.cb-toast{animation:none}}\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: CbToast, decorators: [{
             type: Component,
@@ -161,7 +164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             <button
               type="button"
               class="cb-toast__close"
-              aria-label="Cerrar"
+              [attr.aria-label]="t().close"
               (click)="service.remove(toast.id)"
             >
               <cb-icon name="x" size="sm" />
@@ -170,7 +173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         </div>
       }
     </div>
-  `, styles: [":host{display:contents}.cb-toast-wrap{position:fixed;z-index:var(--cb-z-toast);display:flex;flex-direction:column;gap:var(--cb-space-3);width:22rem;max-width:calc(100vw - 2 * var(--cb-space-4));pointer-events:none}.cb-toast-wrap--top-right{top:var(--cb-space-5);right:var(--cb-space-5)}.cb-toast-wrap--top-left{top:var(--cb-space-5);left:var(--cb-space-5)}.cb-toast-wrap--top-center{top:var(--cb-space-5);left:50%;transform:translate(-50%)}.cb-toast-wrap--bottom-right{bottom:var(--cb-space-5);right:var(--cb-space-5);flex-direction:column-reverse}.cb-toast-wrap--bottom-left{bottom:var(--cb-space-5);left:var(--cb-space-5);flex-direction:column-reverse}.cb-toast-wrap--bottom-center{bottom:var(--cb-space-5);left:50%;transform:translate(-50%);flex-direction:column-reverse}.cb-toast{--_accent: var(--cb-color-info-500);pointer-events:auto;display:flex;align-items:flex-start;gap:var(--cb-space-3);padding:var(--cb-space-4);background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border);border-left:4px solid var(--_accent);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-lg);font-family:var(--cb-font-sans);animation:cb-toast-in var(--cb-duration-normal) var(--cb-ease-out)}.cb-toast--success{--_accent: var(--cb-color-success-500)}.cb-toast--info{--_accent: var(--cb-color-info-500)}.cb-toast--warning{--_accent: var(--cb-color-warning-500)}.cb-toast--danger{--_accent: var(--cb-color-danger-500)}.cb-toast--help{--_accent: var(--cb-color-help-500)}.cb-toast--primary{--_accent: var(--cb-color-primary-500)}.cb-toast--secondary{--_accent: var(--cb-color-surface-500)}.cb-toast--contrast{--_accent: var(--cb-color-surface-900)}.cb-toast__icon{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:var(--cb-radius-full);background:color-mix(in srgb,var(--_accent) 16%,transparent);color:var(--_accent);font-weight:var(--cb-font-weight-bold);font-size:var(--cb-text-sm)}.cb-toast__content{flex:1 1 auto;min-width:0}.cb-toast__summary{margin:0;font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong)}.cb-toast__detail{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-toast__close{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-toast__close:hover{background:var(--cb-color-surface-100);color:var(--cb-color-text)}.cb-toast__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}@keyframes cb-toast-in{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.cb-toast{animation:none}}\n"] }]
+  `, styles: [":host{display:contents}.cb-toast-wrap{position:fixed;z-index:var(--cb-z-toast);display:flex;flex-direction:column;gap:var(--cb-space-3);width:22rem;max-width:calc(100vw - 2 * var(--cb-space-4));pointer-events:none}.cb-toast-wrap--top-right{top:var(--cb-space-5);right:var(--cb-space-5)}.cb-toast-wrap--top-left{top:var(--cb-space-5);left:var(--cb-space-5)}.cb-toast-wrap--top-center{top:var(--cb-space-5);left:50%;transform:translate(-50%)}.cb-toast-wrap--bottom-right{bottom:var(--cb-space-5);right:var(--cb-space-5);flex-direction:column-reverse}.cb-toast-wrap--bottom-left{bottom:var(--cb-space-5);left:var(--cb-space-5);flex-direction:column-reverse}.cb-toast-wrap--bottom-center{bottom:var(--cb-space-5);left:50%;transform:translate(-50%);flex-direction:column-reverse}.cb-toast{--_accent: var(--cb-color-info-500);pointer-events:auto;display:flex;align-items:flex-start;gap:var(--cb-space-3);padding:var(--cb-space-4);background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border);border-left:4px solid var(--_accent);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-lg);font-family:var(--cb-font-sans);animation:cb-toast-in var(--cb-duration-normal) var(--cb-ease-out)}.cb-toast--success{--_accent: var(--cb-color-success-500)}.cb-toast--info{--_accent: var(--cb-color-info-500)}.cb-toast--warning{--_accent: var(--cb-color-warning-500)}.cb-toast--danger{--_accent: var(--cb-color-danger-500)}.cb-toast--help{--_accent: var(--cb-color-help-500)}.cb-toast--primary{--_accent: var(--cb-color-primary-500)}.cb-toast--secondary{--_accent: var(--cb-color-surface-500)}.cb-toast--contrast{--_accent: var(--cb-color-surface-900)}.cb-toast__icon{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:var(--cb-radius-full);background:color-mix(in srgb,var(--_accent) 16%,transparent);color:var(--_accent);font-weight:var(--cb-font-weight-bold);font-size:var(--cb-text-sm)}.cb-toast__content{flex:1 1 auto;min-width:0}.cb-toast__summary{margin:0;font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong)}.cb-toast__detail{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-toast__close{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-toast__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-toast__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}@keyframes cb-toast-in{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.cb-toast{animation:none}}\n"] }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 
 /*