@prolibu-suite/cobalt-core 0.11.0 → 0.11.2

package/dist/collection/components/co-column-picker/co-column-picker.js

@@ -1,24 +1,50 @@
 import { h } from "@stencil/core";
 import { parsePaths, parseSections, parseValues, buildLabelMap, buildTree, sortNodes, filterTree, collectAllLeafPaths, formatLabel, expandForSelected, expandForQuery, collectAllExpandableKeys, } from "./utils/column-picker-tree";
 import { ColumnPickerNode } from "./column-picker-node";
+/**
+ * Selector de columnas o campos con rutas anidadas (`company.name`): arma un
+ * árbol plegable a partir de las rutas, con búsqueda, «seleccionar todo» y
+ * chips de lo elegido. Pensado para elegir las columnas de una tabla o los
+ * campos de un export. Wrapper Vue: `CoColumnPicker` de `@prolibu-suite/cobalt-vue`.
+ */
 export class CoColumnPicker {
     constructor() {
+        /** Rutas elegibles: array de strings (`"company.name"`), de `{ value, label, icon?, disabled? }`,
+         *  o ese array como JSON desde HTML. Los puntos arman el árbol; sin `label`, el
+         *  texto sale de la ruta (camelCase y `_`/`-` separados en palabras). */
         this.options = '[]';
+        /** Rutas seleccionadas: array o JSON array. El componente lo actualiza al elegir. */
         this.value = '[]';
+        /** Selección múltiple (default `true`); con `false` elegir una ruta cierra el panel. */
         this.multiple = true;
+        /** Deshabilita el campo. */
         this.disabled = false;
+        /** Barra del panel con «seleccionar todo», «limpiar», expandir/contraer y el contador. */
         this.showToolbar = true;
+        /** Buscador del panel; al buscar se expanden las ramas con coincidencias. */
         this.showSearch = true;
+        /** Botón × en el campo para vaciar la selección. */
         this.clearable = true;
+        /** Texto del campo sin selección. */
         this.placeholder = 'Select…';
+        /** Alto máximo en px del árbol antes de scrollear (default 220). */
         this.maxHeight = 220;
+        /** Texto cuando la búsqueda no encuentra rutas. */
         this.emptyText = 'No results found';
+        /** Texto del botón «seleccionar todo» de la barra. */
         this.selectAllText = 'Select all';
+        /** Texto del botón «limpiar» de la barra. */
         this.clearText = 'Clear';
+        /** Texto del botón «expandir todo» de la barra. */
         this.expandText = 'Expand';
+        /** Texto del botón «contraer todo» de la barra. */
         this.collapseText = 'Collapse';
+        /** Palabra tras el contador de la barra («3 selected»). */
         this.selectedText = 'selected';
+        /** Agrupa el árbol en secciones: `[{ label, prefix }]` (o JSON). Cada sección toma las
+         *  rutas que empiezan por `prefix.`; una sección con `prefix: ''` junta el resto. */
         this.sections = '[]';
+        /** Estado de validación: pinta el borde y el `helperText` con el color del estado. */
         this.status = 'default';
         this.isOpen = false;
         this.query = '';
@@ -165,13 +191,13 @@ export class CoColumnPicker {
         return (h("div", { class: "co-column-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 40, class: "co-column-picker__empty-icon" }), h("span", null, this.emptyText)));
     }
     render() {
-        return (h("div", { key: '1d2bd18a155483115dc1e96764c4b1a70a2a905a', class: {
+        return (h("div", { key: 'ab2ad3bd249351f19e223ee8437d0f66ea368f84', class: {
                 'co-column-picker': true,
                 'co-column-picker--open': this.isOpen,
                 'co-column-picker--disabled': this.disabled,
                 'co-column-picker--focused': this.focused,
                 [`co-column-picker--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '26459691cbb08646122c6b84f39a974ca4f1fd9c', class: "co-column-picker__labels" }, this.label && h("label", { key: '92ffd71828c22b97582cef13d8a384a3f9ba937e', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: 'b0d7bcb5e8feff1441e52beb99b2665fcbee0ab0', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: '304bcf74653023ef6dd0120546733952c46cd179', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: '450a8b2d96bb238f78af451816ef7dc3f89e8221', class: "co-column-picker__search" }, h("co-icon", { key: '07e37bb18a637a22f2e94987ada23e3621291c65', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: '0f92eee4279a27b2c57fbdcde81ae3af2f4e3e52', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (h("button", { key: '0f2763e9f143a779bdb579ac37ddb46c759792c4', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: 'df24dd1c216f53a541cba73c5084b5cc877a10ee', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: '9ac7d402dcc11f10da27a6e0ca4b4dd4549704b3', class: "co-column-picker__toolbar" }, h("button", { key: '10f9114ec60023a4f1233262269ba7a30d130f88', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '732104f5d4e174f3e36683c6161522a5eccf9b43', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: 'bddc836e0a401fa7756309683119026c23894a37', class: "co-column-picker__toolbar-sep" }), h("button", { key: '8fb1562fd3bd0073cf9ac259d573e538dacd0970', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: 'cd156c6db410fb5c270169e5cb4e791422e91117', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: '5bae08f63282db0c2de2d7145394903c27b2948d', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: 'a062ed66af5dbf8e6056721a0013cb89d6f25e1a', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: 'e0e25124ebcbee2db66da742f7f28b09d5fcb639', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: 'f41e25d27617dfcfd848d743cf238cc5030a78a0', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'de330fc3337547b9d9df2a766022972b55756074', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: 'a7644c9eb64f8650a80f5f1c864d3cfc501870c6', class: "co-column-picker__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'eef032ff9774ee1ac9c656a8413ebf099a7d4a42', class: "co-column-picker__labels" }, this.label && h("label", { key: '6638950f784fac9809d853945b87dd8ce26d86b8', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: 'eeac25d27edddeabf25e7b62f9e7e550d9683f87', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: '761ac25d7c97c1b5b51e24dde8e0bd98d1471649', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: 'e54ed5eee5f71cb30b3e09728b0e4d4987d98e99', class: "co-column-picker__search" }, h("co-icon", { key: '184a9b2193e53669fb10796bdd770a863fe642b7', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: '9f41b5adf0dfeec083a300ce743c3bbe78b95fe9', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (h("button", { key: '4dd69184260a2edead1737df4f2f07ecf6b10680', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: '5cf2e640b64683b3802696ac66d6ecfabfffdb3a', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: 'd383004d0b209a93f11f7d070796b2944f3c6849', class: "co-column-picker__toolbar" }, h("button", { key: '22dd890b4c35c8cac632f2c90ce0d0a4f20a166a', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '5a69e90720c2e3724656ca9a9a774f496faafcb1', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '4c9bc30f4429d7e54f4040ec874ea18423e7de77', class: "co-column-picker__toolbar-sep" }), h("button", { key: 'b3a106e5b4268f3ea6d6de8bdac162b247d43b91', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: 'a79d4b5ba8a481c2db958ba9d685712e24b95feb', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: '53439fb7eab725a7e11261aa440106c68dbf7865', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: 'd34736ad6f2081228f7cb43a5d88b69e7fc33e15', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: '28226718a1270e859742fe754d4ea75a0c23a8e6', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: 'e9a252deb5af1abd89d988bc354a8dbd6130a6cd', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '051cd7eee2817ba288be2e8d38c2b92b0fc63cb8', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: 'b496d726484740151c2830e1e4d2a85b1040d86f', class: "co-column-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-column-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -199,7 +225,7 @@ export class CoColumnPicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Etiqueta del campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -218,7 +244,7 @@ export class CoColumnPicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto secundario junto a la etiqueta."
                 },
                 "getter": false,
                 "setter": false,
@@ -244,7 +270,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Rutas elegibles: array de strings (`\"company.name\"`), de `{ value, label, icon?, disabled? }`,\no ese array como JSON desde HTML. Los puntos arman el \u00E1rbol; sin `label`, el\ntexto sale de la ruta (camelCase y `_`/`-` separados en palabras)."
                 },
                 "getter": false,
                 "setter": false,
@@ -264,7 +290,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Rutas seleccionadas: array o JSON array. El componente lo actualiza al elegir."
                 },
                 "getter": false,
                 "setter": false,
@@ -284,7 +310,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Selecci\u00F3n m\u00FAltiple (default `true`); con `false` elegir una ruta cierra el panel."
                 },
                 "getter": false,
                 "setter": false,
@@ -304,7 +330,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -324,7 +350,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Barra del panel con \u00ABseleccionar todo\u00BB, \u00ABlimpiar\u00BB, expandir/contraer y el contador."
                 },
                 "getter": false,
                 "setter": false,
@@ -344,7 +370,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Buscador del panel; al buscar se expanden las ramas con coincidencias."
                 },
                 "getter": false,
                 "setter": false,
@@ -364,7 +390,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Bot\u00F3n \u00D7 en el campo para vaciar la selecci\u00F3n."
                 },
                 "getter": false,
                 "setter": false,
@@ -384,7 +410,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto del campo sin selecci\u00F3n."
                 },
                 "getter": false,
                 "setter": false,
@@ -404,7 +430,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alto m\u00E1ximo en px del \u00E1rbol antes de scrollear (default 220)."
                 },
                 "getter": false,
                 "setter": false,
@@ -424,7 +450,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto cuando la b\u00FAsqueda no encuentra rutas."
                 },
                 "getter": false,
                 "setter": false,
@@ -444,7 +470,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto del bot\u00F3n \u00ABseleccionar todo\u00BB de la barra."
                 },
                 "getter": false,
                 "setter": false,
@@ -464,7 +490,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto del bot\u00F3n \u00ABlimpiar\u00BB de la barra."
                 },
                 "getter": false,
                 "setter": false,
@@ -484,7 +510,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto del bot\u00F3n \u00ABexpandir todo\u00BB de la barra."
                 },
                 "getter": false,
                 "setter": false,
@@ -504,7 +530,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto del bot\u00F3n \u00ABcontraer todo\u00BB de la barra."
                 },
                 "getter": false,
                 "setter": false,
@@ -524,7 +550,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Palabra tras el contador de la barra (\u00AB3 selected\u00BB)."
                 },
                 "getter": false,
                 "setter": false,
@@ -551,7 +577,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Agrupa el \u00E1rbol en secciones: `[{ label, prefix }]` (o JSON). Cada secci\u00F3n toma las\nrutas que empiezan por `prefix.`; una secci\u00F3n con `prefix: ''` junta el resto."
                 },
                 "getter": false,
                 "setter": false,
