@caribeng/ui 22.1.1 → 22.4.0

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 }] }] } });
 
 /*

package/fesm2022/caribeng-ui-togglebutton.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, model, output, computed, signal, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CbIcon } from '@caribeng/ui/icon';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
 
 let nextUid = 0;
 /**
@@ -16,9 +16,11 @@ let nextUid = 0;
  */
 class CbToggleButton {
     constructor() {
-        this.onLabel = input('Sí', /* @ts-ignore */
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.onLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "onLabel" }] : /* istanbul ignore next */ []));
-        this.offLabel = input('No', /* @ts-ignore */
+        this.offLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "offLabel" }] : /* istanbul ignore next */ []));
         this.onIcon = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "onIcon" }] : /* istanbul ignore next */ []));
@@ -40,7 +42,7 @@ class CbToggleButton {
         this.changed = output();
         this.checked = computed(() => this.value(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-        this.label = computed(() => (this.value() ? this.onLabel() : this.offLabel()), /* @ts-ignore */
+        this.label = computed(() => (this.value() ? (this.onLabel() ?? this.t().yes) : (this.offLabel() ?? this.t().no)), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.icon = computed(() => (this.value() ? this.onIcon() : this.offIcon()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
@@ -99,7 +101,7 @@ class CbToggleButton {
       }
       <span class="cb-togglebutton__label">{{ label() }}</span>
     </button>
-  `, isInline: true, styles: [":host{display:inline-flex}.cb-togglebutton{display:inline-flex;align-items:center;gap:var(--cb-space-2);height:2.5rem;padding:0 var(--cb-space-4);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-weight:var(--cb-font-weight-medium);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease),border-color var(--cb-duration-fast) var(--cb-ease),color var(--cb-duration-fast) var(--cb-ease)}.cb-togglebutton--sm{height:2.125rem;padding:0 var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-togglebutton--lg{height:2.875rem;padding:0 var(--cb-space-5);font-size:var(--cb-text-lg)}.cb-togglebutton:hover:not(:disabled):not(.cb-is-on){background-color:var(--cb-color-surface-100)}.cb-togglebutton:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-togglebutton.cb-is-on{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-togglebutton:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-togglebutton.cb-is-invalid{border-color:var(--cb-color-danger)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:inline-flex}.cb-togglebutton{display:inline-flex;align-items:center;gap:var(--cb-space-2);height:2.5rem;padding:0 var(--cb-space-4);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-weight:var(--cb-font-weight-medium);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease),border-color var(--cb-duration-fast) var(--cb-ease),color var(--cb-duration-fast) var(--cb-ease)}.cb-togglebutton--sm{height:2.125rem;padding:0 var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-togglebutton--lg{height:2.875rem;padding:0 var(--cb-space-5);font-size:var(--cb-text-lg)}.cb-togglebutton:hover:not(:disabled):not(.cb-is-on){background-color:var(--cb-color-surface-hover)}.cb-togglebutton:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-togglebutton.cb-is-on{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-togglebutton:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-togglebutton.cb-is-invalid{border-color:var(--cb-color-danger)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbToggleButton, decorators: [{
             type: Component,
@@ -128,7 +130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       }
       <span class="cb-togglebutton__label">{{ label() }}</span>
     </button>
-  `, styles: [":host{display:inline-flex}.cb-togglebutton{display:inline-flex;align-items:center;gap:var(--cb-space-2);height:2.5rem;padding:0 var(--cb-space-4);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-weight:var(--cb-font-weight-medium);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease),border-color var(--cb-duration-fast) var(--cb-ease),color var(--cb-duration-fast) var(--cb-ease)}.cb-togglebutton--sm{height:2.125rem;padding:0 var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-togglebutton--lg{height:2.875rem;padding:0 var(--cb-space-5);font-size:var(--cb-text-lg)}.cb-togglebutton:hover:not(:disabled):not(.cb-is-on){background-color:var(--cb-color-surface-100)}.cb-togglebutton:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-togglebutton.cb-is-on{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-togglebutton:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-togglebutton.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
+  `, styles: [":host{display:inline-flex}.cb-togglebutton{display:inline-flex;align-items:center;gap:var(--cb-space-2);height:2.5rem;padding:0 var(--cb-space-4);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-weight:var(--cb-font-weight-medium);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease),border-color var(--cb-duration-fast) var(--cb-ease),color var(--cb-duration-fast) var(--cb-ease)}.cb-togglebutton--sm{height:2.125rem;padding:0 var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-togglebutton--lg{height:2.875rem;padding:0 var(--cb-space-5);font-size:var(--cb-text-lg)}.cb-togglebutton:hover:not(:disabled):not(.cb-is-on){background-color:var(--cb-color-surface-hover)}.cb-togglebutton:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-togglebutton.cb-is-on{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-togglebutton:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-togglebutton.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
         }], propDecorators: { onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: false }] }], onIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onIcon", required: false }] }], offIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "offIcon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-toolbar.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Toolbar de CaribeNG: contenedor horizontal accesible (`role="toolbar"`) para
@@ -17,12 +18,14 @@ import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@a
  */
 class CbToolbar {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Etiqueta accesible para el contenedor `role="toolbar"`. */
-        this.ariaLabel = input('Barra de herramientas', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbToolbar, isStandalone: true, selector: "cb-toolbar", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "attr.aria-label": "ariaLabel() || null" }, classAttribute: "cb-toolbar" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbToolbar, isStandalone: true, selector: "cb-toolbar", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "attr.aria-label": "(ariaLabel() ?? t().toolbar) || null" }, classAttribute: "cb-toolbar" }, ngImport: i0, template: `
     <div class="cb-toolbar__group cb-toolbar__start">
       <ng-content select="[cb-toolbar-start]" />
       <ng-content />
@@ -40,7 +43,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'cb-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
                         class: 'cb-toolbar',
                         role: 'toolbar',
-                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-label]': '(ariaLabel() ?? t().toolbar) || null',
                     }, template: `
     <div class="cb-toolbar__group cb-toolbar__start">
       <ng-content select="[cb-toolbar-start]" />