@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

package/dist/collection/components/co-color-slider/co-color-slider.js

@@ -0,0 +1,354 @@
+import { h } from "@stencil/core";
+import { clamp } from "../../utils/hsv";
+/** Damero de 4 px para el relleno del thumb de alpha (el del track es de 8 px). */
+const THUMB_CHECKER = 'repeating-conic-gradient(#ebebeb 0 25%, #fafafa 0 50%) 0 0 / 4px 4px';
+/** Tamaño del thumb por defecto (espejo de `--co-color-thumb-size` en colorThumb.css). */
+const THUMB_SIZE = 16;
+/**
+ * Slider de un canal del picker de color: tono (`hue`, 0–360) u opacidad
+ * (`alpha`, 0–100, sobre el color base `color`).
+ *
+ * Contrato de eventos (mismo que `co-color-area`, pensado para el historial del
+ * editor): `coInput` en cada movimiento del arrastre y en cada paso de teclado;
+ * `coChange` UNA vez al terminar el gesto (pointerup/pointercancel), solo si el
+ * gesto cambió el valor, o tras cada paso de teclado que lo cambie — nunca un
+ * commit vacío. Ambos llevan el valor numérico.
+ *
+ * El thumb (16 px) va INSET: su centro recorre [8 px, ancho − 8 px], así nunca
+ * se sale del track de 16 px de alto. El puntero usa el mismo mapeo, de modo
+ * que el color bajo el thumb es exactamente el valor emitido.
+ *
+ * @part track - La pista (gradiente de tono o damero + transparente→color).
+ * @part thumb - El indicador circular (16 px, anillo blanco + color actual). *
+ * Wrapper Vue: `CoColorSlider` de `@prolibu-suite/cobalt-vue`.
+ */
+export class CoColorSlider {
+    constructor() {
+        /** Canal: `hue` (0–360, gradiente HSL uniforme) o `alpha` (0–100, damero). */
+        this.channel = 'hue';
+        /** Valor actual (tono 0–360 / alpha 0–100). Mutable: el slider se actualiza solo al arrastrar. */
+        this.value = 0;
+        /** Deshabilita puntero y teclado; no emite nada. */
+        this.disabled = false;
+        this.dragging = false;
+        /** ¿Algún coInput real durante el gesto? Sin cambio no hay coChange de cierre. */
+        this.changedInGesture = false;
+        // ── Puntero ────────────────────────────────────────────────────────────
+        this.handlePointerDown = (e) => {
+            var _a;
+            // Solo el botón primario; un segundo puntero (multi-touch) no roba el gesto en curso.
+            if (this.disabled || e.button !== 0 || this.dragging)
+                return;
+            e.preventDefault();
+            (_a = this.trackEl) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+            this.capturePointer(e);
+            this.dragging = true;
+            this.activePointerId = e.pointerId;
+            this.changedInGesture = false;
+            this.applyPointer(e);
+        };
+        this.handlePointerMove = (e) => {
+            if (!this.isActivePointer(e))
+                return;
+            this.applyPointer(e);
+        };
+        this.handlePointerEnd = (e) => {
+            if (!this.isActivePointer(e))
+                return;
+            this.dragging = false;
+            this.activePointerId = undefined;
+            this.releasePointer(e);
+            // Terminar el gesto DESARMA la bandera (hermano del `endGesture()` de
+            // co-slider). Hoy es defensa y no un fix: este componente no tiene
+            // `disconnectedCallback`, así que nadie vuelve a leerla después del gesto
+            // — en co-slider, que sí lo tiene, la bandera armada le hacía reemitir un
+            // `coChange` con el valor ya escrito en CADA desmontaje. Junto con el
+            // `if (this.dragging)` de `commitInput` (el teclado no la arma), fuera de
+            // un gesto la bandera está SIEMPRE apagada.
+            const huboCambio = this.changedInGesture;
+            this.changedInGesture = false;
+            // Un click sobre el valor actual (o en un extremo ya alcanzado) no cambia
+            // nada: sin coChange, igual que el teclado en el borde. Un commit vacío
+            // entraría al historial de deshacer del editor como paso sin efecto.
+            if (huboCambio)
+                this.coChange.emit(this.value);
+        };
+        // ── Teclado ────────────────────────────────────────────────────────────
+        this.handleKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            const step = e.shiftKey ? 10 : 1;
+            let next;
+            switch (e.key) {
+                case 'ArrowRight':
+                case 'ArrowUp':
+                    next = this.value + step;
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                    next = this.value - step;
+                    break;
+                case 'PageUp':
+                    next = this.value + 10;
+                    break;
+                case 'PageDown':
+                    next = this.value - 10;
+                    break;
+                case 'Home':
+                    next = 0;
+                    break;
+                case 'End':
+                    next = this.max;
+                    break;
+                default: return;
+            }
+            e.preventDefault();
+            // En el borde no hay cambio → sin eventos (un commit vacío ensuciaría el historial).
+            if (this.commitInput(clamp(next, 0, this.max)))
+                this.coChange.emit(this.value);
+        };
+    }
+    get max() {
+        return this.channel === 'alpha' ? 100 : 360;
+    }
+    /** `==`: en jsdom los MouseEvent traen `pointerId` undefined y deben seguir pasando. */
+    isActivePointer(e) {
+        return this.dragging && e.pointerId == this.activePointerId;
+    }
+    /** `setPointerCapture` sigue el gesto fuera del track. jsdom no lo implementa
+     *  y un browser lanza NotFoundError con un pointerId sintético: guardado. */
+    capturePointer(e) {
+        const el = this.trackEl;
+        if (!el || typeof el.setPointerCapture !== 'function' || e.pointerId == null)
+            return;
+        try {
+            el.setPointerCapture(e.pointerId);
+        }
+        catch (_a) {
+            /* pointerId inactivo (evento sintético): sin captura, el gesto sigue dentro del track */
+        }
+    }
+    releasePointer(e) {
+        const el = this.trackEl;
+        if (!el || typeof el.releasePointerCapture !== 'function' || e.pointerId == null)
+            return;
+        try {
+            el.releasePointerCapture(e.pointerId);
+        }
+        catch (_a) {
+            /* ya liberado */
+        }
+    }
+    /** clientX → valor, con el recorrido del thumb inset (centro en [size/2, ancho − size/2]). */
+    applyPointer(e) {
+        var _a, _b;
+        const rect = (_a = this.trackEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect || rect.width <= 0)
+            return;
+        const size = ((_b = this.thumbEl) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || THUMB_SIZE;
+        const travel = Math.max(1, rect.width - size);
+        const ratio = clamp((e.clientX - rect.left - size / 2) / travel, 0, 1);
+        this.commitInput(ratio * this.max);
+    }
+    /** Aplica el valor y emite `coInput` solo si cambió. */
+    commitInput(next) {
+        if (next === this.value)
+            return false;
+        this.value = next;
+        // Solo un GESTO arma la bandera: el teclado también pasa por acá (y cierra
+        // él mismo con su `coChange`), y armarla fuera de un arrastre la dejaba
+        // prendida sin nadie que la apague.
+        if (this.dragging)
+            this.changedInGesture = true;
+        this.coInput.emit(next);
+        return true;
+    }
+    /** Relleno del thumb: el tono puro, o el color base con la opacidad actual sobre damero. */
+    thumbFill(value, color) {
+        if (this.channel === 'alpha') {
+            const mixed = `color-mix(in srgb, ${color} ${value}%, transparent)`;
+            return `linear-gradient(${mixed}, ${mixed}), ${THUMB_CHECKER}`;
+        }
+        return `hsl(${value} 100% 50%)`;
+    }
+    render() {
+        var _a, _b;
+        // `??`: el harness de spec no materializa defaults de class-field.
+        const channel = (_a = this.channel) !== null && _a !== void 0 ? _a : 'hue';
+        const max = this.max;
+        const value = clamp((_b = this.value) !== null && _b !== void 0 ? _b : 0, 0, max);
+        const color = this.color || '#000';
+        const isAlpha = channel === 'alpha';
+        return (h("div", { key: 'a4ab80a67e0bb20037f48b99cca835d17622a776', class: {
+                'co-color-slider': true,
+                'co-color-slider--disabled': this.disabled,
+                'co-color-slider--dragging': this.dragging,
+            } }, h("div", { key: 'd9dd4a75f7b74e73ddd0da15384566d038fd9eff', class: {
+                'co-color-slider__track': true,
+                'co-color-slider__track--hue': !isAlpha,
+                'co-color-slider__track--alpha': isAlpha,
+            }, part: "track", style: isAlpha ? { '--co-color-slider-color': color } : undefined, role: "slider", tabIndex: this.disabled ? -1 : 0, "aria-label": this.label || undefined, "aria-valuemin": "0", "aria-valuemax": String(max), "aria-valuenow": String(Math.round(value)), "aria-disabled": this.disabled ? 'true' : undefined, ref: (el) => (this.trackEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerEnd, onPointerCancel: this.handlePointerEnd, onKeyDown: this.handleKeyDown }, h("div", { key: '62866f901b8090289ab48a8d90ad4ee50fea5bb5', class: "co-color-thumb co-color-slider__thumb", part: "thumb", ref: (el) => (this.thumbEl = el), style: {
+                '--co-color-slider-ratio': String(value / max),
+                '--co-color-thumb-fill': this.thumbFill(value, color),
+            } }))));
+    }
+    static get is() { return "co-color-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-color-slider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-color-slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "channel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorSliderChannel",
+                    "resolved": "\"alpha\" | \"hue\"",
+                    "references": {
+                        "ColorSliderChannel": {
+                            "location": "local",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/packages/core/src/components/co-color-slider/co-color-slider.tsx",
+                            "id": "src/components/co-color-slider/co-color-slider.tsx::ColorSliderChannel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Canal: `hue` (0\u2013360, gradiente HSL uniforme) o `alpha` (0\u2013100, damero)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "channel",
+                "defaultValue": "'hue'"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor actual (tono 0\u2013360 / alpha 0\u2013100). Mutable: el slider se actualiza solo al arrastrar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Color base para `channel=\"alpha\"` (cualquier color CSS; el track va de transparente a \u00E9l)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilita puntero y teclado; no emite nada."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre accesible del slider (`aria-label`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dragging": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coInput",
+                "name": "coInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Vista previa: cada movimiento del arrastre y cada paso de teclado."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Commit: una vez al soltar (o cancelar) el gesto si cambi\u00F3 el valor, y tras cada paso de teclado que lo cambie."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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: 'bf11db2386df7088dfcec622ee02ce527fcef54f', 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: '27543398ce1e3fc9e0f08ee2e4d59167e4e79894', class: "co-column-picker__labels" }, this.label && h("label", { key: '7051f1b7c44c7f0da7ae0e741a14cbe8a3f3ba26', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: '17d011a13a7f5f7c1c44f3738f15b3438180fc7b', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: '4dcb6cb4289630a8238e53010aec69ec0cfc2e2a', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: '0233bff4eeb82fe7fdf91aad530c97fc6dcac06f', class: "co-column-picker__search" }, h("co-icon", { key: '64d1e6fc90c2380e509ca750854a40e416a902c1', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: '60e75c92d5fa2991542063e5add78d8b1c79861b', 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: 'c894d1f8cd91368d9662e63f288384a111b7ffe0', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: 'ea9d732d1c828fb3146046418d6b5d8dbc5c3c1b', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: '1aa8fde242c2b5d531411d67ef7ea96da4b0dbef', class: "co-column-picker__toolbar" }, h("button", { key: 'ce0bf82e65376e0eef1d83ee2e977617116e53ea', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '7e418708aa8234f8e60ffd64d1ef7aad5baa5c98', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '5f1d2021e7b7ac9d51b4fb4f530a52204558818b', class: "co-column-picker__toolbar-sep" }), h("button", { key: '67a4b15e8b7ca43942866b502c2e28da9edb48d2', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: 'c832eff1b36989819ad1b89c30c55398877c33b3', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: '1b0644a54e796cb85280850375dcade772a35648', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '4292ea60a8c533dc67c57b029dee1c19403d68ed', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: '9b06012caa39e9704698a77981b994d31c1d60e3', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: 'c6c169d84d6b495101741df8012307cee8ada693', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'e5e6d35e4b5356dbe1880742fe3c35ee9d845ae6', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: 'e3a626266f8f68277ae8dbfa2d4194a57855af8d', 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",