@caribeng/ui 22.1.1 → 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
 
-- **142 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
 
@@ -42,7 +43,23 @@ Navegadores: los mismos que [soporta Angular](https://angular.dev/reference/vers
 - `@angular/cdk` se instala automáticamente como dependencia (overlays y accesibilidad).
 - npm, yarn o pnpm.
 
-### Descarga
+### Instalación rápida (recomendada)
+
+```bash
+ng add @caribeng/ui
+```
+
+Pregunta el idioma, el tema y el color primario, y deja el proyecto listo:
+
+- instala `@caribeng/ui` (y `@angular/cdk`),
+- registra `provideCaribeNG({ locale, theme, preset })` en `app.config.ts` (o en `AppModule`),
+- añade `@caribeng/ui/styles.css` a los estilos de `angular.json`.
+
+Se puede ejecutar sin preguntas: `ng add @caribeng/ui --locale=en --theme=system --preset=ocean --skip-confirmation`. Volver a ejecutarlo no duplica nada.
+
+Después, salta al paso [3. Verifica la instalación](#3-verifica-la-instalación).
+
+### Instalación manual
 
 ```bash
 # npm
@@ -55,8 +72,91 @@ 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.
+
 ### 1. Proveedor
 
 Añade `provideCaribeNG()` a los providers de tu `app.config.ts`. Todas las opciones son opcionales:
@@ -131,6 +231,28 @@ Todos los controles funcionan con Reactive Forms y con formularios por plantilla
 <cb-input label="Correo" formControlName="email" error="Ingresa un correo válido" />
 ```
 
+## 🌐 Idioma (i18n)
+
+Los textos de interfaz de los componentes (etiquetas accesibles, botones, placeholders y mensajes) vienen en **español** (por defecto) e **inglés**:
+
+```ts
+provideCaribeNG({
+  locale: 'en',                                   // 'es' | 'en' | objeto CbTranslation propio
+  translation: { noResults: 'Nothing here yet' }, // sobrescribe textos sueltos
+});
+```
+
+Cambio en caliente, sin recargar:
+
+```ts
+import { inject } from '@angular/core';
+import { CbLocaleService } from '@caribeng/ui';
+
+inject(CbLocaleService).use('en');
+```
+
+Un texto pasado por input (por ejemplo `placeholder` o `emptyMessage`) siempre tiene prioridad sobre el idioma.
+
 ## 🎨 Tema claro/oscuro y presets
 
 ```ts
@@ -152,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" />
@@ -169,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`, `knob`, `listbox`, `multiselect`, `password`, `radio`, `rating`, `select`, `selectbutton`, `slider`, `textarea`, `toggle`, `togglebutton`, `treeselect`.
-- **Data:** `dataview`, `orderlist`, `organizationchart`, `paginator`, `picklist`, `table`, `timeline`, `tree`, `treetable`, `virtualscroller`.
-- **Overlay:** `confirmdialog`, `confirmpopup`, `dialog`, `drawer`, `dynamicdialog`, `popover`, `tooltip`.
-- **Messages:** `badge`, `chip`, `inlinemessage`, `message`, `tag`, `toast`.
-- **Menu:** `breadcrumb`, `contextmenu`, `dock`, `megamenu`, `menu`, `menubar`, `panelmenu`, `speeddial`, `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`.
+- **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`.
+- **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()"
       >
@@ -85,7 +85,7 @@ class CbAccordionPanel {
         <div class="cb-accordion__inner"><ng-content /></div>
       </div>
     }
-  `, isInline: true, styles: [":host{display:block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}:host+:host{border-top:var(--cb-border-width) solid var(--cb-color-border)}.cb-accordion__heading{margin:0}.cb-accordion__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);width:100%;padding:var(--cb-space-3) var(--cb-space-4);border:none;background:transparent;color:inherit;font:inherit;font-weight:var(--cb-font-weight-medium);text-align:left;cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-accordion__header:hover{background-color:var(--cb-color-surface-50)}.cb-accordion__header:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-accordion__header:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}:host(.cb-is-open) .cb-accordion__header{background-color:var(--cb-color-surface-50)}.cb-accordion__chevron{flex:none;color:var(--cb-color-text-muted);transition:transform var(--cb-duration-fast) var(--cb-ease)}.cb-accordion__chevron.cb-is-open{transform:rotate(180deg)}.cb-accordion__content{overflow:hidden}.cb-accordion__inner{padding:0 var(--cb-space-4) var(--cb-space-4);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}:host-context([data-theme=\"dark\"]) .cb-accordion__header:hover,:host-context([data-theme=\"dark\"]):host(.cb-is-open) .cb-accordion__header{background-color:var(--cb-color-surface-100)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}:host+:host{border-top:var(--cb-border-width) solid var(--cb-color-border)}.cb-accordion__heading{margin:0}.cb-accordion__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);width:100%;padding:var(--cb-space-3) var(--cb-space-4);border:none;background:transparent;color:inherit;font:inherit;font-weight:var(--cb-font-weight-medium);text-align:left;cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-accordion__header:hover{background-color:var(--cb-color-surface-subtle)}.cb-accordion__header:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-accordion__header:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}:host(.cb-is-open) .cb-accordion__header{background-color:var(--cb-color-surface-subtle)}.cb-accordion__chevron{flex:none;color:var(--cb-color-text-muted);transition:transform var(--cb-duration-fast) var(--cb-ease)}.cb-accordion__chevron.cb-is-open{transform:rotate(180deg)}.cb-accordion__content{overflow:hidden}.cb-accordion__inner{padding:0 var(--cb-space-4) var(--cb-space-4);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}\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: CbAccordionPanel, decorators: [{
             type: Component,
@@ -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()"
       >
@@ -118,7 +118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <div class="cb-accordion__inner"><ng-content /></div>
       </div>
     }
-  `, styles: [":host{display:block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}:host+:host{border-top:var(--cb-border-width) solid var(--cb-color-border)}.cb-accordion__heading{margin:0}.cb-accordion__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);width:100%;padding:var(--cb-space-3) var(--cb-space-4);border:none;background:transparent;color:inherit;font:inherit;font-weight:var(--cb-font-weight-medium);text-align:left;cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-accordion__header:hover{background-color:var(--cb-color-surface-50)}.cb-accordion__header:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-accordion__header:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}:host(.cb-is-open) .cb-accordion__header{background-color:var(--cb-color-surface-50)}.cb-accordion__chevron{flex:none;color:var(--cb-color-text-muted);transition:transform var(--cb-duration-fast) var(--cb-ease)}.cb-accordion__chevron.cb-is-open{transform:rotate(180deg)}.cb-accordion__content{overflow:hidden}.cb-accordion__inner{padding:0 var(--cb-space-4) var(--cb-space-4);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}:host-context([data-theme=\"dark\"]) .cb-accordion__header:hover,:host-context([data-theme=\"dark\"]):host(.cb-is-open) .cb-accordion__header{background-color:var(--cb-color-surface-100)}\n"] }]
+  `, styles: [":host{display:block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}:host+:host{border-top:var(--cb-border-width) solid var(--cb-color-border)}.cb-accordion__heading{margin:0}.cb-accordion__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);width:100%;padding:var(--cb-space-3) var(--cb-space-4);border:none;background:transparent;color:inherit;font:inherit;font-weight:var(--cb-font-weight-medium);text-align:left;cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-accordion__header:hover{background-color:var(--cb-color-surface-subtle)}.cb-accordion__header:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-accordion__header:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}:host(.cb-is-open) .cb-accordion__header{background-color:var(--cb-color-surface-subtle)}.cb-accordion__chevron{flex:none;color:var(--cb-color-text-muted);transition:transform var(--cb-duration-fast) var(--cb-ease)}.cb-accordion__chevron.cb-is-open{transform:rotate(180deg)}.cb-accordion__content{overflow:hidden}.cb-accordion__inner{padding:0 var(--cb-space-4) var(--cb-space-4);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}\n"] }]
         }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-anchor.mjs

@@ -0,0 +1,169 @@
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, input, output, signal, afterNextRender, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
+
+/**
+ * Anchor de CaribeNG: índice de la página ("En esta página") que resalta la
+ * sección visible (`aria-current="location"`) y, al hacer clic, desplaza hasta
+ * ella teniendo en cuenta una cabecera fija (`offset`) y le pasa el foco.
+ *
+ * @example
+ * ```html
+ * <cb-anchor [offset]="64" [links]="[
+ *   { label: 'Resumen', href: '#resumen' },
+ *   { label: 'Movimientos', href: '#movimientos', children: [{ label: 'Pendientes', href: '#pendientes' }] },
+ * ]" />
+ * ```
+ */
+class CbAnchor {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.document = inject(DOCUMENT);
+        this.links = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "links" }] : /* istanbul ignore next */ []));
+        /** Alto (px) de la cabecera fija que tapa la parte superior de la página. */
+        this.offset = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+        /** Nombre de la navegación. Por defecto, "En esta página" del idioma activo. */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Se emite al cambiar la sección visible (su `href`). */
+        this.activeChange = output();
+        this.active = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.frame = 0;
+        this.onScroll = () => {
+            const win = this.document.defaultView;
+            if (!win || this.frame)
+                return;
+            this.frame = win.requestAnimationFrame(() => {
+                this.frame = 0;
+                this.update();
+            });
+        };
+        const win = this.document.defaultView;
+        afterNextRender(() => {
+            this.update();
+            win?.addEventListener('scroll', this.onScroll, { passive: true });
+            win?.addEventListener('resize', this.onScroll, { passive: true });
+        });
+        inject(DestroyRef).onDestroy(() => {
+            win?.removeEventListener('scroll', this.onScroll);
+            win?.removeEventListener('resize', this.onScroll);
+            if (this.frame)
+                win?.cancelAnimationFrame(this.frame);
+        });
+    }
+    /** Sección activa: la última cuyo inicio ya pasó la línea de la cabecera fija. */
+    update() {
+        const line = this.offset() + 8;
+        let current = null;
+        for (const href of this.flatHrefs()) {
+            const target = this.target(href);
+            if (target && target.getBoundingClientRect().top <= line)
+                current = href;
+        }
+        current ??= this.flatHrefs()[0] ?? null;
+        if (current !== this.active()) {
+            this.active.set(current);
+            this.activeChange.emit(current);
+        }
+    }
+    /** Desplaza hasta la sección, deja el foco en ella y actualiza la URL. */
+    go(event, link) {
+        const target = this.target(link.href);
+        const win = this.document.defaultView;
+        if (!target || !win)
+            return;
+        event.preventDefault();
+        const reduce = win.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+        const top = target.getBoundingClientRect().top + win.scrollY - this.offset();
+        win.scrollTo({ top, behavior: reduce ? 'auto' : 'smooth' });
+        if (!target.hasAttribute('tabindex'))
+            target.setAttribute('tabindex', '-1');
+        target.focus({ preventScroll: true });
+        win.history?.replaceState?.(null, '', link.href);
+        this.active.set(link.href);
+        this.activeChange.emit(link.href);
+    }
+    flatHrefs() {
+        const out = [];
+        const walk = (links) => links.forEach((l) => {
+            out.push(l.href);
+            if (l.children)
+                walk(l.children);
+        });
+        walk(this.links());
+        return out;
+    }
+    target(href) {
+        const id = href.startsWith('#') ? decodeURIComponent(href.slice(1)) : '';
+        return id ? this.document.getElementById(id) : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbAnchor, isStandalone: true, selector: "cb-anchor", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange" }, host: { classAttribute: "cb-anchor" }, ngImport: i0, template: `
+    <nav class="cb-anchor__nav" [attr.aria-label]="ariaLabel() ?? t().onThisPage">
+      <ng-template #list let-links let-level="level">
+        <ul class="cb-anchor__list" [class.cb-anchor__list--nested]="level > 0">
+          @for (link of links; track link.href) {
+            <li>
+              <a
+                class="cb-anchor__link"
+                [class.cb-is-active]="active() === link.href"
+                [href]="link.href"
+                [attr.aria-current]="active() === link.href ? 'location' : null"
+                (click)="go($event, link)"
+              >
+                {{ link.label }}
+              </a>
+              @if (link.children?.length) {
+                <ng-container *ngTemplateOutlet="list; context: { $implicit: link.children, level: level + 1 }" />
+              }
+            </li>
+          }
+        </ul>
+      </ng-template>
+      <ng-container *ngTemplateOutlet="list; context: { $implicit: links(), level: 0 }" />
+    </nav>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans, inherit)}.cb-anchor__list{margin:0;padding:0;list-style:none;border-left:2px solid var(--cb-color-border)}.cb-anchor__list--nested{border-left:0}.cb-anchor__link{display:block;margin-left:-2px;padding:.3rem .75rem;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted);text-decoration:none;border-left:2px solid transparent;transition:color var(--cb-duration-fast, .12s) ease,border-color var(--cb-duration-fast, .12s) ease}.cb-anchor__list--nested .cb-anchor__link{padding-left:1.5rem}.cb-anchor__link:hover{color:var(--cb-color-text)}.cb-anchor__link.cb-is-active{font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-primary-600, #059669);border-left-color:var(--cb-color-primary-500)}.cb-anchor__link:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px;border-radius:var(--cb-radius-sm, .25rem)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbAnchor, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-anchor', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet], host: { class: 'cb-anchor' }, template: `
+    <nav class="cb-anchor__nav" [attr.aria-label]="ariaLabel() ?? t().onThisPage">
+      <ng-template #list let-links let-level="level">
+        <ul class="cb-anchor__list" [class.cb-anchor__list--nested]="level > 0">
+          @for (link of links; track link.href) {
+            <li>
+              <a
+                class="cb-anchor__link"
+                [class.cb-is-active]="active() === link.href"
+                [href]="link.href"
+                [attr.aria-current]="active() === link.href ? 'location' : null"
+                (click)="go($event, link)"
+              >
+                {{ link.label }}
+              </a>
+              @if (link.children?.length) {
+                <ng-container *ngTemplateOutlet="list; context: { $implicit: link.children, level: level + 1 }" />
+              }
+            </li>
+          }
+        </ul>
+      </ng-template>
+      <ng-container *ngTemplateOutlet="list; context: { $implicit: links(), level: 0 }" />
+    </nav>
+  `, styles: [":host{display:block;font-family:var(--cb-font-sans, inherit)}.cb-anchor__list{margin:0;padding:0;list-style:none;border-left:2px solid var(--cb-color-border)}.cb-anchor__list--nested{border-left:0}.cb-anchor__link{display:block;margin-left:-2px;padding:.3rem .75rem;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted);text-decoration:none;border-left:2px solid transparent;transition:color var(--cb-duration-fast, .12s) ease,border-color var(--cb-duration-fast, .12s) ease}.cb-anchor__list--nested .cb-anchor__link{padding-left:1.5rem}.cb-anchor__link:hover{color:var(--cb-color-text)}.cb-anchor__link.cb-is-active{font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-primary-600, #059669);border-left-color:var(--cb-color-primary-500)}.cb-anchor__link:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px;border-radius:var(--cb-radius-sm, .25rem)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], activeChange: [{ type: i0.Output, args: ["activeChange"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/anchor
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbAnchor };

package/fesm2022/caribeng-ui-autocomplete.mjs

@@ -3,7 +3,7 @@ import { model, input, output, signal, viewChild, computed, forwardRef, ViewEnca
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
 import { CbIcon } from '@caribeng/ui/icon';
 
 let nextUid = 0;
@@ -24,6 +24,8 @@ let nextUid = 0;
  */
 class CbAutocomplete {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Valor seleccionado (two-way opcional fuera de Angular Forms). */
         this.value = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -48,7 +50,7 @@ class CbAutocomplete {
         this.forceSelection = input(true, { ...(ngDevMode ? { debugName: "forceSelection" } : /* istanbul ignore next */ {}), transform: toBoolean });
         /** Muestra un botón para desplegar todas las sugerencias. */
         this.dropdown = input(false, { ...(ngDevMode ? { debugName: "dropdown" } : /* istanbul ignore next */ {}), transform: toBoolean });
-        this.emptyMessage = input('Sin resultados', /* @ts-ignore */
+        this.emptyMessage = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
         this.label = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -330,7 +332,7 @@ class CbAutocomplete {
           type="button"
           class="cb-autocomplete__dropdown-btn"
           tabindex="-1"
-          aria-label="Mostrar sugerencias"
+          [attr.aria-label]="t().showSuggestions"
           [disabled]="isDisabled()"
           (click)="onDropdownClick()"
         >
@@ -366,7 +368,7 @@ class CbAutocomplete {
             </li>
           } @empty {
             <li class="cb-autocomplete__empty" role="option" aria-disabled="true">
-              {{ emptyMessage() }}
+              {{ (emptyMessage() ?? t().noResults) }}
             </li>
           }
         </ul>
@@ -382,7 +384,7 @@ class CbAutocomplete {
         {{ hint() }}
       </p>
     }
-  `, isInline: true, styles: [":host{display:block}.cb-autocomplete__label{display:block;margin-bottom:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-autocomplete__required{color:var(--cb-color-danger);margin-left:2px}.cb-autocomplete{position:relative;display:flex;align-items:stretch;box-sizing:border-box;width:100%;background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-autocomplete:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-autocomplete:focus-within,.cb-autocomplete.cb-is-open{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-autocomplete.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-autocomplete.cb-is-invalid:focus-within,.cb-autocomplete.cb-is-invalid.cb-is-open{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-autocomplete.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-autocomplete__field{flex:1 1 auto;min-width:0;box-sizing:border-box;font-family:var(--cb-font-sans);color:var(--cb-color-text);background:transparent;border:none;border-radius:inherit}.cb-autocomplete__field::placeholder{color:var(--cb-color-text-muted)}.cb-autocomplete__field:focus{outline:none}.cb-autocomplete__field:disabled{color:var(--cb-color-text-muted);cursor:not-allowed}.cb-autocomplete--sm .cb-autocomplete__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-autocomplete--md .cb-autocomplete__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-autocomplete--lg .cb-autocomplete__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-autocomplete__dropdown-btn{display:flex;flex:none;align-items:center;justify-content:center;width:2.5rem;padding:0;color:var(--cb-color-text-muted);background:transparent;border:none;border-left:var(--cb-border-width) solid var(--cb-color-border);cursor:pointer}.cb-autocomplete__dropdown-btn:hover:not(:disabled){color:var(--cb-color-text)}.cb-autocomplete__dropdown-btn:disabled{cursor:not-allowed;opacity:.5}.cb-autocomplete__dropdown-btn cb-icon{color:currentColor}.cb-autocomplete__panel{box-sizing:border-box;width:100%;background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);overflow:hidden;font-family:var(--cb-font-sans)}.cb-autocomplete__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:16rem;overflow-y:auto}.cb-autocomplete__option{display:flex;align-items:center;padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);font-size:var(--cb-text-base);color:var(--cb-color-text);cursor:pointer}.cb-autocomplete__option.cb-is-active{background-color:var(--cb-color-surface-100)}.cb-autocomplete__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}.cb-autocomplete__message{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-autocomplete__message--hint{color:var(--cb-color-text-muted)}.cb-autocomplete__message--error{color:var(--cb-color-danger)}.cb-autocomplete__required--required,.cb-autocomplete__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.cb-autocomplete__label{display:block;margin-bottom:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-autocomplete__required{color:var(--cb-color-danger);margin-left:2px}.cb-autocomplete{position:relative;display:flex;align-items:stretch;box-sizing:border-box;width:100%;background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-autocomplete:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-autocomplete:focus-within,.cb-autocomplete.cb-is-open{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-autocomplete.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-autocomplete.cb-is-invalid:focus-within,.cb-autocomplete.cb-is-invalid.cb-is-open{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-autocomplete.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-autocomplete__field{flex:1 1 auto;min-width:0;box-sizing:border-box;font-family:var(--cb-font-sans);color:var(--cb-color-text);background:transparent;border:none;border-radius:inherit}.cb-autocomplete__field::placeholder{color:var(--cb-color-text-muted)}.cb-autocomplete__field:focus{outline:none}.cb-autocomplete__field:disabled{color:var(--cb-color-text-muted);cursor:not-allowed}.cb-autocomplete--sm .cb-autocomplete__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-autocomplete--md .cb-autocomplete__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-autocomplete--lg .cb-autocomplete__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-autocomplete__dropdown-btn{display:flex;flex:none;align-items:center;justify-content:center;width:2.5rem;padding:0;color:var(--cb-color-text-muted);background:transparent;border:none;border-left:var(--cb-border-width) solid var(--cb-color-border);cursor:pointer}.cb-autocomplete__dropdown-btn:hover:not(:disabled){color:var(--cb-color-text)}.cb-autocomplete__dropdown-btn:disabled{cursor:not-allowed;opacity:.5}.cb-autocomplete__dropdown-btn cb-icon{color:currentColor}.cb-autocomplete__panel{box-sizing:border-box;width:100%;background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);overflow:hidden;font-family:var(--cb-font-sans)}.cb-autocomplete__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:16rem;overflow-y:auto}.cb-autocomplete__option{display:flex;align-items:center;padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);font-size:var(--cb-text-base);color:var(--cb-color-text);cursor:pointer}.cb-autocomplete__option.cb-is-active{background-color:var(--cb-color-surface-hover)}.cb-autocomplete__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}.cb-autocomplete__message{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-autocomplete__message--hint{color:var(--cb-color-text-muted)}.cb-autocomplete__message--error{color:var(--cb-color-danger)}.cb-autocomplete__required--required,.cb-autocomplete__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { 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: CbAutocomplete, decorators: [{
             type: Component,
@@ -441,7 +443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           type="button"
           class="cb-autocomplete__dropdown-btn"
           tabindex="-1"
-          aria-label="Mostrar sugerencias"
+          [attr.aria-label]="t().showSuggestions"
           [disabled]="isDisabled()"
           (click)="onDropdownClick()"
         >
@@ -477,7 +479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             </li>
           } @empty {
             <li class="cb-autocomplete__empty" role="option" aria-disabled="true">
-              {{ emptyMessage() }}
+              {{ (emptyMessage() ?? t().noResults) }}
             </li>
           }
         </ul>
@@ -493,7 +495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         {{ hint() }}
       </p>
     }