@@ -571,7 +597,7 @@ export class CoColumnPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Estado de validaci\u00F3n: pinta el borde y el `helperText` con el color del estado."
                 },
                 "getter": false,
                 "setter": false,
@@ -591,7 +617,7 @@ export class CoColumnPicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto de ayuda o de error bajo el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -617,7 +643,7 @@ export class CoColumnPicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Cambi\u00F3 la selecci\u00F3n (`value` ya est\u00E1 actualizado); `detail` = array de rutas elegidas."
                 },
                 "complexType": {
                     "original": "string[]",
@@ -632,7 +658,7 @@ export class CoColumnPicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Se vaci\u00F3 la selecci\u00F3n (\u00D7 del campo o \u00ABlimpiar\u00BB de la barra); le sigue un `coChange` con `[]`."
                 },
                 "complexType": {
                     "original": "void",
@@ -647,7 +673,7 @@ export class CoColumnPicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Cambi\u00F3 el texto del buscador (sin debounce); `''` al vaciarlo. El filtrado es interno."
                 },
                 "complexType": {
                     "original": "string",

package/dist/collection/components/co-combobox/co-combobox.js

@@ -1,6 +1,20 @@
 import { h } from "@stencil/core";
 import { RequiredMark } from "../../utils/requiredMark";
 import { rankByMatch } from "../../utils/normalizeText";
+/**
+ * Selector de varias opciones (por defecto `multiple`) con chips en el trigger,
+ * buscador local opcional (`searchable`) y footer de acciones. Para opciones
+ * paginadas del servidor usá `co-ref-field`. Wrapper Vue: `CoCombobox` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
+ * @part wrapper - Contenedor raíz del campo.
+ * @part label - Etiqueta.
+ * @part secondary-label - Texto secundario junto a la etiqueta.
+ * @part trigger - Caja clickeable con los chips seleccionados.
+ * @part clear - Botón × que vacía la selección.
+ * @part dropdown - Panel desplegable con las opciones.
+ * @part helper - Texto de ayuda o de error.
+ */
 export class CoCombobox {
     constructor() {
         /** Whether the field is required (renders a required marker on the label). */
@@ -261,15 +275,15 @@ export class CoCombobox {
         }
     }
     render() {
-        return (h("div", { key: '6fed11f88fb5fcaf2105997ac20138ffc53ff101', class: {
+        return (h("div", { key: '8b0ff4418cd4ef8313fb18f597423938668e7c4c', class: {
                 'co-combobox': true,
                 'co-combobox--open': this.isOpen,
                 'co-combobox--disabled': this.disabled,
                 [`co-combobox--${this.size}`]: true,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '7b75c40477363baa58a26c6177b40be309cea6f9', class: "co-combobox__labels" }, this.label && h("label", { key: 'b62a7d8716e57bb7162ee7c96e8327484fe65f5a', class: "co-combobox__label", part: "label" }, this.label, h(RequiredMark, { key: 'e383891183517918c238b2c991837aae60ee821e', required: this.required })), this.secondaryLabel && (h("span", { key: '91cd238f0bac065b2e396aa03b1a5a0c534e8685', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: 'aa7354defca2a6a55e105a48895df997af68d1e7', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '40f92dcf5c50c78177a2ca76f152e2c380bcf3f6', slot: "trigger", class: "co-combobox__trigger", part: "trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": this.isOpen ? CoCombobox.LIST_ID : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("co-icon", { key: '15c6fdd87e01e0e5e4dca3c8c34d375dbf8af878', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), h("div", { key: 'fa656d5c962bd270d01b425a49059e91d0211a00', class: "co-combobox__input-wrapper", ref: (el) => (this.chipContainerEl = el) }, this.multiple && this.hasValue ? (this.selectedOptions.map(opt => (h("co-chip", { size: "small", "icon-mode": "both", label: opt.label }, h("co-icon", { slot: "icon-left", name: opt.icon || 'circle', size: 10 }), h("co-icon", { slot: "icon-right", name: "x-circle", size: 10, weight: "fill", onClick: (e) => { e.stopPropagation(); this.handleListRemove(opt.value); } }))))) : (h("span", { class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'e54542e22563eafd57909405254d85a8b4df3e4f', class: "co-combobox__labels" }, this.label && h("label", { key: '3f54d1ba25400dd89b1e3a59c564f68e8a3785df', class: "co-combobox__label", part: "label" }, this.label, h(RequiredMark, { key: '4b0c64794195101ef3dfac1b656cd393eb19012a', required: this.required })), this.secondaryLabel && (h("span", { key: '51f2ed8dcd890fa162011ccf1fe9e3f96afcc6b9', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: 'c071e11ad27db937caa615b63d32e056b099ea4a', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'c4b215350ab75d791e9f0181f43af320e32506a9', slot: "trigger", class: "co-combobox__trigger", part: "trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": this.isOpen ? CoCombobox.LIST_ID : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("co-icon", { key: '595cfc20ba148cd99e487002d4ce186feaf4b590', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), h("div", { key: '04a932c116df074d9a9e293d7dc3fead24f85e84', class: "co-combobox__input-wrapper", ref: (el) => (this.chipContainerEl = el) }, this.multiple && this.hasValue ? (this.selectedOptions.map(opt => (h("co-chip", { size: "small", "icon-mode": "both", label: opt.label }, h("co-icon", { slot: "icon-left", name: opt.icon || 'circle', size: 10 }), h("co-icon", { slot: "icon-right", name: "x-circle", size: 10, weight: "fill", onClick: (e) => { e.stopPropagation(); this.handleListRemove(opt.value); } }))))) : (h("span", { class: {
                 'co-combobox__text': true,
                 'co-combobox__text--placeholder': !this.hasValue,
-            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (h("span", { key: '99540b85f84966fbdb1a50d44c01174bad7e661c', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: 'dc0fb5f10daa29361c9a3a045207e44faa145d7a', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, h("co-icon", { key: 'e8dc3180e4760c5c67b6584681f7fce1c5932cb4', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '406302a495fa3c3d8e91e9ce1a1a8ca247da0003', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), h("div", { key: 'd3691124ae69d7c7b6a9989980a7f406a5679d4c', class: "co-combobox__dropdown", part: "dropdown" }, this.isOpen && (h("co-option-list", { key: '8f23d737e36bac0c3077eb3e9fa1e6df1e9aeae1', id: CoCombobox.LIST_ID, ref: (el) => (this.optionListEl = el), items: this.listItemsJson, value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", removableItems: this.multiple, virtual: true, searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: 0, highlightMatches: true, emptyMessage: this.emptyMessage, onCoSearch: (e) => { this.searchQuery = e.detail; }, onCoChange: (e) => this.handleListChange(e.detail), onCoRemoveItem: (e) => this.handleListRemove(e.detail) }, this.showFooter && (h("co-list-footer", { key: '198f56ba250948a6642919d3eb69cb6bb41e32cf', slot: "footer", secondaryLabel: this.footerSecondaryLabel, primaryLabel: this.footerPrimaryLabel, onCoSecondary: this.handleFooterSecondary, onCoPrimary: this.handleFooterPrimary })))))), this.helperText && (h("div", { key: 'ab4a7a36d580ab6f3a198e3d88587010053fa7c8', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && h("co-icon", { key: '2325dbb2d31dc7b3d4b319ecb23a0f7a42e10bac', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), h("span", { key: 'e941e857eb03af5cfefd2d6bce7cb59226a5511b', class: "co-combobox__helper-text" }, this.helperText)))));
+            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (h("span", { key: '3717ddeb6a6cbfb50992f060a94466637d641848', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '3bd22162de7163e761f4deec4813c7bbd2dc7ab3', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, h("co-icon", { key: '466f7859e45f36d572e2736f8c67bb028be00e90', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '6631ac9f8053225d79b4ec3e70733de96044a5fa', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), h("div", { key: '3d3cf9b043e50c161f48575e625dfa167c0efefd', class: "co-combobox__dropdown", part: "dropdown" }, this.isOpen && (h("co-option-list", { key: '74eb44b2f32b30f5965a24d3d46fd99dba6b05b3', id: CoCombobox.LIST_ID, ref: (el) => (this.optionListEl = el), items: this.listItemsJson, value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", removableItems: this.multiple, virtual: true, searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: 0, highlightMatches: true, emptyMessage: this.emptyMessage, onCoSearch: (e) => { this.searchQuery = e.detail; }, onCoChange: (e) => this.handleListChange(e.detail), onCoRemoveItem: (e) => this.handleListRemove(e.detail) }, this.showFooter && (h("co-list-footer", { key: '00861de6c0f6cd87a9a21d88d9f4fe1dd31afc6c', slot: "footer", secondaryLabel: this.footerSecondaryLabel, primaryLabel: this.footerPrimaryLabel, onCoSecondary: this.handleFooterSecondary, onCoPrimary: this.handleFooterPrimary })))))), this.helperText && (h("div", { key: 'ac1eaf079ae327e76df9723972404a375903689e', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && h("co-icon", { key: 'be90b01fda8c51b11bbc73b8ab76085e160492b1', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), h("span", { key: 'c3921ff5a264d24bbba07358085d92675aadbe9b', class: "co-combobox__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -531,7 +545,7 @@ export class CoCombobox {
                     "references": {
                         "ComboboxOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-combobox/co-combobox.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-combobox/co-combobox.tsx",
                             "id": "src/components/co-combobox/co-combobox.tsx::ComboboxOption"
                         }
                     }

package/dist/collection/components/co-command-search/co-command-search.js

@@ -5,6 +5,17 @@ import { shouldKeepOpen, isEmptyBackspace, applyClientFilter } from "./commandSe
  * Opens as an overlay with a search input and filterable list of items.
  *
  * @slot trigger - Optional trigger element that opens the palette on click
+ *
+ * La búsqueda es del host: escucha `coSearch` y responde con los ítems.
+ * Wrapper Vue: `CoCommandSearch` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part panel - Panel de la paleta.
+ * @part input-row - Fila del buscador (ícono, chips de alcance e input).
+ * @part input - El `<input>` de búsqueda.
+ * @part loading - Loader mientras el host busca.
+ * @part tabs - Fila de pestañas de módulo.
+ * @part results - Área de resultados.
+ * @part favorites - Bloque de favoritos (con la búsqueda vacía).
  */
 export class CoCommandSearch {
     constructor() {
@@ -170,14 +181,14 @@ export class CoCommandSearch {
     render() {
         const items = this.filteredItems;
         return [
-            h("div", { key: '39923de31e4b2af82ecbf5e2d53d7d3c1e473b24', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, h("slot", { key: '8ff9d2f0df90708646121f42801d7b5800acc187', name: "trigger" })),
-            h("co-overlay", { key: 'b0dc190f246e3449e09ad0c3b93848835dc03dbf', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '8210d7c7957ff0994bd7971bc7983072aa02983e', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick, onKeyDown: this.handlePanelKeyDown }, h("div", { key: 'f387deebbd88c8f188cb12208972f85f6cfc90a7', class: "co-command-search__input-row", part: "input-row" }, h("co-icon", { key: '668f418f7390875064f0094d0dbf66e73cf9d906', name: "magnifying-glass", size: 20 }), this.parsedChips.map((chip, idx) => (h("span", { class: "co-command-search__facet-chip" }, chip.icon && h("co-icon", { name: chip.icon, size: 12 }), h("span", { class: "co-command-search__facet-chip-label" }, chip.label), h("button", { class: "co-command-search__facet-chip-remove", type: "button", "aria-label": `Remove filter ${chip.label}`, onClick: (e) => {
+            h("div", { key: '37a7fa941fee9d90d58937fea9a968604e825daf', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, h("slot", { key: '23aff571c1cc19b36b1931a5c30d3d3c544eb9b8', name: "trigger" })),
+            h("co-overlay", { key: 'bc74cdb881e5005d12ae0e55f301507715303d63', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '654ab29570bd313809b660cce6ba9f71c0730e57', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick, onKeyDown: this.handlePanelKeyDown }, h("div", { key: 'f62ae09d7384d180b4169e1f7c21d14c7f3ca0b3', class: "co-command-search__input-row", part: "input-row" }, h("co-icon", { key: '800323c34524e72dd0255166e45528dcf273a642', name: "magnifying-glass", size: 20 }), this.parsedChips.map((chip, idx) => (h("span", { class: "co-command-search__facet-chip" }, chip.icon && h("co-icon", { name: chip.icon, size: 12 }), h("span", { class: "co-command-search__facet-chip-label" }, chip.label), h("button", { class: "co-command-search__facet-chip-remove", type: "button", "aria-label": `Remove filter ${chip.label}`, onClick: (e) => {
                     e.stopPropagation();
                     this.coChipRemove.emit(idx);
-                } }, h("co-icon", { name: "x", size: 10, weight: "bold" }))))), h("input", { key: '569d79d5dd64bf0d77f2f935faddb45140dbb4ab', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input", role: "combobox", "aria-expanded": this.open ? 'true' : 'false', "aria-autocomplete": "list" }), this.loading && (h("co-loader", { key: '2c97cbbe4cb8680cc9a0a17ac4874affb4aa4dbc', class: "co-command-search__loading", part: "loading", size: "sm" })), h("span", { key: 'e83670924b978f2b1c8900d7b5974ddfdec79421', class: "co-command-search__shortcut" }, "ESC")), (this.parsedTabs.length > 0 || this.hasMore) && (h("div", { key: 'ac2e11112323393377a47b70d0c4e7f0b4879925', class: "co-command-search__tabs", part: "tabs", role: "tablist" }, this.parsedTabs.map(tab => {
+                } }, h("co-icon", { name: "x", size: 10, weight: "bold" }))))), h("input", { key: '5468e510b549c996e7208b691b846b2949b2870d', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input", role: "combobox", "aria-expanded": this.open ? 'true' : 'false', "aria-autocomplete": "list" }), this.loading && (h("co-loader", { key: '300afe578342e795b968c01ec4a941b2fc07c25b', class: "co-command-search__loading", part: "loading", size: "sm" })), h("span", { key: '96c6c03f2330c1c4fbdecba635cc61aee1cef442', class: "co-command-search__shortcut" }, "ESC")), (this.parsedTabs.length > 0 || this.hasMore) && (h("div", { key: 'b05917311a4e65b98ed2e1db1c0cedb9f83bd5a2', class: "co-command-search__tabs", part: "tabs", role: "tablist" }, this.parsedTabs.map(tab => {
                 const active = tab.value === this.activeTab;
                 return (h("co-chip", { class: "co-command-search__tab", role: "tab", "aria-selected": active ? 'true' : 'false', clickable: true, selected: active, variant: active ? 'filled' : 'outlined', color: active ? 'primary' : 'default', iconLeft: tab.icon, label: tab.label, onCoClick: () => this.coTabSelect.emit(active ? '' : tab.value) }));
-            }), this.hasMore && (h("co-chip", { key: '5d9f2d1f698ae0bcd8114fecc37933d3a382e827', class: "co-command-search__tab co-command-search__tab--more", clickable: true, variant: "outlined", label: this.moreLabel, iconRight: "caret-down", onCoClick: () => this.coMoreTabs.emit() })))), h("div", { key: 'f40c3fd0d1df01943abb1ad5c309c4d3ca06cb6d', class: "co-command-search__results", part: "results" }, this.parsedFavorites.length > 0 && !this.query && (h("div", { key: 'db24aad8d20d08ca7ab73d7a7282864b86416270', class: "co-command-search__fav", part: "favorites" }, h("div", { key: 'da53185a2e61f62413520ed731233db7994c8c98', class: "co-command-search__fav-grid" }, this.parsedFavorites.map(fav => (h("button", { class: "co-command-search__fav-card", type: "button", onClick: () => this.coSelect.emit(fav.value) }, h("span", { class: "co-command-search__fav-icon", style: { background: fav.color || 'var(--co-semantic-surface-muted)' } }, h("co-icon", { name: fav.icon || 'circle', size: 26, weight: "fill" })), h("span", { class: "co-command-search__fav-label" }, fav.label))))))), h("co-option-list", { key: '31c21b81d1fffc0c8a1e7aadfc3abb6661804967', ref: (el) => (this.optionListEl = el), items: JSON.stringify(items.map((it) => ({
+            }), this.hasMore && (h("co-chip", { key: '36c25c208b1e26394bd02a56dda55d5e0fd912fd', class: "co-command-search__tab co-command-search__tab--more", clickable: true, variant: "outlined", label: this.moreLabel, iconRight: "caret-down", onCoClick: () => this.coMoreTabs.emit() })))), h("div", { key: '72497fec08f07fd6a91f62db10091d7d635eeab9', class: "co-command-search__results", part: "results" }, this.parsedFavorites.length > 0 && !this.query && (h("div", { key: 'be18a43f0e3e5cc4c9ce0cbfacc90c7e5568017b', class: "co-command-search__fav", part: "favorites" }, h("div", { key: '9c29628bb6ba66daf9253aa5d490f7dcc56e4b3b', class: "co-command-search__fav-grid" }, this.parsedFavorites.map(fav => (h("button", { class: "co-command-search__fav-card", type: "button", onClick: () => this.coSelect.emit(fav.value) }, h("span", { class: "co-command-search__fav-icon", style: { background: fav.color || 'var(--co-semantic-surface-muted)' } }, h("co-icon", { name: fav.icon || 'circle', size: 26, weight: "fill" })), h("span", { class: "co-command-search__fav-label" }, fav.label))))))), h("co-option-list", { key: 'ee50dd0d97743a7a85de59f8daf6e45e989a422d', ref: (el) => (this.optionListEl = el), items: JSON.stringify(items.map((it) => ({
                     _id: it.value, label: it.label, icon: it.icon, description: it.subtitle, group: it.section,
                     disabled: it.disabled,
                 }))), autoHighlight: true, highlightMatches: true, highlightTerm: this.query, loading: this.loading, emptyMessage: this.emptyMessage, onCoChange: (e) => this.handleListPick(e.detail.item._id) })))),
@@ -246,7 +257,7 @@ export class CoCommandSearch {
                     "references": {
                         "CommandItem": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-command-search/co-command-search.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-command-search/co-command-search.tsx",
                             "id": "src/components/co-command-search/co-command-search.tsx::CommandItem"
                         }
                     }
@@ -459,7 +470,7 @@ export class CoCommandSearch {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Se eligi\u00F3 un \u00EDtem (o un favorito) y la paleta se cierra; `detail` = `value` del \u00EDtem.\nLos \u00EDtems con `keepOpen` emiten `coScopeChange` en su lugar."
                 },
                 "complexType": {
                     "original": "string",
@@ -474,7 +485,7 @@ export class CoCommandSearch {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Se cerr\u00F3 la paleta (Escape, click en el fondo o tras elegir)."
                 },
                 "complexType": {
                     "original": "void",
@@ -489,7 +500,7 @@ export class CoCommandSearch {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Cambi\u00F3 el texto del buscador (sin debounce); `detail` = texto."
                 },
                 "complexType": {
                     "original": "string",

package/dist/collection/components/co-data-table/co-data-table.js

@@ -2,7 +2,12 @@ import { measureTruncatedHeaders } from "./headerTruncationLogic";
 import { h } from "@stencil/core";
 import { edgeAutoScrollSpeed, resizeWidth } from "../../utils/columnResize";
 /**
+ * Tabla de datos con columnas configurables, orden, selección de filas,
+ * estado de carga y estado vacío. Wrapper Vue: `CoDataTable` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
  * @slot - Default slot for custom row content (advanced usage)
+ * @part empty - El estado vacío (`emptyTitle`, `emptyMessage`, `emptyIcon`).
  */
 export class CoDataTable {
     constructor() {
@@ -475,12 +480,12 @@ export class CoDataTable {
             : h("slot", { name: "empty-action" }))));
     }
     render() {
-        return (h("div", { key: '44bc59a435ddaecd97cc5f6a70c466e2b8932344', class: {
+        return (h("div", { key: 'db627f32da540ce37e30ef6411c29ffc7be6b7fb', class: {
                 'co-data-table': true,
                 'co-data-table--resizing': this.resizingColumn !== null,
                 'co-data-table--loading': this.loading,
                 'co-data-table--empty': !this.loading && this.parsedRows.length === 0,
-            } }, h("div", { key: '1bd489e12b774b82571877870783454484319c9e', class: "co-data-table__scroll" }, h("table", { key: '3676513e8cffa3af36575975e3a57de8482129e6', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), h("slot", { key: '9bfc25d51933af94e714a5c8dc9e37f306ee27ed' }), this.loading ? this.renderSkeletonBody() : null)), this.renderEmpty()));
+            } }, h("div", { key: '03c1c7eb194c077716535a73b753db1b1c7ea49f', class: "co-data-table__scroll" }, h("table", { key: '6401d8f51d991e434b6798ffa800ec05521408bd', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), h("slot", { key: 'ddc92d612b45877c558d2ad8dd567c1ea12d76ef' }), this.loading ? this.renderSkeletonBody() : null)), this.renderEmpty()));
     }
     static get is() { return "co-data-table"; }
     static get originalStyleUrls() {
@@ -504,7 +509,7 @@ export class CoDataTable {
                     "references": {
                         "CoDataTableColumn": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-data-table/co-data-table.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-data-table/co-data-table.tsx",
                             "id": "src/components/co-data-table/co-data-table.tsx::CoDataTableColumn"
                         }
                     }

package/dist/collection/components/co-data-table-pagination/co-data-table-pagination.js

@@ -1,4 +1,16 @@
 import { h } from "@stencil/core";
+/**
+ * Paginación de tabla: selector de filas por página, total de registros, salto
+ * a página y botones anterior/siguiente. Emite `coPageChange` con
+ * `{ page, pageSize }`. Wrapper Vue: `CoDataTablePagination` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
+ * @part pagination - Contenedor de la barra.
+ * @part dropdown - Selector de filas por página.
+ * @part jump-input - Input de salto a página.
+ * @part prev-btn - Botón «anterior».
+ * @part next-btn - Botón «siguiente».
+ */
 export class CoDataTablePagination {
     constructor() {
         /** Current page (1-based) */
@@ -84,17 +96,17 @@ export class CoDataTablePagination {
     }
     render() {
         const pages = this.getVisiblePages();
-        return (h("div", { key: 'f83c7d15c6e8eec2afc321143bded864ae5fda09', class: "co-pagination", part: "pagination" }, h("div", { key: '11782853551ccefbcec9ac5106f832b2197da906', class: "co-pagination__section" }, h("span", { key: 'cf6655015c28276df65494a98227f3958f49c0d3', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'e81cfc938459634a724af59b2f00ceb509faaafb', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
+        return (h("div", { key: '0f62fb900604d4deb263f03e8075e2c092e8ce73', class: "co-pagination", part: "pagination" }, h("div", { key: '257d5bc2c25ef058ceb7b41ddfba949e8da0d466', class: "co-pagination__section" }, h("span", { key: '61d243f6e20b8aca4f65c4f95dd0a85a98b70485', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'd99b709c2f9ac000adf4922c3cbcd9a745f6be2f', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
                 this.jumpToValue = e.target.value;
             }, onKeyDown: (e) => this.handleJumpToPage(e), onFocus: (e) => {
                 e.target.select();
-            }, part: "jump-input" })), h("div", { key: '1106208e94bf7fed0a536d9ba697f029e6125bf4', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: '9a158ae48966c89bbfd30b575382e3798f86c403', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: 'eb823c3876c2b53bc8a946b18899290ab9d4928c', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: 'f46690625eb9b4fc3f47c3dd6c19670f483f4373', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: 'ebd5dcac78b682c6a96ca090868dfbe4a81196e7', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: 'be486ea92757e11c3782c293cbbf377fb39ac1f2', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
+            }, part: "jump-input" })), h("div", { key: '9737e4830745d75428184b9cb1e45f9cfd713aaf', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: '1a025e7dc8fc1cc29547da7633b70e0b1b166ab7', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '5402395084c43c4e828de79454aa2dbb457bf6df', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '8010da33d478ce393f77122926d6d5e30eb6da27', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '0abd66f654b36912826d9b11357837f1db5b045c', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: 'ca25c9f67dd28fbf58d903691a6f805168dc255e', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
                 'co-pagination__page-size-option': true,
                 'co-pagination__page-size-option--active': size === this.pageSize,
-            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '90d4ade3e50e1e539dacae10375bf395eb8f116b', class: "co-pagination__spacer" }), h("div", { key: 'db63dc37c80ef387473085d18dbcfb41e5779513', class: "co-pagination__section" }, h("span", { key: '1c3a3603bb8fcfc60762fb6e2ea865e06a23bf60', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '04f0065db683f13f6b57d2c068cd883b538964fd', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '69c7aa951561422f9a0b6a4321845ceadf33d4c7', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
+            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '3b84c572f6eb902d9bd2787e938014efa710b317', class: "co-pagination__spacer" }), h("div", { key: '0cf60f2844ccd5e7ce370bc57895c874f558b718', class: "co-pagination__section" }, h("span", { key: '944f414d863c494b00df4ac81f688b00597b0af4', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '4190fcca176fc5d9918cc6e70c7ab6f5a244dfd7', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '5dbb9d83e9e3df1ad9dc817e5e7995706e9c06b3', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
                 'co-pagination__page-btn': true,
                 'co-pagination__page-btn--active': p === this.page,
-            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '8498aaddbfa4bf91c63fd7d2697613d112d37adc', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
+            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '7b27f1e6910b3f8c40198c83a6c6a11a4fbddaeb', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
     }
     static get is() { return "co-data-table-pagination"; }
     static get encapsulation() { return "shadow"; }