@prolibu-suite/cobalt-core 0.9.6 → 0.10.1

package/dist/collection/components/co-color-picker/presets.js

@@ -1,19 +1,117 @@
 /**
- * Default color presets derived from Cobalt design tokens (base.json).
- * Uses primary colors + secondary-100 (full saturation, best contrast).
- * Names are English by default — consumers can override with translated presets.
+ * Normaliza lo que llega por la prop `presets` a la forma interna, dejando
+ * anotado si la `key` vino declarada o se sintetizó.
+ *
+ * `ColorPreset.key` es OPCIONAL porque el tipo es superficie pública (lo
+ * re-exporta `components.d.ts`): exigirla rompería a todo host que hoy pasa
+ * `[{ name, value }]`. Puertas adentro la damos por garantizada, así que se
+ * rellena acá. Un hex suelto no tiene identidad traducible: su propio hex
+ * ES su identidad.
+ *
+ * Vive acá y no en el componente porque es el ÚNICO lugar que sintetiza keys, y
+ * `splitPaletteGroups` —su consumidor— depende de esa marca: separarlos deja el
+ * invariante a un import de distancia de romperse en silencio.
+ */
+export const resolvePreset = (p) => {
+    var _a;
+    if (typeof p === 'string')
+        return { key: p, name: p, value: p, synthesizedKey: true };
+    // La key declarada se conserva tal cual; si no vino, la cadena de siempre.
+    if (p.key != null)
+        return { key: p.key, name: p.name, value: p.value };
+    return { key: (_a = p.name) !== null && _a !== void 0 ? _a : p.value, name: p.name, value: p.value, synthesizedKey: true };
+};
+/**
+ * Paleta por default: 5 neutros + los 12 de marca (base.json).
+ * Los nombres vienen en inglés; el consumidor los traduce POR `key` — nunca
+ * duplicando la lista de valores, que fue lo que hizo derivar a FieldColor.vue.
+ *
+ * Sin blanco puro a propósito (spec §2): una etiqueta blanca desaparece sobre
+ * el fondo blanco. Los encabezados de documento lo pasan por la prop `presets`.
+ *
+ * Los hex son literales porque son DATA del picker, no estilo.
  */
 export const DEFAULT_PRESETS = [
-    { name: 'Green', value: '#02A270' },
-    { name: 'Yellow', value: '#FDBF00' },
-    { name: 'Blue', value: '#2563EB' },
-    { name: 'Pink', value: '#F32A73' },
-    { name: 'Red', value: '#EB1E1E' },
-    { name: 'Orange', value: '#F0821E' },
-    { name: 'Teal', value: '#00AFAF' },
-    { name: 'Light blue', value: '#00BEE6' },
-    { name: 'Electric blue', value: '#000AFF' },
-    { name: 'Violet', value: '#5F4BD7' },
-    { name: 'Burgundy', value: '#811137' },
-    { name: 'Olive', value: '#AAB43C' },
+    { key: 'black', name: 'Black', value: '#1F1C1B' },
+    { key: 'gray', name: 'Gray', value: '#585858' },
+    { key: 'silver', name: 'Silver', value: '#C4C4C4' },
+    { key: 'smoke', name: 'Smoke', value: '#E3E3E3' },
+    { key: 'bone', name: 'Bone', value: '#F7F6F0' },
+    { key: 'green', name: 'Green', value: '#02A270' },
+    { key: 'olive', name: 'Olive', value: '#AAB43C' },
+    { key: 'yellow', name: 'Yellow', value: '#FDBF00' },
+    { key: 'orange', name: 'Orange', value: '#F0821E' },
+    { key: 'red', name: 'Red', value: '#EB1E1E' },
+    { key: 'pink', name: 'Pink', value: '#F32A73' },
+    { key: 'burgundy', name: 'Burgundy', value: '#811137' },
+    { key: 'violet', name: 'Violet', value: '#5F4BD7' },
+    { key: 'electricBlue', name: 'Electric blue', value: '#000AFF' },
+    { key: 'blue', name: 'Blue', value: '#2563EB' },
+    { key: 'lightBlue', name: 'Light blue', value: '#00BEE6' },
+    { key: 'teal', name: 'Teal', value: '#00AFAF' },
 ];
