@prolibu-suite/cobalt-core 0.9.6 → 0.10.1

package/dist/types/components/co-color-picker/co-color-picker.d.ts

@@ -2,12 +2,19 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { type ColorPreset } from './presets';
 /**
  * Color picker with preset swatches. Shows a trigger with the current color
- * swatch + hex value, and opens a popover panel with a grid of preset colors.
+ * swatch + hex value, and opens a popover panel with a saturation/brightness
+ * area, a hue slider, a grid of preset colors and an editable hex field.
  *
- * The hex value is read-only (no manual editing) — a copy button lets the user
- * copy the value to clipboard.
+ * The hex field previews while typing (`coInput`) and commits on gesture end
+ * — blur, Enter or panel close — like every other control in the panel. A
+ * pasted CSS color commits immediately; a copy button copies the current value.
  *
- * @event coChange - Emits the selected hex string (e.g. "#0066FF").
+ * @event coInput - Live hex while a gesture is in flight — dragging the area or
+ * the hue slider, and typing a valid hex in the field (preview only, never a
+ * commit).
+ * @event coChange - Emits the committed hex string (e.g. "#0066FF"): pointer
+ * release, arrow key, swatch click, paste, and the end of a hex-field edit
+ * (blur, Enter or panel close).
  */
 export declare class CoColorPicker {
     el: HTMLElement;
@@ -46,11 +53,180 @@ export declare class CoColorPicker {
      * or plain hex strings. When set programmatically, accepts an actual array.
      */
     presets: string | ColorPreset[] | string[];
+    /** Idioma de los textos accesibles. Misma prop que co-file-field/co-date-picker. */
+    locale: string;
     /** Emits the selected hex color on change. */
     coChange: EventEmitter<string>;
+    /**
+     * Hex en vivo mientras se arrastra el área o el matiz. El host lo usa para
+     * previsualizar si quiere.
+     *
+     * La partición con `coChange` es el contrato nuevo y existe por una razón
+     * concreta: un arrastre produce ~60 valores por segundo, y emitirlos todos
+     * como `coChange` ensucia la sesión del formulario en cada frame (un
+     * "cambios sin guardar" por píxel movido). `coChange` sigue significando
+     * exactamente lo que significaba —commit—, así que los consumidores actuales
+     * no cambian una línea.
+     */
+    coInput: EventEmitter<string>;
     private isOpen;
     private copied;
+    /**
+     * El estado AUTORITATIVO del color mientras el picker está vivo: HSV en punto
+     * flotante. El hex es una derivación de presentación, no la fuente.
+     *
+     * ⛔ No redondear: el redondeo a entero rompe el round-trip (#02A270 vuelve
+     * como #02A370) y ése es el temblor del cursor al arrastrar. El redondeo va
+     * sólo en el borde (el `value` de los range y los aria-valuetext).
+     */
+    private hsv;
+    /**
+     * El TEXTO del campo hex (sin `#`), que mientras se tipea puede no ser un
+     * color: `12` es un hex a medio escribir, no un error. El valor real sigue
+     * siendo `value`; esto es sólo lo que se ve en el campo.
+     */
+    private hexDraft;
+    /**
+     * Si el usuario está tipeando en el campo hex. Mientras lo esté, el campo NO
+     * se re-espeja desde `value`: como el commit es en vivo, tipear `F00` emite
+     * `#FF0000` y espejarlo le reescribiría el texto bajo el cursor (react-colorful
+     * hace lo mismo, pero mirándole el foco al input; acá es un flag explícito
+     * porque el foco dentro de un shadow root no sale por `document.activeElement`
+     * y porque un flag es observable desde los tests).
+     *
+     * Se apaga en el blur y al reabrir el panel: un texto a medias abandonado por
+     * una vía que no entrega blur (Escape desmonta el panel entero) no puede
+     * dejar el espejo roto para siempre.
+     */
+    private hexEditing;
+    /**
+     * Cuál de los dos ejes del área tiene el tab stop. El otro sale del tab order
+     * (`tabindex=-1`) y del árbol de accesibilidad (`aria-hidden`), así que el
+     * formulario lista UN control por campo y el lector anuncia uno solo — pero
+     * los dos siguen operables, porque la flecha del eje oculto le mueve el foco
+     * por código. Es @State porque de él dependen atributos pintados.
+     */
+    private areaAxis;
+    /**
+     * Último hex que escribimos en `value`. Es el anti-drift de la capa de estado:
+     * si el host nos devuelve el mismo hex que acabamos de emitir, NO se
+     * re-convierte a HSV — un redondeo distinto movería el cursor solo.
+     * (El otro anti-drift está en color.ts: Hsv es float, nunca entero.)
+     *
+     * Guardaba también el HSV que produjo ese hex, y nadie lo leía nunca: los
+     * cuatro puntos que sellan el caché lo hacen inmediatamente después de
+     * asignar `this.hsv`, así que la copia era `this.hsv` por otro nombre —
+     * imposible de desincronizar y, por lo mismo, imposible de aprovechar. Un
+     * campo muerto dentro de un anti-drift es una invitación a "usarlo" y
+     * reintroducir justo el drift que esto evita.
+     */
+    private emitted;
+    /**
+     * El último hex realmente COMMITEADO (`coChange`), que es cosa distinta de
+     * `emitted`: ése lo sella también cada frame de preview, así que no puede
+     * decir a qué color volver cuando un gesto termina sin commitear.
+     *
+     * Es la línea de base del deshacer: a él vuelve un texto que quedó a medias
+     * y —el agujero que esto además tapa— un arrastre abortado, que hoy dejaba
+     * `value` en el color previsualizado sin que el host se hubiera enterado
+     * nunca por `coChange`.
+     */
+    private committed;
+    /**
+     * Índice del swatch enfocado, para la navegación por flechas (roving tabindex).
+     * Es @State y no un campo suelto porque el `tabIndex` de cada opción se pinta
+     * a partir de él: sin reactividad, las flechas moverían el foco pero el DOM
+     * quedaría con el tabbable original y salir/volver con Tab caería en el
+     * swatch equivocado.
+     */
+    private focusedIndex;
+    private gridEl?;
+    private areaEl?;
+    /**
+     * Si hay un arrastre ABIERTO sobre el área (hubo `pointerdown` acá que sí
+     * pudo traducir el punto). Sin esto, cualquier `pointerup` que aterrice sobre
+     * el área commitea: un arrastre iniciado en otra parte del panel y soltado
+     * encima emitía un `coChange` que el usuario nunca pidió — y en suite-v2
+     * commit significa formulario sucio.
+     */
+    private areaDragging;
+    private satEl?;
+    private valEl?;
+    /**
+     * Un valor entrante que YA es el que acabamos de emitir se descarta.
+     *
+     * Sin esto, un host controlado (el que guarda lo emitido y lo devuelve por la
+     * prop) reinyecta el hex derivado, que se re-convierte a HSV con otro
+     * redondeo y mueve el cursor solo en pleno arrastre. La comparación es
+     * case-insensitive porque el host normaliza el string —guardar en minúsculas
+     * es lo habitual— y el mismo color escrito distinto no es un cambio.
+     */
+    syncFromValue(next: string): void;
+    /**
+     * Siembra del estado. Es OBLIGATORIA acá, no basta el initializer del campo:
+     *  - los @Watch no corren para el valor inicial de la prop;
+     *  - el initializer de un miembro DECORADO no sobrevive en el entorno de spec
+     *    (@stencil/vitest define el accessor encima del campo ya inicializado, así
+     *    que `this.hsv` llega `undefined` al primer render y el destructuring de
+     *    `renderArea` tira). Los otros @State del componente lo toleraban porque
+     *    `undefined` es falsy justo donde se usan.
+     * Sin hex válido el estado arranca en `EMPTY_HSV` —rojo puro, el vértice
+     * VIVO—, no en negro: ver su docstring, que explica por qué el vértice negro
+     * dejaría dos de los tres controles sin poder producir color. Es un seed de
+     * display; `value` sigue vacío y el trigger sigue mostrando el placeholder.
+     */
+    componentWillLoad(): void;
+    /**
+     * Movimiento en vivo: actualiza la UI y avisa, sin commitear.
+     *
+     * ⚠️ El caché se sella ANTES de tocar `this.value`: el setter de una @Prop
+     * corre sus @Watch de forma SÍNCRONA, así que con el caché todavía en el
+     * color anterior `syncFromValue` vería un color "nuevo", re-parsearía el hex
+     * y pisaría este HSV flotante con el redondeado — el temblor, en el mismo
+     * frame y sin que el host haya hecho nada. Guard: area.spec.
+     */
+    private previewHsv;
+    /**
+     * Lo mismo, pero entrando por un hex ENTERO en vez de por un eje: es lo que
+     * produce el campo de texto, donde el color no llega como "más saturación"
+     * sino como un color completo. Comparte el sellado con `previewHsv` para que
+     * el orden crítico (sellar → asignar → avisar) exista en UN solo lugar.
+     */
+    private previewHex;
+    private emitPreview;
+    /**
+     * Commit: lo que los consumidores ya escuchan hoy (soltar el arrastre,
+     * clickear un swatch).
+     *
+     * El HSV se re-deriva SÓLO si el hex viene de afuera —un swatch, un hex
+     * tipeado—, y eso se detecta preguntándole al propio estado si ese hex es el
+     * que produce. Re-derivar siempre tiene dos daños:
+     *
+     *  1. 🔴 En un color ACROMÁTICO el hex no lleva matiz: `#000000` es negro y
+     *     punto, así que `hexToHsv` devuelve h=0 (rojo) y le BORRA al usuario el
+     *     matiz que acababa de elegir. Con el campo vacío —el estado inicial de
+     *     tres consumidores de suite-v2— el área se ponía azul al arrastrar el
+     *     matiz y volvía a roja al soltar.
+     *  2. En un color cromático no lo borra pero lo REDONDEA (200 → 199.875):
+     *     el estado interno pasando por la grilla del hex es justo lo que esta
+     *     task existe para evitar.
+     */
+    private commit;
+    private get strings();
     private get parsedPresets();
+    /**
+     * Los grupos EN EL ORDEN EN QUE SE RENDERIZAN, cada uno con el índice plano
+     * de su primer swatch (`from`). La navegación por flechas se indexa contra
+     * este aplanado, no contra `parsedPresets`: si el orden del render y el del
+     * array divergieran, una flecha movería el foco a otro swatch.
+     *
+     * La frontera neutros/marca sale de `NEUTRAL_PRESET_KEYS` — la única fuente
+     * de la paleta. Nada de `slice(0, 5)`: ese `5` ya estaba duplicado en tres
+     * lugares y es lo que la task anterior vino a eliminar.
+     */
+    private get presetGroups();
+    /** Los swatches aplanados en orden de render: la lista que recorren las flechas. */
+    private get flatPresets();
     private handlePopoverOpen;
     private handlePopoverClose;
     private handleTriggerKeyDown;
@@ -59,7 +235,187 @@ export declare class CoColorPicker {
      *  otro elemento — en ese caso no robarlo. */
     private restoreTriggerFocus;
     private handleSwatchClick;
+    /**
+     * Coordenadas del puntero → saturación/brillo.
+     *
+     * ⚠️ Un `rect` degenerado NO se convierte en un color: con `rect.width === 0`
+     * (área todavía sin layout, o con `display:none`) la división da **Infinity**
+     * —no NaN: NaN sólo sale si el numerador es exactamente 0— y el clamp lo
+     * lleva a 1, así que un pointerdown escribiría `s=100, v=0`, o sea NEGRO, y
+     * lo emitiría como si el usuario lo hubiera elegido. Guard: area.spec.
+     */
+    private pointerToHsv;
+    private handleAreaPointerDown;
+    private handleAreaPointerMove;
+    /**
+     * Un arrastre ABORTADO cierra el gesto sin commitear. Sin esto, el flag queda
+     * en `true` para siempre en esa instancia y el próximo `pointerup` suelto
+     * commitea — el mismo bug del gesto sin `pointerdown`, por otra puerta.
+     */
+    private handleAreaPointerCancel;
+    private handleAreaPointerUp;
+    /**
+     * Qué eje mueve cada flecha DENTRO del área, y en qué sentido. Un range
+     * horizontal nativo también responde a ↑/↓ moviendo SU eje, así que sin esta
+     * tabla (y su `preventDefault`) la flecha de arriba subía la saturación.
+     */
+    private static readonly AREA_KEYS;
+    /**
+     * Teclado del área: la flecha decide el eje, y ese eje pasa a ser el
+     * enfocado. El foco programático entra igual en el input con `tabindex=-1`
+     * —por eso el par tabindex-1 + aria-hidden no deja ningún eje inalcanzable—.
+     * SLDS: flecha = 1, Shift+flecha = 10.
+     */
+    private handleAreaKeyDown;
+    /** Mueve el tab stop del área (y el foco) al eje pedido. */
+    private focusAxis;
+    /**
+     * El matiz es un slider 1D suelto: las cuatro flechas son SU eje, así que el
+     * range nativo ya resuelve el paso de 1 y acá sólo se intercepta Shift.
+     */
+    private handleHueKeyDown;
+    private optionEls;
+    /**
+     * Vecino de arriba/abajo EN PANTALLA.
+     *
+     * La grilla no es una matriz única: son N grillas de 6 columnas apiladas, una
+     * por grupo, y la de neutros tiene 5 celdas. Por eso un stride plano de ±6
+     * sobre el índice global se corre una columna al cruzar la frontera (Black,
+     * columna 0, caía en Olive, columna 1). Fila y columna se calculan DENTRO del
+     * grupo; al cruzar al grupo vecino se conserva la columna, que es lo que
+     * "fila anterior / siguiente" significa visualmente.
+     *
+     * En el borde de la grilla el foco NO se mueve: colapsarlo al extremo mandaba
+     * cualquier neutro de la primera fila a Black.
+     *
+     * Asimetría DELIBERADA con las flechas horizontales, que sí wrappean (0↔16):
+     * el wrap cíclico en un eje y el tope duro en el otro es lo que hace APG para
+     * grillas, y es lo que deja claro dónde termina la paleta.
+     */
+    private verticalNeighbor;
+    private handleGridKeyDown;
+    /**
+     * El área saturación×brillo.
+     *
+     * Es un `role="group"` con UN `<input type="range">` invisible por eje —el
+     * modelo de React Aria—, en vez de un `role="slider"` 2D a mano: así el eje
+     * lo maneja un control nativo (teclado, repetición de tecla, anuncio del
+     * lector de pantalla) y sólo el arrastre queda de nuestro lado.
+     *
+     * El matiz viaja al CSS por custom property: el gradiente es CSS puro, sin
+     * canvas y sin un hex literal en la hoja de estilos.
+     */
+    private renderArea;
+    private renderHue;
+    private renderSwatches;
     private get statusIcon();
+    /**
+     * Lo que se puede TIPEAR en el campo: dígitos hex, hasta 6. El 7º caracter y
+     * el `#` no entran, y con 8 dígitos (hex con alpha) se queda con los 6 de
+     * color — este picker no maneja alpha.
+     */
+    private escapeHex;
+    /** `F00` → `#FF0000`: lo emitido es SIEMPRE de 6 dígitos. */
+    private expandHex;
+    /**
+     * Siembra el campo desde el valor REAL y cierra cualquier edición abierta.
+     *
+     * Con `value` vacío queda vacío: el estado interno arranca en EMPTY_HSV (rojo
+     * puro) para que el área tenga de dónde partir, pero eso es un seed de
+     * DISPLAY del área — espejarlo pondría `FF0000` escrito en un campo que el
+     * usuario nunca tocó, anunciando un color que nadie eligió.
+     */
+    private resetHexDraft;
+    /**
+     * Espeja el valor real en el campo, salvo mientras el usuario lo está
+     * tipeando.
+     *
+     * Sólo espeja lo que YA es un color (o el vacío, que limpia). `escapeHex`
+     * sobre cualquier otra cosa fabrica un hex verosímil: un host que pase
+     * `rebeccapurple` o `var(--co-color-primary-verde)` vería el campo mostrando
+     * `EBECCA` / `ACCAED`. Es exactamente la falla que el pegado cancela unas
+     * líneas más abajo, y entraba igual por la puerta de la prop. Los frames de
+     * arrastre siempre escriben un hex de 6, así que no se pierde nada legítimo.
+     */
+    private syncHexDraft;
+    /**
+     * Tipear PREVISUALIZA (`coInput`), no commitea.
+     *
+     * El campo es el único control del panel donde el gesto se estira en el
+     * tiempo, y tratarlo como commit por caracter tiene un costo que no se ve
+     * hasta que se mira de cerca: corregir un typo de `0263EB` a `026` emitiría
+     * `coChange('#002266')` — el usuario está BORRANDO y el componente commitea
+     * un color nuevo. Con el preview, el campo queda igual que sus tres hermanos
+     * (área, matiz, swatches): en vivo mientras dura el gesto, commit al
+     * soltarlo. El `#002266` que pinta al pasar por `026` es un frame intermedio
+     * de preview, ni más ni menos que cualquier frame de arrastre.
+     */
+    private handleHexInput;
+    /**
+     * Fin del gesto del campo: blur, Enter, o el cierre del panel.
+     *
+     * Commitea SIEMPRE que haya un color tipeado, sin comparar contra `value`
+     * —que a esta altura ya vale el color previsualizado, así que "commitear si
+     * cambió" no dispararía nunca—. Es el precedente del `pointerup` del área: el
+     * fin de gesto commitea, y si el usuario retipeó el mismo color, el `coChange`
+     * redundante es el precio.
+     *
+     * ⚠️ Consecuencia documentada de esa regla: tipear un hex válido y después
+     * clickear un swatch emite DOS `coChange` — el blur commitea el color
+     * tipeado, y el swatch el suyo. Es el precio explícito de que el fin de gesto
+     * no adivine intenciones, no un bug.
+     *
+     * Y si no hay nada que commitear, se DESHACE el preview vivo. Eso cubre dos
+     * casos con el mismo movimiento: el texto que quedó a medias (`12`), y el
+     * arrastre abortado —que emitía `coInput`, escribía `value` y no commiteaba
+     * nunca, dejando al picker mostrando un color que el host jamás recibió—.
+     */
+    private finishHexEdit;
+    /** Vuelve al último color commiteado y retira el preview que quedó colgado. */
+    private revertToCommitted;
+    private handleHexBlur;
+    /** Enter cierra el gesto sin salir del campo (y no submitea ningún form). */
+    private handleHexKeyDown;
+    /**
+     * Sin interceptar el pegado, el escape convierte `rgb(2, 99, 235)` en
+     * `299235` — basura silenciosa que ADEMÁS commitea sola, porque el `input` que
+     * sigue al pegado nativo ve 6 dígitos válidos.
+     *
+     * `parseCssColor` no cubre nombres CSS (ver color.ts): `rebeccapurple` escapa
+     * a `EBECCA`, un hex perfectamente válido que nadie eligió. Por eso lo que no
+     * es un color se CANCELA en vez de dejarse caer al escape; lo único que pasa
+     * de largo es un hex o el principio de uno, para poder pegar `02` y seguir
+     * tipeando.
+     */
+    private handleHexPaste;
+    /**
+     * Chrome/Edge 95+ solamente (MDN, 2026-09-02): Firefox, Safari y Chrome
+     * Android no la tienen. Se resuelve en el render, no en una prop: si no está,
+     * el botón no existe. Un control deshabilitado sin explicar es peor que su
+     * ausencia — y una prop obligaría a cada host a repetir la detección.
+     *
+     * El `typeof window` es por el build de hydrate, donde no hay `window` y el
+     * `in` tiraría.
+     */
+    private get hasEyeDropper();
+    /**
+     * El cuentagotas entrega un color COMPLETO en un acto atómico, igual que un
+     * swatch o un pegado: entra por `commit` —no se duplica ni la asignación ni
+     * el emit— y se normaliza con `parseCssColor`, porque la API devuelve el hex
+     * en minúscula (`#ff0000`) y el resto del picker trabaja en mayúscula.
+     *
+     * ⚠️ `finishHexEdit` va PRIMERO y SÍNCRONO, antes del `await`: clickear otro
+     * control del panel es el fin del gesto del campo hex, y ese gesto puede
+     * durar lo que el usuario tarde en recorrer la pantalla. Sin esto, un texto a
+     * medias (`12`) se queda escrito y `hexEditing` colgado durante todo el
+     * cuentagotas, y si el usuario CANCELA nadie lo deshace: el preview vivo
+     * sobrevive a un gesto que no commiteó nada. Es el mismo cierre que hace el
+     * pegado, por la misma razón. Correrlo dos veces es inocuo (el blur real del
+     * navegador lo dispara también): la segunda pasada ve `hexEditing` en false y
+     * `value === committed`, y sale sin emitir.
+     */
+    private handleEyeDropper;
+    private renderHexRow;
     private handleCopy;
     render(): any;
 }

package/dist/types/components/co-color-picker/presets.d.ts

@@ -1,10 +1,113 @@
+/**
+ * Lo que acepta el HOST por la prop `presets`.
+ *
+ * `key` es OPCIONAL a propósito: este tipo es **superficie pública** — se
+ * re-exporta desde `components.d.ts` y tipa la prop `presets` del componente.
+ * Volverla requerida rompe la compilación de todo consumidor que hoy pasa
+ * `[{ name, value }]`, que es un breaking change de tipo fuera del spec.
+ */
 export interface ColorPreset {
+    /** Clave estable para traducir el nombre en el host (form-vue traduce por acá). */
+    key?: string;
+    name: string;
+    value: string;
+}
+/**
+ * Lo que circula puertas adentro, ya normalizado: acá la `key` SÍ está
+ * garantizada. `resolvePreset` la rellena cuando el host no la trae.
+ *
+ * Tipo INTERNO: no aparece en `components.d.ts`, así que agregarle campos no
+ * es un breaking change para ningún host (el público es `ColorPreset`).
+ */
+export interface ResolvedColorPreset {
+    key: string;
     name: string;
     value: string;
+    /**
+     * `true` cuando la `key` NO la declaró el host y se la inventamos nosotros.
+     *
+     * Es la diferencia entre "este host usa nuestra paleta" y "este host escribió
+     * colores sueltos". Importa porque DOCE de las diecisiete keys son nombres de
+     * color CSS (`black`, `green`, `red`…): sin la marca, un host que pasa
+     * `['black','green','red']` —la forma más fácil de escribir presets a mano—
+     * quedaría con dos grupos rotulados "Neutros"/"Colores de marca" para una
+     * paleta que no es la nuestra, o sea una frontera inventada para el lector de
+     * pantalla. Ausente (no `false`) cuando la key vino declarada, así que los
+     * literales de `DEFAULT_PRESETS` no tienen que repetirla.
+     */
+    synthesizedKey?: true;
+}
+/**
+ * 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 declare const resolvePreset: (p: ColorPreset | string) => ResolvedColorPreset;
+/**
+ * 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 declare const DEFAULT_PRESETS: ResolvedColorPreset[];
+/**
+ * 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 declare const NEUTRAL_PRESET_KEYS: readonly ["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 declare const BRAND_PRESET_KEYS: string[];
+/** Los dos lados de la paleta, en el orden en que se renderizan. */
+export interface PaletteSplit {
+    neutrals: ResolvedColorPreset[];
+    brand: ResolvedColorPreset[];
 }
 /**
- * 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.
+ * 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 declare const DEFAULT_PRESETS: ColorPreset[];
+export declare function splitPaletteGroups(presets: ResolvedColorPreset[]): PaletteSplit | null;

package/dist/types/components/co-data-table/co-data-table.d.ts

@@ -107,6 +107,15 @@ export declare class CoDataTable {
     parsedFilteredFields: string[];
     parsedIndirectFields: string[];
     columnWidths: Map<string, number>;
+    /** field → ¿el label del header está cortado por el ellipsis? Alimenta el
+     *  `disabled` del co-tooltip de cada header (tooltip SOLO cuando trunca). */
+    truncatedHeaders: Record<string, boolean>;
+    /** Nodos `.co-data-table__th-label` por field (DOM: Map no reactivo). */
+    private headerLabelEls;
+    private headerResizeObserver?;
+    /** Columnas cambiadas → re-medir tras el render (un cambio de texto con el
+     *  mismo ancho no dispara el ResizeObserver). */
+    private headerMeasurePending;
     resizingColumn: string | null;
     resizeStartX: number;
     resizeStartWidth: number;
@@ -121,6 +130,8 @@ export declare class CoDataTable {
     parseFilteredFields(): void;
     parseIndirectFields(): void;
     componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     componentDidRender(): void;
     private handleSort;
     private isAllSelected;
@@ -130,6 +141,10 @@ export declare class CoDataTable {
     private handleResizeStart;
     private handleRowClick;
     private handleRowDblClick;
+    /** Escritura guardada: misma referencia = sin re-render de la tabla. */
+    private measureHeaderTruncation;
+    /** ref del label: registra/observa al montar, limpia al desmontar (ref null). */
+    private registerHeaderLabel;
     private handleColumnPin;
     private handleColumnFilter;
     private formatCellValue;

package/dist/types/components/co-data-table/headerTruncationLogic.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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 declare function isEllipsisTruncated(node: {
+    scrollWidth: number;
+    clientWidth: number;
+} | null | undefined): boolean;
+/**
+ * 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 declare function nextTruncatedHeaders(prev: Record<string, boolean>, field: string, truncated: boolean): Record<string, boolean>;
+/**
+ * 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 declare function measureTruncatedHeaders(prev: Record<string, boolean>, labels: Map<string, {
+    scrollWidth: number;
+    clientWidth: number;
+}>): Record<string, boolean>;