@caribeng/ui 22.2.0 → 22.4.0

package/README.md

@@ -7,7 +7,7 @@
 
 <p align="center">
   <img alt="Angular 22" src="https://img.shields.io/badge/Angular-22-dd0031.svg?style=flat-square" />
-  <img alt="Entry points" src="https://img.shields.io/badge/entry%20points-142-10b981.svg?style=flat-square" />
+  <img alt="Entry points" src="https://img.shields.io/badge/entry%20points-162-10b981.svg?style=flat-square" />
   <img alt="Licencia MIT" src="https://img.shields.io/badge/licencia-MIT-blue.svg?style=flat-square" />
 </p>
 
@@ -15,13 +15,14 @@
 
 ## ✨ Características
 
-- **152 componentes y directivas** standalone, cada uno en su propio entry point (`@caribeng/ui/button`, `@caribeng/ui/table`…): solo empaquetas lo que importas.
+- **162 componentes y directivas** standalone, cada uno en su propio entry point (`@caribeng/ui/button`, `@caribeng/ui/table`…): solo empaquetas lo que importas.
 - **Angular moderno:** `input()` / `model()` / `output()` con Signals, `ChangeDetectionStrategy.OnPush` y compatible con apps zoneless.
 - **Formularios sin fricción:** `ControlValueAccessor` en todos los controles; el error y el indicador de obligatorio se sincronizan solos con Angular Forms.
 - **Accesibles:** roles y atributos ARIA, soporte de teclado y gestión de foco (WCAG 2.2 AA).
 - **Tematizables:** tokens CSS `--cb-*`, modo claro/oscuro y presets de color que se cambian en caliente.
 - **Caribe Design:** 45 componentes adicionales del sistema Caribe (`@caribeng/ui/caribe/*`).
