@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/{caribeng-ui-caribe-status.mjs → caribeng-ui-status.mjs}

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * Status de Caribe Design: chip de estado con punto de color y etiqueta.
+ * Status: chip de estado con punto de color y etiqueta.
  *
  * @example
  * ```html
@@ -17,20 +17,20 @@ class CbStatus {
         ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbStatus, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbStatus, isStandalone: true, selector: "cb-status", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <span class="cb-status cb-status--{{ status() }}" role="status">
-      <span class="cb-status__dot" aria-hidden="true"></span>
-      <ng-content>{{ text() }}</ng-content>
-    </span>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbStatus, isStandalone: true, selector: "cb-status", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span class="cb-status cb-status--{{ status() }}" role="status">
+      <span class="cb-status__dot" aria-hidden="true"></span>
+      <ng-content>{{ text() }}</ng-content>
+    </span>
   `, isInline: true, styles: [":host{display:inline-flex}.cb-status{display:inline-flex;align-items:center;gap:var(--cb-space-2, .5rem);padding:.2rem var(--cb-space-3, .65rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:1.4;border:1px solid transparent;border-radius:var(--cb-radius-full, 999px)}.cb-status__dot{width:.5rem;height:.5rem;border-radius:var(--cb-radius-full, 999px);background-color:currentColor}.cb-status--success{color:var(--cb-color-success-700, #15803d);background-color:var(--cb-color-success-50, #f0fdf4);border-color:var(--cb-color-success-200, #bbf7d0)}.cb-status--warning{color:var(--cb-color-warning-700, #b45309);background-color:var(--cb-color-warning-50, #fffbeb);border-color:var(--cb-color-warning-200, #fde68a)}.cb-status--error{color:var(--cb-color-danger-700, #b91c1c);background-color:var(--cb-color-danger-50, #fef2f2);border-color:var(--cb-color-danger-200, #fecaca)}.cb-status--info{color:var(--cb-color-info-700, #1d4ed8);background-color:var(--cb-color-info-50, #eff6ff);border-color:var(--cb-color-info-200, #bfdbfe)}:host-context([data-theme=\"dark\"]) .cb-status{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-status--success{color:var(--cb-color-success-300, #86efac)}:host-context([data-theme=\"dark\"]) .cb-status--warning{color:var(--cb-color-warning-300, #fcd34d)}:host-context([data-theme=\"dark\"]) .cb-status--error{color:var(--cb-color-danger-300, #fca5a5)}:host-context([data-theme=\"dark\"]) .cb-status--info{color:var(--cb-color-info-300, #93c5fd)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbStatus, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-status', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
-    <span class="cb-status cb-status--{{ status() }}" role="status">
-      <span class="cb-status__dot" aria-hidden="true"></span>
-      <ng-content>{{ text() }}</ng-content>
-    </span>
+            args: [{ selector: 'cb-status', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
+    <span class="cb-status cb-status--{{ status() }}" role="status">
+      <span class="cb-status__dot" aria-hidden="true"></span>
+      <ng-content>{{ text() }}</ng-content>
+    </span>
   `, styles: [":host{display:inline-flex}.cb-status{display:inline-flex;align-items:center;gap:var(--cb-space-2, .5rem);padding:.2rem var(--cb-space-3, .65rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:1.4;border:1px solid transparent;border-radius:var(--cb-radius-full, 999px)}.cb-status__dot{width:.5rem;height:.5rem;border-radius:var(--cb-radius-full, 999px);background-color:currentColor}.cb-status--success{color:var(--cb-color-success-700, #15803d);background-color:var(--cb-color-success-50, #f0fdf4);border-color:var(--cb-color-success-200, #bbf7d0)}.cb-status--warning{color:var(--cb-color-warning-700, #b45309);background-color:var(--cb-color-warning-50, #fffbeb);border-color:var(--cb-color-warning-200, #fde68a)}.cb-status--error{color:var(--cb-color-danger-700, #b91c1c);background-color:var(--cb-color-danger-50, #fef2f2);border-color:var(--cb-color-danger-200, #fecaca)}.cb-status--info{color:var(--cb-color-info-700, #1d4ed8);background-color:var(--cb-color-info-50, #eff6ff);border-color:var(--cb-color-info-200, #bfdbfe)}:host-context([data-theme=\"dark\"]) .cb-status{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-status--success{color:var(--cb-color-success-300, #86efac)}:host-context([data-theme=\"dark\"]) .cb-status--warning{color:var(--cb-color-warning-300, #fcd34d)}:host-context([data-theme=\"dark\"]) .cb-status--error{color:var(--cb-color-danger-300, #fca5a5)}:host-context([data-theme=\"dark\"]) .cb-status--info{color:var(--cb-color-info-300, #93c5fd)}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
 

package/fesm2022/{caribeng-ui-caribe-step-indicator.mjs → caribeng-ui-step-indicator.mjs}

@@ -3,7 +3,7 @@ import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component
 import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 /**
- * Step-indicator de Caribe Design: progreso por segmentos para flujos de varios
+ * Step-indicator: progreso por segmentos para flujos de varios
  * pasos (transferencias, onboarding). Muestra segmentos completados, activo y
  * pendientes, con una leyenda opcional.
  *
@@ -35,62 +35,62 @@ class CbStepIndicator {
         ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbStepIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbStepIndicator, isStandalone: true, selector: "cb-step-indicator", inputs: { currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, totalSteps: { classPropertyName: "totalSteps", publicName: "totalSteps", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-step-indicator-host" }, ngImport: i0, template: `
-    <div
-      class="cb-step-indicator"
-      role="progressbar"
-      [attr.aria-valuenow]="current()"
-      aria-valuemin="1"
-      [attr.aria-valuemax]="total()"
-      [attr.aria-valuetext]="fmt(t().stepOf, current(), total())"
-      [attr.aria-label]="label() || t().stepsProgress"
-    >
-      <div class="cb-step-indicator__track" aria-hidden="true">
-        @for (step of steps(); track step) {
-          <span
-            class="cb-step-indicator__segment"
-            [class.cb-step-indicator__segment--done]="step < current()"
-            [class.cb-step-indicator__segment--active]="step === current()"
-          ></span>
-        }
-      </div>
-      <div class="cb-step-indicator__caption">
-        <strong class="cb-step-indicator__count">{{ fmt(t().stepOf, current(), total()) }}</strong>
-        @if (label()) {
-          <span class="cb-step-indicator__label">· {{ label() }}</span>
-        }
-      </div>
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbStepIndicator, isStandalone: true, selector: "cb-step-indicator", inputs: { currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, totalSteps: { classPropertyName: "totalSteps", publicName: "totalSteps", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-step-indicator-host" }, ngImport: i0, template: `
+    <div
+      class="cb-step-indicator"
+      role="progressbar"
+      [attr.aria-valuenow]="current()"
+      aria-valuemin="1"
+      [attr.aria-valuemax]="total()"
+      [attr.aria-valuetext]="fmt(t().stepOf, current(), total())"
+      [attr.aria-label]="label() || t().stepsProgress"
+    >
+      <div class="cb-step-indicator__track" aria-hidden="true">
+        @for (step of steps(); track step) {
+          <span
+            class="cb-step-indicator__segment"
+            [class.cb-step-indicator__segment--done]="step < current()"
+            [class.cb-step-indicator__segment--active]="step === current()"
+          ></span>
+        }
+      </div>
+      <div class="cb-step-indicator__caption">
+        <strong class="cb-step-indicator__count">{{ fmt(t().stepOf, current(), total()) }}</strong>
+        @if (label()) {
+          <span class="cb-step-indicator__label">· {{ label() }}</span>
+        }
+      </div>
+    </div>
   `, isInline: true, styles: [":host{display:block;width:100%;max-width:20rem}.cb-step-indicator{display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem);font-family:var(--cb-font-sans, inherit)}.cb-step-indicator__track{display:flex;gap:var(--cb-space-1, .25rem)}.cb-step-indicator__segment{flex:1 1 0;height:.375rem;border-radius:var(--cb-radius-full, 999px);background-color:var(--cb-color-surface-200, #e2e8f0);transition:background-color var(--cb-duration-normal, .2s) var(--cb-ease, ease)}.cb-step-indicator__segment--done{background-color:var(--cb-color-primary-500, #10b981)}.cb-step-indicator__segment--active{background-color:var(--cb-color-primary-600, #047857)}.cb-step-indicator__caption{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--cb-space-1, .25rem);font-size:var(--cb-text-sm, .8125rem)}.cb-step-indicator__count{font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-700, #065f46)}.cb-step-indicator__label{color:var(--cb-color-text-muted, #64748b)}:host-context([data-theme=\"dark\"]) .cb-step-indicator__segment{background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-step-indicator__count{color:var(--cb-color-primary-300, #6ee7b7)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbStepIndicator, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-step-indicator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-step-indicator-host' }, template: `
-    <div
-      class="cb-step-indicator"
-      role="progressbar"
-      [attr.aria-valuenow]="current()"
-      aria-valuemin="1"
-      [attr.aria-valuemax]="total()"
-      [attr.aria-valuetext]="fmt(t().stepOf, current(), total())"
-      [attr.aria-label]="label() || t().stepsProgress"
-    >
-      <div class="cb-step-indicator__track" aria-hidden="true">
-        @for (step of steps(); track step) {
-          <span
-            class="cb-step-indicator__segment"
-            [class.cb-step-indicator__segment--done]="step < current()"
-            [class.cb-step-indicator__segment--active]="step === current()"
-          ></span>
-        }
-      </div>
-      <div class="cb-step-indicator__caption">
-        <strong class="cb-step-indicator__count">{{ fmt(t().stepOf, current(), total()) }}</strong>
-        @if (label()) {
-          <span class="cb-step-indicator__label">· {{ label() }}</span>
-        }
-      </div>
-    </div>
+            args: [{ selector: 'cb-step-indicator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-step-indicator-host' }, template: `
+    <div
+      class="cb-step-indicator"
+      role="progressbar"
+      [attr.aria-valuenow]="current()"
+      aria-valuemin="1"
+      [attr.aria-valuemax]="total()"
+      [attr.aria-valuetext]="fmt(t().stepOf, current(), total())"
+      [attr.aria-label]="label() || t().stepsProgress"
+    >
+      <div class="cb-step-indicator__track" aria-hidden="true">
+        @for (step of steps(); track step) {
+          <span
+            class="cb-step-indicator__segment"
+            [class.cb-step-indicator__segment--done]="step < current()"
+            [class.cb-step-indicator__segment--active]="step === current()"
+          ></span>
+        }
+      </div>
+      <div class="cb-step-indicator__caption">
+        <strong class="cb-step-indicator__count">{{ fmt(t().stepOf, current(), total()) }}</strong>
+        @if (label()) {
+          <span class="cb-step-indicator__label">· {{ label() }}</span>
+        }
+      </div>
+    </div>
   `, styles: [":host{display:block;width:100%;max-width:20rem}.cb-step-indicator{display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem);font-family:var(--cb-font-sans, inherit)}.cb-step-indicator__track{display:flex;gap:var(--cb-space-1, .25rem)}.cb-step-indicator__segment{flex:1 1 0;height:.375rem;border-radius:var(--cb-radius-full, 999px);background-color:var(--cb-color-surface-200, #e2e8f0);transition:background-color var(--cb-duration-normal, .2s) var(--cb-ease, ease)}.cb-step-indicator__segment--done{background-color:var(--cb-color-primary-500, #10b981)}.cb-step-indicator__segment--active{background-color:var(--cb-color-primary-600, #047857)}.cb-step-indicator__caption{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--cb-space-1, .25rem);font-size:var(--cb-text-sm, .8125rem)}.cb-step-indicator__count{font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-700, #065f46)}.cb-step-indicator__label{color:var(--cb-color-text-muted, #64748b)}:host-context([data-theme=\"dark\"]) .cb-step-indicator__segment{background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-step-indicator__count{color:var(--cb-color-primary-300, #6ee7b7)}\n"] }]
         }], propDecorators: { currentStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStep", required: false }] }], totalSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalSteps", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 

package/fesm2022/caribeng-ui-stepper.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { contentChildren, input, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, computed } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
 import { CbButton } from '@caribeng/ui/button';
-import { injectCbTranslation } from '@caribeng/ui';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 let nextUid = 0;
 /**
@@ -35,6 +35,11 @@ class CbStepper {
     isComplete(step) {
         return this.steps().indexOf(step) < this.activeIndex();
     }
+    /** Nombre del botón del paso: "Paso 2 de 3: Envío" (y ", completado" si ya pasó). */
+    stepName(step, index) {
+        const name = cbFormat(this.t().stepOf, index + 1, this.steps().length) + (step.label() ? `: ${step.label()}` : '');
+        return this.isComplete(step) ? `${name}, ${this.t().stepCompleted}` : name;
+    }
     goTo(index) {
         const max = this.steps().length - 1;
         this.activeIndex.set(Math.min(max, Math.max(0, index)));
@@ -58,6 +63,7 @@ class CbStepper {
             type="button"
             class="cb-stepper__indicator"
             [attr.aria-current]="isActive(step) ? 'step' : null"
+            [attr.aria-label]="stepName(step, i)"
             [disabled]="step.disabled()"
             (click)="goTo(i)"
           >
@@ -67,7 +73,7 @@ class CbStepper {
               {{ i + 1 }}
             }
           </button>
-          <span class="cb-stepper__label">{{ step.label() }}</span>
+          <span class="cb-stepper__label" aria-hidden="true">{{ step.label() }}</span>
           @if (!last) {
             <span class="cb-stepper__connector" aria-hidden="true"></span>
           }
@@ -89,7 +95,7 @@ class CbStepper {
         </cb-button>
       </div>
     }
-  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-stepper__header{display:flex;align-items:center;list-style:none;margin:0;padding:0}.cb-stepper__item{display:flex;align-items:center;gap:var(--cb-space-2);flex:1 1 auto}.cb-stepper__item:last-child{flex:0 0 auto}.cb-stepper__indicator{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2rem;height:2rem;border-radius:var(--cb-radius-full);border:2px solid var(--cb-color-border-strong);background-color:var(--cb-color-bg);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-bold);cursor:pointer;transition:all var(--cb-duration-fast) var(--cb-ease)}.cb-stepper__indicator:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-stepper__indicator:disabled{cursor:default}.cb-is-active .cb-stepper__indicator{border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-500)}.cb-is-complete .cb-stepper__indicator{border-color:var(--cb-color-primary-500);background-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-stepper__label{font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text-muted);white-space:nowrap}.cb-is-active .cb-stepper__label{color:var(--cb-color-text)}.cb-stepper__connector{flex:1 1 auto;height:2px;min-width:var(--cb-space-4);margin:0 var(--cb-space-2);background-color:var(--cb-color-border)}.cb-is-complete .cb-stepper__connector{background-color:var(--cb-color-primary-500)}.cb-stepper__content{padding:var(--cb-space-5) 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-stepper__nav{display:flex;justify-content:space-between;gap:var(--cb-space-3)}@media(max-width:480px){.cb-stepper__label{display:none}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-stepper__header{display:flex;align-items:center;list-style:none;margin:0;padding:0}.cb-stepper__item{display:flex;align-items:center;gap:var(--cb-space-2);flex:1 1 auto}.cb-stepper__item:last-child{flex:0 0 auto}.cb-stepper__indicator{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2rem;height:2rem;border-radius:var(--cb-radius-full);border:2px solid var(--cb-color-border-strong);background-color:var(--cb-color-bg);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-bold);cursor:pointer;transition:all var(--cb-duration-fast) var(--cb-ease)}.cb-stepper__indicator:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-stepper__indicator:disabled{cursor:default}.cb-is-active .cb-stepper__indicator{border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-text)}.cb-is-complete .cb-stepper__indicator{border-color:var(--cb-color-primary-500);background-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-stepper__label{font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text-muted);white-space:nowrap}.cb-is-active .cb-stepper__label{color:var(--cb-color-text)}.cb-stepper__connector{flex:1 1 auto;height:2px;min-width:var(--cb-space-4);margin:0 var(--cb-space-2);background-color:var(--cb-color-border)}.cb-is-complete .cb-stepper__connector{background-color:var(--cb-color-primary-500)}.cb-stepper__content{padding:var(--cb-space-5) 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-stepper__nav{display:flex;justify-content:space-between;gap:var(--cb-space-3)}@media(max-width:480px){.cb-stepper__label{display:none}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbStepper, decorators: [{
             type: Component,
@@ -105,6 +111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type="button"
             class="cb-stepper__indicator"
             [attr.aria-current]="isActive(step) ? 'step' : null"
+            [attr.aria-label]="stepName(step, i)"
             [disabled]="step.disabled()"
             (click)="goTo(i)"
           >
@@ -114,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               {{ i + 1 }}
             }
           </button>
-          <span class="cb-stepper__label">{{ step.label() }}</span>
+          <span class="cb-stepper__label" aria-hidden="true">{{ step.label() }}</span>
           @if (!last) {
             <span class="cb-stepper__connector" aria-hidden="true"></span>
           }
@@ -136,7 +143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         </cb-button>
       </div>
     }
-  `, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-stepper__header{display:flex;align-items:center;list-style:none;margin:0;padding:0}.cb-stepper__item{display:flex;align-items:center;gap:var(--cb-space-2);flex:1 1 auto}.cb-stepper__item:last-child{flex:0 0 auto}.cb-stepper__indicator{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2rem;height:2rem;border-radius:var(--cb-radius-full);border:2px solid var(--cb-color-border-strong);background-color:var(--cb-color-bg);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-bold);cursor:pointer;transition:all var(--cb-duration-fast) var(--cb-ease)}.cb-stepper__indicator:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-stepper__indicator:disabled{cursor:default}.cb-is-active .cb-stepper__indicator{border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-500)}.cb-is-complete .cb-stepper__indicator{border-color:var(--cb-color-primary-500);background-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-stepper__label{font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text-muted);white-space:nowrap}.cb-is-active .cb-stepper__label{color:var(--cb-color-text)}.cb-stepper__connector{flex:1 1 auto;height:2px;min-width:var(--cb-space-4);margin:0 var(--cb-space-2);background-color:var(--cb-color-border)}.cb-is-complete .cb-stepper__connector{background-color:var(--cb-color-primary-500)}.cb-stepper__content{padding:var(--cb-space-5) 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-stepper__nav{display:flex;justify-content:space-between;gap:var(--cb-space-3)}@media(max-width:480px){.cb-stepper__label{display:none}}\n"] }]
+  `, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-stepper__header{display:flex;align-items:center;list-style:none;margin:0;padding:0}.cb-stepper__item{display:flex;align-items:center;gap:var(--cb-space-2);flex:1 1 auto}.cb-stepper__item:last-child{flex:0 0 auto}.cb-stepper__indicator{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2rem;height:2rem;border-radius:var(--cb-radius-full);border:2px solid var(--cb-color-border-strong);background-color:var(--cb-color-bg);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-bold);cursor:pointer;transition:all var(--cb-duration-fast) var(--cb-ease)}.cb-stepper__indicator:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-stepper__indicator:disabled{cursor:default}.cb-is-active .cb-stepper__indicator{border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-text)}.cb-is-complete .cb-stepper__indicator{border-color:var(--cb-color-primary-500);background-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-stepper__label{font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text-muted);white-space:nowrap}.cb-is-active .cb-stepper__label{color:var(--cb-color-text)}.cb-stepper__connector{flex:1 1 auto;height:2px;min-width:var(--cb-space-4);margin:0 var(--cb-space-2);background-color:var(--cb-color-border)}.cb-is-complete .cb-stepper__connector{background-color:var(--cb-color-primary-500)}.cb-stepper__content{padding:var(--cb-space-5) 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-stepper__nav{display:flex;justify-content:space-between;gap:var(--cb-space-3)}@media(max-width:480px){.cb-stepper__label{display:none}}\n"] }]
         }], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbStep), { isSignal: true }] }], showNav: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNav", required: false }] }] } });
 /** Paso individual de un `<cb-stepper>`. */
 class CbStep {

package/fesm2022/caribeng-ui-steps.mjs

@@ -37,7 +37,7 @@ class CbSteps {
         }
       </ol>
     </nav>
-  `, isInline: true, styles: [":host{display:block;width:100%;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-steps__list{display:flex;align-items:flex-start;width:100%;margin:0;padding:0;list-style:none}.cb-steps__entry{position:relative;display:flex;flex:1;justify-content:center;min-width:0}.cb-steps__entry:last-child{flex:0 0 auto}.cb-steps__button{position:relative;z-index:1;display:grid;justify-items:center;gap:.5rem;min-width:4rem;padding:0;border:0;background:transparent;color:var(--cb-color-text-muted);font:inherit;cursor:pointer}.cb-steps__button:disabled{opacity:.5;cursor:default}.cb-steps__button:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:3px;border-radius:var(--cb-radius-sm)}.cb-steps__marker{display:grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--cb-color-border-strong);border-radius:50%;background:var(--cb-color-surface-raised);color:inherit;font-size:var(--cb-text-sm)}.cb-steps__entry--current .cb-steps__marker{border-color:var(--cb-color-primary);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast)}.cb-steps__entry--complete .cb-steps__marker{border-color:var(--cb-color-primary);color:var(--cb-color-primary)}.cb-steps__entry--current .cb-steps__label{color:var(--cb-color-text-strong);font-weight:600}.cb-steps__label{max-width:9rem;text-align:center;font-size:var(--cb-text-sm)}.cb-steps__connector{position:absolute;top:1rem;left:calc(50% + 1.25rem);right:calc(-50% + 1.25rem);height:1px;background:var(--cb-color-border)}.cb-steps__entry--complete .cb-steps__connector{background:var(--cb-color-primary)}@media(max-width:36rem){.cb-steps__label{display:none}.cb-steps__button{min-width:2.5rem}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-steps__list{display:flex;align-items:flex-start;width:100%;margin:0;padding:0;list-style:none}.cb-steps__entry{position:relative;display:flex;flex:1;justify-content:center;min-width:0}.cb-steps__entry:last-child{flex:0 0 auto}.cb-steps__button{position:relative;z-index:1;display:grid;justify-items:center;gap:.5rem;min-width:4rem;padding:0;border:0;background:transparent;color:var(--cb-color-text-muted);font:inherit;cursor:pointer}.cb-steps__button:disabled{opacity:.5;cursor:default}.cb-steps__button:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:3px;border-radius:var(--cb-radius-sm)}.cb-steps__marker{display:grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--cb-color-border-strong);border-radius:50%;background:var(--cb-color-surface-raised);color:inherit;font-size:var(--cb-text-sm)}.cb-steps__entry--current .cb-steps__marker{border-color:var(--cb-color-primary);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast)}.cb-steps__entry--complete .cb-steps__marker{border-color:var(--cb-color-primary);color:var(--cb-color-primary-text)}.cb-steps__entry--current .cb-steps__label{color:var(--cb-color-text-strong);font-weight:600}.cb-steps__label{max-width:9rem;text-align:center;font-size:var(--cb-text-sm)}.cb-steps__connector{position:absolute;top:1rem;left:calc(50% + 1.25rem);right:calc(-50% + 1.25rem);height:1px;background:var(--cb-color-border)}.cb-steps__entry--complete .cb-steps__connector{background:var(--cb-color-primary)}@media(max-width:36rem){.cb-steps__label{display:none}.cb-steps__button{min-width:2.5rem}}\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: CbSteps, decorators: [{
             type: Component,
@@ -55,7 +55,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       </ol>
     </nav>
-  `, styles: [":host{display:block;width:100%;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-steps__list{display:flex;align-items:flex-start;width:100%;margin:0;padding:0;list-style:none}.cb-steps__entry{position:relative;display:flex;flex:1;justify-content:center;min-width:0}.cb-steps__entry:last-child{flex:0 0 auto}.cb-steps__button{position:relative;z-index:1;display:grid;justify-items:center;gap:.5rem;min-width:4rem;padding:0;border:0;background:transparent;color:var(--cb-color-text-muted);font:inherit;cursor:pointer}.cb-steps__button:disabled{opacity:.5;cursor:default}.cb-steps__button:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:3px;border-radius:var(--cb-radius-sm)}.cb-steps__marker{display:grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--cb-color-border-strong);border-radius:50%;background:var(--cb-color-surface-raised);color:inherit;font-size:var(--cb-text-sm)}.cb-steps__entry--current .cb-steps__marker{border-color:var(--cb-color-primary);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast)}.cb-steps__entry--complete .cb-steps__marker{border-color:var(--cb-color-primary);color:var(--cb-color-primary)}.cb-steps__entry--current .cb-steps__label{color:var(--cb-color-text-strong);font-weight:600}.cb-steps__label{max-width:9rem;text-align:center;font-size:var(--cb-text-sm)}.cb-steps__connector{position:absolute;top:1rem;left:calc(50% + 1.25rem);right:calc(-50% + 1.25rem);height:1px;background:var(--cb-color-border)}.cb-steps__entry--complete .cb-steps__connector{background:var(--cb-color-primary)}@media(max-width:36rem){.cb-steps__label{display:none}.cb-steps__button{min-width:2.5rem}}\n"] }]
+  `, styles: [":host{display:block;width:100%;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-steps__list{display:flex;align-items:flex-start;width:100%;margin:0;padding:0;list-style:none}.cb-steps__entry{position:relative;display:flex;flex:1;justify-content:center;min-width:0}.cb-steps__entry:last-child{flex:0 0 auto}.cb-steps__button{position:relative;z-index:1;display:grid;justify-items:center;gap:.5rem;min-width:4rem;padding:0;border:0;background:transparent;color:var(--cb-color-text-muted);font:inherit;cursor:pointer}.cb-steps__button:disabled{opacity:.5;cursor:default}.cb-steps__button:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:3px;border-radius:var(--cb-radius-sm)}.cb-steps__marker{display:grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--cb-color-border-strong);border-radius:50%;background:var(--cb-color-surface-raised);color:inherit;font-size:var(--cb-text-sm)}.cb-steps__entry--current .cb-steps__marker{border-color:var(--cb-color-primary);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast)}.cb-steps__entry--complete .cb-steps__marker{border-color:var(--cb-color-primary);color:var(--cb-color-primary-text)}.cb-steps__entry--current .cb-steps__label{color:var(--cb-color-text-strong);font-weight:600}.cb-steps__label{max-width:9rem;text-align:center;font-size:var(--cb-text-sm)}.cb-steps__connector{position:absolute;top:1rem;left:calc(50% + 1.25rem);right:calc(-50% + 1.25rem);height:1px;background:var(--cb-color-border)}.cb-steps__entry--complete .cb-steps__connector{background:var(--cb-color-primary)}@media(max-width:36rem){.cb-steps__label{display:none}.cb-steps__button{min-width:2.5rem}}\n"] }]
         }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], activeChange: [{ type: i0.Output, args: ["activeChange"] }] } });
 
 /**