+/**
+ * Los 5 primeros son neutros. Frontera ÚNICA: la grilla agrupa por acá y el
+ * seed sortea del resto. No repetir el `5` a mano en ningún otro lado.
+ */
+export const NEUTRAL_PRESET_KEYS = ['black', 'gray', 'silver', 'smoke', 'bone'];
+/**
+ * Sólo las de marca, derivadas de la frontera. El seed aleatorio al CREAR un
+ * registro sortea de acá: nacer con una etiqueta gris es peor que el estado
+ * anterior.
+ */
+export const BRAND_PRESET_KEYS = DEFAULT_PRESETS
+    .filter((p) => !NEUTRAL_PRESET_KEYS.includes(p.key))
+    .map((p) => p.key);
+// Índices de membresía, armados UNA vez a nivel de módulo: `splitPaletteGroups`
+// corre en un getter que el render lee en cada pasada.
+const NEUTRAL_KEYS = new Set(NEUTRAL_PRESET_KEYS);
+const BRAND_KEYS = new Set(BRAND_PRESET_KEYS);
+/**
+ * Parte una lista de presets en [neutros, marca], o devuelve `null` si no hay
+ * una partición que signifique algo.
+ *
+ * Se decide por MEMBRESÍA de `key`, nunca por identidad de referencia contra
+ * `DEFAULT_PRESETS`. La identidad es frágil por definición —dos arrays con el
+ * mismo contenido se comportan distinto— y ya costó un bug real: `FieldColor.vue`
+ * re-serializa la paleta para colgarle los nombres traducidos, así que llegaba
+ * como un array nuevo, caía en la rama "custom" y los `role="group"` +
+ * `aria-label` del spec §4 no se renderizaban NUNCA en la aplicación. La a11y
+ * existía sólo en los tests, que sí pasaban la paleta por identidad.
+ *
+ * Devuelve `null` en tres casos, y los tres terminan en un grupo único SIN
+ * rótulo:
+ * - alguna `key` la sintetizamos nosotros (`synthesizedKey`): el host no declaró
+ *   nuestra paleta, y como doce de las keys son nombres de color CSS, mirar sólo
+ *   el texto haría pasar por paleta nuestra a unos strings sueltos;
+ * - alguna `key` declarada es desconocida (paleta custom del host): no hay nada
+ *   semántico que declarar;
+ * - falta alguno de los dos lados: un grupo solo no particiona nada, así que
+ *   rotularlo anunciaría al lector de pantalla una frontera que no existe.
+ *
+ * ORDEN (decisión explícita): cuando la paleta se reconoce, se re-emite en orden
+ * canónico —neutros primero, marca después—, conservando el orden relativo del
+ * host DENTRO de cada lado. No es evitable: dos grupos contiguos no se pueden
+ * renderizar respetando un orden intercalado. Entre perder la agrupación
+ * semántica (spec §4) y perder un orden que el host no pudo curar sin adoptar
+ * antes nuestro vocabulario de keys, gana la agrupación. `flatPresets` y
+ * `focusedIndex` derivan de `presetGroups`, así que las flechas recorren el
+ * orden RENDERIZADO y no se desincronizan.
+ */
+export function splitPaletteGroups(presets) {
+    const neutrals = [];
+    const brand = [];
+    for (const p of presets) {
+        if (p.synthesizedKey)
+            return null;
+        if (NEUTRAL_KEYS.has(p.key))
+            neutrals.push(p);
+        else if (BRAND_KEYS.has(p.key))
+            brand.push(p);
+        else
+            return null;
+    }
+    if (!neutrals.length || !brand.length)
+        return null;
+    return { neutrals, brand };
+}

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