-- **Iconos incluidos:** 361 iconos núcleo listos para usar y un catálogo opcional de 1891 iconos.
+- **Iconos incluidos:** 363 iconos núcleo listos para usar y un catálogo opcional de 1891 iconos.
+- **Migración desde PrimeNG:** un schematic traduce imports, plantillas e iconos y deja un informe con lo pendiente ([ver más](#migrar-desde-primeng)).
 
 ## 🖥 Compatibilidad
 
@@ -71,6 +72,87 @@ yarn add @caribeng/ui
 pnpm add @caribeng/ui
 ```
 
+### Migrar desde PrimeNG
+
+En un proyecto con PrimeNG 18 o superior, instala CaribeNG y ejecuta el migrador:
+
+```bash
+npm install @caribeng/ui@22
+ng generate @caribeng/ui:migrate-from-primeng
+```
+
+> Haz commit (o una copia) antes de ejecutarlo para poder revisar los cambios con `git diff`. Con `--dry-run` ves qué archivos cambiaría sin escribir nada. Si ejecutas `ng add @caribeng/ui` en un proyecto con PrimeNG, te recordará este comando.
+
+```html
+<!-- Antes -->
+<p-button label="Guardar" icon="pi pi-check" [outlined]="true" (onClick)="guardar()" />
+<input pInputText id="email" [(ngModel)]="email" />
+<p-dialog header="Editar" [(visible)]="abierto" [modal]="true" [style]="{ width: '25rem' }">…</p-dialog>
+
+<!-- Después -->
+<cb-button variant="outlined" (click)="guardar()"><cb-icon name="check" />Guardar</cb-button>
+<cb-input inputId="email" [(ngModel)]="email" />
+<cb-dialog header="Editar" [(visible)]="abierto" width="25rem">…</cb-dialog>
+```
+
+Qué hace:
+
+- cambia los imports de PrimeNG por los de CaribeNG (`ButtonModule` → `CbButton`, `providePrimeNG()` → `provideCaribeNG()`) y añade a cada componente los que usa su plantilla,
+- traduce las plantillas con sus inputs y eventos (`[outlined]` → `variant`, `size="small"` → `size="sm"`, `(onClick)` → `(click)`, `subheader` → `subtitle`…), incluido el pie de Dialog y Card (`#footer` → `<div cb-dialog-footer>` / `<div cb-card-footer>`),
+- cambia `MessageService` por `CbToastService`: traduce los mensajes (`severity: 'error'` → `'danger'`, `'warn'` → `'warning'`, `sticky: true` → `life: 0`) y lo quita de los `providers`, porque `CbToastService` es único para toda la app,
+- convierte los iconos `pi pi-*` en `<cb-icon>` y registra con `provideCbIcons` los que no están en el set núcleo,
+- quita PrimeIcons de `angular.json` y de las hojas de estilo, y añade `@caribeng/ui/styles.css`,
+- quita `primeng`, `primeicons` y `@primeuix/*` de `package.json` **solo cuando ya no queda ninguna referencia**; mientras tanto las dos librerías conviven.
+
+Lo que no puede traducir con seguridad (un input sin equivalente, una plantilla `#header` personalizada, un `pButton` sobre un enlace…) lo marca con un comentario junto al código, conservando el atributo original:
+
+```html
+<!-- TODO(caribeng): [rounded]="true" — cb-button no tiene variante redondeada; usa una clase propia o <cb-icon-button>. -->
+<cb-button severity="danger">Borrar</cb-button>
+```
+
+Todos los avisos, las referencias a PrimeNG que aún quedan (por ejemplo componentes que el migrador no traduce todavía) y los imports que haya que añadir a mano se resumen en `caribeng-migration-report.md`, con archivo y línea.
+
+**Componentes que traduce hoy:**
+
+| PrimeNG | CaribeNG |
+|---|---|
+| `<p-button>`, `<button pButton>` | `<cb-button>` |
+| `<input pInputText>` | `<cb-input>` |
+| `<textarea pTextarea>`, `<textarea pInputTextarea>` | `<cb-textarea>` |
+| `<p-inputnumber>` | `<cb-input-number>` |
+| `<p-select>`, `<p-dropdown>` | `<cb-select>` |
+| `<p-multiselect>` | `<cb-multiselect>` |
+| `<p-toggleswitch>`, `<p-inputSwitch>` | `<cb-toggle>` |
+| `<p-datepicker>`, `<p-calendar>` | `<cb-datepicker>` |
+| `<p-dialog>` | `<cb-dialog>` |
+| `<p-confirmdialog>` + `ConfirmationService` | `<cb-confirm-dialog service>` + `CbConfirmationService` |
+| `<p-confirmpopup>` | `<cb-confirm-popup service>` |
+| `<p-menu>`, `<p-menubar>`, `<p-tieredmenu>`, `<p-panelmenu>`, `<p-breadcrumb>`, `<p-tabmenu>` | `<cb-menu>`, `<cb-menubar>`, `<cb-tieredmenu>`, `<cb-panelmenu>`, `<cb-breadcrumb>`, `<cb-tabmenu>` |
+| `MenuItem[]` (`icon`, `command`, `routerLink`…) | el tipo de item del menú que lo recibe (`CbMenubarItem[]`…) |
+| `<p-splitbutton>` | `<cb-split-button>` |
+| `<p-table>` (columnas escritas en `#header`/`#body` o dinámicas con `@for`) | `<cb-table [columns]>` + un `cbTableCell` por celda personalizada |
+| `<p-tabs>` (y `<p-tabView>`) | `<cb-tabs>` + `<cb-tab label="…">` |
+| `<p-accordion>` (y `<p-accordionTab>`) | `<cb-accordion>` + `<cb-accordion-panel header="…">` |
+| `<p-tag>` | `<cb-tag>` |
+| `<p-toast>` + `MessageService` | `<cb-toast>` + `CbToastService` |
+| `<p-card>` | `<cb-card>` |
+| `pTooltip` (en cualquier elemento) | `cbTooltip` |
+| `<p-checkbox>` | `<cb-checkbox>` |
+| `<i class="pi pi-*">` | `<cb-icon>` |
+
+En los menús, los arrays de `MenuItem` cambian de tipo según el menú que los recibe en la plantilla; `icon: 'pi pi-plus'` pasa a `'plus'`, `command` y `visible` se conservan, y `routerLink: '/x'` pasa a `url` (los `routerLink` con parámetros quedan con aviso). En las tablas, cada `<th>`/`<td>` pasa a una columna de `[columns]` (`pSortableColumn` → `sortable`, `<p-columnFilter>` → `filter`, `pFrozenColumn` → `frozen`); las celdas que no son solo `{{ fila.campo }}` pasan a un `<ng-template cbTableCell>` con su contenido migrado, y las columnas de checkbox y de expandir desaparecen porque `cb-table` las pone sola. Con columnas dinámicas (`[columns]="cols"` + `@for`), `cols` pasa directamente a `[columns]`: el migrador le añade `sortable: true` / `filter: true` si la cabecera los aplicaba a todas, y las ramas `@if (col.field === '…')` o `@switch (col.field)` del cuerpo pasan a un `cbTableCell` por campo. Las tablas con celdas de lógica genérica, varias filas por registro o plantillas sin equivalente se dejan con aviso y conservan `TableModule`, para que sigan compilando. Las pestañas y los acordeones de PrimeNG 18+ se reestructuran (la cabecera pasa a `label`/`header`); si se generan con `@for` o la cabecera lleva iconos, quedan con aviso.
+
+Los radios (`<p-radiobutton>`) y los menús contextuales (`<p-contextmenu>`) se marcan con un aviso pero no se convierten, porque cambia la estructura de la página: en CaribeNG el modelo de los radios va en un `<cb-radio-group>` que envuelve las opciones, y `<cb-contextmenu>` envuelve el área sobre la que se abre en vez de apuntar a ella con `[target]`. El resto de componentes aparece en el informe para migrarlo a mano; se irán añadiendo en próximas versiones.
+
+| Opción | Uso |
+|---|---|
+| `--path=src/app/ventas` | Migrar solo una carpeta (migración por partes). |
+| `--remove-primeng=false` | No tocar las dependencias de `package.json`. |
+| `--report=false` | No escribir el informe. |
+| `--skip-install` | No instalar dependencias al terminar. |
+| `--force` | Migrar aunque falte `@caribeng/ui` o la versión de PrimeNG sea anterior a la 18. |
+
 ## 🔨 Uso
 
 > Con `ng add @caribeng/ui` los pasos 1 y 2 ya están hechos.
@@ -192,7 +274,7 @@ export class Header {
 
 ## 🔣 Iconos
 
-Los 361 iconos núcleo se registran solos:
+Los 363 iconos núcleo se registran solos:
 
 ```html
 <cb-icon name="house" [size]="20" />
@@ -209,15 +291,15 @@ providers: [provideCbIcons({ 'heart-pulse': heartPulse, rocket })];
 
 ## 📚 Catálogo
 
-- **Form:** `autocomplete`, `button`, `cascadeselect`, `checkbox`, `chips`, `colorpicker`, `datepicker`, `editor`, `fileupload`, `floatlabel`, `iconfield`, `input`, `input-number`, `inputgroup`, `inputmask`, `inputotp`, `keyfilter`, `knob`, `listbox`, `multiselect`, `password`, `radio`, `rating`, `repeater`, `select`, `selectbutton`, `slider`, `textarea`, `toggle`, `togglebutton`, `treeselect`.
-- **Data:** `dataview`, `descriptions`, `orderlist`, `organizationchart`, `paginator`, `picklist`, `statistic`, `table`, `timeline`, `tree`, `treetable`, `virtualscroller`.
-- **Overlay:** `confirmdialog`, `confirmpopup`, `dialog`, `drawer`, `dynamicdialog`, `popover`, `tooltip`.
-- **Messages:** `badge`, `chip`, `empty`, `inlinemessage`, `message`, `result`, `tag`, `toast`.
-- **Menu:** `anchor`, `breadcrumb`, `contextmenu`, `dock`, `megamenu`, `menu`, `menubar`, `panelmenu`, `speeddial`, `splitbutton`, `steps`, `tabmenu`, `tieredmenu`.
+- **Form:** `autocomplete`, `button`, `cascadeselect`, `checkbox`, `chips`, `colorpicker`, `datepicker`, `editor`, `fileupload`, `floatlabel`, `iconfield`, `input`, `input-number`, `inputgroup`, `inputmask`, `inputotp`, `keyfilter`, `knob`, `listbox`, `mentions`, `multiselect`, `password`, `phone-input`, `radio`, `rating`, `repeater`, `select`, `selectbutton`, `slider`, `textarea`, `toggle`, `togglebutton`, `treeselect`.
+- **Data:** `dataview`, `descriptions`, `kanban`, `orderlist`, `organizationchart`, `paginator`, `picklist`, `statistic`, `table`, `timeline`, `tree`, `treetable`, `virtualscroller`.
+- **Overlay:** `command-palette`, `confirmdialog`, `confirmpopup`, `dialog`, `drawer`, `dynamicdialog`, `popover`, `tooltip`.
+- **Messages:** `badge`, `chat`, `chip`, `empty`, `inlinemessage`, `message`, `result`, `tag`, `toast`.
+- **Menu:** `anchor`, `breadcrumb`, `contextmenu`, `dock`, `megamenu`, `menu`, `menubar`, `panelmenu`, `sidebar`, `speeddial`, `splitbutton`, `steps`, `tabmenu`, `tieredmenu`.
 - **Panel:** `accordion`, `card`, `divider`, `fieldset`, `panel`, `scrollpanel`, `scrolltop`, `splitter`, `stepper`, `tabs`, `toolbar`.
-- **Media:** `avatar`, `avatargroup`, `carousel`, `galleria`, `image`, `pdfviewer`.
+- **Media:** `avatar`, `avatargroup`, `carousel`, `galleria`, `image`, `pdfviewer`, `qrcode`.
 - **Archivos y precios:** `file-card`, `folder-card`, `pricing`.
-- **Misc y directivas:** `animateonscroll`, `autofocus`, `blockui`, `chart`, `focustrap`, `icon`, `icons`, `inplace`, `metergroup`, `progressbar`, `ripple`, `skeleton`, `spinner`, `styleclass`, `terminal`, `themetoggle`.
+- **Misc y directivas:** `animateonscroll`, `autofocus`, `blockui`, `chart`, `code-block`, `copy-button`, `focustrap`, `icon`, `icons`, `inplace`, `kbd`, `metergroup`, `progressbar`, `ripple`, `skeleton`, `spinner`, `styleclass`, `terminal`, `themetoggle`.
 - **Caribe Design (`@caribeng/ui/caribe/*`):** `alert`, `animation-lottie`, `button-group`, `calendar`, `card-content`, `card-move`, `card-primary`, `card-select`, `circle-loading`, `coachmark`, `data-table`, `dots-indicator`, `expansion-panel`, `fab-menu`, `file-download`, `file-select`, `float-menu`, `footer`, `header`, `icon-button`, `illustration`, `inline-alert`, `input-date`, `input-search`, `input-select`, `input-token`, `link`, `loader`, `logo`, `modal`, `off-canvas`, `onboarding`, `pictogram`, `pop-over`, `preloader`, `progress-bar`, `shortcut`, `status`, `step-indicator`, `stroke`, `switch`, `tag-button`, `tracker`, `transaction-status`, `voucher`.
 
 ## 🧭 Próximos pasos

package/fesm2022/caribeng-ui-accordion.mjs

@@ -66,7 +66,7 @@ class CbAccordionPanel {
         class="cb-accordion__header"
         [id]="headerId"
         [attr.aria-expanded]="open()"
-        [attr.aria-controls]="regionId"
+        [attr.aria-controls]="open() ? regionId : null"
         [disabled]="disabled()"
         (click)="toggle()"
       >
@@ -99,7 +99,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         class="cb-accordion__header"
         [id]="headerId"
         [attr.aria-expanded]="open()"
-        [attr.aria-controls]="regionId"
+        [attr.aria-controls]="open() ? regionId : null"
         [disabled]="disabled()"
         (click)="toggle()"
       >

package/fesm2022/caribeng-ui-avatar.mjs

@@ -44,7 +44,7 @@ class CbAvatar {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbAvatar, isStandalone: true, selector: "cb-avatar", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "'cb-avatar cb-avatar--' + shape() + ' cb-avatar--' + severity()", "style.width.px": "px()", "style.height.px": "px()", "style.font-size.px": "px() * 0.4", "attr.aria-label": "ariaLabel() || null", "attr.role": "ariaLabel() ? \"img\" : null" }, classAttribute: "cb-avatar" }, ngImport: i0, template: `
     @if (image()) {
-      <img class="cb-avatar__img" [src]="image()" [alt]="ariaLabel()" />
+      <img class="cb-avatar__img" [src]="image()" alt="" />
     } @else if (icon()) {
       <cb-icon [name]="icon()" [size]="px() * 0.5" aria-hidden="true" />
     } @else {
@@ -64,7 +64,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[attr.role]': 'ariaLabel() ? "img" : null',
                     }, template: `
     @if (image()) {
-      <img class="cb-avatar__img" [src]="image()" [alt]="ariaLabel()" />
+      <img class="cb-avatar__img" [src]="image()" alt="" />
     } @else if (icon()) {
       <cb-icon [name]="icon()" [size]="px() * 0.5" aria-hidden="true" />
     } @else {

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-breadcrumb.mjs

@@ -1,7 +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 } from '@caribeng/ui';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 /**
  * Breadcrumb de CaribeNG: rastro de navegación jerárquica.
@@ -21,20 +21,27 @@ class CbBreadcrumb {
         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 [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>
@@ -58,10 +65,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'cb-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-breadcrumb' }, template: `
     <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-chart.mjs

@@ -1,6 +1,6 @@
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, input, ChangeDetectionStrategy, Component, Directive, forwardRef, booleanAttribute, numberAttribute, output, contentChildren, viewChild, inject, ElementRef, computed, DestroyRef, afterNextRender, effect, untracked, ViewEncapsulation } from '@angular/core';
+import { signal, Injectable, input, ChangeDetectionStrategy, Component, Directive, forwardRef, booleanAttribute, numberAttribute, computed, output, contentChildren, viewChild, inject, ElementRef, DestroyRef, afterNextRender, effect, untracked, ViewEncapsulation } from '@angular/core';
 import { injectCbTranslation } from '@caribeng/ui';
 
 // Tipos públicos del gráfico y modelo interno de la escena que dibuja cada renderer.
@@ -1751,9 +1751,12 @@ class CbChart {
         /** Formato de los valores (ejes, tooltip y tabla). */
         this.valueFormat = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
-        /** Locale BCP 47 para el formato (por defecto, el del navegador). */
+        /** Locale BCP 47 para el formato (por defecto, el del idioma activo de CaribeNG: `intlLocale`). */
         this.locale = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        /** Locale efectivo: el input o, si no se indica, el del idioma activo. */
+        this.intlLocale = computed(() => this.locale() ?? this.t().intlLocale, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "intlLocale" }] : /* istanbul ignore next */ []));
         /** Valor mínimo del medidor (`gauge`). */
         this.min = input(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
@@ -1824,7 +1827,7 @@ class CbChart {
         ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
         this.numberFormat = computed(() => this.formatter(this.valueFormat()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "numberFormat" }] : /* istanbul ignore next */ []));
