@caribeng/ui 22.4.0 → 22.5.0

package/fesm2022/caribeng-ui-table.mjs

@@ -3,7 +3,8 @@ import { input, inject, TemplateRef, Directive, contentChildren, contentChild, v
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { CbIcon } from '@caribeng/ui/icon';
 import { CbPaginator } from '@caribeng/ui/paginator';
-import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { currencySymbol, cbDownloadXlsx } from '@caribeng/ui/xlsx';
+import { injectCbTranslation, cbFormat, CB_CONFIG, cbSummarize, cbToNumber, cbFormatAmount } from '@caribeng/ui';
 
 /** Plantilla de las celdas de una columna: `<ng-template cbTableCell="campo" let-row let-value="value">`. */
 class CbTableCellDirective {
@@ -147,6 +148,14 @@ class CbTable {
         ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
         /** Muestra la capa de carga y marca la tabla con `aria-busy`. */
         this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Con `groupRowsBy`, una fila de subtotal al final de cada grupo (columnas con `summary`). */
+        this.groupSubtotals = input(false, { ...(ngDevMode ? { debugName: "groupSubtotals" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Moneda de las columnas `currency` (si no, la de `provideCaribeNG({ currency })`). */
+        this.currency = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+        /** Negativos con signo o entre paréntesis (si no, el de `provideCaribeNG({ negativeStyle })`). */
+        this.negativeStyle = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "negativeStyle" }] : /* istanbul ignore next */ []));
         this.selection = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
         this.sortChange = output();
@@ -239,6 +248,50 @@ class CbTable {
             return data.slice(start, start + this.rows());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageRows" }] : /* istanbul ignore next */ []));
+        this.config = inject(CB_CONFIG);
+        this.hasSummary = computed(() => this.columns().some((c) => c.summary), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSummary" }] : /* istanbul ignore next */ []));
+        this.hasFooterText = computed(() => this.columns().some((c) => c.footer), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasFooterText" }] : /* istanbul ignore next */ []));
+        this.hasFooter = computed(() => this.hasSummary() || this.hasFooterText(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+        /** Columna donde va la etiqueta "Total" / "Subtotal": la primera sin total. */
+        this.labelColumn = computed(() => Math.max(0, this.displayColumns().findIndex((c) => !c.summary)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelColumn" }] : /* istanbul ignore next */ []));
+        /**
+         * Columnas que ocupa la etiqueta: desde la suya hasta la siguiente con total
+         * (sin partir columnas fijas de no fijas).
+         */
+        this.labelSpan = computed(() => {
+            const cols = this.displayColumns();
+            const start = this.labelColumn();
+            let end = start + 1;
+            while (end < cols.length && !cols[end].summary && !!cols[end].frozen === !!cols[start].frozen)
+                end++;
+            return end - start;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelSpan" }] : /* istanbul ignore next */ []));
+        /** Totales del pie, sobre todas las filas filtradas (no solo la página). */
+        this.totals = computed(() => this.summarize(this.sorted()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totals" }] : /* istanbul ignore next */ []));
+        /** Totales por grupo (con `groupSubtotals`). */
+        this.groupTotals = computed(() => {
+            const field = this.groupRowsBy();
+            const out = new Map();
+            if (!field || !this.groupSubtotals() || !this.hasSummary())
+                return out;
+            const groups = new Map();
+            for (const row of this.sorted()) {
+                const key = fieldValue(row, field);
+                if (!groups.has(key))
+                    groups.set(key, []);
+                groups.get(key).push(row);
+            }
+            for (const [key, rows] of groups)
+                out.set(key, this.summarize(rows));
+            return out;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupTotals" }] : /* istanbul ignore next */ []));
         this.colspan = computed(() => this.displayColumns().length + (this.selectionMode() ? 1 : 0) + (this.expansion() ? 1 : 0), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "colspan" }] : /* istanbul ignore next */ []));
         this.selectedCount = computed(() => {
@@ -419,6 +472,14 @@ class CbTable {
     groupCount(row) {
         return this.groupCounts().get(this.groupOf(row)) ?? 0;
     }
+    /** La fila cierra grupo si es la última de la página o el siguiente cambia de grupo. */
+    isGroupEnd(index) {
+        const rows = this.pageRows();
+        return index === rows.length - 1 || this.groupOf(rows[index + 1]) !== this.groupOf(rows[index]);
+    }
+    groupSummary(row, col) {
+        return this.groupTotals().get(this.groupOf(row))?.[col.field];
+    }
     /** La fila abre grupo si es la primera de la página o cambia el valor del grupo. */
     isGroupStart(index) {
         const rows = this.pageRows();
@@ -449,6 +510,47 @@ class CbTable {
             this.frozenOffsets.set(offsets);
     }
     // --- Exportación ---------------------------------------------------------------------
+    /**
+     * Hoja de Excel con las columnas visibles (salvo `exportable: false`) y todas las
+     * filas filtradas y ordenadas: importes como números con su formato, subtotales
+     * de grupo y totales en negrita.
+     */
+    toExcelSheet(options = {}) {
+        const cols = this.displayColumns().filter((c) => c.exportable !== false);
+        const locale = this.config.numberLocale ?? this.t().intlLocale;
+        const columns = cols.map((c) => {
+            const currency = c.currency ?? this.currency() ?? this.config.currency;
+            const negative = c.negative ?? this.negativeStyle() ?? this.config.negativeStyle;
+            return {
+                header: c.header,
+                type: c.type === 'currency' ? (currency ? 'currency' : 'number') : c.type === 'number' ? 'number' : c.type === 'percent' ? 'percent' : 'text',
+                decimals: c.decimals,
+                negative,
+                symbol: c.type === 'currency' && currency ? currencySymbol(currency, locale) : undefined,
+            };
+        });
+        const cell = (row, c) => {
+            const v = fieldValue(row, c.field);
+            return c.format && !this.isNumeric(c) ? c.format(v, row) : v;
+        };
+        const source = options.selectionOnly ? this.sorted().filter((row) => this.isSelected(row)) : this.sorted();
+        const rows = [];
+        const group = this.groupRowsBy();
+        source.forEach((row, i) => {
+            rows.push({ cells: cols.map((c) => cell(row, c)) });
+            const key = group ? fieldValue(row, group) : null;
+            if (group && this.groupSubtotals() && this.hasSummary() && (i === source.length - 1 || fieldValue(source[i + 1], group) !== key)) {
+                const totals = this.groupTotals().get(key) ?? {};
+                rows.push({ bold: true, cells: cols.map((c, ci) => (ci === 0 && !c.summary ? cbFormat(this.t().tableSubtotal, key) : totals[c.field])) });
+            }
+        });
+        const totals = this.hasSummary() ? cols.map((c, ci) => (ci === 0 && !c.summary ? (c.footer ?? this.t().tableTotal) : (this.totals()[c.field] ?? c.footer ?? null))) : undefined;
+        return { name: options.sheetName ?? this.ariaLabel() ?? 'Datos', title: options.title, columns, rows, totals };
+    }
+    /** Descarga las filas en Excel (`nombre.xlsx`) con formatos de número, subtotales y totales. */
+    exportExcel(filename = 'datos', options = {}) {
+        cbDownloadXlsx(filename, this.toExcelSheet(options));
+    }
     /**
      * Datos en CSV: columnas visibles (salvo `exportable: false`) y todas las filas
      * filtradas y ordenadas (no solo la página), o las seleccionadas con `selectionOnly`.
@@ -473,6 +575,58 @@ class CbTable {
         link.click();
         setTimeout(() => URL.revokeObjectURL(url));
     }
+    // --- Formato y totales -----------------------------------------------------------
+    /** Totales de las columnas con `summary` sobre unas filas. */
+    summarize(rows) {
+        const out = {};
+        for (const col of this.columns()) {
+            if (!col.summary)
+                continue;
+            out[col.field] = typeof col.summary === 'function' ? col.summary(rows) : cbSummarize(rows.map((r) => fieldValue(r, col.field)), col.summary);
+        }
+        return out;
+    }
+    isNumeric(col) {
+        return col.type === 'number' || col.type === 'currency' || col.type === 'percent';
+    }
+    alignOf(col) {
+        return col.align || (this.isNumeric(col) ? 'right' : null);
+    }
+    isNegative(value, col) {
+        if (!this.isNumeric(col))
+            return false;
+        const n = cbToNumber(value);
+        return n !== null && n < 0;
+    }
+    /** Texto de una celda: `format`, o el formato de su `type`. */
+    display(value, col, row) {
+        if (col.format)
+            return col.format(value, row);
+        return this.isNumeric(col) ? this.formatNumber(value, col) : value;
+    }
+    /** Texto de un total: con el formato de la columna (una cuenta, como número entero). */
+    summaryText(value, col) {
+        if (value === undefined || value === null)
+            return '';
+        if (col.summary === 'count')
+            return cbFormatAmount(value, this.config.numberLocale ?? this.t().intlLocale, { decimals: 0 });
+        if (col.format && typeof col.summary !== 'function')
+            return col.format(value, null);
+        return this.isNumeric(col) ? this.formatNumber(value, col) : String(value);
+    }
+    formatNumber(value, col) {
+        const locale = this.config.numberLocale ?? this.t().intlLocale;
+        const negative = col.negative ?? this.negativeStyle() ?? this.config.negativeStyle ?? 'minus';
+        if (col.type === 'percent') {
+            const n = cbToNumber(value);
+            if (n === null)
+                return value == null ? '' : String(value);
+            const text = new Intl.NumberFormat(locale, { style: 'percent', minimumFractionDigits: col.decimals ?? 0, maximumFractionDigits: col.decimals ?? 2 }).format(Math.abs(n));
+            return n < 0 ? (negative === 'parens' ? `(${text})` : `-${text}`) : text;
+        }
+        const currency = col.type === 'currency' ? (col.currency ?? this.currency() ?? this.config.currency ?? null) : null;
+        return cbFormatAmount(value, locale, { currency, decimals: col.decimals, negative });
+    }
     // --- Helpers ---------------------------------------------------------------
     cellValue(row, col) {
         return fieldValue(row, col.field);
@@ -516,9 +670,16 @@ class CbTable {
         return String(av).localeCompare(String(bv), undefined, { numeric: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTable, isStandalone: true, selector: "cb-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFields: { classPropertyName: "globalFilterFields", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, expandedRowKeys: { classPropertyName: "expandedRowKeys", publicName: "expandedRowKeys", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, groupRowsBy: { classPropertyName: "groupRowsBy", publicName: "groupRowsBy", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", globalFilter: "globalFilterChange", expandedRowKeys: "expandedRowKeysChange", selection: "selectionChange", sortChange: "sortChange", filterChange: "filterChange", columnResize: "columnResize", rowExpand: "rowExpand", rowCollapse: "rowCollapse", lazyLoad: "lazyLoad" }, host: { classAttribute: "cb-table-host" }, queries: [{ propertyName: "cellTemplates", predicate: CbTableCellDirective, isSignal: true }, { propertyName: "expansion", first: true, predicate: CbTableRowExpansion, descendants: true, isSignal: true }, { propertyName: "groupHeader", first: true, predicate: CbTableGroupHeader, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["table"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTable, isStandalone: true, selector: "cb-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFields: { classPropertyName: "globalFilterFields", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, expandedRowKeys: { classPropertyName: "expandedRowKeys", publicName: "expandedRowKeys", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, groupRowsBy: { classPropertyName: "groupRowsBy", publicName: "groupRowsBy", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, groupSubtotals: { classPropertyName: "groupSubtotals", publicName: "groupSubtotals", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, negativeStyle: { classPropertyName: "negativeStyle", publicName: "negativeStyle", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", globalFilter: "globalFilterChange", expandedRowKeys: "expandedRowKeysChange", selection: "selectionChange", sortChange: "sortChange", filterChange: "filterChange", columnResize: "columnResize", rowExpand: "rowExpand", rowCollapse: "rowCollapse", lazyLoad: "lazyLoad" }, host: { classAttribute: "cb-table-host" }, queries: [{ propertyName: "cellTemplates", predicate: CbTableCellDirective, isSignal: true }, { propertyName: "expansion", first: true, predicate: CbTableRowExpansion, descendants: true, isSignal: true }, { propertyName: "groupHeader", first: true, predicate: CbTableGroupHeader, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["table"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-content select="[cbTableHeader]" />
-    <div class="cb-table__wrap" [class.cb-table__wrap--scroll]="!!scrollHeight()" [style.max-height]="scrollHeight()">
+    <div
+      class="cb-table__wrap"
+      [class.cb-table__wrap--scroll]="!!scrollHeight()"
+      [style.max-height]="scrollHeight()"
+      [attr.tabindex]="scrollHeight() ? 0 : null"
+      [attr.role]="scrollHeight() ? 'region' : null"
+      [attr.aria-label]="scrollHeight() ? ariaLabel() || t().tableScrollRegion : null"
+    >
       <table
         #table
         class="cb-table"
@@ -564,6 +725,7 @@ class CbTable {
             }
             @for (col of displayColumns(); track col.field) {
               <th
+                #th
                 class="cb-table__th"
                 scope="col"
                 [attr.data-key]="col.field"
@@ -572,7 +734,7 @@ class CbTable {
                 [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
                 [class.cb-is-sortable]="col.sortable"
                 [style.width]="columnWidth(col)"
-                [style.text-align]="col.align || null"
+                [style.text-align]="alignOf(col)"
                 [attr.aria-sort]="ariaSort(col)"
               >
                 @if (col.sortable) {
@@ -595,7 +757,7 @@ class CbTable {
                     aria-orientation="vertical"
                     tabindex="0"
                     [attr.aria-label]="fmt(t().resizeColumn, col.header)"
-                    [attr.aria-valuenow]="widths()[col.field] ?? null"
+                    [attr.aria-valuenow]="widths()[col.field] ?? (th.offsetWidth || minColumnWidth)"
                     [attr.aria-valuemin]="minColumnWidth"
                     (pointerdown)="startResize($event, col)"
                     (keydown)="onResizerKeydown($event, col)"
@@ -693,17 +855,51 @@ class CbTable {
                   class="cb-table__td"
                   [class.cb-is-frozen]="!!col.frozen"
                   [class.cb-is-frozen-last]="col.field === lastFrozen()"
+                  [class.cb-table__num]="isNumeric(col)"
+                  [class.cb-is-negative]="isNegative(cellValue(row, col), col)"
                   [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
-                  [style.text-align]="col.align || null"
+                  [style.text-align]="alignOf(col)"
                 >
                   @if (cellTemplate(col.field); as cell) {
                     <ng-container [ngTemplateOutlet]="cell.template" [ngTemplateOutletContext]="cellContext(row, col)" />
                   } @else {
-                    {{ cellValue(row, col) }}
+                    {{ display(cellValue(row, col), col, row) }}
                   }
                 </td>
               }
             </tr>
+            @if (groupRowsBy() && groupSubtotals() && hasSummary() && isGroupEnd(i)) {
+              <tr class="cb-table__subtotal">
+                @if (expansion()) {
+                  <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__exp')"></td>
+                }
+                @if (selectionMode()) {
+                  <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__sel')"></td>
+                }
+                @for (col of displayColumns(); track col.field; let c = $index) {
+                  @if (c < labelColumn() + labelSpan() && c > labelColumn()) {
+                    <!-- cubierta por la etiqueta -->
+                  } @else if (c === labelColumn()) {
+                    <th
+                      scope="row"
+                      class="cb-table__td"
+                      [attr.colspan]="labelSpan() > 1 ? labelSpan() : null"
+                      [class.cb-is-frozen]="!!col.frozen"
+                      [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
+                    >{{ fmt(t().tableSubtotal, groupOf(row)) }}</th>
+                  } @else {
+                    <td
+                      class="cb-table__td"
+                      [class.cb-is-frozen]="!!col.frozen"
+                      [class.cb-table__num]="isNumeric(col)"
+                      [class.cb-is-negative]="isNegative(groupSummary(row, col), col)"
+                      [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
+                      [style.text-align]="alignOf(col)"
+                    >{{ summaryText(groupSummary(row, col), col) }}</td>
+                  }
+                }
+              </tr>
+            }
             @if (expansion(); as exp) {
               @if (isExpanded(row)) {
                 <tr class="cb-table__expansion" [id]="expansionId(first() + i)">
@@ -722,6 +918,41 @@ class CbTable {
             </tr>
           }
         </tbody>
+        @if (hasFooter() && pageRows().length) {
+          <tfoot>
+            <tr class="cb-table__foot">
+              @if (expansion()) {
+                <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__exp')"></td>
+              }
+              @if (selectionMode()) {
+                <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__sel')"></td>
+              }
+              @for (col of displayColumns(); track col.field; let c = $index) {
+                @if (!hasFooterText() && c < labelColumn() + labelSpan() && c > labelColumn()) {
+                  <!-- cubierta por la etiqueta -->
+                } @else if (col.footer || (c === labelColumn() && !hasFooterText())) {
+                  <th
+                    scope="row"
+                    class="cb-table__td"
+                    [attr.colspan]="!hasFooterText() && labelSpan() > 1 ? labelSpan() : null"
+                    [class.cb-is-frozen]="!!col.frozen"
+                    [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
+                    [style.text-align]="hasFooterText() ? alignOf(col) : null"
+                  >{{ col.footer || t().tableTotal }}</th>
+                } @else {
+                  <td
+                    class="cb-table__td"
+                    [class.cb-is-frozen]="!!col.frozen"
+                    [class.cb-table__num]="isNumeric(col)"
+                    [class.cb-is-negative]="isNegative(totals()[col.field], col)"
+                    [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
+                    [style.text-align]="alignOf(col)"
+                  >{{ summaryText(totals()[col.field], col) }}</td>
+                }
+              }
+            </tr>
+          </tfoot>
+        }
       </table>
       @if (loading()) {
         <div class="cb-table__loading" role="status">
@@ -744,13 +975,20 @@ class CbTable {
         (pageChange)="onPageChange($event)"
       />
     }
-  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-table__wrap{overflow-x:auto;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-table{width:100%;border-collapse:collapse;font-size:var(--cb-text-sm)}.cb-table__th,.cb-table__td,.cb-table__sel{padding:var(--cb-space-3) var(--cb-space-4);text-align:left;border-bottom:var(--cb-border-width) solid var(--cb-color-border);vertical-align:middle}.cb-table--sm .cb-table__th,.cb-table--sm .cb-table__td,.cb-table--sm .cb-table__sel{padding:var(--cb-space-2) var(--cb-space-3)}.cb-table--lg .cb-table__th,.cb-table--lg .cb-table__td,.cb-table--lg .cb-table__sel{padding:var(--cb-space-4) var(--cb-space-5)}.cb-table thead .cb-table__th,.cb-table thead .cb-table__sel{background-color:var(--cb-color-surface-subtle);color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold);white-space:nowrap;border-bottom-width:2px}.cb-table__th-inner{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-table__th{position:relative}.cb-table__th.cb-is-sortable:hover{background-color:var(--cb-color-surface-hover)}.cb-table__sort-btn{margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none;border-radius:var(--cb-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.cb-table__sort-btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-table--resizable{table-layout:fixed}.cb-table--resizable .cb-table__th{overflow:hidden;text-overflow:ellipsis}.cb-table__resizer{position:absolute;top:0;right:0;width:.5rem;height:100%;cursor:col-resize;touch-action:none}.cb-table__resizer:after{content:\"\";position:absolute;top:25%;right:.2rem;width:2px;height:50%;background-color:var(--cb-color-border-strong);border-radius:1px}.cb-table__resizer:hover:after,.cb-table__resizer:focus-visible:after{background-color:var(--cb-color-primary-500)}.cb-table__resizer:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-table__filter-row td{padding:var(--cb-space-2) var(--cb-space-4);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__filter{box-sizing:border-box;width:100%;min-width:6rem;padding:var(--cb-space-1) var(--cb-space-2);font:inherit;font-size:var(--cb-text-sm);color:var(--cb-color-text);background-color:var(--cb-color-surface-0);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm)}.cb-table__filter:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-table__expander{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;color:var(--cb-color-text-muted);background:none;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-table__expander:hover{background-color:var(--cb-color-surface-hover)}.cb-table__expander:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-table__expansion>td{padding:var(--cb-space-4);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cb-table__sort{color:var(--cb-color-text-muted)}.cb-table tbody tr:last-child .cb-table__td,.cb-table tbody tr:last-child .cb-table__sel{border-bottom:none}.cb-table--striped tbody tr:nth-child(2n){background-color:var(--cb-color-surface-subtle)}.cb-table--hover tbody .cb-table__row:hover{background-color:var(--cb-color-surface-hover)}.cb-table__row.cb-is-selectable{cursor:pointer}.cb-table__row.cb-is-selected{background-color:var(--cb-color-primary-50)!important}.cb-table__sel{width:1px;white-space:nowrap}.cb-table__check{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast);outline:none}.cb-table__check:focus-visible{box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-table__check.cb-is-checked,.cb-table__check.cb-is-mixed{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-table__check--radio{border-radius:50%}.cb-table__empty{padding:var(--cb-space-6);text-align:center;color:var(--cb-color-text-muted)}.cb-table__paginator{margin-top:var(--cb-space-3)}:host-context([data-theme=\"dark\"]) .cb-table__row.cb-is-selected{background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)!important}.cb-table__wrap{position:relative}.cb-table__wrap--scroll{overflow:auto}.cb-table--scroll thead{position:sticky;top:0;z-index:2}.cb-is-frozen{position:sticky;z-index:1;background-color:var(--cb-color-surface-raised)}thead .cb-is-frozen{z-index:3;background-color:var(--cb-color-surface-subtle)}.cb-table--striped tbody tr:nth-child(2n) .cb-is-frozen{background-color:var(--cb-color-surface-subtle)}.cb-table--hover tbody .cb-table__row:hover .cb-is-frozen{background-color:var(--cb-color-surface-hover)}.cb-is-frozen-last{box-shadow:4px 0 6px -4px #00000040}.cb-table__group>th{padding:var(--cb-space-2) var(--cb-space-4);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-semibold);text-align:left;color:var(--cb-color-text-strong);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__group-count{font-weight:var(--cb-font-weight-normal, 400);color:var(--cb-color-text-muted)}.cb-table__loading{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;color:var(--cb-color-primary-500);background-color:color-mix(in srgb,var(--cb-color-surface-raised) 65%,transparent)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbPaginator, selector: "cb-paginator", inputs: ["totalRecords", "rows", "first", "rowsPerPageOptions", "showReport", "maxPageLinks"], outputs: ["rowsChange", "firstChange", "pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-table__wrap{overflow-x:auto;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-table{width:100%;border-collapse:collapse;font-size:var(--cb-text-sm)}.cb-table__th,.cb-table__td,.cb-table__sel{padding:var(--cb-space-3) var(--cb-space-4);text-align:left;border-bottom:var(--cb-border-width) solid var(--cb-color-border);vertical-align:middle}.cb-table--sm .cb-table__th,.cb-table--sm .cb-table__td,.cb-table--sm .cb-table__sel{padding:var(--cb-space-2) var(--cb-space-3)}.cb-table--lg .cb-table__th,.cb-table--lg .cb-table__td,.cb-table--lg .cb-table__sel{padding:var(--cb-space-4) var(--cb-space-5)}.cb-table thead .cb-table__th,.cb-table thead .cb-table__sel{background-color:var(--cb-color-surface-subtle);color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold);white-space:nowrap;border-bottom-width:2px}.cb-table__th-inner{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-table__th{position:relative}.cb-table__th.cb-is-sortable:hover{background-color:var(--cb-color-surface-hover)}.cb-table__sort-btn{margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none;border-radius:var(--cb-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.cb-table__sort-btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-table--resizable{table-layout:fixed}.cb-table--resizable .cb-table__th{overflow:hidden;text-overflow:ellipsis}.cb-table__resizer{position:absolute;top:0;right:0;width:.5rem;height:100%;cursor:col-resize;touch-action:none}.cb-table__resizer:after{content:\"\";position:absolute;top:25%;right:.2rem;width:2px;height:50%;background-color:var(--cb-color-border-strong);border-radius:1px}.cb-table__resizer:hover:after,.cb-table__resizer:focus-visible:after{background-color:var(--cb-color-primary-500)}.cb-table__resizer:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-table__filter-row td{padding:var(--cb-space-2) var(--cb-space-4);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__filter{box-sizing:border-box;width:100%;min-width:6rem;padding:var(--cb-space-1) var(--cb-space-2);font:inherit;font-size:var(--cb-text-sm);color:var(--cb-color-text);background-color:var(--cb-color-surface-0);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm)}.cb-table__filter:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-table__expander{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;color:var(--cb-color-text-muted);background:none;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-table__expander:hover{background-color:var(--cb-color-surface-hover)}.cb-table__expander:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-table__expansion>td{padding:var(--cb-space-4);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cb-table__sort{color:var(--cb-color-text-muted)}.cb-table tbody tr:last-child .cb-table__td,.cb-table tbody tr:last-child .cb-table__sel{border-bottom:none}.cb-table--striped tbody tr:nth-child(2n){background-color:var(--cb-color-surface-subtle)}.cb-table--hover tbody .cb-table__row:hover{background-color:var(--cb-color-surface-hover)}.cb-table__row.cb-is-selectable{cursor:pointer}.cb-table__row.cb-is-selected{background-color:var(--cb-color-primary-50)!important}.cb-table__sel{width:1px;white-space:nowrap}.cb-table__check{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast);outline:none}.cb-table__check:focus-visible{box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-table__check.cb-is-checked,.cb-table__check.cb-is-mixed{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-table__check--radio{border-radius:50%}.cb-table__empty{padding:var(--cb-space-6);text-align:center;color:var(--cb-color-text-muted)}.cb-table__paginator{margin-top:var(--cb-space-3)}:host-context([data-theme=\"dark\"]) .cb-table__row.cb-is-selected{background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)!important}.cb-table__wrap{position:relative}.cb-table__wrap--scroll{overflow:auto}.cb-table__wrap--scroll:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-table--scroll thead{position:sticky;top:0;z-index:2}.cb-is-frozen{position:sticky;z-index:1;background-color:var(--cb-color-surface-raised)}thead .cb-is-frozen{z-index:3;background-color:var(--cb-color-surface-subtle)}.cb-table--striped tbody tr:nth-child(2n) .cb-is-frozen{background-color:var(--cb-color-surface-subtle)}.cb-table--hover tbody .cb-table__row:hover .cb-is-frozen{background-color:var(--cb-color-surface-hover)}.cb-is-frozen-last{box-shadow:4px 0 6px -4px #00000040}.cb-table__group>th{padding:var(--cb-space-2) var(--cb-space-4);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-semibold);text-align:left;color:var(--cb-color-text-strong);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__group-count{font-weight:var(--cb-font-weight-normal, 400);color:var(--cb-color-text-muted)}.cb-table__num{font-variant-numeric:tabular-nums;white-space:nowrap}.cb-table .cb-is-negative{color:var(--cb-color-danger-text, #dc2626)}.cb-table__subtotal>.cb-table__td{font-weight:var(--cb-font-weight-semibold);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border-strong)}.cb-table__foot>.cb-table__td,.cb-table__foot>.cb-table__sel{font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong);background-color:var(--cb-color-surface-subtle);border-top:2px solid var(--cb-color-border-strong);border-bottom:0}.cb-table--scroll tfoot{position:sticky;bottom:0;z-index:2}tfoot .cb-is-frozen,.cb-table__subtotal .cb-is-frozen{background-color:var(--cb-color-surface-subtle)}.cb-table__loading{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;color:var(--cb-color-primary-text);background-color:color-mix(in srgb,var(--cb-color-surface-raised) 65%,transparent)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbPaginator, selector: "cb-paginator", inputs: ["totalRecords", "rows", "first", "rowsPerPageOptions", "showReport", "maxPageLinks"], outputs: ["rowsChange", "firstChange", "pageChange"] }, { 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: CbTable, decorators: [{
             type: Component,
             args: [{ selector: 'cb-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon, CbPaginator, NgTemplateOutlet], host: { class: 'cb-table-host' }, template: `
     <ng-content select="[cbTableHeader]" />
-    <div class="cb-table__wrap" [class.cb-table__wrap--scroll]="!!scrollHeight()" [style.max-height]="scrollHeight()">
+    <div
+      class="cb-table__wrap"
+      [class.cb-table__wrap--scroll]="!!scrollHeight()"
+      [style.max-height]="scrollHeight()"
+      [attr.tabindex]="scrollHeight() ? 0 : null"
+      [attr.role]="scrollHeight() ? 'region' : null"
+      [attr.aria-label]="scrollHeight() ? ariaLabel() || t().tableScrollRegion : null"
+    >
       <table
         #table
         class="cb-table"
@@ -796,6 +1034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             }
             @for (col of displayColumns(); track col.field) {
               <th
+                #th
                 class="cb-table__th"
                 scope="col"
                 [attr.data-key]="col.field"
@@ -804,7 +1043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
                 [class.cb-is-sortable]="col.sortable"
                 [style.width]="columnWidth(col)"
-                [style.text-align]="col.align || null"
+                [style.text-align]="alignOf(col)"
                 [attr.aria-sort]="ariaSort(col)"
               >
                 @if (col.sortable) {
@@ -827,7 +1066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     aria-orientation="vertical"
                     tabindex="0"
                     [attr.aria-label]="fmt(t().resizeColumn, col.header)"
-                    [attr.aria-valuenow]="widths()[col.field] ?? null"
+                    [attr.aria-valuenow]="widths()[col.field] ?? (th.offsetWidth || minColumnWidth)"
                     [attr.aria-valuemin]="minColumnWidth"
                     (pointerdown)="startResize($event, col)"
                     (keydown)="onResizerKeydown($event, col)"
@@ -925,17 +1164,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                   class="cb-table__td"
                   [class.cb-is-frozen]="!!col.frozen"
                   [class.cb-is-frozen-last]="col.field === lastFrozen()"
+                  [class.cb-table__num]="isNumeric(col)"
+                  [class.cb-is-negative]="isNegative(cellValue(row, col), col)"
                   [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
-                  [style.text-align]="col.align || null"
+                  [style.text-align]="alignOf(col)"
                 >
                   @if (cellTemplate(col.field); as cell) {
                     <ng-container [ngTemplateOutlet]="cell.template" [ngTemplateOutletContext]="cellContext(row, col)" />
                   } @else {
-                    {{ cellValue(row, col) }}
+                    {{ display(cellValue(row, col), col, row) }}
                   }
                 </td>
               }
             </tr>
+            @if (groupRowsBy() && groupSubtotals() && hasSummary() && isGroupEnd(i)) {
+              <tr class="cb-table__subtotal">
+                @if (expansion()) {
+                  <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__exp')"></td>
+                }
+                @if (selectionMode()) {
+                  <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__sel')"></td>
+                }
+                @for (col of displayColumns(); track col.field; let c = $index) {
+                  @if (c < labelColumn() + labelSpan() && c > labelColumn()) {
+                    <!-- cubierta por la etiqueta -->
+                  } @else if (c === labelColumn()) {
+                    <th
+                      scope="row"
+                      class="cb-table__td"
+                      [attr.colspan]="labelSpan() > 1 ? labelSpan() : null"
+                      [class.cb-is-frozen]="!!col.frozen"
+                      [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
+                    >{{ fmt(t().tableSubtotal, groupOf(row)) }}</th>
+                  } @else {
+                    <td
+                      class="cb-table__td"
+                      [class.cb-is-frozen]="!!col.frozen"
+                      [class.cb-table__num]="isNumeric(col)"
+                      [class.cb-is-negative]="isNegative(groupSummary(row, col), col)"
+                      [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
+                      [style.text-align]="alignOf(col)"
+                    >{{ summaryText(groupSummary(row, col), col) }}</td>
+                  }
+                }
+              </tr>
+            }
             @if (expansion(); as exp) {
               @if (isExpanded(row)) {
                 <tr class="cb-table__expansion" [id]="expansionId(first() + i)">
@@ -954,6 +1227,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             </tr>
           }
         </tbody>
+        @if (hasFooter() && pageRows().length) {
+          <tfoot>
+            <tr class="cb-table__foot">
+              @if (expansion()) {
+                <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__exp')"></td>
+              }
+              @if (selectionMode()) {
+                <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__sel')"></td>
+              }
+              @for (col of displayColumns(); track col.field; let c = $index) {
+                @if (!hasFooterText() && c < labelColumn() + labelSpan() && c > labelColumn()) {
+                  <!-- cubierta por la etiqueta -->
+                } @else if (col.footer || (c === labelColumn() && !hasFooterText())) {
+                  <th
+                    scope="row"
+                    class="cb-table__td"
+                    [attr.colspan]="!hasFooterText() && labelSpan() > 1 ? labelSpan() : null"
+                    [class.cb-is-frozen]="!!col.frozen"
+                    [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
+                    [style.text-align]="hasFooterText() ? alignOf(col) : null"
+                  >{{ col.footer || t().tableTotal }}</th>
+                } @else {
+                  <td
+                    class="cb-table__td"
+                    [class.cb-is-frozen]="!!col.frozen"
+                    [class.cb-table__num]="isNumeric(col)"
+                    [class.cb-is-negative]="isNegative(totals()[col.field], col)"
+                    [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
+                    [style.text-align]="alignOf(col)"
+                  >{{ summaryText(totals()[col.field], col) }}</td>
+                }
+              }
+            </tr>
+          </tfoot>
+        }
       </table>
       @if (loading()) {
         <div class="cb-table__loading" role="status">
@@ -976,8 +1284,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         (pageChange)="onPageChange($event)"
       />
     }
-  `, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-table__wrap{overflow-x:auto;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-table{width:100%;border-collapse:collapse;font-size:var(--cb-text-sm)}.cb-table__th,.cb-table__td,.cb-table__sel{padding:var(--cb-space-3) var(--cb-space-4);text-align:left;border-bottom:var(--cb-border-width) solid var(--cb-color-border);vertical-align:middle}.cb-table--sm .cb-table__th,.cb-table--sm .cb-table__td,.cb-table--sm .cb-table__sel{padding:var(--cb-space-2) var(--cb-space-3)}.cb-table--lg .cb-table__th,.cb-table--lg .cb-table__td,.cb-table--lg .cb-table__sel{padding:var(--cb-space-4) var(--cb-space-5)}.cb-table thead .cb-table__th,.cb-table thead .cb-table__sel{background-color:var(--cb-color-surface-subtle);color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold);white-space:nowrap;border-bottom-width:2px}.cb-table__th-inner{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-table__th{position:relative}.cb-table__th.cb-is-sortable:hover{background-color:var(--cb-color-surface-hover)}.cb-table__sort-btn{margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none;border-radius:var(--cb-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.cb-table__sort-btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-table--resizable{table-layout:fixed}.cb-table--resizable .cb-table__th{overflow:hidden;text-overflow:ellipsis}.cb-table__resizer{position:absolute;top:0;right:0;width:.5rem;height:100%;cursor:col-resize;touch-action:none}.cb-table__resizer:after{content:\"\";position:absolute;top:25%;right:.2rem;width:2px;height:50%;background-color:var(--cb-color-border-strong);border-radius:1px}.cb-table__resizer:hover:after,.cb-table__resizer:focus-visible:after{background-color:var(--cb-color-primary-500)}.cb-table__resizer:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-table__filter-row td{padding:var(--cb-space-2) var(--cb-space-4);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__filter{box-sizing:border-box;width:100%;min-width:6rem;padding:var(--cb-space-1) var(--cb-space-2);font:inherit;font-size:var(--cb-text-sm);color:var(--cb-color-text);background-color:var(--cb-color-surface-0);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm)}.cb-table__filter:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-table__expander{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;color:var(--cb-color-text-muted);background:none;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-table__expander:hover{background-color:var(--cb-color-surface-hover)}.cb-table__expander:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-table__expansion>td{padding:var(--cb-space-4);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cb-table__sort{color:var(--cb-color-text-muted)}.cb-table tbody tr:last-child .cb-table__td,.cb-table tbody tr:last-child .cb-table__sel{border-bottom:none}.cb-table--striped tbody tr:nth-child(2n){background-color:var(--cb-color-surface-subtle)}.cb-table--hover tbody .cb-table__row:hover{background-color:var(--cb-color-surface-hover)}.cb-table__row.cb-is-selectable{cursor:pointer}.cb-table__row.cb-is-selected{background-color:var(--cb-color-primary-50)!important}.cb-table__sel{width:1px;white-space:nowrap}.cb-table__check{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast);outline:none}.cb-table__check:focus-visible{box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-table__check.cb-is-checked,.cb-table__check.cb-is-mixed{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-table__check--radio{border-radius:50%}.cb-table__empty{padding:var(--cb-space-6);text-align:center;color:var(--cb-color-text-muted)}.cb-table__paginator{margin-top:var(--cb-space-3)}:host-context([data-theme=\"dark\"]) .cb-table__row.cb-is-selected{background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)!important}.cb-table__wrap{position:relative}.cb-table__wrap--scroll{overflow:auto}.cb-table--scroll thead{position:sticky;top:0;z-index:2}.cb-is-frozen{position:sticky;z-index:1;background-color:var(--cb-color-surface-raised)}thead .cb-is-frozen{z-index:3;background-color:var(--cb-color-surface-subtle)}.cb-table--striped tbody tr:nth-child(2n) .cb-is-frozen{background-color:var(--cb-color-surface-subtle)}.cb-table--hover tbody .cb-table__row:hover .cb-is-frozen{background-color:var(--cb-color-surface-hover)}.cb-is-frozen-last{box-shadow:4px 0 6px -4px #00000040}.cb-table__group>th{padding:var(--cb-space-2) var(--cb-space-4);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-semibold);text-align:left;color:var(--cb-color-text-strong);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__group-count{font-weight:var(--cb-font-weight-normal, 400);color:var(--cb-color-text-muted)}.cb-table__loading{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;color:var(--cb-color-primary-500);background-color:color-mix(in srgb,var(--cb-color-surface-raised) 65%,transparent)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbTableCellDirective), { isSignal: true }] }], expansion: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbTableRowExpansion), { isSignal: true }] }], groupHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbTableGroupHeader), { isSignal: true }] }], tableRef: [{ type: i0.ViewChild, args: ['table', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], globalFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilter", required: false }] }, { type: i0.Output, args: ["globalFilterChange"] }], globalFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], resizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableColumns", required: false }] }], expandedRowKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowKeys", required: false }] }, { type: i0.Output, args: ["expandedRowKeysChange"] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], groupRowsBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupRowsBy", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], rowExpand: [{ type: i0.Output, args: ["rowExpand"] }], rowCollapse: [{ type: i0.Output, args: ["rowCollapse"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }] } });
+  `, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-table__wrap{overflow-x:auto;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-table{width:100%;border-collapse:collapse;font-size:var(--cb-text-sm)}.cb-table__th,.cb-table__td,.cb-table__sel{padding:var(--cb-space-3) var(--cb-space-4);text-align:left;border-bottom:var(--cb-border-width) solid var(--cb-color-border);vertical-align:middle}.cb-table--sm .cb-table__th,.cb-table--sm .cb-table__td,.cb-table--sm .cb-table__sel{padding:var(--cb-space-2) var(--cb-space-3)}.cb-table--lg .cb-table__th,.cb-table--lg .cb-table__td,.cb-table--lg .cb-table__sel{padding:var(--cb-space-4) var(--cb-space-5)}.cb-table thead .cb-table__th,.cb-table thead .cb-table__sel{background-color:var(--cb-color-surface-subtle);color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold);white-space:nowrap;border-bottom-width:2px}.cb-table__th-inner{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-table__th{position:relative}.cb-table__th.cb-is-sortable:hover{background-color:var(--cb-color-surface-hover)}.cb-table__sort-btn{margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none;border-radius:var(--cb-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.cb-table__sort-btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-table--resizable{table-layout:fixed}.cb-table--resizable .cb-table__th{overflow:hidden;text-overflow:ellipsis}.cb-table__resizer{position:absolute;top:0;right:0;width:.5rem;height:100%;cursor:col-resize;touch-action:none}.cb-table__resizer:after{content:\"\";position:absolute;top:25%;right:.2rem;width:2px;height:50%;background-color:var(--cb-color-border-strong);border-radius:1px}.cb-table__resizer:hover:after,.cb-table__resizer:focus-visible:after{background-color:var(--cb-color-primary-500)}.cb-table__resizer:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-table__filter-row td{padding:var(--cb-space-2) var(--cb-space-4);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__filter{box-sizing:border-box;width:100%;min-width:6rem;padding:var(--cb-space-1) var(--cb-space-2);font:inherit;font-size:var(--cb-text-sm);color:var(--cb-color-text);background-color:var(--cb-color-surface-0);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm)}.cb-table__filter:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-table__expander{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;color:var(--cb-color-text-muted);background:none;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-table__expander:hover{background-color:var(--cb-color-surface-hover)}.cb-table__expander:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-table__expansion>td{padding:var(--cb-space-4);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cb-table__sort{color:var(--cb-color-text-muted)}.cb-table tbody tr:last-child .cb-table__td,.cb-table tbody tr:last-child .cb-table__sel{border-bottom:none}.cb-table--striped tbody tr:nth-child(2n){background-color:var(--cb-color-surface-subtle)}.cb-table--hover tbody .cb-table__row:hover{background-color:var(--cb-color-surface-hover)}.cb-table__row.cb-is-selectable{cursor:pointer}.cb-table__row.cb-is-selected{background-color:var(--cb-color-primary-50)!important}.cb-table__sel{width:1px;white-space:nowrap}.cb-table__check{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast);outline:none}.cb-table__check:focus-visible{box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-table__check.cb-is-checked,.cb-table__check.cb-is-mixed{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-table__check--radio{border-radius:50%}.cb-table__empty{padding:var(--cb-space-6);text-align:center;color:var(--cb-color-text-muted)}.cb-table__paginator{margin-top:var(--cb-space-3)}:host-context([data-theme=\"dark\"]) .cb-table__row.cb-is-selected{background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)!important}.cb-table__wrap{position:relative}.cb-table__wrap--scroll{overflow:auto}.cb-table__wrap--scroll:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-table--scroll thead{position:sticky;top:0;z-index:2}.cb-is-frozen{position:sticky;z-index:1;background-color:var(--cb-color-surface-raised)}thead .cb-is-frozen{z-index:3;background-color:var(--cb-color-surface-subtle)}.cb-table--striped tbody tr:nth-child(2n) .cb-is-frozen{background-color:var(--cb-color-surface-subtle)}.cb-table--hover tbody .cb-table__row:hover .cb-is-frozen{background-color:var(--cb-color-surface-hover)}.cb-is-frozen-last{box-shadow:4px 0 6px -4px #00000040}.cb-table__group>th{padding:var(--cb-space-2) var(--cb-space-4);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-semibold);text-align:left;color:var(--cb-color-text-strong);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__group-count{font-weight:var(--cb-font-weight-normal, 400);color:var(--cb-color-text-muted)}.cb-table__num{font-variant-numeric:tabular-nums;white-space:nowrap}.cb-table .cb-is-negative{color:var(--cb-color-danger-text, #dc2626)}.cb-table__subtotal>.cb-table__td{font-weight:var(--cb-font-weight-semibold);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border-strong)}.cb-table__foot>.cb-table__td,.cb-table__foot>.cb-table__sel{font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong);background-color:var(--cb-color-surface-subtle);border-top:2px solid var(--cb-color-border-strong);border-bottom:0}.cb-table--scroll tfoot{position:sticky;bottom:0;z-index:2}tfoot .cb-is-frozen,.cb-table__subtotal .cb-is-frozen{background-color:var(--cb-color-surface-subtle)}.cb-table__loading{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;color:var(--cb-color-primary-text);background-color:color-mix(in srgb,var(--cb-color-surface-raised) 65%,transparent)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbTableCellDirective), { isSignal: true }] }], expansion: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbTableRowExpansion), { isSignal: true }] }], groupHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbTableGroupHeader), { isSignal: true }] }], tableRef: [{ type: i0.ViewChild, args: ['table', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], globalFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilter", required: false }] }, { type: i0.Output, args: ["globalFilterChange"] }], globalFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], resizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableColumns", required: false }] }], expandedRowKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowKeys", required: false }] }, { type: i0.Output, args: ["expandedRowKeysChange"] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], groupRowsBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupRowsBy", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], groupSubtotals: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSubtotals", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], negativeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "negativeStyle", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], rowExpand: [{ type: i0.Output, args: ["rowExpand"] }], rowCollapse: [{ type: i0.Output, args: ["rowCollapse"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';
 }

package/fesm2022/caribeng-ui-tabmenu.mjs

@@ -47,7 +47,7 @@ class CbTabMenu {
         }
       </ul>
     </nav>
-  `, isInline: true, styles: [":host{display:block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tabmenu__list{display:flex;gap:.25rem;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--cb-color-border)}.cb-tabmenu__link{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.625rem .875rem;border:0;border-bottom:2px solid transparent;background:transparent;color:inherit;font:inherit;text-decoration:none;cursor:pointer}.cb-tabmenu__link:hover:not(:disabled),.cb-tabmenu__link:focus-visible{background:var(--cb-color-surface);outline:none}.cb-tabmenu__link[aria-current=page]{border-bottom-color:var(--cb-color-primary);color:var(--cb-color-primary);font-weight:600}.cb-tabmenu__link:disabled{opacity:.5;cursor:default}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;min-width:0;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tabmenu__list{display:flex;gap:.25rem;margin:0;padding:0;overflow-x:auto;scrollbar-width:thin;list-style:none;border-bottom:1px solid var(--cb-color-border)}.cb-tabmenu__entry{flex:none}.cb-tabmenu__link{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;white-space:nowrap;padding:.625rem .875rem;border:0;border-bottom:2px solid transparent;background:transparent;color:inherit;font:inherit;text-decoration:none;cursor:pointer}.cb-tabmenu__link:hover:not(:disabled),.cb-tabmenu__link:focus-visible{background:var(--cb-color-surface);outline:none}.cb-tabmenu__link[aria-current=page]{border-bottom-color:var(--cb-color-primary);color:var(--cb-color-primary-text);font-weight:600}.cb-tabmenu__link:disabled{opacity:.5;cursor:default}\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: CbTabMenu, decorators: [{
             type: Component,
@@ -71,7 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       </ul>
     </nav>
-  `, styles: [":host{display:block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tabmenu__list{display:flex;gap:.25rem;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--cb-color-border)}.cb-tabmenu__link{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.625rem .875rem;border:0;border-bottom:2px solid transparent;background:transparent;color:inherit;font:inherit;text-decoration:none;cursor:pointer}.cb-tabmenu__link:hover:not(:disabled),.cb-tabmenu__link:focus-visible{background:var(--cb-color-surface);outline:none}.cb-tabmenu__link[aria-current=page]{border-bottom-color:var(--cb-color-primary);color:var(--cb-color-primary);font-weight:600}.cb-tabmenu__link:disabled{opacity:.5;cursor:default}\n"] }]
+  `, styles: [":host{display:block;min-width:0;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tabmenu__list{display:flex;gap:.25rem;margin:0;padding:0;overflow-x:auto;scrollbar-width:thin;list-style:none;border-bottom:1px solid var(--cb-color-border)}.cb-tabmenu__entry{flex:none}.cb-tabmenu__link{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;white-space:nowrap;padding:.625rem .875rem;border:0;border-bottom:2px solid transparent;background:transparent;color:inherit;font:inherit;text-decoration:none;cursor:pointer}.cb-tabmenu__link:hover:not(:disabled),.cb-tabmenu__link:focus-visible{background:var(--cb-color-surface);outline:none}.cb-tabmenu__link[aria-current=page]{border-bottom-color:var(--cb-color-primary);color:var(--cb-color-primary-text);font-weight:600}.cb-tabmenu__link:disabled{opacity:.5;cursor:default}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }] } });
 
 /**

package/fesm2022/caribeng-ui-tabs.mjs

@@ -82,7 +82,7 @@ class CbTabs {
     <div class="cb-tabs__panels">
       <ng-content />
     </div>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-tabs__list{display:flex;gap:var(--cb-space-1);border-bottom:var(--cb-border-width) solid var(--cb-color-border);overflow-x:auto}.cb-tabs__tab{position:relative;padding:var(--cb-space-3) var(--cb-space-4);border:none;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:var(--cb-font-weight-medium);white-space:nowrap;cursor:pointer;transition:color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:after{content:\"\";position:absolute;left:var(--cb-space-3);right:var(--cb-space-3);bottom:-1px;height:2px;border-radius:2px;background-color:transparent;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:hover{color:var(--cb-color-text)}.cb-tabs__tab.cb-is-active{color:var(--cb-color-primary-500)}.cb-tabs__tab.cb-is-active:after{background-color:var(--cb-color-primary-500)}.cb-tabs__tab:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px;border-radius:var(--cb-radius-sm)}.cb-tabs__tab:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-tabs__panels{padding:var(--cb-space-4) 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-tabs__list{display:flex;gap:var(--cb-space-1);border-bottom:var(--cb-border-width) solid var(--cb-color-border);overflow-x:auto}.cb-tabs__tab{position:relative;padding:var(--cb-space-3) var(--cb-space-4);border:none;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:var(--cb-font-weight-medium);white-space:nowrap;cursor:pointer;transition:color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:after{content:\"\";position:absolute;left:var(--cb-space-3);right:var(--cb-space-3);bottom:-1px;height:2px;border-radius:2px;background-color:transparent;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:hover{color:var(--cb-color-text)}.cb-tabs__tab.cb-is-active{color:var(--cb-color-primary-text)}.cb-tabs__tab.cb-is-active:after{background-color:var(--cb-color-primary-500)}.cb-tabs__tab:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px;border-radius:var(--cb-radius-sm)}.cb-tabs__tab:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-tabs__panels{padding:var(--cb-space-4) 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTabs, decorators: [{
             type: Component,
@@ -109,7 +109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <div class="cb-tabs__panels">
       <ng-content />
     </div>
-  `, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-tabs__list{display:flex;gap:var(--cb-space-1);border-bottom:var(--cb-border-width) solid var(--cb-color-border);overflow-x:auto}.cb-tabs__tab{position:relative;padding:var(--cb-space-3) var(--cb-space-4);border:none;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:var(--cb-font-weight-medium);white-space:nowrap;cursor:pointer;transition:color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:after{content:\"\";position:absolute;left:var(--cb-space-3);right:var(--cb-space-3);bottom:-1px;height:2px;border-radius:2px;background-color:transparent;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:hover{color:var(--cb-color-text)}.cb-tabs__tab.cb-is-active{color:var(--cb-color-primary-500)}.cb-tabs__tab.cb-is-active:after{background-color:var(--cb-color-primary-500)}.cb-tabs__tab:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px;border-radius:var(--cb-radius-sm)}.cb-tabs__tab:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-tabs__panels{padding:var(--cb-space-4) 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}\n"] }]
+  `, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-tabs__list{display:flex;gap:var(--cb-space-1);border-bottom:var(--cb-border-width) solid var(--cb-color-border);overflow-x:auto}.cb-tabs__tab{position:relative;padding:var(--cb-space-3) var(--cb-space-4);border:none;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:var(--cb-font-weight-medium);white-space:nowrap;cursor:pointer;transition:color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:after{content:\"\";position:absolute;left:var(--cb-space-3);right:var(--cb-space-3);bottom:-1px;height:2px;border-radius:2px;background-color:transparent;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:hover{color:var(--cb-color-text)}.cb-tabs__tab.cb-is-active{color:var(--cb-color-primary-text)}.cb-tabs__tab.cb-is-active:after{background-color:var(--cb-color-primary-500)}.cb-tabs__tab:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px;border-radius:var(--cb-radius-sm)}.cb-tabs__tab:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-tabs__panels{padding:var(--cb-space-4) 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}\n"] }]
         }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbTab), { isSignal: true }] }] } });
 /** Pestaña individual de un `<cb-tabs>`. */
 class CbTab {