-  `, styles: [":host{display:block}.cb-autocomplete__label{display:block;margin-bottom:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-autocomplete__required{color:var(--cb-color-danger);margin-left:2px}.cb-autocomplete{position:relative;display:flex;align-items:stretch;box-sizing:border-box;width:100%;background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-autocomplete:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-autocomplete:focus-within,.cb-autocomplete.cb-is-open{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-autocomplete.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-autocomplete.cb-is-invalid:focus-within,.cb-autocomplete.cb-is-invalid.cb-is-open{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-autocomplete.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-autocomplete__field{flex:1 1 auto;min-width:0;box-sizing:border-box;font-family:var(--cb-font-sans);color:var(--cb-color-text);background:transparent;border:none;border-radius:inherit}.cb-autocomplete__field::placeholder{color:var(--cb-color-text-muted)}.cb-autocomplete__field:focus{outline:none}.cb-autocomplete__field:disabled{color:var(--cb-color-text-muted);cursor:not-allowed}.cb-autocomplete--sm .cb-autocomplete__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-autocomplete--md .cb-autocomplete__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-autocomplete--lg .cb-autocomplete__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-autocomplete__dropdown-btn{display:flex;flex:none;align-items:center;justify-content:center;width:2.5rem;padding:0;color:var(--cb-color-text-muted);background:transparent;border:none;border-left:var(--cb-border-width) solid var(--cb-color-border);cursor:pointer}.cb-autocomplete__dropdown-btn:hover:not(:disabled){color:var(--cb-color-text)}.cb-autocomplete__dropdown-btn:disabled{cursor:not-allowed;opacity:.5}.cb-autocomplete__dropdown-btn cb-icon{color:currentColor}.cb-autocomplete__panel{box-sizing:border-box;width:100%;background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);overflow:hidden;font-family:var(--cb-font-sans)}.cb-autocomplete__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:16rem;overflow-y:auto}.cb-autocomplete__option{display:flex;align-items:center;padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);font-size:var(--cb-text-base);color:var(--cb-color-text);cursor:pointer}.cb-autocomplete__option.cb-is-active{background-color:var(--cb-color-surface-100)}.cb-autocomplete__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}.cb-autocomplete__message{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-autocomplete__message--hint{color:var(--cb-color-text-muted)}.cb-autocomplete__message--error{color:var(--cb-color-danger)}.cb-autocomplete__required--required,.cb-autocomplete__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}\n"] }]
+  `, styles: [":host{display:block}.cb-autocomplete__label{display:block;margin-bottom:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-autocomplete__required{color:var(--cb-color-danger);margin-left:2px}.cb-autocomplete{position:relative;display:flex;align-items:stretch;box-sizing:border-box;width:100%;background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-autocomplete:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-autocomplete:focus-within,.cb-autocomplete.cb-is-open{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-autocomplete.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-autocomplete.cb-is-invalid:focus-within,.cb-autocomplete.cb-is-invalid.cb-is-open{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-autocomplete.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-autocomplete__field{flex:1 1 auto;min-width:0;box-sizing:border-box;font-family:var(--cb-font-sans);color:var(--cb-color-text);background:transparent;border:none;border-radius:inherit}.cb-autocomplete__field::placeholder{color:var(--cb-color-text-muted)}.cb-autocomplete__field:focus{outline:none}.cb-autocomplete__field:disabled{color:var(--cb-color-text-muted);cursor:not-allowed}.cb-autocomplete--sm .cb-autocomplete__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-autocomplete--md .cb-autocomplete__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-autocomplete--lg .cb-autocomplete__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-autocomplete__dropdown-btn{display:flex;flex:none;align-items:center;justify-content:center;width:2.5rem;padding:0;color:var(--cb-color-text-muted);background:transparent;border:none;border-left:var(--cb-border-width) solid var(--cb-color-border);cursor:pointer}.cb-autocomplete__dropdown-btn:hover:not(:disabled){color:var(--cb-color-text)}.cb-autocomplete__dropdown-btn:disabled{cursor:not-allowed;opacity:.5}.cb-autocomplete__dropdown-btn cb-icon{color:currentColor}.cb-autocomplete__panel{box-sizing:border-box;width:100%;background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);overflow:hidden;font-family:var(--cb-font-sans)}.cb-autocomplete__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:16rem;overflow-y:auto}.cb-autocomplete__option{display:flex;align-items:center;padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);font-size:var(--cb-text-base);color:var(--cb-color-text);cursor:pointer}.cb-autocomplete__option.cb-is-active{background-color:var(--cb-color-surface-hover)}.cb-autocomplete__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}.cb-autocomplete__message{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-autocomplete__message--hint{color:var(--cb-color-text-muted)}.cb-autocomplete__message--error{color:var(--cb-color-danger)}.cb-autocomplete__required--required,.cb-autocomplete__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], forceSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceSelection", required: false }] }], dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdown", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], requiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredIndicator", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], complete: [{ type: i0.Output, args: ["complete"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

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

@@ -1,20 +1,26 @@
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * AvatarGroup de CaribeNG: agrupa varios `<cb-avatar>` con superposición visual.
  */
 class CbAvatarGroup {
+    constructor() {
+        /** Nombre accesible del grupo (p. ej. "Participantes"). */
+        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: CbAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: CbAvatarGroup, isStandalone: true, selector: "cb-avatar-group", host: { attributes: { "role": "group" }, classAttribute: "cb-avatar-group" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".cb-avatar-group{display:inline-flex;align-items:center}.cb-avatar-group>cb-avatar{border:2px solid var(--cb-color-surface);border-radius:999px}.cb-avatar-group>cb-avatar+cb-avatar{margin-left:-.65rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbAvatarGroup, isStandalone: true, selector: "cb-avatar-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() || null" }, classAttribute: "cb-avatar-group" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".cb-avatar-group{display:inline-flex;align-items:center}.cb-avatar-group>cb-avatar{border:2px solid var(--cb-color-surface);border-radius:999px}.cb-avatar-group>cb-avatar+cb-avatar{margin-left:-.65rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbAvatarGroup, decorators: [{
             type: Component,
             args: [{ selector: 'cb-avatar-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'cb-avatar-group',
                         role: 'group',
+                        '[attr.aria-label]': 'ariaLabel() || null',
                     }, template: `<ng-content />`, styles: [".cb-avatar-group{display:inline-flex;align-items:center}.cb-avatar-group>cb-avatar{border:2px solid var(--cb-color-surface);border-radius:999px}.cb-avatar-group>cb-avatar+cb-avatar{margin-left:-.65rem}\n"] }]
-        }] });
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.