@caribeng/ui 22.1.0 → 22.2.0

package/README.md

@@ -15,7 +15,7 @@
 
 ## ✨ 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.
+- **152 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).
@@ -39,24 +39,42 @@ Navegadores: los mismos que [soporta Angular](https://angular.dev/reference/vers
 ### Requisitos
 
 - Un proyecto **Angular 22** con `@angular/forms` (lo incluye cualquier proyecto creado con `ng new`).
-- **`@angular/cdk` 22**, que CaribeNG usa para overlays y accesibilidad.
+- `@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
-npm install @caribeng/ui @angular/cdk
+npm install @caribeng/ui
 
 # yarn
-yarn add @caribeng/ui @angular/cdk
+yarn add @caribeng/ui
 
 # pnpm
-pnpm add @caribeng/ui @angular/cdk
+pnpm add @caribeng/ui
 ```
 
 ## 🔨 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 +149,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
@@ -169,15 +209,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`.
+- **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`, `inlinemessage`, `message`, `tag`, `toast`.
-- **Menu:** `breadcrumb`, `contextmenu`, `dock`, `megamenu`, `menu`, `menubar`, `panelmenu`, `speeddial`, `steps`, `tabmenu`, `tieredmenu`.
+- **Messages:** `badge`, `chip`, `empty`, `inlinemessage`, `message`, `result`, `tag`, `toast`.
+- **Menu:** `anchor`, `breadcrumb`, `contextmenu`, `dock`, `megamenu`, `menu`, `menubar`, `panelmenu`, `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`.
 - **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`, `focustrap`, `icon`, `icons`, `inplace`, `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

@@ -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,
@@ -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-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.

package/fesm2022/caribeng-ui-blockui.mjs

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

package/fesm2022/caribeng-ui-breadcrumb.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Breadcrumb de CaribeNG: rastro de navegación jerárquica.
@@ -16,6 +17,8 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbBreadcrumb {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         /** Icono separador entre elementos. */
@@ -26,7 +29,7 @@ class CbBreadcrumb {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbBreadcrumb, isStandalone: true, selector: "cb-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "cb-breadcrumb" }, ngImport: i0, template: `
-    <nav aria-label="Breadcrumb">
+    <nav [attr.aria-label]="t().breadcrumb">
       <ol class="cb-breadcrumb__list">
         @for (item of items(); track $index; let last = $last) {
           <li class="cb-breadcrumb__item">
@@ -53,7 +56,7 @@ class CbBreadcrumb {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbBreadcrumb, decorators: [{
             type: Component,
             args: [{ selector: 'cb-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-breadcrumb' }, template: `
-    <nav aria-label="Breadcrumb">
+    <nav [attr.aria-label]="t().breadcrumb">
       <ol class="cb-breadcrumb__list">
         @for (item of items(); track $index; let last = $last) {
           <li class="cb-breadcrumb__item">