@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-badge.mjs

@@ -23,9 +23,12 @@ class CbBadge {
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /** Muestra solo un punto (sin texto). */
         this.dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Nombre accesible que sustituye al valor (p. ej. "3 mensajes sin leer"). Sin él, un `dot` es decorativo. */
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbBadge, isStandalone: true, selector: "cb-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "'cb-badge cb-badge--' + severity() + ' cb-badge--' + size()", "class.cb-badge--dot": "dot()" }, classAttribute: "cb-badge" }, ngImport: i0, template: `@if (!dot()) {{{ value() }}}`, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:var(--cb-radius-full);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-bold);line-height:1;color:var(--_fg);background-color:var(--_bg)}:host(.cb-badge--sm){min-width:1rem;height:1rem;font-size:.625rem;padding:0 .25rem}:host(.cb-badge--lg){min-width:1.5rem;height:1.5rem;font-size:var(--cb-text-sm);padding:0 .5rem}:host(.cb-badge--dot){min-width:.625rem;width:.625rem;height:.625rem;padding:0}:host(.cb-badge--dot.cb-badge--sm){min-width:.5rem;width:.5rem;height:.5rem}:host(.cb-badge--dot.cb-badge--lg){min-width:.75rem;width:.75rem;height:.75rem}:host(.cb-badge--primary){--_bg: var(--cb-color-primary-500);--_fg: var(--cb-color-primary-contrast)}:host(.cb-badge--secondary){--_bg: var(--cb-color-surface-500);--_fg: var(--cb-color-surface-50)}:host(.cb-badge--success){--_bg: var(--cb-color-success-500);--_fg: var(--cb-color-success-contrast)}:host(.cb-badge--info){--_bg: var(--cb-color-info-500);--_fg: var(--cb-color-info-contrast)}:host(.cb-badge--warning){--_bg: var(--cb-color-warning-500);--_fg: var(--cb-color-warning-contrast)}:host(.cb-badge--danger){--_bg: var(--cb-color-danger-500);--_fg: var(--cb-color-danger-contrast)}:host(.cb-badge--help){--_bg: var(--cb-color-help-500);--_fg: var(--cb-color-help-contrast)}:host(.cb-badge--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbBadge, isStandalone: true, selector: "cb-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "'cb-badge cb-badge--' + severity() + ' cb-badge--' + size()", "class.cb-badge--dot": "dot()", "attr.role": "ariaLabel() ? \"img\" : null", "attr.aria-label": "ariaLabel() || null", "attr.aria-hidden": "dot() && !ariaLabel() ? \"true\" : null" }, classAttribute: "cb-badge" }, ngImport: i0, template: `@if (!dot()) {{{ value() }}}`, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:var(--cb-radius-full);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-bold);line-height:1;color:var(--_fg);background-color:var(--_bg)}:host(.cb-badge--sm){min-width:1rem;height:1rem;font-size:.625rem;padding:0 .25rem}:host(.cb-badge--lg){min-width:1.5rem;height:1.5rem;font-size:var(--cb-text-sm);padding:0 .5rem}:host(.cb-badge--dot){min-width:.625rem;width:.625rem;height:.625rem;padding:0}:host(.cb-badge--dot.cb-badge--sm){min-width:.5rem;width:.5rem;height:.5rem}:host(.cb-badge--dot.cb-badge--lg){min-width:.75rem;width:.75rem;height:.75rem}:host(.cb-badge--primary){--_bg: var(--cb-color-primary-500);--_fg: var(--cb-color-primary-contrast)}:host(.cb-badge--secondary){--_bg: var(--cb-color-surface-500);--_fg: var(--cb-color-surface-50)}:host(.cb-badge--success){--_bg: var(--cb-color-success-500);--_fg: var(--cb-color-success-contrast)}:host(.cb-badge--info){--_bg: var(--cb-color-info-500);--_fg: var(--cb-color-info-contrast)}:host(.cb-badge--warning){--_bg: var(--cb-color-warning-500);--_fg: var(--cb-color-warning-contrast)}:host(.cb-badge--danger){--_bg: var(--cb-color-danger-500);--_fg: var(--cb-color-danger-contrast)}:host(.cb-badge--help){--_bg: var(--cb-color-help-500);--_fg: var(--cb-color-help-contrast)}:host(.cb-badge--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbBadge, decorators: [{
             type: Component,
@@ -33,8 +36,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         class: 'cb-badge',
                         '[class]': "'cb-badge cb-badge--' + severity() + ' cb-badge--' + size()",
                         '[class.cb-badge--dot]': 'dot()',
+                        '[attr.role]': 'ariaLabel() ? "img" : null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-hidden]': 'dot() && !ariaLabel() ? "true" : null',
                     }, template: `@if (!dot()) {{{ value() }}}`, styles: [":host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:var(--cb-radius-full);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-bold);line-height:1;color:var(--_fg);background-color:var(--_bg)}:host(.cb-badge--sm){min-width:1rem;height:1rem;font-size:.625rem;padding:0 .25rem}:host(.cb-badge--lg){min-width:1.5rem;height:1.5rem;font-size:var(--cb-text-sm);padding:0 .5rem}:host(.cb-badge--dot){min-width:.625rem;width:.625rem;height:.625rem;padding:0}:host(.cb-badge--dot.cb-badge--sm){min-width:.5rem;width:.5rem;height:.5rem}:host(.cb-badge--dot.cb-badge--lg){min-width:.75rem;width:.75rem;height:.75rem}:host(.cb-badge--primary){--_bg: var(--cb-color-primary-500);--_fg: var(--cb-color-primary-contrast)}:host(.cb-badge--secondary){--_bg: var(--cb-color-surface-500);--_fg: var(--cb-color-surface-50)}:host(.cb-badge--success){--_bg: var(--cb-color-success-500);--_fg: var(--cb-color-success-contrast)}:host(.cb-badge--info){--_bg: var(--cb-color-info-500);--_fg: var(--cb-color-info-contrast)}:host(.cb-badge--warning){--_bg: var(--cb-color-warning-500);--_fg: var(--cb-color-warning-contrast)}:host(.cb-badge--danger){--_bg: var(--cb-color-danger-500);--_fg: var(--cb-color-danger-contrast)}:host(.cb-badge--help){--_bg: var(--cb-color-help-500);--_fg: var(--cb-color-help-contrast)}:host(.cb-badge--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';
 }

package/fesm2022/caribeng-ui-blockui.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * BlockUI de CaribeNG: bloquea la interacción sobre el contenido proyectado
@@ -8,20 +9,26 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbBlockUi {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.blocked = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "blocked" }] : /* istanbul ignore next */ []));
+        /** Texto que anuncia el lector de pantalla al bloquear. Por defecto, "Cargando" del idioma activo. */
+        this.message = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbBlockUi, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbBlockUi, isStandalone: true, selector: "cb-block-ui", inputs: { blocked: { classPropertyName: "blocked", publicName: "blocked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-is-blocked": "blocked()", "attr.aria-busy": "blocked()" }, classAttribute: "cb-block-ui" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbBlockUi, isStandalone: true, selector: "cb-block-ui", inputs: { blocked: { classPropertyName: "blocked", publicName: "blocked", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-is-blocked": "blocked()", "attr.aria-busy": "blocked()" }, classAttribute: "cb-block-ui" }, ngImport: i0, template: `
     <div class="cb-block-ui__content" [attr.inert]="blocked() ? '' : null">
       <ng-content />
     </div>
     @if (blocked()) {
       <div class="cb-block-ui__mask" role="status" aria-live="polite">
         <cb-icon name="loader" [size]="22" [spin]="true" aria-hidden="true" />
+        <span class="cb-block-ui__sr">{{ message() ?? t().loading }}</span>
       </div>
     }
-  `, isInline: true, styles: [":host{position:relative;display:block;width:100%;font-family:var(--cb-font-sans)}.cb-block-ui__mask{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;border-radius:var(--cb-radius-lg);background:#0f172a59;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);color:#fff}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{position:relative;display:block;width:100%;font-family:var(--cb-font-sans)}.cb-block-ui__mask{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;border-radius:var(--cb-radius-lg);background:#0f172a59;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);color:#fff}.cb-block-ui__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\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: CbBlockUi, decorators: [{
             type: Component,
@@ -36,10 +43,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     @if (blocked()) {
       <div class="cb-block-ui__mask" role="status" aria-live="polite">
         <cb-icon name="loader" [size]="22" [spin]="true" aria-hidden="true" />
+        <span class="cb-block-ui__sr">{{ message() ?? t().loading }}</span>
       </div>
     }
-  `, styles: [":host{position:relative;display:block;width:100%;font-family:var(--cb-font-sans)}.cb-block-ui__mask{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;border-radius:var(--cb-radius-lg);background:#0f172a59;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);color:#fff}\n"] }]
-        }], propDecorators: { blocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "blocked", required: false }] }] } });
+  `, styles: [":host{position:relative;display:block;width:100%;font-family:var(--cb-font-sans)}.cb-block-ui__mask{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;border-radius:var(--cb-radius-lg);background:#0f172a59;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);color:#fff}.cb-block-ui__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
+        }], propDecorators: { blocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "blocked", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/caribeng-ui-breadcrumb.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 /**
  * Breadcrumb de CaribeNG: rastro de navegación jerárquica.
@@ -16,22 +17,31 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbBreadcrumb {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Items sin los de `visible: false`. */
+        this.visibleItems = computed(() => cbVisibleItems(this.items()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
         /** Icono separador entre elementos. */
         this.separator = input('chevron-right', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
         /** Se emite al hacer clic en un elemento con enlace. */
         this.itemClick = output();
     }
+    select(item, event) {
+        cbRunCommand(item, event);
+        this.itemClick.emit(item);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbBreadcrumb, isStandalone: true, selector: "cb-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "cb-breadcrumb" }, ngImport: i0, template: `
-    <nav aria-label="Breadcrumb">
+    <nav [attr.aria-label]="t().breadcrumb">
       <ol class="cb-breadcrumb__list">