@@ -165,13 +165,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: '6407a41a8e03d70e54cfd378747396a413eb0a11', class: {
+        return (h("div", { key: 'bf11db2386df7088dfcec622ee02ce527fcef54f', 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: '86850ac9d0162b34369c70424549d101c9b72cc3', class: "co-column-picker__labels" }, this.label && h("label", { key: 'c05eccf88052fdcf8b593282daa1fc0f9a8bab1e', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: 'fe64f07fb1238d51506575c679bb33c7797c2edc', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: 'cb28e40aaf843c96a2649efef1e3803cde627345', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: '37ab85bf708a3ba34f5ddb1ab416600b0d0be072', class: "co-column-picker__search" }, h("co-icon", { key: '8b10c859742279f5e11d764d6012429259bdec19', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: '7f52dbbcc524bf78424cb85396ad62b68b16dac5', 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: 'ddbd0996534dcda27de900019d10b12eeb352d8d', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: 'f4d997c88423b664f63fcc09acf5366f735f3a57', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: '0e6ee3c9351c48c10affd4e2146cf9939a06971d', class: "co-column-picker__toolbar" }, h("button", { key: '101167f8a9da5f47dec86a94f9ffa0d4bb2edfbb', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '6e00fd6f1be5f2bc223dbb1b6800916d0872b7a2', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '9446309b1a737059936a3fecdbbca37677544c49', class: "co-column-picker__toolbar-sep" }), h("button", { key: '7a014ee36386286cee3b97d1a67cafe8eca60ac4', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: '09a58d24e5fef162b9c8452d905e36c89b5fb0a9', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: '01468f7c6140081183cccb1c7ae063f8bbafad5e', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '94d9805ce88fed580da36d122d134c4f445df03f', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: '95aab5f3408bf840d0e27f6e1de3908b6a9dd3c6', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: '27533140acd117f09e981f307f0c39d741b92515', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '7992e3f214985653e673f64f5b85e07be5298cc7', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: '01eb7d766027a9c0cff30f91be730f3dbb4b2443', class: "co-column-picker__helper-text" }, this.helperText)))));
+            } }, (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)))));
     }
     static get is() { return "co-column-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -531,7 +531,7 @@ export class CoCombobox {
                     "references": {
                         "ComboboxOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-combobox/co-combobox.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release/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

@@ -246,7 +246,7 @@ export class CoCommandSearch {
                     "references": {
                         "CommandItem": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-command-search/co-command-search.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release/packages/core/src/components/co-command-search/co-command-search.tsx",
                             "id": "src/components/co-command-search/co-command-search.tsx::CommandItem"
                         }
                     }

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

@@ -153,8 +153,18 @@ co-data-table {
   color: var(--co-semantic-text-muted);
 }
 
-.co-data-table__th-label {
+/* Wrapper co-tooltip[block] del label: toma el track flex que antes ocupaba el
+   label (min-width:0 = deja truncar; sus hermanos pin/sort/funnel llevan
+   flex-shrink:0). El tooltip sale del host (tsx), gateado por truncado. */
+.co-data-table__th-tip {
   flex: 1;
+  min-width: 0;
+}
+
+/* Dentro del trigger del tooltip el label ya no es flex item: block explícito
+   o el ellipsis (overflow/text-overflow solo aplican a cajas block) no engancha. */
+.co-data-table__th-label {
+  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -208,6 +218,16 @@ co-data-table {
   line-height: 0; /* el co-checkbox inline mete baseline-gap y estira el header a 43 */
 }
 
+/* Sin separador entre la casilla y la primera columna: la selección no es una
+   columna de datos y su borde derecho dibujaba un recuadro alrededor del check
+   (pedido de diseño 2026-09-16). Doble clase para ganarle al `border-right` de
+   las reglas base .co-data-table__th / .co-data-table__td, que van DESPUÉS en
+   este archivo. */
+.co-data-table__th.co-data-table__th--checkbox,
+.co-data-table__td.co-data-table__td--checkbox {
+  border-right: none;
+}
+
 /* ─── STICKY COLUMNS ───────────────────────────────────────── */
 .co-data-table__th--sticky,
 .co-data-table__td--sticky {
@@ -268,6 +288,42 @@ co-data-table {
   transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
+/* Tinte de hover/selected de las celdas sticky: un overlay ANIMABLE.
+   La fila pinta su tinte translúcido en el <tr> y lo transiciona
+   (background-color, duration-fast). Una celda sticky lleva base opaca —no
+   puede dejar ver lo que scrollea debajo—, así que el tinte va compuesto
+   ENCIMA de esa base. Componerlo con `background-image` (gradiente) no es
+   animable: la columna fijada prendía y apagaba de golpe mientras el resto de
+   la fila se desvanecía (2026-09-07). `::before` con opacity/background-color
+   y la MISMA transición que la fila. z-index -1 dentro del stacking context
+   de la celda (position:sticky + z-index) = encima de su base opaca, debajo
+   de su contenido. Los tokens espejan los de .co-data-table__row de abajo. */
+.co-data-table__td--sticky::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-color: var(--co-semantic-surface-hover);
+  opacity: 0;
+  transition:
+    opacity var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
+}
+
+.co-data-table__row:hover .co-data-table__td--sticky::before {
+  opacity: 1;
+}
+
+.co-data-table__row--selected .co-data-table__td--sticky::before {
+  opacity: 1;
+  background-color: var(--co-color-opacity-negro-4);
+}
+
+.co-data-table__row--selected:hover .co-data-table__td--sticky::before {
+  background-color: var(--co-color-opacity-negro-8);
+}
+
 /* ─── RESIZE HANDLE ─────────────────────────────────────────── */
 .co-data-table__resize-handle {
   position: absolute;
@@ -319,7 +375,12 @@ co-data-table {
      wrapper, never on the cell itself. */
   height: 48px;
   padding: 0 var(--co-spacing-md);
-  background: inherit;
+  /* Transparente, NUNCA `inherit`: el hover/selected es un tinte translúcido
+     pintado en el <tr>. Con `inherit` cada celda normal lo repintaba encima
+     (doble tinte, ~15%) mientras las sticky —base opaca + un gradiente del
+     mismo tinte— quedaban al 8%: la columna fijada se veía más clara que el
+     resto de la fila en hover. Guard: co-data-table-cell-background-guard.test.ts */
+  background: transparent;
   border-bottom: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
   border-right: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
   vertical-align: middle;

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

@@ -1,3 +1,4 @@
+import { measureTruncatedHeaders } from "./headerTruncationLogic";
 import { h } from "@stencil/core";
 import { edgeAutoScrollSpeed, resizeWidth } from "../../utils/columnResize";
 /**
@@ -50,6 +51,9 @@ export class CoDataTable {
         this.parsedFilteredFields = [];
         this.parsedIndirectFields = [];
         this.columnWidths = new Map();
+        /** Columnas cambiadas → re-medir tras el render (un cambio de texto con el
+         *  mismo ancho no dispara el ResizeObserver). */
+        this.headerMeasurePending = false;
         this.resizingColumn = null;
         this.resizeStartX = 0;
         this.resizeStartWidth = 0;
@@ -71,6 +75,7 @@ export class CoDataTable {
     }
     /* ─── WATCHERS ──────────────────────────────────────────── */
     parseColumns() {
+        this.headerMeasurePending = true;
         try {
             const cols = typeof this.columns === 'string' ? JSON.parse(this.columns) : this.columns;
             this.parsedColumns = cols;
@@ -119,13 +124,39 @@ export class CoDataTable {
         }
     }
     componentWillLoad() {
+        // Recursos por instancia acá y no en inicializadores de campo: la instancia
+        // envuelta de @stencil/vitest los omite (ver nota en co-data-table.spec.tsx).
+        this.headerLabelEls = new Map();
+        this.truncatedHeaders = {};
         this.parseColumns();
         this.parseRows();
         this.parseSelectedKeys();
         this.parseFilteredFields();
         this.parseIndirectFields();
     }
+    componentDidLoad() {
+        // Tooltip del header SOLO cuando el label trunca (patrón co-list-item). El
+        // estado tiene que estar correcto ANTES del hover: Stencil re-renderiza en
+        // rAF, así que una medida en el pointerenter del <th> llega después de que
+        // co-tooltip leyó `disabled` al agendar su show (verificado headless
+        // 2026-09-07). Un ResizeObserver re-mide cuando el label cambia de ancho
+        // (resize de columna, panel que se muestra, viewport) — y en la carga.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.headerResizeObserver = new ResizeObserver(() => this.measureHeaderTruncation());
+            this.headerLabelEls.forEach((el) => this.headerResizeObserver.observe(el));
+        }
+        this.measureHeaderTruncation();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.headerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.headerResizeObserver = undefined;
+    }
     componentDidRender() {
+        if (this.headerMeasurePending) {
+            this.headerMeasurePending = false;
+            this.measureHeaderTruncation();
+        }
         // Auto-scroll parity: the resize tick grew the column (async @State render)
         // and owes the container the same px of scroll. Here the DOM already has
         // the new table width, so the advance can't clamp — width and scroll land
@@ -277,6 +308,29 @@ export class CoDataTable {
     handleRowDblClick(row, index) {
         this.coRowDblClick.emit({ row, index });
     }
+    /** Escritura guardada: misma referencia = sin re-render de la tabla. */
+    measureHeaderTruncation() {
+        const next = measureTruncatedHeaders(this.truncatedHeaders, this.headerLabelEls);
+        if (next !== this.truncatedHeaders)
+            this.truncatedHeaders = next;
+    }
+    /** ref del label: registra/observa al montar, limpia al desmontar (ref null). */
+    registerHeaderLabel(field, el) {
+        var _a, _b, _c;
+        const prev = this.headerLabelEls.get(field);
+        if (el) {
+            if (prev === el)
+                return;
+            if (prev)
+                (_a = this.headerResizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(prev);
+            this.headerLabelEls.set(field, el);
+            (_b = this.headerResizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
+        }
+        else if (prev) {
+            (_c = this.headerResizeObserver) === null || _c === void 0 ? void 0 : _c.unobserve(prev);
+            this.headerLabelEls.delete(field);
+        }
+    }
     handleColumnPin(field, e) {
         e.stopPropagation();
         this.coColumnPin.emit({ field });
@@ -386,7 +440,7 @@ export class CoDataTable {
                 : undefined }, h("span", { class: "co-data-table__th-content" }, h("span", { class: {
                 'co-data-table__pin-icon': true,
                 'co-data-table__pin-icon--active': !!col.sticky,
-            }, title: col.sticky ? 'Unpin column' : 'Pin column', onClick: (e) => this.handleColumnPin(col.field, e) }, h("co-icon", { name: "push-pin", size: 14, weight: col.sticky ? 'fill' : 'regular' })), col.sortable ? (h("button", { type: "button", class: "co-data-table__sort-button", "aria-label": `Sort by ${col.label}`, onClick: () => this.handleSort(col.field) }, h("span", { class: "co-data-table__th-label" }, col.label), this.renderSortIcon(col))) : (h("span", { class: "co-data-table__th-label" }, col.label)), col.filterable && (h("span", { class: {
+            }, title: col.sticky ? 'Unpin column' : 'Pin column', onClick: (e) => this.handleColumnPin(col.field, e) }, h("co-icon", { name: "push-pin", size: 14, weight: col.sticky ? 'fill' : 'regular' })), col.sortable ? (h("button", { type: "button", class: "co-data-table__sort-button", "aria-label": `Sort by ${col.label}`, onClick: () => this.handleSort(col.field) }, h("co-tooltip", { block: true, class: "co-data-table__th-tip", content: col.label, placement: "top", disabled: !this.truncatedHeaders[col.field] }, h("span", { class: "co-data-table__th-label", ref: (el) => this.registerHeaderLabel(col.field, el) }, col.label)), this.renderSortIcon(col))) : (h("co-tooltip", { block: true, class: "co-data-table__th-tip", content: col.label, placement: "top", disabled: !this.truncatedHeaders[col.field] }, h("span", { class: "co-data-table__th-label", ref: (el) => this.registerHeaderLabel(col.field, el) }, col.label))), col.filterable && (h("span", { class: {
                 'co-data-table__filter-icon': true,
                 'co-data-table__filter-icon--active': this.parsedFilteredFields.includes(col.field),
                 'co-data-table__filter-icon--indirect': !this.parsedFilteredFields.includes(col.field) && this.parsedIndirectFields.includes(col.field),
@@ -421,12 +475,12 @@ export class CoDataTable {
             : h("slot", { name: "empty-action" }))));
     }
     render() {
-        return (h("div", { key: '6ba1f3bb555252c55246c8af73b8ce08610e93b0', class: {
+        return (h("div", { key: '6f71533676a2c66ae46b1ee9940b405744cef174', 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: '69bc61a98f48ac06006d9b5ab132abf15bbeeb64', class: "co-data-table__scroll" }, h("table", { key: 'bc7627b050900ca6c8887981e47368bfb7f181ea', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), h("slot", { key: 'fc98863e680b660844ec968af6ebc645160ee32e' }), this.loading ? this.renderSkeletonBody() : null)), this.renderEmpty()));
+            } }, h("div", { key: '8176dca34858e32ba2ce008ac44cf444ea952f08', class: "co-data-table__scroll" }, h("table", { key: 'f285815728244a7161d91dbed6ca87b158db4de6', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), h("slot", { key: '97f4ed9020a7bdb8b262313a10451e9aff754a8e' }), this.loading ? this.renderSkeletonBody() : null)), this.renderEmpty()));
     }
     static get is() { return "co-data-table"; }
     static get originalStyleUrls() {
@@ -450,7 +504,7 @@ export class CoDataTable {
                     "references": {
                         "CoDataTableColumn": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-data-table/co-data-table.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release/packages/core/src/components/co-data-table/co-data-table.tsx",
                             "id": "src/components/co-data-table/co-data-table.tsx::CoDataTableColumn"
                         }
                     }
@@ -815,6 +869,7 @@ export class CoDataTable {
             "parsedFilteredFields": {},
             "parsedIndirectFields": {},
             "columnWidths": {},
+            "truncatedHeaders": {},
             "resizingColumn": {},
             "resizeStartX": {},
             "resizeStartWidth": {}

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

@@ -0,0 +1,34 @@
+/**
+ * Lógica pura del tooltip de header truncado (sin DOM real: testeable en vitest).
+ * Misma regla que co-list-item y `useEllipsisTooltip` de suite-v2: +1px de
+ * tolerancia porque el navegador redondea a enteros y 1px de más NO es corte.
+ */
+export function isEllipsisTruncated(node) {
+    return !!node && node.scrollWidth > node.clientWidth + 1;
+}
+/**
+ * Próximo mapa field → truncado. Devuelve el MISMO objeto si nada cambió (un
+ * @State de Stencil se compara por referencia: escribir siempre re-renderiza la
+ * tabla entera en cada hover de header).
+ */
+export function nextTruncatedHeaders(prev, field, truncated) {
+    if (!!prev[field] === truncated)
+        return prev;
+    return Object.assign(Object.assign({}, prev), { [field]: truncated });
+}
+/**
+ * Mide TODOS los labels registrados (field → nodo) en una pasada y devuelve el
+ * próximo mapa; la MISMA referencia si ningún field cambió. Un field que ya no
+ * está registrado (columna quitada) desaparece del mapa.
+ */
+export function measureTruncatedHeaders(prev, labels) {
+    let changed = Object.keys(prev).some((field) => !labels.has(field));
+    const next = {};
+    labels.forEach((node, field) => {
+        const truncated = isEllipsisTruncated(node);
+        next[field] = truncated;
+        if (!!prev[field] !== truncated)
+            changed = true;
+    });
+    return changed ? next : prev;
+}

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

@@ -84,17 +84,17 @@ export class CoDataTablePagination {
     }
     render() {
         const pages = this.getVisiblePages();
-        return (h("div", { key: '185e1d7a9d69e1bacd7aeb697c70e9cefae6057d', class: "co-pagination", part: "pagination" }, h("div", { key: '93dcff37dcd024519d00176b3bf52c6fc94c00ec', class: "co-pagination__section" }, h("span", { key: 'f13f0b987bd3634046b26225b867b4a3f8766eb3', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'aed4e49fe945dac3dab1b84d97119f7e5c298142', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
+        return (h("div", { key: '7bb75d863d77c1ee257994eb81557f4efd320cf3', class: "co-pagination", part: "pagination" }, h("div", { key: '593441b0dc0178fd73a333636764e29fe60efa49', class: "co-pagination__section" }, h("span", { key: '453dc30bbfbd9eb899c8bd2e7aa112e9f183a8d8', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'a806c23c5515f81d4751a69950f3ff944a41c9b9', 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: '67a1d54ce40eb1cc003d5f88ea644df994d0c590', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: '877cb7ebbf427e505f399d14e48cec4011282ab4', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: 'ef55eceda68aa0d561a3066a6a9f864171350f94', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '1813de04f69717833fe432ec5188aaa00a379128', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '20ba29bbb24dfbd03551a439ad9f7cbbbb233f8e', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '99bf24b654f5171fb2bf6a0b720057179e7931f1', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
+            }, part: "jump-input" })), h("div", { key: '9eadd04de3cab8260445a2eb133734c3c3aa7cf6', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'e3dd5337ee92d9fa715fb27b1ff689b4e6fd4559', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '8699129db80a836d122b150d357f3c6d72b21683', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: 'cfc74fc55c23887dc2d13efa379458d8ef9dd947', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '700821528fd851f6c8cbafb07ffe3ba95838d977', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: 'd0cd76772f54b3a5853d8158dd72d5972a9ef5e8', 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: '1b0a013033bffc0ef849590f4bd2b19ba78346f3', class: "co-pagination__spacer" }), h("div", { key: '02bcc300d05ff7e2710c2bbb1373ef695e563b6e', class: "co-pagination__section" }, h("span", { key: '3942e7ef9ac9d7b295c1c81685fbeec6032df795', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '6e88cd0855d6f34ce0e38d1ee89234b8cf929ad0', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '81b26b3f719a1eca429a6820bf7da6d68b79398f', 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: '1389c60c3985201af55ba9ba609e020e6fb43c86', class: "co-pagination__spacer" }), h("div", { key: '6254c6c322e1ca929c6f2654ec80887efad30615', class: "co-pagination__section" }, h("span", { key: 'aeb3619ad97e67f866cc982745efb56aafc25f87', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: 'fae17e08dd1383aaf71587b7efe504d575e198c6', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '912bfea50023f5e039364a5f4e3dc1d7bb2f05e7', 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: '83448292b1fba7470971b46e8ab14267e8a762dc', 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: '7c933d5a710cb5509b360d23fa0512df1a7a8bc4', 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"; }

package/dist/collection/components/co-date-field/co-date-field.js

@@ -162,20 +162,20 @@ export class CoDateField {
         // should still fall back to the localized default placeholder.
         const placeholder = this.placeholder || t.setDate;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
-        return (h("div", { key: '76448762ebc35a510daa099e2b10fffb304a09c1', class: {
+        return (h("div", { key: '0153dfa52a577f005fdcf86035611a0cecf56ecc', class: {
                 'co-date-field': true,
                 'co-date-field--disabled': this.disabled,
                 'co-date-field--focused': this.hasFocus,
                 'co-date-field--filled': this.hasValue,
                 'co-date-field--invalid': this.isInvalid,
                 [`co-date-field--${this.size}`]: true,
-            }, part: "wrapper" }, this.label && (h("div", { key: 'e50f105a589cc7a4098281d2466b875fc70c706c', class: "co-date-field__labels" }, h("label", { key: '3dbb87b7f1a4b229afa920352f352cefa0b5be51', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'adad4708c70542e18e241c73dc16522ffc83a52f', required: this.required })))), h("div", { key: 'ef8bbba2b0070c21cbff8feba625ada99a75e50f', class: "co-date-field__field-row" }, h("div", { key: 'a385b086440ef6842049159424664d1f4a9a5cb5', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '5ebc11e2f8a0ccaa0534682c6633228c66565396', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '8ee80f5304623f8da75f20eb93d6fe3eb927d0f1', class: "co-date-field__input-wrapper" }, h("input", { key: 'c156767ea4818750c5b00f2f965c026417ef6bd2', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: '4d0b388e20ad3f862e310c951ad7a07d620f9d76', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '477602a3cb3c1440b10d612c194f7d2ae5e03456', class: "co-date-field__labels" }, h("label", { key: '3f0b5d1243e703f70e827a48200355bf028ae4ca', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: '47d3b8f98cd50e63412d3ae6ed9f4e300210a60b', required: this.required })))), h("div", { key: '4f3b093f9c159e8476f6285402a5f8349bc55112', class: "co-date-field__field-row" }, h("div", { key: '37bff398a2377f38d34b6a1c6e15b1e0e2de783e', class: "co-date-field__field", part: "field" }, h("co-icon", { key: 'fe82197dcc67464415c3f49e565009acfe7b40b2', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '069847b02a6028e2ad0bc3c4a0d3817c899c2fbf', class: "co-date-field__input-wrapper" }, h("input", { key: '4669fc7cf06aff450707bf7975fd1141efdd8304', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: 'fd52945af291236aecf4068625f8872b09e7d22f', class: {
                 'co-date-field__clear': true,
                 'co-date-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: '8eb87bc05e53b340b97bdb5f17a3bbd08e2844fc', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'b182c4196a15168a1ad654f00e4c83823b0bf894', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: 'f2cdef4f478972926e417c03aa6c23269c87fd32', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: 'b4552bb9b1c77ffb156684464f14579530c00508', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '00e95a4ebc29f4d6b9a6dae1dc14456dcb7af21f', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: '6c0b2272a6ba4139ad7bbd5e8755ef599f2ebe03', class: {
                 'co-date-field__helper': true,
                 'co-date-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'e4a0acf05080876968835be09f4cf04b4b3ee80f', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '2329cec15faab426f09107615e3038428b26182f', class: "co-date-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'e9340bf5490100f6b1a93fa7af1950253ae442e7', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '5bd1d55005d6df5ef159bbd6e60b14c69b0314cc', class: "co-date-field__helper-text" }, helper)))));
     }
     static get is() { return "co-date-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-date-range/co-date-range.js

@@ -33,7 +33,7 @@ export class CoDateRange {
         }
     }
     render() {
-        return (h("co-date-range-picker", { key: 'c72ef0bfac5b2fb196286b77c39c84cf1d72e06d', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
+        return (h("co-date-range-picker", { key: '2d03e6fa36f8f44830beb798a1a3096b93f3478d', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
     }
     static get is() { return "co-date-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-date-range-picker/co-date-range-picker.js

@@ -1039,7 +1039,7 @@ export class CoDateRangePicker {
                     "references": {
                         "DateRangeValue": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
                             "id": "src/components/co-date-range-picker/co-date-range-picker.tsx::DateRangeValue"
                         }
                     }
@@ -1060,7 +1060,7 @@ export class CoDateRangePicker {
                     "references": {
                         "DateRangeValue": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
                             "id": "src/components/co-date-range-picker/co-date-range-picker.tsx::DateRangeValue"
                         }
                     }