@caribeng/ui 22.1.0 → 22.2.0

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)"
               >

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, model, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, model, output, inject, ElementRef, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Card-select de Caribe Design: tarjeta con buscador y lista de opciones
@@ -12,18 +13,47 @@ import { input, model, output, computed, ViewEncapsulation, ChangeDetectionStrat
  */
 class CbCardSelect {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.label = input('Opciones', /* @ts-ignore */
+        this.label = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.selected = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
         this.selectionChange = output();
         this.query = model('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef);
+        /** Opción que entra en el orden de tabulación: la elegida o, si no está visible, la primera. */
+        this.tabbable = computed(() => Math.max(0, this.filtered().indexOf(this.selected() ?? '')), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabbable" }] : /* istanbul ignore next */ []));
         this.filtered = computed(() => this.items().filter((x) => x.toLocaleLowerCase().includes(this.query().toLocaleLowerCase())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
     }
+    choose(item) {
+        this.selected.set(item);
+        this.selectionChange.emit(item);
+    }
+    /** Patrón *listbox*: flechas (circular), Inicio y Fin mueven el foco; Enter / Espacio eligen (botón nativo). */
+    onListKeydown(event) {
+        const options = Array.from(this.host.nativeElement.querySelectorAll('.cb-card-select__option'));
+        const cur = options.indexOf(event.target);
+        if (cur < 0)
+            return;
+        const last = options.length - 1;
+        const target = event.key === 'ArrowDown' ? (cur < last ? cur + 1 : 0)
+            : event.key === 'ArrowUp' ? (cur > 0 ? cur - 1 : last)
+                : event.key === 'Home' ? 0
+                    : event.key === 'End' ? last
+                        : -1;
+        if (target < 0)
+            return;
+        event.preventDefault();
+        for (const [i, option] of options.entries())
+            option.tabIndex = i === target ? 0 : -1;
+        options[target].focus();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCardSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCardSelect, isStandalone: true, selector: "cb-card-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChange: "selectionChange", query: "queryChange" }, ngImport: i0, template: `
     <section class="cb-card-select">
@@ -32,23 +62,29 @@ class CbCardSelect {
         type="search"
         [value]="query()"
         (input)="query.set($any($event.target).value)"
-        aria-label="Buscar opciones"
-        placeholder="Buscar"
+        [attr.aria-label]="t().filterOptions"
+        [placeholder]="t().search"
       />
-      <div class="cb-card-select__list" role="listbox" [attr.aria-label]="label()">
-        @for (item of filtered(); track item) {
+      <div
+        class="cb-card-select__list"
+        role="listbox"
+        [attr.aria-label]="(label() ?? t().options)"
+        (keydown)="onListKeydown($event)"
+      >
+        @for (item of filtered(); track $index) {
           <button
             type="button"
             class="cb-card-select__option"
             role="option"
             [class.cb-is-selected]="selected() === item"
             [attr.aria-selected]="selected() === item"
-            (click)="selected.set(item); selectionChange.emit(item)"
+            [attr.tabindex]="$index === tabbable() ? 0 : -1"
+            (click)="choose(item)"
           >
             {{ item }}
           </button>
         } @empty {
-          <span class="cb-card-select__empty">Sin resultados</span>
+          <span class="cb-card-select__empty">{{ t().noResults }}</span>
         }
       </div>
     </section>
@@ -63,23 +99,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         type="search"
         [value]="query()"
         (input)="query.set($any($event.target).value)"
-        aria-label="Buscar opciones"
-        placeholder="Buscar"
+        [attr.aria-label]="t().filterOptions"
+        [placeholder]="t().search"
       />
-      <div class="cb-card-select__list" role="listbox" [attr.aria-label]="label()">
-        @for (item of filtered(); track item) {
+      <div
+        class="cb-card-select__list"
+        role="listbox"
+        [attr.aria-label]="(label() ?? t().options)"
+        (keydown)="onListKeydown($event)"
+      >
+        @for (item of filtered(); track $index) {
           <button
             type="button"
             class="cb-card-select__option"
             role="option"
             [class.cb-is-selected]="selected() === item"
             [attr.aria-selected]="selected() === item"
-            (click)="selected.set(item); selectionChange.emit(item)"
+            [attr.tabindex]="$index === tabbable() ? 0 : -1"
+            (click)="choose(item)"
           >
             {{ item }}
           </button>
         } @empty {
-          <span class="cb-card-select__empty">Sin resultados</span>
+          <span class="cb-card-select__empty">{{ t().noResults }}</span>
         }
       </div>
     </section>

package/fesm2022/caribeng-ui-caribe-circle-loading.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Circle-loading de Caribe Design: progreso circular determinado o
@@ -13,13 +14,15 @@ import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component
  */
 class CbCircleLoading {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.progress = input(65, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
         this.size = input(48, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.indeterminate = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
-        this.label = input('Cargando', /* @ts-ignore */
+        this.label = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.circumference = 2 * Math.PI * 20;
         this.dashOffset = computed(() => {
@@ -38,7 +41,7 @@ class CbCircleLoading {
       [attr.aria-valuenow]="indeterminate() ? null : progress()"
       aria-valuemin="0"
       aria-valuemax="100"
-      [attr.aria-label]="label()"
+      [attr.aria-label]="(label() ?? t().loading)"
     >
       <svg
         class="cb-circle-loading__svg"
@@ -68,8 +71,8 @@ class CbCircleLoading {
           transform="rotate(-90 24 24)"
         />
       </svg>
-      @if (label()) {
-        <span class="cb-circle-loading__label">{{ label() }}</span>
+      @if ((label() ?? t().loading)) {
+        <span class="cb-circle-loading__label">{{ (label() ?? t().loading) }}</span>
       }
     </div>
   `, isInline: true, styles: [":host{display:inline-flex}.cb-circle-loading{display:inline-flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .4rem);font-family:var(--cb-font-sans, inherit)}.cb-circle-loading__track{stroke:var(--cb-color-surface-200, #e2e8f0)}.cb-circle-loading__bar{stroke:var(--cb-color-primary-500, #10b981);transition:stroke-dashoffset var(--cb-duration-normal, .2s) var(--cb-ease, ease)}.cb-circle-loading__svg.cb-is-indeterminate{animation:cb-circle-spin .9s linear infinite;transform-origin:center}.cb-circle-loading__label{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}@keyframes cb-circle-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.cb-circle-loading__svg.cb-is-indeterminate{animation-duration:2.4s}}:host-context([data-theme=\"dark\"]) .cb-circle-loading__track{stroke:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-circle-loading__label{color:var(--cb-color-surface-300, #cbd5e1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -83,7 +86,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       [attr.aria-valuenow]="indeterminate() ? null : progress()"
       aria-valuemin="0"
       aria-valuemax="100"
-      [attr.aria-label]="label()"
+      [attr.aria-label]="(label() ?? t().loading)"
     >
       <svg
         class="cb-circle-loading__svg"
@@ -113,8 +116,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           transform="rotate(-90 24 24)"
         />
       </svg>
-      @if (label()) {
-        <span class="cb-circle-loading__label">{{ label() }}</span>
+      @if ((label() ?? t().loading)) {
+        <span class="cb-circle-loading__label">{{ (label() ?? t().loading) }}</span>
       }
     </div>
   `, styles: [":host{display:inline-flex}.cb-circle-loading{display:inline-flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .4rem);font-family:var(--cb-font-sans, inherit)}.cb-circle-loading__track{stroke:var(--cb-color-surface-200, #e2e8f0)}.cb-circle-loading__bar{stroke:var(--cb-color-primary-500, #10b981);transition:stroke-dashoffset var(--cb-duration-normal, .2s) var(--cb-ease, ease)}.cb-circle-loading__svg.cb-is-indeterminate{animation:cb-circle-spin .9s linear infinite;transform-origin:center}.cb-circle-loading__label{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}@keyframes cb-circle-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.cb-circle-loading__svg.cb-is-indeterminate{animation-duration:2.4s}}:host-context([data-theme=\"dark\"]) .cb-circle-loading__track{stroke:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-circle-loading__label{color:var(--cb-color-surface-300, #cbd5e1)}\n"] }]