-        @for (item of items(); track $index; let last = $last) {
+        @for (item of visibleItems(); track $index; let last = $last) {
           <li class="cb-breadcrumb__item">
             @if (item.url && !last) {
-              <a class="cb-breadcrumb__link" [href]="item.url" (click)="itemClick.emit(item)">
+              <a class="cb-breadcrumb__link" [href]="item.url" (click)="select(item, $event)">
                 @if (item.icon) { <cb-icon [name]="item.icon" [size]="15" aria-hidden="true" /> }
                 <span>{{ item.label }}</span>
               </a>
@@ -53,12 +63,12 @@ class CbBreadcrumb {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbBreadcrumb, decorators: [{
             type: Component,
             args: [{ selector: 'cb-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-breadcrumb' }, template: `
-    <nav aria-label="Breadcrumb">
+    <nav [attr.aria-label]="t().breadcrumb">
       <ol class="cb-breadcrumb__list">
-        @for (item of items(); track $index; let last = $last) {
+        @for (item of visibleItems(); track $index; let last = $last) {
           <li class="cb-breadcrumb__item">
             @if (item.url && !last) {
-              <a class="cb-breadcrumb__link" [href]="item.url" (click)="itemClick.emit(item)">
+              <a class="cb-breadcrumb__link" [href]="item.url" (click)="select(item, $event)">
                 @if (item.icon) { <cb-icon [name]="item.icon" [size]="15" aria-hidden="true" /> }
                 <span>{{ item.label }}</span>
               </a>

package/fesm2022/caribeng-ui-button.mjs

@@ -35,6 +35,18 @@ class CbButton {
         /** Tipo nativo del botón. */
         this.type = input('button', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /** Nombre accesible (imprescindible en botones de solo icono). */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Tipo de elemento que abre (`menu`, `dialog`, `listbox`…). */
+        this.ariaHaspopup = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaHaspopup" }] : /* istanbul ignore next */ []));
+        /** Si lo que abre está desplegado. */
+        this.ariaExpanded = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []));
+        /** Id del elemento que controla. */
+        this.ariaControls = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
         this.variantClasses = computed(() => {
             const severity = this.severity();
             const classes = [
@@ -58,7 +70,7 @@ class CbButton {
         'help',
     ]); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbButton, isStandalone: true, selector: "cb-button", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-button-host--block": "fullWidth()" }, classAttribute: "cb-button-host" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbButton, isStandalone: true, selector: "cb-button", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaHaspopup: { classPropertyName: "ariaHaspopup", publicName: "ariaHaspopup", isSignal: true, isRequired: false, transformFunction: null }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "ariaExpanded", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-button-host--block": "fullWidth()" }, classAttribute: "cb-button-host" }, ngImport: i0, template: `
     <button
       class="cb-button"
       [class]="variantClasses()"
@@ -67,6 +79,10 @@ class CbButton {
       [attr.type]="type()"
       [disabled]="disabled() || loading()"
       [attr.aria-busy]="loading() ? 'true' : null"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-haspopup]="ariaHaspopup() || null"
+      [attr.aria-expanded]="ariaExpanded() ?? null"
+      [attr.aria-controls]="ariaControls() || null"
     >
       @if (loading()) {
         <cb-icon class="cb-button__spinner" name="loader" spin [size]="16" aria-hidden="true" />
@@ -91,6 +107,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       [attr.type]="type()"
       [disabled]="disabled() || loading()"
       [attr.aria-busy]="loading() ? 'true' : null"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-haspopup]="ariaHaspopup() || null"
+      [attr.aria-expanded]="ariaExpanded() ?? null"
+      [attr.aria-controls]="ariaControls() || null"
     >
       @if (loading()) {
         <cb-icon class="cb-button__spinner" name="loader" spin [size]="16" aria-hidden="true" />
@@ -100,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       </span>
     </button>
   `, styles: [":host{display:inline-flex}:host(.cb-button-host--block){display:flex;width:100%}:host(.cb-button-host--block) .cb-button{width:100%}.cb-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-2);box-sizing:border-box;border:var(--cb-border-width) solid transparent;border-radius:var(--cb-radius-md);font-family:var(--cb-font-sans);font-weight:var(--cb-font-weight-semibold);line-height:var(--cb-line-height-tight);text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:transparent;transition:background-color var(--cb-duration-fast) var(--cb-ease),color var(--cb-duration-fast) var(--cb-ease),border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-button:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-button:disabled,.cb-button.cb-is-disabled{cursor:not-allowed;opacity:.55}.cb-button.cb-is-loading{cursor:progress}.cb-button--primary{--_50: var(--cb-color-primary-50);--_100: var(--cb-color-primary-100);--_200: var(--cb-color-primary-200);--_300: var(--cb-color-primary-300);--_400: var(--cb-color-primary-400);--_500: var(--cb-color-primary-500);--_600: var(--cb-color-primary-600);--_700: var(--cb-color-primary-700);--_950: var(--cb-color-primary-950)}.cb-button--success{--_50: var(--cb-color-success-50);--_100: var(--cb-color-success-100);--_200: var(--cb-color-success-200);--_300: var(--cb-color-success-300);--_400: var(--cb-color-success-400);--_500: var(--cb-color-success-500);--_600: var(--cb-color-success-600);--_700: var(--cb-color-success-700);--_950: var(--cb-color-success-950)}.cb-button--info{--_50: var(--cb-color-info-50);--_100: var(--cb-color-info-100);--_200: var(--cb-color-info-200);--_300: var(--cb-color-info-300);--_400: var(--cb-color-info-400);--_500: var(--cb-color-info-500);--_600: var(--cb-color-info-600);--_700: var(--cb-color-info-700);--_950: var(--cb-color-info-950)}.cb-button--warning{--_50: var(--cb-color-warning-50);--_100: var(--cb-color-warning-100);--_200: var(--cb-color-warning-200);--_300: var(--cb-color-warning-300);--_400: var(--cb-color-warning-400);--_500: var(--cb-color-warning-500);--_600: var(--cb-color-warning-600);--_700: var(--cb-color-warning-700);--_950: var(--cb-color-warning-950)}.cb-button--danger{--_50: var(--cb-color-danger-50);--_100: var(--cb-color-danger-100);--_200: var(--cb-color-danger-200);--_300: var(--cb-color-danger-300);--_400: var(--cb-color-danger-400);--_500: var(--cb-color-danger-500);--_600: var(--cb-color-danger-600);--_700: var(--cb-color-danger-700);--_950: var(--cb-color-danger-950)}.cb-button--help{--_50: var(--cb-color-help-50);--_100: var(--cb-color-help-100);--_200: var(--cb-color-help-200);--_300: var(--cb-color-help-300);--_400: var(--cb-color-help-400);--_500: var(--cb-color-help-500);--_600: var(--cb-color-help-600);--_700: var(--cb-color-help-700);--_950: var(--cb-color-help-950)}.cb-button--chromatic.cb-button--solid{background-color:var(--_500);color:#fff;border-color:var(--_500)}.cb-button--chromatic.cb-button--solid:hover:not(:disabled):not(.cb-is-loading){background-color:var(--_600);border-color:var(--_600)}.cb-button--chromatic.cb-button--solid:active:not(:disabled):not(.cb-is-loading){background-color:var(--_700);border-color:var(--_700)}.cb-button--chromatic.cb-button--outlined{color:var(--_500);border-color:var(--_200)}.cb-button--chromatic.cb-button--outlined:hover:not(:disabled):not(.cb-is-loading){background-color:var(--_50)}.cb-button--chromatic.cb-button--outlined:active:not(:disabled):not(.cb-is-loading){background-color:var(--_100)}.cb-button--chromatic.cb-button--text{color:var(--_500)}.cb-button--chromatic.cb-button--text:hover:not(:disabled):not(.cb-is-loading){background-color:var(--_50)}.cb-button--chromatic.cb-button--text:active:not(:disabled):not(.cb-is-loading){background-color:var(--_100)}:host-context([data-theme=\"dark\"]) .cb-button--chromatic.cb-button--solid{background-color:var(--_400);color:var(--_950);border-color:var(--_400)}:host-context([data-theme=\"dark\"]) .cb-button--chromatic.cb-button--solid:hover:not(:disabled):not(.cb-is-loading){background-color:var(--_300);border-color:var(--_300)}:host-context([data-theme=\"dark\"]) .cb-button--chromatic.cb-button--solid:active:not(:disabled):not(.cb-is-loading){background-color:var(--_200);border-color:var(--_200)}:host-context([data-theme=\"dark\"]) .cb-button--chromatic.cb-button--outlined{color:var(--_400);border-color:var(--_700)}:host-context([data-theme=\"dark\"]) .cb-button--chromatic.cb-button--text{color:var(--_400)}:host-context([data-theme=\"dark\"]) .cb-button--chromatic.cb-button--outlined:hover:not(:disabled):not(.cb-is-loading),:host-context([data-theme=\"dark\"]) .cb-button--chromatic.cb-button--text:hover:not(:disabled):not(.cb-is-loading){background-color:color-mix(in srgb,var(--_400) 6%,transparent)}:host-context([data-theme=\"dark\"]) .cb-button--chromatic.cb-button--outlined:active:not(:disabled):not(.cb-is-loading),:host-context([data-theme=\"dark\"]) .cb-button--chromatic.cb-button--text:active:not(:disabled):not(.cb-is-loading){background-color:color-mix(in srgb,var(--_400) 16%,transparent)}.cb-button--secondary.cb-button--solid{background-color:var(--cb-color-surface-100);color:var(--cb-color-surface-600);border-color:var(--cb-color-surface-100)}.cb-button--secondary.cb-button--solid:hover:not(:disabled):not(.cb-is-loading){background-color:var(--cb-color-surface-200);border-color:var(--cb-color-surface-200)}.cb-button--secondary.cb-button--solid:active:not(:disabled):not(.cb-is-loading){background-color:var(--cb-color-surface-300);border-color:var(--cb-color-surface-300)}.cb-button--secondary.cb-button--outlined{color:var(--cb-color-surface-500);border-color:var(--cb-color-surface-200)}.cb-button--secondary.cb-button--text{color:var(--cb-color-surface-500)}.cb-button--secondary.cb-button--outlined:hover:not(:disabled):not(.cb-is-loading),.cb-button--secondary.cb-button--text:hover:not(:disabled):not(.cb-is-loading){background-color:var(--cb-color-surface-50)}.cb-button--secondary.cb-button--outlined:active:not(:disabled):not(.cb-is-loading),.cb-button--secondary.cb-button--text:active:not(:disabled):not(.cb-is-loading){background-color:var(--cb-color-surface-100)}:host-context([data-theme=\"dark\"]) .cb-button--secondary.cb-button--solid{background-color:var(--cb-color-surface-800);color:var(--cb-color-surface-300);border-color:var(--cb-color-surface-800)}:host-context([data-theme=\"dark\"]) .cb-button--secondary.cb-button--solid:hover:not(:disabled):not(.cb-is-loading){background-color:var(--cb-color-surface-700);border-color:var(--cb-color-surface-700)}:host-context([data-theme=\"dark\"]) .cb-button--secondary.cb-button--solid:active:not(:disabled):not(.cb-is-loading){background-color:var(--cb-color-surface-600);border-color:var(--cb-color-surface-600)}:host-context([data-theme=\"dark\"]) .cb-button--secondary.cb-button--outlined{color:var(--cb-color-surface-400);border-color:var(--cb-color-surface-700)}:host-context([data-theme=\"dark\"]) .cb-button--secondary.cb-button--text{color:var(--cb-color-surface-400)}:host-context([data-theme=\"dark\"]) .cb-button--secondary.cb-button--outlined:hover:not(:disabled):not(.cb-is-loading),:host-context([data-theme=\"dark\"]) .cb-button--secondary.cb-button--text:hover:not(:disabled):not(.cb-is-loading){background-color:color-mix(in srgb,var(--cb-color-surface-0) 6%,transparent)}:host-context([data-theme=\"dark\"]) .cb-button--secondary.cb-button--outlined:active:not(:disabled):not(.cb-is-loading),:host-context([data-theme=\"dark\"]) .cb-button--secondary.cb-button--text:active:not(:disabled):not(.cb-is-loading){background-color:color-mix(in srgb,var(--cb-color-surface-0) 14%,transparent)}.cb-button--contrast.cb-button--solid{background-color:var(--cb-color-surface-950);color:var(--cb-color-surface-0);border-color:var(--cb-color-surface-950)}.cb-button--contrast.cb-button--solid:hover:not(:disabled):not(.cb-is-loading){background-color:var(--cb-color-surface-900);border-color:var(--cb-color-surface-900)}.cb-button--contrast.cb-button--solid:active:not(:disabled):not(.cb-is-loading){background-color:var(--cb-color-surface-800);border-color:var(--cb-color-surface-800)}.cb-button--contrast.cb-button--outlined{color:var(--cb-color-surface-950);border-color:var(--cb-color-surface-700)}.cb-button--contrast.cb-button--text{color:var(--cb-color-surface-950)}.cb-button--contrast.cb-button--outlined:hover:not(:disabled):not(.cb-is-loading),.cb-button--contrast.cb-button--text:hover:not(:disabled):not(.cb-is-loading){background-color:var(--cb-color-surface-50)}.cb-button--contrast.cb-button--outlined:active:not(:disabled):not(.cb-is-loading),.cb-button--contrast.cb-button--text:active:not(:disabled):not(.cb-is-loading){background-color:var(--cb-color-surface-100)}:host-context([data-theme=\"dark\"]) .cb-button--contrast.cb-button--solid{background-color:var(--cb-color-surface-0);color:var(--cb-color-surface-950);border-color:var(--cb-color-surface-0)}:host-context([data-theme=\"dark\"]) .cb-button--contrast.cb-button--solid:hover:not(:disabled):not(.cb-is-loading){background-color:var(--cb-color-surface-100);border-color:var(--cb-color-surface-100)}:host-context([data-theme=\"dark\"]) .cb-button--contrast.cb-button--solid:active:not(:disabled):not(.cb-is-loading){background-color:var(--cb-color-surface-200);border-color:var(--cb-color-surface-200)}:host-context([data-theme=\"dark\"]) .cb-button--contrast.cb-button--outlined{color:var(--cb-color-surface-0);border-color:var(--cb-color-surface-500)}:host-context([data-theme=\"dark\"]) .cb-button--contrast.cb-button--text{color:var(--cb-color-surface-0)}:host-context([data-theme=\"dark\"]) .cb-button--contrast.cb-button--outlined:hover:not(:disabled):not(.cb-is-loading),:host-context([data-theme=\"dark\"]) .cb-button--contrast.cb-button--text:hover:not(:disabled):not(.cb-is-loading){background-color:var(--cb-color-surface-800)}:host-context([data-theme=\"dark\"]) .cb-button--contrast.cb-button--outlined:active:not(:disabled):not(.cb-is-loading),:host-context([data-theme=\"dark\"]) .cb-button--contrast.cb-button--text:active:not(:disabled):not(.cb-is-loading){background-color:var(--cb-color-surface-700)}.cb-button--sm{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-button--md{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-4);font-size:var(--cb-text-base)}.cb-button--lg{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-6);font-size:var(--cb-text-lg)}.cb-button__content{display:inline-flex;align-items:center;gap:var(--cb-space-2)}.cb-button__spinner{color:currentColor}\n"] }]
-        }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
+        }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaHaspopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHaspopup", required: false }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaExpanded", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';
 }

package/fesm2022/caribeng-ui-caribe-alert.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Alert de Caribe Design: banner de notificación con severidad, título,
@@ -12,6 +13,8 @@ import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Compo
  */
 class CbAlert {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.title = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         this.severity = input('info', /* @ts-ignore */
@@ -53,7 +56,7 @@ class CbAlert {
           <button
             type="button"
             class="cb-alert__close"
-            aria-label="Cerrar"
+            [attr.aria-label]="t().close"
             (click)="close()"
           >
             ×
@@ -79,7 +82,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <button
             type="button"
             class="cb-alert__close"
-            aria-label="Cerrar"
+            [attr.aria-label]="t().close"
             (click)="close()"
           >
             ×

package/fesm2022/caribeng-ui-caribe-animation-lottie.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Animation-lottie de Caribe Design: contenedor de animación (placeholder
@@ -12,6 +13,8 @@ import { input, signal, ViewEncapsulation, ChangeDetectionStrategy, Component }
  */
 class CbAnimationLottie {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.src = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
         this.autoplay = input(true, /* @ts-ignore */
@@ -20,7 +23,7 @@ class CbAnimationLottie {
         ...(ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []));
         this.size = input('96px', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Animación interactiva', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.playing = signal(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "playing" }] : /* istanbul ignore next */ []));
@@ -33,7 +36,7 @@ class CbAnimationLottie {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbAnimationLottie, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbAnimationLottie, isStandalone: true, selector: "cb-animation-lottie", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "size()", "style.height": "size()" }, classAttribute: "cb-animation-lottie-host" }, ngImport: i0, template: `
-    <div class="cb-animation-lottie" role="img" [attr.aria-label]="ariaLabel()">
+    <div class="cb-animation-lottie" role="img" [attr.aria-label]="(ariaLabel() ?? t().animation)">
       <svg
         class="cb-animation-lottie__svg"
         [class.cb-is-playing]="playing()"
@@ -61,7 +64,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[style.width]': 'size()',
                         '[style.height]': 'size()',
                     }, template: `
-    <div class="cb-animation-lottie" role="img" [attr.aria-label]="ariaLabel()">
+    <div class="cb-animation-lottie" role="img" [attr.aria-label]="(ariaLabel() ?? t().animation)">
       <svg
         class="cb-animation-lottie__svg"
         [class.cb-is-playing]="playing()"

package/fesm2022/caribeng-ui-caribe-button-group.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Button-group de Caribe Design: contenedor que agrupa acciones relacionadas
@@ -14,15 +15,17 @@ import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@a
  */
 class CbButtonGroup {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Dirección del grupo. */
         this.orientation = input('horizontal', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         /** Etiqueta accesible del grupo. */
-        this.ariaLabel = input('Grupo de acciones', /* @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: CbButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbButtonGroup, isStandalone: true, selector: "cb-button-group", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()", "class.cb-button-group-host--vertical": "orientation() === 'vertical'" }, classAttribute: "cb-button-group-host" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbButtonGroup, isStandalone: true, selector: "cb-button-group", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "(ariaLabel() ?? t().actionGroup)", "class.cb-button-group-host--vertical": "orientation() === 'vertical'" }, classAttribute: "cb-button-group-host" }, ngImport: i0, template: `
     <div
       class="cb-button-group"
       [class.cb-button-group--vertical]="orientation() === 'vertical'"
@@ -36,7 +39,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'cb-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
                         class: 'cb-button-group-host',
                         role: 'group',
-                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-label]': '(ariaLabel() ?? t().actionGroup)',
                         '[class.cb-button-group-host--vertical]': "orientation() === 'vertical'",
                     }, template: `
     <div

package/fesm2022/caribeng-ui-caribe-calendar.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, model, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Calendar de Caribe Design: cuadrícula mensual con selección de día.
@@ -11,13 +12,17 @@ import { input, model, computed, ViewEncapsulation, ChangeDetectionStrategy, Com
  */
 class CbCalendar {
     constructor() {
-        this.monthLabel = input('Octubre 2026', /* @ts-ignore */
+        this.monthLabel = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
         this.totalDays = input(31, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "totalDays" }] : /* istanbul ignore next */ []));
         this.selectedDay = model(17, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedDay" }] : /* istanbul ignore next */ []));
-        this.weekdays = ['L', 'M', 'X', 'J', 'V', 'S', 'D'];
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Iniciales de lunes a domingo en el idioma activo. */
+        this.weekdays = computed(() => this.t().weekdaysMin.split(','), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
         this.days = computed(() => Array.from({ length: Math.max(28, Math.min(31, this.totalDays())) }, (_, i) => i + 1), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "days" }] : /* istanbul ignore next */ []));
     }
@@ -31,11 +36,11 @@ class CbCalendar {
         <strong class="cb-calendar__month">{{ monthLabel() }}</strong>
       </header>
       <div class="cb-calendar__weekdays" aria-hidden="true">
-        @for (w of weekdays; track w) {
+        @for (w of weekdays(); track $index) {
           <span class="cb-calendar__weekday">{{ w }}</span>
         }
       </div>
-      <div class="cb-calendar__grid" role="grid">
+      <div class="cb-calendar__grid" role="group" [attr.aria-label]="monthLabel() || null">
         @for (d of days(); track d) {
           <button
             type="button"
@@ -59,11 +64,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <strong class="cb-calendar__month">{{ monthLabel() }}</strong>
       </header>
       <div class="cb-calendar__weekdays" aria-hidden="true">
-        @for (w of weekdays; track w) {
+        @for (w of weekdays(); track $index) {
           <span class="cb-calendar__weekday">{{ w }}</span>
         }
       </div>
-      <div class="cb-calendar__grid" role="grid">
+      <div class="cb-calendar__grid" role="group" [attr.aria-label]="monthLabel() || null">
         @for (d of days(); track d) {
           <button
             type="button"

package/fesm2022/caribeng-ui-caribe-card-content.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Card-content de Caribe Design: tarjeta de contenido con título, subtítulo,
@@ -12,11 +13,13 @@ import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component }
  */
 class CbCardContent {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.title = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         this.subtitle = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
-        this.actionLabel = input('Ver detalle', /* @ts-ignore */
+        this.actionLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
         this.action = output();
     }
@@ -36,7 +39,7 @@ class CbCardContent {
           class="cb-card-content__action"
           (click)="action.emit()"
         >
-          {{ actionLabel() }}
+          {{ (actionLabel() ?? t().viewDetails) }}
         </button>
       </footer>
     </article>
@@ -59,7 +62,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           class="cb-card-content__action"
           (click)="action.emit()"
         >
-          {{ actionLabel() }}
+          {{ (actionLabel() ?? t().viewDetails) }}
         </button>
       </footer>
     </article>

package/fesm2022/caribeng-ui-caribe-card-move.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { model, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { model, inject, ElementRef, Injector, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Card-move de Caribe Design: lista de elementos reordenables mediante botones
@@ -10,10 +11,17 @@ import { model, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@a
  * <cb-card-move [(items)]="opciones" />
  * ```
  */
+let nextId = 0;
 class CbCardMove {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.items = model([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Prefijo de ids: cada botón se describe con la etiqueta de su elemento. */
+        this.uid = `cb-card-move-${++nextId}`;
+        this.host = inject(ElementRef);
+        this.injector = inject(Injector);
     }
     move(index, delta) {
         const next = [...this.items()];
@@ -22,6 +30,16 @@ class CbCardMove {
             return;
         [next[index], next[target]] = [next[target], next[index]];
         this.items.set(next);
+        this.followItem(target, delta);
+    }
+    /** El foco sigue al elemento movido; si su botón queda deshabilitado (extremo), pasa al otro. */
+    followItem(row, delta) {
+        afterNextRender(() => {
+            const items = this.host.nativeElement.querySelectorAll('.cb-card-move__item');
+            const buttons = Array.from(items[row]?.querySelectorAll('.cb-card-move__btn') ?? []);
+            const same = buttons[delta < 0 ? 0 : 1];
+            (same && !same.disabled ? same : buttons.find((b) => !b.disabled))?.focus();
+        }, { injector: this.injector });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCardMove, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCardMove, isStandalone: true, selector: "cb-card-move", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, ngImport: i0, template: `
@@ -29,12 +47,13 @@ class CbCardMove {
       <ul class="cb-card-move__list">
         @for (item of items(); track $index) {
           <li class="cb-card-move__item">
-            <span class="cb-card-move__label">{{ item }}</span>
+            <span class="cb-card-move__label" [id]="uid + '-' + $index">{{ item }}</span>
             <span class="cb-card-move__controls">
               <button
                 type="button"
                 class="cb-card-move__btn"
-                aria-label="Mover arriba"
+                [attr.aria-label]="t().moveUp"
+                [attr.aria-describedby]="uid + '-' + $index"
                 [disabled]="$first"
                 (click)="move($index, -1)"
               >
@@ -43,7 +62,8 @@ class CbCardMove {
               <button
                 type="button"
                 class="cb-card-move__btn"
-                aria-label="Mover abajo"
+                [attr.aria-label]="t().moveDown"
+                [attr.aria-describedby]="uid + '-' + $index"
                 [disabled]="$last"
                 (click)="move($index, 1)"
               >
@@ -63,12 +83,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <ul class="cb-card-move__list">
         @for (item of items(); track $index) {
           <li class="cb-card-move__item">
-            <span class="cb-card-move__label">{{ item }}</span>
+            <span class="cb-card-move__label" [id]="uid + '-' + $index">{{ item }}</span>
             <span class="cb-card-move__controls">
               <button
                 type="button"
                 class="cb-card-move__btn"
-                aria-label="Mover arriba"
+                [attr.aria-label]="t().moveUp"
+                [attr.aria-describedby]="uid + '-' + $index"
                 [disabled]="$first"
                 (click)="move($index, -1)"
               >
@@ -77,7 +98,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               <button
                 type="button"
                 class="cb-card-move__btn"
-                aria-label="Mover abajo"
+                [attr.aria-label]="t().moveDown"
+                [attr.aria-describedby]="uid + '-' + $index"
                 [disabled]="$last"
                 (click)="move($index, 1)"
               >