-        this.percentFormat = computed(() => new Intl.NumberFormat(this.locale(), { style: 'percent', maximumFractionDigits: 1 }).format, /* @ts-ignore */
+        this.percentFormat = computed(() => new Intl.NumberFormat(this.intlLocale(), { style: 'percent', maximumFractionDigits: 1 }).format, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "percentFormat" }] : /* istanbul ignore next */ []));
         /** Lo declarado en los hijos, como datos planos para el renderer. */
         this.composedSpec = computed(() => {
@@ -1894,7 +1897,7 @@ class CbChart {
                 bands: this.bands(),
                 format: this.numberFormat(),
                 percent: this.percentFormat(),
-                locale: this.locale(),
+                locale: this.intlLocale(),
                 text: { total: t.chartTotal, change: t.chartChange, open: t.chartOpen, high: t.chartHigh, low: t.chartLow, close: t.chartClose },
                 composed: this.composedSpec(),
             };
@@ -1977,7 +1980,7 @@ class CbChart {
         });
     }
     formatter(vf) {
-        return typeof vf === 'function' ? vf : new Intl.NumberFormat(this.locale(), vf ?? { maximumFractionDigits: 2 }).format;
+        return typeof vf === 'function' ? vf : new Intl.NumberFormat(this.intlLocale(), vf ?? { maximumFractionDigits: 2 }).format;
     }
     setWindow(window) {
         this.active.set(null);