@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-audit-log.mjs

@@ -0,0 +1,323 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { CbButton } from '@caribeng/ui/button';
+import { CbIcon } from '@caribeng/ui/icon';
+import { CbSelect } from '@caribeng/ui/select';
+import { cbDownloadXlsx } from '@caribeng/ui/xlsx';
+
+const toDate = (d) => (d instanceof Date ? d : new Date(d));
+const fold = (s) => s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+let nextUid = 0;
+/**
+ * Visor de auditoría de CaribeNG: el historial de cambios (quién, cuándo, qué
+ * acción y sobre qué registro), agrupado por día, con la diferencia antes /
+ * después de cada campo.
+ *
+ * - Búsqueda y filtros por usuario y acción; cada registro con cambios se abre
+ *   para ver la tabla Campo · Antes · Después.
+ * - `format` da el texto de los valores (importes, fechas, cuentas); Excel descarga el historial.
+ *
+ * @example
+ * ```html
+ * <cb-audit-log [entries]="historial" [format]="formatoValor" />
+ * ```
+ */
+class CbAuditLog {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.uid = `cb-audit-log-${++nextUid}`;
+        /** Registros de auditoría (en cualquier orden: se muestran del más reciente al más antiguo). */
+        this.entries = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+        /** Texto de un valor según su campo (importes, fechas, códigos…). */
+        this.format = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        /** Nombres de las acciones propias (`{ approve: 'aprobó' }`). */
+        this.actionLabels = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionLabels" }] : /* istanbul ignore next */ []));
+        this.entryOpen = output();
+        this.query = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+        this.user = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+        this.action = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
+        this.open = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.userOptions = computed(() => [{ label: this.t().auditAllUsers, value: '' }, ...[...new Set(this.entries().map((e) => e.user))].sort().map((u) => ({ label: u, value: u }))], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "userOptions" }] : /* istanbul ignore next */ []));
+        this.actionOptions = computed(() => [{ label: this.t().auditAllActions, value: '' }, ...[...new Set(this.entries().map((e) => e.action))].map((a) => ({ label: this.actionName(a), value: a }))], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionOptions" }] : /* istanbul ignore next */ []));
+        this.filtered = computed(() => {
+            const q = fold(this.query().trim());
+            const user = this.user();
+            const action = this.action();
+            return [...this.entries()]
+                .filter((e) => (!user || e.user === user) && (!action || e.action === action))
+                .filter((e) => !q || fold(`${e.user} ${e.entity} ${e.note ?? ''} ${(e.changes ?? []).map((c) => `${c.label ?? c.field} ${this.show(c.field, c.before)} ${this.show(c.field, c.after)}`).join(' ')}`).includes(q))
+                .sort((a, b) => toDate(b.date).getTime() - toDate(a.date).getTime());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+        this.groups = computed(() => {
+            const out = [];
+            const fmt = new Intl.DateTimeFormat(this.t().intlLocale, { dateStyle: 'full' });
+            for (const e of this.filtered()) {
+                const d = toDate(e.date);
+                const day = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+                let g = out.find((x) => x.day === day);
+                if (!g) {
+                    const label = fmt.format(d);
+                    g = { day, label: label.charAt(0).toLocaleUpperCase() + label.slice(1), entries: [] };
+                    out.push(g);
+                }
+                g.entries.push(e);
+            }
+            return out;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    }
+    actionName(action) {
+        const t = this.t();
+        const custom = this.actionLabels()[action];
+        if (custom)
+            return custom;
+        return action === 'create' ? t.auditCreated : action === 'update' ? t.auditUpdated : action === 'delete' ? t.auditDeleted : action;
+    }
+    initials(name) {
+        return name
+            .split(/\s+/)
+            .filter(Boolean)
+            .slice(0, 2)
+            .map((p) => p[0].toUpperCase())
+            .join('');
+    }
+    time(d) {
+        return new Intl.DateTimeFormat(this.t().intlLocale, { hour: '2-digit', minute: '2-digit' }).format(toDate(d));
+    }
+    iso(d) {
+        return toDate(d).toISOString();
+    }
+    isEmpty(v) {
+        return v === null || v === undefined || v === '';
+    }
+    show(field, value) {
+        if (this.isEmpty(value))
+            return '';
+        const f = this.format();
+        if (f)
+            return f(field, value);
+        if (value instanceof Date)
+            return new Intl.DateTimeFormat(this.t().intlLocale, { dateStyle: 'medium' }).format(value);
+        if (typeof value === 'boolean')
+            return value ? this.t().yes : this.t().no;
+        return String(value);
+    }
+    isOpen(id) {
+        return this.open().has(id);
+    }
+    toggle(id) {
+        const next = new Set(this.open());
+        if (next.has(id))
+            next.delete(id);
+        else {
+            next.add(id);
+            const e = this.entries().find((x) => x.id === id);
+            if (e)
+                this.entryOpen.emit(e);
+        }
+        this.open.set(next);
+    }
+    /** Hoja de Excel con un renglón por campo cambiado (o por registro, si no hay cambios). */
+    toExcelSheet() {
+        const t = this.t();
+        const rows = [];
+        for (const e of this.filtered()) {
+            const base = [toDate(e.date), this.time(e.date), e.user, this.actionName(e.action), e.entity];
+            if (e.changes?.length)
+                for (const c of e.changes)
+                    rows.push([...base, c.label || c.field, this.show(c.field, c.before), this.show(c.field, c.after), e.note ?? '']);
+            else
+                rows.push([...base, '', '', '', e.note ?? '']);
+        }
+        return {
+            name: t.auditTitle,
+            columns: [{ header: t.agingDate, type: 'date' }, { header: t.auditTime }, { header: t.auditUser }, { header: t.auditAction }, { header: t.auditEntity }, { header: t.auditField }, { header: t.auditBefore }, { header: t.auditAfter }, { header: t.auditNote }],
+            rows,
+        };
+    }
+    exportExcel(filename) {
+        cbDownloadXlsx(filename ?? this.t().auditTitle, this.toExcelSheet());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbAuditLog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbAuditLog, isStandalone: true, selector: "cb-audit-log", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, actionLabels: { classPropertyName: "actionLabels", publicName: "actionLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entryOpen: "entryOpen" }, host: { classAttribute: "cb-audit-log" }, ngImport: i0, template: `
+    <div class="cb-al__filters" role="search">
+      <label class="cb-al__search">
+        <cb-icon name="search" [size]="15" aria-hidden="true" />
+        <input type="search" [placeholder]="t().auditSearch" [attr.aria-label]="t().auditSearch" [value]="query()" (input)="query.set($any($event.target).value)" />
+      </label>
+      <cb-select [options]="userOptions()" optionValue="value" [value]="user()" (valueChange)="user.set($any($event))" [ariaLabel]="t().auditUser" />
+      <cb-select [options]="actionOptions()" optionValue="value" [value]="action()" (valueChange)="action.set($any($event))" [ariaLabel]="t().auditAction" />
+      <span class="cb-al__spacer"></span>
+      <span class="cb-al__count" aria-live="polite">{{ fmt(t().auditCount, filtered().length) }}</span>
+      <cb-button size="sm" variant="outlined" (click)="exportExcel()">
+        <cb-icon name="download" [size]="15" aria-hidden="true" />
+        {{ t().reportExcel }}
+      </cb-button>
+    </div>
+
+    @for (group of groups(); track group.day) {
+      <section class="cb-al__day" [attr.aria-labelledby]="uid + '-' + group.day">
+        <h3 class="cb-al__day-title" [id]="uid + '-' + group.day">{{ group.label }}</h3>
+        <ol class="cb-al__list">
+          @for (e of group.entries; track e.id) {
+            <li class="cb-al__entry" [class]="'cb-al__entry--' + e.action">
+              <span class="cb-al__avatar" aria-hidden="true">{{ initials(e.user) }}</span>
+              <div class="cb-al__body">
+                <p class="cb-al__line">
+                  <strong>{{ e.user }}</strong> {{ actionName(e.action) }} <span class="cb-al__entity">{{ e.entity }}</span>
+                  <time class="cb-al__time" [attr.datetime]="iso(e.date)">{{ time(e.date) }}</time>
+                </p>
+                @if (e.note) {
+                  <p class="cb-al__note">{{ e.note }}</p>
+                }
+                @if (e.changes?.length) {
+                  <button type="button" class="cb-al__toggle" [attr.aria-expanded]="isOpen(e.id)" [attr.aria-controls]="uid + '-c-' + e.id" (click)="toggle(e.id)">
+                    <cb-icon name="chevron-right" [size]="13" [class.cb-is-open]="isOpen(e.id)" aria-hidden="true" />
+                    {{ e.changes!.length === 1 ? t().auditChangesOne : fmt(t().auditChanges, e.changes!.length) }}
+                  </button>
+                  @if (isOpen(e.id)) {
+                    <table class="cb-al__diff" [id]="uid + '-c-' + e.id" [attr.aria-label]="fmt(t().auditChangesOf, e.entity)">
+                      <thead>
+                        <tr>
+                          <th scope="col">{{ t().auditField }}</th>
+                          <th scope="col">{{ t().auditBefore }}</th>
+                          <th scope="col">{{ t().auditAfter }}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        @for (c of e.changes; track c.field) {
+                          <tr>
+                            <th scope="row">{{ c.label || c.field }}</th>
+                            <td class="cb-al__before">
+                              @if (isEmpty(c.before)) {
+                                <span class="cb-al__empty">{{ t().auditEmpty }}</span>
+                              } @else {
+                                <del>{{ show(c.field, c.before) }}</del>
+                              }
+                            </td>
+                            <td class="cb-al__after">
+                              @if (isEmpty(c.after)) {
+                                <span class="cb-al__empty">{{ t().auditEmpty }}</span>
+                              } @else {
+                                <ins>{{ show(c.field, c.after) }}</ins>
+                              }
+                            </td>
+                          </tr>
+                        }
+                      </tbody>
+                    </table>
+                  }
+                }
+              </div>
+            </li>
+          }
+        </ol>
+      </section>
+    } @empty {
+      <p class="cb-al__none">{{ t().auditNone }}</p>
+    }
+  `, isInline: true, styles: [":host{display:grid;gap:var(--cb-space-4, 1rem);width:100%;min-width:0;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-al__filters{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.cb-al__filters cb-select{min-width:11rem}.cb-al__search{display:inline-flex;flex:1 1 14rem;align-items:center;gap:.4rem;height:2.5rem;padding:0 .75rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:var(--cb-color-bg);color:var(--cb-color-text-muted)}.cb-al__search:focus-within{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-al__search input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-base, 1rem)}.cb-al__spacer{flex:1}.cb-al__count{color:var(--cb-color-text-muted)}.cb-al__day-title{margin:0 0 .5rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em}.cb-al__list{display:grid;gap:0;margin:0;padding:0;list-style:none}.cb-al__entry{position:relative;display:grid;grid-template-columns:2rem 1fr;gap:.75rem;padding:0 0 1rem}.cb-al__entry:not(:last-child):before{position:absolute;top:2.1rem;bottom:.2rem;left:calc(1rem - 1px);width:2px;background:var(--cb-color-border);content:\"\"}.cb-al__avatar{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:999px;background:var(--cb-color-surface-subtle);color:var(--cb-color-text);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);box-shadow:inset 0 0 0 2px var(--cb-color-border-strong)}.cb-al__entry--create .cb-al__avatar{box-shadow:inset 0 0 0 2px var(--cb-color-success-500, #10b981)}.cb-al__entry--update .cb-al__avatar{box-shadow:inset 0 0 0 2px var(--cb-color-primary-500)}.cb-al__entry--delete .cb-al__avatar{box-shadow:inset 0 0 0 2px var(--cb-color-danger-500, #ef4444)}.cb-al__body{display:grid;gap:.3rem;min-width:0;padding-top:.3rem}.cb-al__line,.cb-al__note{margin:0}.cb-al__entity{font-weight:var(--cb-font-weight-medium, 500)}.cb-al__time{margin-left:.4rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-variant-numeric:tabular-nums}.cb-al__note{color:var(--cb-color-text-muted);font-style:italic}.cb-al__toggle{display:inline-flex;align-items:center;justify-self:start;gap:.25rem;padding:0;border:0;background:none;color:var(--cb-color-primary-text, var(--cb-color-primary-700));font:inherit;cursor:pointer}.cb-al__toggle cb-icon{transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-al__toggle cb-icon.cb-is-open{transform:rotate(90deg)}.cb-al__toggle:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px;border-radius:2px}.cb-al__diff{width:100%;max-width:44rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);border-collapse:separate;border-spacing:0;overflow:hidden}.cb-al__diff th,.cb-al__diff td{padding:.4rem .65rem;border-bottom:1px solid var(--cb-color-border);text-align:start;vertical-align:top}.cb-al__diff tr:last-child>*{border-bottom:0}.cb-al__diff thead th{background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-al__diff tbody th{width:30%;font-weight:var(--cb-font-weight-medium, 500)}.cb-al__before del{padding:0 .2rem;border-radius:3px;background:color-mix(in srgb,var(--cb-color-danger-500, #ef4444) 12%,transparent);color:var(--cb-color-danger-text, #b91c1c)}.cb-al__after ins{padding:0 .2rem;border-radius:3px;background:color-mix(in srgb,var(--cb-color-success-500, #10b981) 14%,transparent);color:var(--cb-color-success-text, #047857);text-decoration:none}.cb-al__empty{color:var(--cb-color-text-muted);font-style:italic}.cb-al__none{margin:0;padding:2rem 1rem;color:var(--cb-color-text-muted);text-align:center}\n"], dependencies: [{ kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbSelect, selector: "cb-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "group", "optionGroupLabel", "optionGroupChildren", "placeholder", "size", "filter", "filterPlaceholder", "emptyMessage", "showClear", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "invalid", "disabled", "inputId", "ariaLabel", "ariaLabelledBy", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbAuditLog, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-audit-log', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbButton, CbIcon, CbSelect], host: { class: 'cb-audit-log' }, template: `
+    <div class="cb-al__filters" role="search">
+      <label class="cb-al__search">
+        <cb-icon name="search" [size]="15" aria-hidden="true" />
+        <input type="search" [placeholder]="t().auditSearch" [attr.aria-label]="t().auditSearch" [value]="query()" (input)="query.set($any($event.target).value)" />
+      </label>
+      <cb-select [options]="userOptions()" optionValue="value" [value]="user()" (valueChange)="user.set($any($event))" [ariaLabel]="t().auditUser" />
+      <cb-select [options]="actionOptions()" optionValue="value" [value]="action()" (valueChange)="action.set($any($event))" [ariaLabel]="t().auditAction" />
+      <span class="cb-al__spacer"></span>
+      <span class="cb-al__count" aria-live="polite">{{ fmt(t().auditCount, filtered().length) }}</span>
+      <cb-button size="sm" variant="outlined" (click)="exportExcel()">
+        <cb-icon name="download" [size]="15" aria-hidden="true" />
+        {{ t().reportExcel }}
+      </cb-button>
+    </div>
+
+    @for (group of groups(); track group.day) {
+      <section class="cb-al__day" [attr.aria-labelledby]="uid + '-' + group.day">
+        <h3 class="cb-al__day-title" [id]="uid + '-' + group.day">{{ group.label }}</h3>
+        <ol class="cb-al__list">
+          @for (e of group.entries; track e.id) {
+            <li class="cb-al__entry" [class]="'cb-al__entry--' + e.action">
+              <span class="cb-al__avatar" aria-hidden="true">{{ initials(e.user) }}</span>
+              <div class="cb-al__body">
+                <p class="cb-al__line">
+                  <strong>{{ e.user }}</strong> {{ actionName(e.action) }} <span class="cb-al__entity">{{ e.entity }}</span>
+                  <time class="cb-al__time" [attr.datetime]="iso(e.date)">{{ time(e.date) }}</time>
+                </p>
+                @if (e.note) {
+                  <p class="cb-al__note">{{ e.note }}</p>
+                }
+                @if (e.changes?.length) {
+                  <button type="button" class="cb-al__toggle" [attr.aria-expanded]="isOpen(e.id)" [attr.aria-controls]="uid + '-c-' + e.id" (click)="toggle(e.id)">
+                    <cb-icon name="chevron-right" [size]="13" [class.cb-is-open]="isOpen(e.id)" aria-hidden="true" />
+                    {{ e.changes!.length === 1 ? t().auditChangesOne : fmt(t().auditChanges, e.changes!.length) }}
+                  </button>
+                  @if (isOpen(e.id)) {
+                    <table class="cb-al__diff" [id]="uid + '-c-' + e.id" [attr.aria-label]="fmt(t().auditChangesOf, e.entity)">
+                      <thead>
+                        <tr>
+                          <th scope="col">{{ t().auditField }}</th>
+                          <th scope="col">{{ t().auditBefore }}</th>
+                          <th scope="col">{{ t().auditAfter }}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        @for (c of e.changes; track c.field) {
+                          <tr>
+                            <th scope="row">{{ c.label || c.field }}</th>
+                            <td class="cb-al__before">
+                              @if (isEmpty(c.before)) {
+                                <span class="cb-al__empty">{{ t().auditEmpty }}</span>
+                              } @else {
+                                <del>{{ show(c.field, c.before) }}</del>
+                              }
+                            </td>
+                            <td class="cb-al__after">
+                              @if (isEmpty(c.after)) {
+                                <span class="cb-al__empty">{{ t().auditEmpty }}</span>
+                              } @else {
+                                <ins>{{ show(c.field, c.after) }}</ins>
+                              }
+                            </td>
+                          </tr>
+                        }
+                      </tbody>
+                    </table>
+                  }
+                }
+              </div>
+            </li>
+          }
+        </ol>
+      </section>
+    } @empty {
+      <p class="cb-al__none">{{ t().auditNone }}</p>
+    }
+  `, styles: [":host{display:grid;gap:var(--cb-space-4, 1rem);width:100%;min-width:0;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-al__filters{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.cb-al__filters cb-select{min-width:11rem}.cb-al__search{display:inline-flex;flex:1 1 14rem;align-items:center;gap:.4rem;height:2.5rem;padding:0 .75rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:var(--cb-color-bg);color:var(--cb-color-text-muted)}.cb-al__search:focus-within{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-al__search input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-base, 1rem)}.cb-al__spacer{flex:1}.cb-al__count{color:var(--cb-color-text-muted)}.cb-al__day-title{margin:0 0 .5rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em}.cb-al__list{display:grid;gap:0;margin:0;padding:0;list-style:none}.cb-al__entry{position:relative;display:grid;grid-template-columns:2rem 1fr;gap:.75rem;padding:0 0 1rem}.cb-al__entry:not(:last-child):before{position:absolute;top:2.1rem;bottom:.2rem;left:calc(1rem - 1px);width:2px;background:var(--cb-color-border);content:\"\"}.cb-al__avatar{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:999px;background:var(--cb-color-surface-subtle);color:var(--cb-color-text);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);box-shadow:inset 0 0 0 2px var(--cb-color-border-strong)}.cb-al__entry--create .cb-al__avatar{box-shadow:inset 0 0 0 2px var(--cb-color-success-500, #10b981)}.cb-al__entry--update .cb-al__avatar{box-shadow:inset 0 0 0 2px var(--cb-color-primary-500)}.cb-al__entry--delete .cb-al__avatar{box-shadow:inset 0 0 0 2px var(--cb-color-danger-500, #ef4444)}.cb-al__body{display:grid;gap:.3rem;min-width:0;padding-top:.3rem}.cb-al__line,.cb-al__note{margin:0}.cb-al__entity{font-weight:var(--cb-font-weight-medium, 500)}.cb-al__time{margin-left:.4rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-variant-numeric:tabular-nums}.cb-al__note{color:var(--cb-color-text-muted);font-style:italic}.cb-al__toggle{display:inline-flex;align-items:center;justify-self:start;gap:.25rem;padding:0;border:0;background:none;color:var(--cb-color-primary-text, var(--cb-color-primary-700));font:inherit;cursor:pointer}.cb-al__toggle cb-icon{transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-al__toggle cb-icon.cb-is-open{transform:rotate(90deg)}.cb-al__toggle:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px;border-radius:2px}.cb-al__diff{width:100%;max-width:44rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);border-collapse:separate;border-spacing:0;overflow:hidden}.cb-al__diff th,.cb-al__diff td{padding:.4rem .65rem;border-bottom:1px solid var(--cb-color-border);text-align:start;vertical-align:top}.cb-al__diff tr:last-child>*{border-bottom:0}.cb-al__diff thead th{background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-al__diff tbody th{width:30%;font-weight:var(--cb-font-weight-medium, 500)}.cb-al__before del{padding:0 .2rem;border-radius:3px;background:color-mix(in srgb,var(--cb-color-danger-500, #ef4444) 12%,transparent);color:var(--cb-color-danger-text, #b91c1c)}.cb-al__after ins{padding:0 .2rem;border-radius:3px;background:color-mix(in srgb,var(--cb-color-success-500, #10b981) 14%,transparent);color:var(--cb-color-success-text, #047857);text-decoration:none}.cb-al__empty{color:var(--cb-color-text-muted);font-style:italic}.cb-al__none{margin:0;padding:2rem 1rem;color:var(--cb-color-text-muted);text-align:center}\n"] }]
+        }], propDecorators: { entries: [{ type: i0.Input, args: [{ isSignal: true, alias: "entries", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], actionLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabels", required: false }] }], entryOpen: [{ type: i0.Output, args: ["entryOpen"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/audit-log
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbAuditLog };

package/fesm2022/caribeng-ui-avatar.mjs

@@ -44,13 +44,13 @@ 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 {
       <span class="cb-avatar__label">{{ label() }}</span>
     }
-  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden;font-family:var(--cb-font-sans);font-weight:var(--cb-font-weight-semibold);line-height:1;color:var(--_fg);background-color:var(--_bg);-webkit-user-select:none;user-select:none}:host(.cb-avatar--circle){border-radius:var(--cb-radius-full)}:host(.cb-avatar--square){border-radius:var(--cb-radius-md)}.cb-avatar__img{width:100%;height:100%;object-fit:cover}.cb-avatar__label{text-transform:uppercase}:host(.cb-avatar--primary){--_bg: var(--cb-color-primary-500);--_fg: var(--cb-color-primary-contrast)}:host(.cb-avatar--secondary){--_bg: var(--cb-color-surface-200);--_fg: var(--cb-color-text)}:host(.cb-avatar--success){--_bg: var(--cb-color-success-500);--_fg: var(--cb-color-success-contrast)}:host(.cb-avatar--info){--_bg: var(--cb-color-info-500);--_fg: var(--cb-color-info-contrast)}:host(.cb-avatar--warning){--_bg: var(--cb-color-warning-500);--_fg: var(--cb-color-warning-contrast)}:host(.cb-avatar--danger){--_bg: var(--cb-color-danger-500);--_fg: var(--cb-color-danger-contrast)}:host(.cb-avatar--help){--_bg: var(--cb-color-help-500);--_fg: var(--cb-color-help-contrast)}:host(.cb-avatar--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}:host-context([data-theme=\"dark\"]):host(.cb-avatar--secondary){--_bg: var(--cb-color-surface-300)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden;font-family:var(--cb-font-sans);font-weight:var(--cb-font-weight-semibold);line-height:1;color:var(--_fg);background-color:var(--_bg);-webkit-user-select:none;user-select:none}:host(.cb-avatar--circle){border-radius:var(--cb-radius-full)}:host(.cb-avatar--square){border-radius:var(--cb-radius-md)}.cb-avatar__img{width:100%;height:100%;object-fit:cover}.cb-avatar__label{text-transform:uppercase}:host(.cb-avatar--primary){--_bg: var(--cb-color-primary-500);--_fg: var(--cb-color-primary-contrast)}:host(.cb-avatar--secondary){--_bg: var(--cb-color-border);--_fg: var(--cb-color-text)}:host(.cb-avatar--success){--_bg: var(--cb-color-success-500);--_fg: var(--cb-color-success-contrast)}:host(.cb-avatar--info){--_bg: var(--cb-color-info-500);--_fg: var(--cb-color-info-contrast)}:host(.cb-avatar--warning){--_bg: var(--cb-color-warning-500);--_fg: var(--cb-color-warning-contrast)}:host(.cb-avatar--danger){--_bg: var(--cb-color-danger-500);--_fg: var(--cb-color-danger-contrast)}:host(.cb-avatar--help){--_bg: var(--cb-color-help-500);--_fg: var(--cb-color-help-contrast)}:host(.cb-avatar--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}\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: CbAvatar, decorators: [{
             type: Component,
@@ -64,13 +64,13 @@ 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 {
       <span class="cb-avatar__label">{{ label() }}</span>
     }
-  `, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden;font-family:var(--cb-font-sans);font-weight:var(--cb-font-weight-semibold);line-height:1;color:var(--_fg);background-color:var(--_bg);-webkit-user-select:none;user-select:none}:host(.cb-avatar--circle){border-radius:var(--cb-radius-full)}:host(.cb-avatar--square){border-radius:var(--cb-radius-md)}.cb-avatar__img{width:100%;height:100%;object-fit:cover}.cb-avatar__label{text-transform:uppercase}:host(.cb-avatar--primary){--_bg: var(--cb-color-primary-500);--_fg: var(--cb-color-primary-contrast)}:host(.cb-avatar--secondary){--_bg: var(--cb-color-surface-200);--_fg: var(--cb-color-text)}:host(.cb-avatar--success){--_bg: var(--cb-color-success-500);--_fg: var(--cb-color-success-contrast)}:host(.cb-avatar--info){--_bg: var(--cb-color-info-500);--_fg: var(--cb-color-info-contrast)}:host(.cb-avatar--warning){--_bg: var(--cb-color-warning-500);--_fg: var(--cb-color-warning-contrast)}:host(.cb-avatar--danger){--_bg: var(--cb-color-danger-500);--_fg: var(--cb-color-danger-contrast)}:host(.cb-avatar--help){--_bg: var(--cb-color-help-500);--_fg: var(--cb-color-help-contrast)}:host(.cb-avatar--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}:host-context([data-theme=\"dark\"]):host(.cb-avatar--secondary){--_bg: var(--cb-color-surface-300)}\n"] }]
+  `, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden;font-family:var(--cb-font-sans);font-weight:var(--cb-font-weight-semibold);line-height:1;color:var(--_fg);background-color:var(--_bg);-webkit-user-select:none;user-select:none}:host(.cb-avatar--circle){border-radius:var(--cb-radius-full)}:host(.cb-avatar--square){border-radius:var(--cb-radius-md)}.cb-avatar__img{width:100%;height:100%;object-fit:cover}.cb-avatar__label{text-transform:uppercase}:host(.cb-avatar--primary){--_bg: var(--cb-color-primary-500);--_fg: var(--cb-color-primary-contrast)}:host(.cb-avatar--secondary){--_bg: var(--cb-color-border);--_fg: var(--cb-color-text)}:host(.cb-avatar--success){--_bg: var(--cb-color-success-500);--_fg: var(--cb-color-success-contrast)}:host(.cb-avatar--info){--_bg: var(--cb-color-info-500);--_fg: var(--cb-color-info-contrast)}:host(.cb-avatar--warning){--_bg: var(--cb-color-warning-500);--_fg: var(--cb-color-warning-contrast)}:host(.cb-avatar--danger){--_bg: var(--cb-color-danger-500);--_fg: var(--cb-color-danger-contrast)}:host(.cb-avatar--help){--_bg: var(--cb-color-help-500);--_fg: var(--cb-color-help-contrast)}:host(.cb-avatar--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}\n"] }]
         }], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /*

package/fesm2022/caribeng-ui-badge.mjs

@@ -23,9 +23,12 @@ class CbBadge {
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /** Muestra solo un punto (sin texto). */
         this.dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Nombre accesible que sustituye al valor (p. ej. "3 mensajes sin leer"). Sin él, un `dot` es decorativo. */
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbBadge, isStandalone: true, selector: "cb-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "'cb-badge cb-badge--' + severity() + ' cb-badge--' + size()", "class.cb-badge--dot": "dot()" }, classAttribute: "cb-badge" }, ngImport: i0, template: `@if (!dot()) {{{ value() }}}`, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:var(--cb-radius-full);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-bold);line-height:1;color:var(--_fg);background-color:var(--_bg)}:host(.cb-badge--sm){min-width:1rem;height:1rem;font-size:.625rem;padding:0 .25rem}:host(.cb-badge--lg){min-width:1.5rem;height:1.5rem;font-size:var(--cb-text-sm);padding:0 .5rem}:host(.cb-badge--dot){min-width:.625rem;width:.625rem;height:.625rem;padding:0}:host(.cb-badge--dot.cb-badge--sm){min-width:.5rem;width:.5rem;height:.5rem}:host(.cb-badge--dot.cb-badge--lg){min-width:.75rem;width:.75rem;height:.75rem}:host(.cb-badge--primary){--_bg: var(--cb-color-primary-500);--_fg: var(--cb-color-primary-contrast)}:host(.cb-badge--secondary){--_bg: var(--cb-color-surface-500);--_fg: var(--cb-color-surface-50)}:host(.cb-badge--success){--_bg: var(--cb-color-success-500);--_fg: var(--cb-color-success-contrast)}:host(.cb-badge--info){--_bg: var(--cb-color-info-500);--_fg: var(--cb-color-info-contrast)}:host(.cb-badge--warning){--_bg: var(--cb-color-warning-500);--_fg: var(--cb-color-warning-contrast)}:host(.cb-badge--danger){--_bg: var(--cb-color-danger-500);--_fg: var(--cb-color-danger-contrast)}:host(.cb-badge--help){--_bg: var(--cb-color-help-500);--_fg: var(--cb-color-help-contrast)}:host(.cb-badge--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbBadge, isStandalone: true, selector: "cb-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "'cb-badge cb-badge--' + severity() + ' cb-badge--' + size()", "class.cb-badge--dot": "dot()", "attr.role": "ariaLabel() ? \"img\" : null", "attr.aria-label": "ariaLabel() || null", "attr.aria-hidden": "dot() && !ariaLabel() ? \"true\" : null" }, classAttribute: "cb-badge" }, ngImport: i0, template: `@if (!dot()) {{{ value() }}}`, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:var(--cb-radius-full);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-bold);line-height:1;color:var(--_fg);background-color:var(--_bg)}:host(.cb-badge--sm){min-width:1rem;height:1rem;font-size:.625rem;padding:0 .25rem}:host(.cb-badge--lg){min-width:1.5rem;height:1.5rem;font-size:var(--cb-text-sm);padding:0 .5rem}:host(.cb-badge--dot){min-width:.625rem;width:.625rem;height:.625rem;padding:0}:host(.cb-badge--dot.cb-badge--sm){min-width:.5rem;width:.5rem;height:.5rem}:host(.cb-badge--dot.cb-badge--lg){min-width:.75rem;width:.75rem;height:.75rem}:host(.cb-badge--primary){--_bg: var(--cb-color-primary-500);--_fg: var(--cb-color-primary-contrast)}:host(.cb-badge--secondary){--_bg: var(--cb-color-surface-500);--_fg: var(--cb-color-surface-50)}:host(.cb-badge--success){--_bg: var(--cb-color-success-500);--_fg: var(--cb-color-success-contrast)}:host(.cb-badge--info){--_bg: var(--cb-color-info-500);--_fg: var(--cb-color-info-contrast)}:host(.cb-badge--warning){--_bg: var(--cb-color-warning-500);--_fg: var(--cb-color-warning-contrast)}:host(.cb-badge--danger){--_bg: var(--cb-color-danger-500);--_fg: var(--cb-color-danger-contrast)}:host(.cb-badge--help){--_bg: var(--cb-color-help-500);--_fg: var(--cb-color-help-contrast)}:host(.cb-badge--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbBadge, decorators: [{
             type: Component,
@@ -33,8 +36,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         class: 'cb-badge',
                         '[class]': "'cb-badge cb-badge--' + severity() + ' cb-badge--' + size()",
                         '[class.cb-badge--dot]': 'dot()',
+                        '[attr.role]': 'ariaLabel() ? "img" : null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-hidden]': 'dot() && !ariaLabel() ? "true" : null',
                     }, template: `@if (!dot()) {{{ value() }}}`, styles: [":host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:var(--cb-radius-full);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-bold);line-height:1;color:var(--_fg);background-color:var(--_bg)}:host(.cb-badge--sm){min-width:1rem;height:1rem;font-size:.625rem;padding:0 .25rem}:host(.cb-badge--lg){min-width:1.5rem;height:1.5rem;font-size:var(--cb-text-sm);padding:0 .5rem}:host(.cb-badge--dot){min-width:.625rem;width:.625rem;height:.625rem;padding:0}:host(.cb-badge--dot.cb-badge--sm){min-width:.5rem;width:.5rem;height:.5rem}:host(.cb-badge--dot.cb-badge--lg){min-width:.75rem;width:.75rem;height:.75rem}:host(.cb-badge--primary){--_bg: var(--cb-color-primary-500);--_fg: var(--cb-color-primary-contrast)}:host(.cb-badge--secondary){--_bg: var(--cb-color-surface-500);--_fg: var(--cb-color-surface-50)}:host(.cb-badge--success){--_bg: var(--cb-color-success-500);--_fg: var(--cb-color-success-contrast)}:host(.cb-badge--info){--_bg: var(--cb-color-info-500);--_fg: var(--cb-color-info-contrast)}:host(.cb-badge--warning){--_bg: var(--cb-color-warning-500);--_fg: var(--cb-color-warning-contrast)}:host(.cb-badge--danger){--_bg: var(--cb-color-danger-500);--_fg: var(--cb-color-danger-contrast)}:host(.cb-badge--help){--_bg: var(--cb-color-help-500);--_fg: var(--cb-color-help-contrast)}:host(.cb-badge--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';
 }

package/fesm2022/caribeng-ui-breadcrumb.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
-import { injectCbTranslation } from '@caribeng/ui';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 /**
  * Breadcrumb de CaribeNG: rastro de navegación jerárquica.
@@ -21,23 +21,35 @@ class CbBreadcrumb {
         this.t = injectCbTranslation();
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Items sin los de `visible: false`. */
+        this.visibleItems = computed(() => cbVisibleItems(this.items()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
         /** Icono separador entre elementos. */
         this.separator = input('chevron-right', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
-        /** Se emite al hacer clic en un elemento con enlace. */
+        /** Se emite al hacer clic en un elemento con enlace o con `command` (que no sea el último). */
         this.itemClick = output();
     }
+    select(item, event) {
+        cbRunCommand(item, event);
+        this.itemClick.emit(item);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbBreadcrumb, isStandalone: true, selector: "cb-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "cb-breadcrumb" }, ngImport: i0, template: `
     <nav [attr.aria-label]="t().breadcrumb">
       <ol class="cb-breadcrumb__list">
-        @for (item of items(); track $index; let last = $last) {
+        @for (item of visibleItems(); track $index; let last = $last) {
           <li class="cb-breadcrumb__item">
             @if (item.url && !last) {
-              <a class="cb-breadcrumb__link" [href]="item.url" (click)="itemClick.emit(item)">
+              <a class="cb-breadcrumb__link" [href]="item.url" (click)="select(item, $event)">
                 @if (item.icon) { <cb-icon [name]="item.icon" [size]="15" aria-hidden="true" /> }
                 <span>{{ item.label }}</span>
               </a>
+            } @else if (item.command && !last) {
+              <button type="button" class="cb-breadcrumb__link cb-breadcrumb__button" (click)="select(item, $event)">
+                @if (item.icon) { <cb-icon [name]="item.icon" [size]="15" aria-hidden="true" /> }
+                <span>{{ item.label }}</span>
+              </button>
             } @else {
               <span class="cb-breadcrumb__current" [attr.aria-current]="last ? 'page' : null">
                 @if (item.icon) { <cb-icon [name]="item.icon" [size]="15" aria-hidden="true" /> }
@@ -51,20 +63,25 @@ class CbBreadcrumb {
         }
       </ol>
     </nav>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);font-size:var(--cb-text-sm)}.cb-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-1);list-style:none;margin:0;padding:0}.cb-breadcrumb__item{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-breadcrumb__link{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .25rem;border-radius:var(--cb-radius-sm);color:var(--cb-color-text-muted);text-decoration:none;transition:color var(--cb-duration-fast) var(--cb-ease)}.cb-breadcrumb__link:hover{color:var(--cb-color-primary-500)}.cb-breadcrumb__link:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-breadcrumb__current{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .25rem;color:var(--cb-color-text);font-weight:var(--cb-font-weight-medium)}.cb-breadcrumb__sep{color:var(--cb-color-text-muted);opacity:.6}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);font-size:var(--cb-text-sm)}.cb-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-1);list-style:none;margin:0;padding:0}.cb-breadcrumb__item{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-breadcrumb__link{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .25rem;border-radius:var(--cb-radius-sm);color:var(--cb-color-text-muted);text-decoration:none;transition:color var(--cb-duration-fast) var(--cb-ease)}.cb-breadcrumb__button{margin:0;border:0;background:transparent;font:inherit;cursor:pointer}.cb-breadcrumb__link:hover{color:var(--cb-color-primary-text)}.cb-breadcrumb__link:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-breadcrumb__current{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .25rem;color:var(--cb-color-text);font-weight:var(--cb-font-weight-medium)}.cb-breadcrumb__sep{color:var(--cb-color-text-muted);opacity:.6}\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: CbBreadcrumb, decorators: [{
             type: Component,
             args: [{ selector: 'cb-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-breadcrumb' }, template: `
     <nav [attr.aria-label]="t().breadcrumb">
       <ol class="cb-breadcrumb__list">
-        @for (item of items(); track $index; let last = $last) {
+        @for (item of visibleItems(); track $index; let last = $last) {
           <li class="cb-breadcrumb__item">
             @if (item.url && !last) {
-              <a class="cb-breadcrumb__link" [href]="item.url" (click)="itemClick.emit(item)">
+              <a class="cb-breadcrumb__link" [href]="item.url" (click)="select(item, $event)">
                 @if (item.icon) { <cb-icon [name]="item.icon" [size]="15" aria-hidden="true" /> }
                 <span>{{ item.label }}</span>
               </a>
+            } @else if (item.command && !last) {
+              <button type="button" class="cb-breadcrumb__link cb-breadcrumb__button" (click)="select(item, $event)">
+                @if (item.icon) { <cb-icon [name]="item.icon" [size]="15" aria-hidden="true" /> }
+                <span>{{ item.label }}</span>
+              </button>
             } @else {
               <span class="cb-breadcrumb__current" [attr.aria-current]="last ? 'page' : null">
                 @if (item.icon) { <cb-icon [name]="item.icon" [size]="15" aria-hidden="true" /> }
@@ -78,7 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       </ol>
     </nav>
-  `, styles: [":host{display:block;font-family:var(--cb-font-sans);font-size:var(--cb-text-sm)}.cb-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-1);list-style:none;margin:0;padding:0}.cb-breadcrumb__item{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-breadcrumb__link{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .25rem;border-radius:var(--cb-radius-sm);color:var(--cb-color-text-muted);text-decoration:none;transition:color var(--cb-duration-fast) var(--cb-ease)}.cb-breadcrumb__link:hover{color:var(--cb-color-primary-500)}.cb-breadcrumb__link:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-breadcrumb__current{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .25rem;color:var(--cb-color-text);font-weight:var(--cb-font-weight-medium)}.cb-breadcrumb__sep{color:var(--cb-color-text-muted);opacity:.6}\n"] }]
+  `, styles: [":host{display:block;font-family:var(--cb-font-sans);font-size:var(--cb-text-sm)}.cb-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-1);list-style:none;margin:0;padding:0}.cb-breadcrumb__item{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-breadcrumb__link{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .25rem;border-radius:var(--cb-radius-sm);color:var(--cb-color-text-muted);text-decoration:none;transition:color var(--cb-duration-fast) var(--cb-ease)}.cb-breadcrumb__button{margin:0;border:0;background:transparent;font:inherit;cursor:pointer}.cb-breadcrumb__link:hover{color:var(--cb-color-primary-text)}.cb-breadcrumb__link:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-breadcrumb__current{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .25rem;color:var(--cb-color-text);font-weight:var(--cb-font-weight-medium)}.cb-breadcrumb__sep{color:var(--cb-color-text-muted);opacity:.6}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 /*

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

@@ -3,7 +3,7 @@ import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@a
 import { injectCbTranslation } from '@caribeng/ui';
 
 /**
- * Button-group de Caribe Design: contenedor que agrupa acciones relacionadas
+ * Button-group: contenedor que agrupa acciones relacionadas
  * en una superficie segmentada, en horizontal o vertical.
  *
  * @example
@@ -25,13 +25,13 @@ class CbButtonGroup {
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbButtonGroup, isStandalone: true, selector: "cb-button-group", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "(ariaLabel() ?? t().actionGroup)", "class.cb-button-group-host--vertical": "orientation() === 'vertical'" }, classAttribute: "cb-button-group-host" }, ngImport: i0, template: `
-    <div
-      class="cb-button-group"
-      [class.cb-button-group--vertical]="orientation() === 'vertical'"
-    >
-      <ng-content />
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbButtonGroup, isStandalone: true, selector: "cb-button-group", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "(ariaLabel() ?? t().actionGroup)", "class.cb-button-group-host--vertical": "orientation() === 'vertical'" }, classAttribute: "cb-button-group-host" }, ngImport: i0, template: `
+    <div
+      class="cb-button-group"
+      [class.cb-button-group--vertical]="orientation() === 'vertical'"
+    >
+      <ng-content />
+    </div>
   `, isInline: true, styles: [":host{display:inline-flex}.cb-button-group{display:inline-flex;flex-direction:row;align-items:stretch;gap:var(--cb-space-1, .25rem);padding:var(--cb-space-1, .25rem);background-color:var(--cb-color-surface-100, #f1f5f9);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-md, .5rem);font-family:var(--cb-font-sans, inherit)}.cb-button-group--vertical{flex-direction:column}.cb-button-group ::ng-deep>button,.cb-button-group ::ng-deep>a{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-1, .25rem);padding:var(--cb-space-2, .5rem) var(--cb-space-4, 1rem);font:inherit;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text, #0f172a);background-color:transparent;border:none;border-radius:var(--cb-radius-sm, .375rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-button-group ::ng-deep>button:hover,.cb-button-group ::ng-deep>a:hover{background-color:var(--cb-color-surface-0, #ffffff)}.cb-button-group ::ng-deep>button[aria-pressed=true],.cb-button-group ::ng-deep>button.is-active{background-color:var(--cb-color-surface-0, #ffffff);color:var(--cb-color-primary-700, #065f46);box-shadow:var(--cb-shadow-sm, 0 1px 2px rgba(0, 0, 0, .1))}:host-context([data-theme=\"dark\"]) .cb-button-group{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-button-group ::ng-deep>button,:host-context([data-theme=\"dark\"]) .cb-button-group ::ng-deep>a{color:var(--cb-color-surface-0, #f8fafc)}:host-context([data-theme=\"dark\"]) .cb-button-group ::ng-deep>button:hover,:host-context([data-theme=\"dark\"]) .cb-button-group ::ng-deep>a:hover,:host-context([data-theme=\"dark\"]) .cb-button-group ::ng-deep>button[aria-pressed=true]{background-color:var(--cb-color-surface-700, #334155)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbButtonGroup, decorators: [{
@@ -41,13 +41,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         role: 'group',
                         '[attr.aria-label]': '(ariaLabel() ?? t().actionGroup)',
                         '[class.cb-button-group-host--vertical]': "orientation() === 'vertical'",
-                    }, template: `
-    <div
-      class="cb-button-group"
-      [class.cb-button-group--vertical]="orientation() === 'vertical'"
-    >
-      <ng-content />
-    </div>
+                    }, template: `
+    <div
+      class="cb-button-group"
+      [class.cb-button-group--vertical]="orientation() === 'vertical'"
+    >
+      <ng-content />
+    </div>
   `, styles: [":host{display:inline-flex}.cb-button-group{display:inline-flex;flex-direction:row;align-items:stretch;gap:var(--cb-space-1, .25rem);padding:var(--cb-space-1, .25rem);background-color:var(--cb-color-surface-100, #f1f5f9);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-md, .5rem);font-family:var(--cb-font-sans, inherit)}.cb-button-group--vertical{flex-direction:column}.cb-button-group ::ng-deep>button,.cb-button-group ::ng-deep>a{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-1, .25rem);padding:var(--cb-space-2, .5rem) var(--cb-space-4, 1rem);font:inherit;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text, #0f172a);background-color:transparent;border:none;border-radius:var(--cb-radius-sm, .375rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-button-group ::ng-deep>button:hover,.cb-button-group ::ng-deep>a:hover{background-color:var(--cb-color-surface-0, #ffffff)}.cb-button-group ::ng-deep>button[aria-pressed=true],.cb-button-group ::ng-deep>button.is-active{background-color:var(--cb-color-surface-0, #ffffff);color:var(--cb-color-primary-700, #065f46);box-shadow:var(--cb-shadow-sm, 0 1px 2px rgba(0, 0, 0, .1))}:host-context([data-theme=\"dark\"]) .cb-button-group{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-button-group ::ng-deep>button,:host-context([data-theme=\"dark\"]) .cb-button-group ::ng-deep>a{color:var(--cb-color-surface-0, #f8fafc)}:host-context([data-theme=\"dark\"]) .cb-button-group ::ng-deep>button:hover,:host-context([data-theme=\"dark\"]) .cb-button-group ::ng-deep>a:hover,:host-context([data-theme=\"dark\"]) .cb-button-group ::ng-deep>button[aria-pressed=true]{background-color:var(--cb-color-surface-700, #334155)}\n"] }]
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });