@prolibu-suite/cobalt-core 0.9.6 → 0.10.0

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

@@ -1,14 +1,64 @@
 import { h } from "@stencil/core";
 import { RequiredMark } from "../../utils/requiredMark";
-import { DEFAULT_PRESETS } from "./presets";
+import { hexToHsv, hsvToHex, isLightColor, isValidHex, parseCssColor } from "../../utils/color";
+import { getColorPickerStrings } from "../../utils/colorPickerI18n";
+// `{n}` de los aria-valuetext. Se reutiliza el de fileI18n —el mismo que ya
+// resuelve las plantillas de co-file-field—, no se duplica acá.
+import { fillTemplate } from "../../utils/fileI18n";
+import { DEFAULT_PRESETS, resolvePreset, splitPaletteGroups, } from "./presets";
+/** Columnas de la grilla. 6×32 + 5×8 de gap + 24 de padding = 256px. */
+const GRID_COLS = 6;
+/** Paso grueso de Shift+flecha (SLDS). La flecha sola usa el paso nativo del range: 1. */
+const SHIFT_STEP = 10;
+/**
+ * Un pegado que YA es hex, o el principio de uno (`02`, `#0263`). Es lo único
+ * que se deja caer al escape cuando `parseCssColor` no reconoce el texto: así
+ * se puede pegar un fragmento y seguir tipeando, sin que un pegado que no es un
+ * color (un nombre CSS, una frase) se convierta en un hex inventado.
+ */
+const HEX_FRAGMENT = /^#?[0-9a-f]*$/i;
+/**
+ * De dónde parte el área cuando el campo está VACÍO: rojo puro, con el thumb en
+ * la esquina viva.
+ *
+ * No es cosmético. El vértice negro (`{0,0,0}`) deja DOS de los tres controles
+ * sin poder producir color: con `v=0`, mover el matiz o la saturación da
+ * `#000000` haga lo que haga el usuario. Y en suite-v2 `coChange` significa
+ * commit, así que un gesto exploratorio sobre un campo vacío lo dejaba en negro
+ * Y con "cambios sin guardar", sin que nadie haya elegido nada.
+ *
+ * El seed es de DISPLAY: no toca `value` ni emite. Hasta que el usuario actúa,
+ * el trigger sigue mostrando su placeholder.
+ *
+ * Congelado: es un objeto de MÓDULO, compartido por el initializer, el caché y
+ * el fallback de `componentWillLoad`. Hoy nadie lo muta —`previewHsv` hace
+ * spread y `commit` reasigna—, pero un `this.hsv.h = …` futuro envenenaría a
+ * todas las instancias de la página a la vez, y ése es un bug que no se
+ * encuentra mirando el componente que lo sufre.
+ *
+ * El tipo es `Readonly<Hsv>` y no `Hsv`: anotarlo como `Hsv` BORRA el
+ * `Readonly` que devuelve `Object.freeze`, y la protección queda sólo en
+ * runtime — TS no marcaría `EMPTY_HSV.h = 1` en compilación. Sigue siendo
+ * asignable a `this.hsv: Hsv`.
+ */
+const EMPTY_HSV = Object.freeze({ h: 0, s: 100, v: 100 });
+/** Los swatches de todos los grupos, en orden de render. */
+const flattenGroups = (groups) => groups.reduce((acc, g) => acc.concat(g.items), []);
 /**
  * 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 class CoColorPicker {
     constructor() {
@@ -31,13 +81,108 @@ export class CoColorPicker {
          * or plain hex strings. When set programmatically, accepts an actual array.
          */
         this.presets = '';
+        /** Idioma de los textos accesibles. Misma prop que co-file-field/co-date-picker. */
+        this.locale = 'en';
         this.isOpen = false;
         this.copied = false;
+        /**
+         * 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).
+         */
+        this.hsv = EMPTY_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.
+         */
+        this.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.
+         */
+        this.hexEditing = false;
+        /**
+         * 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.
+         */
+        this.areaAxis = 's';
+        /**
+         * Ú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.
+         */
+        this.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`.
+         */
+        this.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.
+         */
+        this.focusedIndex = 0;
+        /**
+         * 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.
+         */
+        this.areaDragging = false;
         this.handlePopoverOpen = () => {
             this.isOpen = true;
+            // Toda reapertura arranca sin gesto abierto: si el anterior se abortó por
+            // una vía que no entrega ningún evento al área (Escape con el botón
+            // apretado desmonta el panel), este es el punto por el que sí se pasa.
+            this.areaDragging = false;
+            // Y sin edición de texto abierta: el panel se desmonta al cerrar, así que un
+            // texto a medias que se fue sin blur (Escape) no puede dejar el campo
+            // congelado en un draft ya divorciado del color.
+            this.resetHexDraft();
+            // Al abrir, el foco arranca en el color ya elegido (0 si no hay ninguno).
+            const i = this.flatPresets.findIndex((p) => p.value.toUpperCase() === (this.value || '').toUpperCase());
+            this.focusedIndex = i >= 0 ? i : 0;
         };
         this.handlePopoverClose = () => {
             this.isOpen = false;
+            // El cierre del panel TAMBIÉN cierra el gesto del campo, y no es un detalle:
+            // el navegador NO emite `blur` al remover un elemento enfocado, así que
+            // tipear un color y salir con Escape (o clickeando afuera) se perdería en
+            // silencio. Cubre además el arrastre abortado, que deja un preview colgado.
+            this.finishHexEdit();
             this.restoreTriggerFocus();
         };
         this.handleTriggerKeyDown = (e) => {
@@ -52,22 +197,492 @@ export class CoColorPicker {
                 this.isOpen = true;
             }
         };
+        /**
+         * 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.
+         */
+        this.pointerToHsv = (e) => {
+            var _a;
+            const rect = (_a = this.areaEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (!rect || !(rect.width > 0) || !(rect.height > 0))
+                return false;
+            const x = Math.min(Math.max((e.clientX - rect.left) / rect.width, 0), 1);
+            const y = Math.min(Math.max((e.clientY - rect.top) / rect.height, 0), 1);
+            this.previewHsv({ s: x * 100, v: (1 - y) * 100 });
+            return true;
+        };
+        this.handleAreaPointerDown = (e) => {
+            var _a, _b;
+            // Sólo el botón PRIMARIO pinta: con el secundario, el click derecho abría
+            // el menú contextual y de paso cambiaba y commiteaba el color.
+            if (this.disabled || e.button !== 0)
+                return;
+            // Captura sobre el ÁREA (el thumb es pointer-events:none, así que el target
+            // ya es ella) para no perder el arrastre al salirse del panel. Llamada
+            // opcional: no todo entorno la implementa (jsdom no la tiene) y el arrastre
+            // dentro del área funciona igual sin captura.
+            (_b = (_a = this.areaEl) === null || _a === void 0 ? void 0 : _a.setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
+            // El gesto queda abierto SÓLO si el área pudo traducir el punto: con un
+            // rect degenerado no hay nada que arrastrar, y por lo tanto nada que
+            // commitear al soltar.
+            this.areaDragging = this.pointerToHsv(e);
+        };
+        this.handleAreaPointerMove = (e) => {
+            // Sólo dentro de un arrastre abierto en el área y con el botón principal
+            // apretado: sin lo primero, un arrastre que empezó en otro lado repinta al
+            // pasar por encima; sin lo segundo, lo hace el hover a secas.
+            if (this.disabled || !this.areaDragging || e.buttons !== 1)
+                return;
+            this.pointerToHsv(e);
+        };
+        /**
+         * 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.
+         */
+        this.handleAreaPointerCancel = () => {
+            this.areaDragging = false;
+        };
+        this.handleAreaPointerUp = (e) => {
+            // Sólo cierra un gesto ABIERTO en esta área. Un `pointerup` suelto no
+            // commitea nada.
+            if (!this.areaDragging || e.button !== 0)
+                return;
+            this.areaDragging = false;
+            if (this.disabled)
+                return;
+            this.commit(hsvToHex(this.hsv));
+        };
+        /**
+         * 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.
+         */
+        this.handleAreaKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            const move = CoColorPicker.AREA_KEYS[e.key];
+            // Home/End/PageUp/PageDown quedan DELEGADOS al range nativo, sobre su propio
+            // eje. ⚠️ Es el único resquicio de redondeo que queda en el camino del
+            // estado: el nativo opera sobre el `value` del DOM, que ya viene redondeado
+            // por el borde de presentación, así que PageUp/PageDown pierden la fracción
+            // al re-entrar por `onInput`. Es preexistente y deliberado —el salto de esas
+            // teclas es de 10 o al extremo, donde la fracción no significa nada—, pero
+            // queda anotado para que nadie lo lea como un descuido.
+            if (!move)
+                return;
+            e.preventDefault();
+            const step = e.shiftKey ? SHIFT_STEP : 1;
+            const next = Math.min(100, Math.max(0, this.hsv[move.axis] + move.dir * step));
+            this.focusAxis(move.axis);
+            this.previewHsv({ [move.axis]: next });
+            // Un teclazo es un gesto completo: preview + commit, no un arrastre abierto.
+            // Son DOS eventos por tecla (coInput y coChange), no uno.
+            this.commit(hsvToHex(this.hsv));
+        };
+        /**
+         * 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.
+         */
+        this.handleHueKeyDown = (e) => {
+            if (this.disabled || !e.shiftKey)
+                return;
+            const dir = e.key === 'ArrowRight' || e.key === 'ArrowUp' ? 1
+                : e.key === 'ArrowLeft' || e.key === 'ArrowDown' ? -1
+                    : 0;
+            if (!dir)
+                return;
+            // El range nativo aplicaría ADEMÁS su paso de 1 sobre el mismo evento.
+            e.preventDefault();
+            const next = Math.min(360, Math.max(0, this.hsv.h + dir * SHIFT_STEP));
+            this.previewHsv({ h: next });
+            this.commit(hsvToHex(this.hsv));
+        };
+        this.handleGridKeyDown = (e) => {
+            var _a;
+            // `presetGroups` re-parsea el JSON de `presets` y remapea en CADA lectura, y
+            // todos los consumidores reales pasan presets custom por prop: se resuelve
+            // UNA vez por tecla y se pasa por parámetro, no dos veces por getter.
+            const groups = this.presetGroups;
+            const presets = flattenGroups(groups);
+            const n = presets.length;
+            if (!n)
+                return;
+            // Un `focusedIndex` fuera de rango (los presets cambiaron con el panel
+            // abierto) se clampea en vez de indexar `undefined`.
+            const current = Math.min(Math.max(this.focusedIndex, 0), n - 1);
+            let next = current;
+            switch (e.key) {
+                // Wrap cíclico: regla de SLDS. APG lo trata como opcional.
+                case 'ArrowRight':
+                    next = (current + 1) % n;
+                    break;
+                case 'ArrowLeft':
+                    next = (current - 1 + n) % n;
+                    break;
+                case 'ArrowDown':
+                    next = this.verticalNeighbor(groups, current, 1);
+                    break;
+                case 'ArrowUp':
+                    next = this.verticalNeighbor(groups, current, -1);
+                    break;
+                case 'Home':
+                    next = 0;
+                    break;
+                case 'End':
+                    next = n - 1;
+                    break;
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    this.handleSwatchClick(presets[current].value);
+                    return;
+                default: return;
+            }
+            e.preventDefault();
+            this.focusedIndex = next;
+            // Query, NO `children`: los swatches cuelgan de dos `role=group`, así que
+            // el índice plano no coincide con los hijos directos del listbox.
+            (_a = this.optionEls()[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        /**
+         * 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.
+         */
+        this.handleHexInput = (e) => {
+            var _a, _b;
+            if (this.disabled)
+                return;
+            const el = e.target;
+            const raw = this.escapeHex(el.value);
+            // El escape se fuerza en el DOM: si el texto escapado no cambió (tipear `zz`
+            // sobre `12` sigue dando `12`), el vdom no ve diferencia y no repinta — y el
+            // usuario se queda mirando `12zz` en el campo.
+            if (el.value !== raw) {
+                // Reasignar `value` manda el caret al final: con `1234` y el caret en 2,
+                // tipear `z` lo mandaba al 4 y el siguiente caracter salía en otro lugar.
+                // La posición se recalcula contando cuántos caracteres SOBREVIVEN al
+                // escape por delante del caret.
+                const caretIn = (_a = el.selectionStart) !== null && _a !== void 0 ? _a : el.value.length;
+                const caretOut = Math.min(this.escapeHex(el.value.slice(0, caretIn)).length, raw.length);
+                el.value = raw;
+                (_b = el.setSelectionRange) === null || _b === void 0 ? void 0 : _b.call(el, caretOut, caretOut);
+            }
+            this.hexEditing = true;
+            this.hexDraft = raw;
+            if (isValidHex(raw))
+                this.previewHex(this.expandHex(raw));
+        };
+        this.handleHexBlur = () => {
+            this.finishHexEdit();
+        };
+        /** Enter cierra el gesto sin salir del campo (y no submitea ningún form). */
+        this.handleHexKeyDown = (e) => {
+            if (e.key !== 'Enter')
+                return;
+            e.preventDefault();
+            this.finishHexEdit();
+        };
+        /**
+         * 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.
+         */
+        this.handleHexPaste = (e) => {
+            var _a, _b;
+            if (this.disabled)
+                return;
+            const text = ((_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '').trim();
+            const parsed = parseCssColor(text);
+            if (parsed) {
+                e.preventDefault();
+                // Un pegado entrega un color COMPLETO en un acto atómico, como clickear
+                // un swatch: commitea al instante en vez de esperar al fin de gesto, y
+                // por lo mismo CIERRA cualquier edición de texto que estuviera abierta
+                // (si no, el blur posterior volvería a commitear lo mismo).
+                this.hexEditing = false;
+                this.hexDraft = this.escapeHex(parsed);
+                this.commit(parsed);
+                return;
+            }
+            if (!HEX_FRAGMENT.test(text))
+                e.preventDefault();
+        };
+        /**
+         * 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.
+         */
+        this.handleEyeDropper = async () => {
+            this.finishHexEdit();
+            // El guard va DESPUÉS del cierre del gesto, y eso es lo único que tiene de
+            // interesante. `hasEyeDropper` no es reactivo: la presencia del botón se
+            // decide en el render y nunca se re-evalúa, así que existe el camino "API
+            // presente al renderizar, ausente al clickear" — el botón sigue en el DOM.
+            // Con el guard ADELANTE, ese click no hacía nada Y dejaba la edición del
+            // hex abierta: un control visible que se comporta distinto a todos sus
+            // hermanos del panel. Acá abajo el camino raro cierra el gesto igual que
+            // los demás y sólo se saltea el cuentagotas.
+            //
+            // Puesto así el guard ya no cambia nada observable —sin él, `new Ctor()`
+            // tira un TypeError que el `catch` atrapa y el estado queda idéntico—, y
+            // por eso ningún test lo distingue. Se queda por ser explícito sobre una
+            // precondición, no por un caso que lo necesite.
+            if (!this.hasEyeDropper)
+                return;
+            try {
+                const Ctor = window.EyeDropper;
+                const { sRGBHex } = await new Ctor().open();
+                const hex = parseCssColor(sRGBHex);
+                // Lo que no es un color no se commitea: el picker no inventa negro.
+                if (hex)
+                    this.commit(hex);
+            }
+            catch (_a) {
+                /* El usuario canceló con Escape: no es un error que valga reportar. */
+            }
+        };
+    }
+    /**
+     * 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) {
+        // El campo hex espeja el valor por esta vía ÚNICA, ANTES del guard: todo
+        // camino que cambia el color pasa por acá (el arrastre y el commit escriben
+        // `value`, y el host también). Si el espejo viviera después del guard, el
+        // campo quedaría congelado en el color anterior justo en el caso más común
+        // —arrastrar el área—, porque ese camino sella el caché antes de asignar.
+        this.syncHexDraft(next);
+        if ((next || '').toUpperCase() === (this.emitted || '').toUpperCase())
+            return;
+        // Un valor que llega de afuera ES la verdad del host, PARSEE O NO: pasa a
+        // ser la línea de base a la que vuelve un gesto que termina sin commitear.
+        //
+        // ⛔ Va ANTES del guard de parseo, y eso es lo único que separa esto de un
+        // bug de pérdida de datos: si el host BORRA el color (`value = ''`) o pone
+        // algo que no es un hex (`var(--co-brand)`), con la línea abajo `committed`
+        // se quedaba en el color VIEJO — y como el cierre del panel deshace todo
+        // preview colgado, abrir y cerrar sin tocar nada le devolvía al host el
+        // color que acababa de borrar, por `value` y por `coInput`.
+        //
+        // Y va DESPUÉS del guard de `emitted`, que es igual de deliberado: un host
+        // controlado que espeja `coInput` de vuelta a la prop nos devuelve nuestro
+        // propio preview, y tomar eso por un commit del host haría irreversible
+        // justo lo que este mecanismo existe para revertir.
+        this.committed = next;
+        // `emitted` se sella acá arriba por la misma razón, y también está medido:
+        // gateado por el parseo, un host que PASA por un valor no-hex y vuelve a un
+        // color que ya habíamos tenido lo dejaba stale apuntando a ese color, el
+        // guard de arriba tomaba el regreso por eco propio, `committed` no se
+        // actualizaba y el cierre del panel reemplazaba el color del host por el
+        // valor intermedio. Sellar lo que el host escribió —parsee o no— es además
+        // lo que el guard significa: "esto ya lo tenemos, no hay nada que
+        // re-derivar", que de un valor no parseable es trivialmente cierto.
+        this.emitted = next;
+        const parsed = hexToHsv(next || '');
+        // Un hex inválido no se convierte en un color: se ignora y el estado
+        // anterior sobrevive (el picker no tiene por qué inventar negro).
+        if (!parsed)
+            return;
+        this.hsv = parsed;
+    }
+    /**
+     * 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 negro, que es lo que pinta el área
+     * mientras no hay color elegido.
+     */
+    componentWillLoad() {
+        const parsed = hexToHsv(this.value || '');
+        this.hsv = parsed !== null && parsed !== void 0 ? parsed : EMPTY_HSV;
+        // Mismo motivo que `hsv`: el tab stop del área arranca en la saturación.
+        this.areaAxis = 's';
+        // El campo hex arranca del VALOR, no del seed del área.
+        //
+        // Es una siembra DEFENSIVA, y conviene decirlo con precisión porque el
+        // comentario anterior mentía: quitarla no pinta `FF0000` en ningún frame
+        // —`hexDraft` se queda en su initializer `''`—, y midiendo el shadow DOM
+        // cada 5ms desde el keydown del trigger, el input ya nace con el valor
+        // correcto porque `coOpen` (y con él `resetHexDraft`) llega ANTES de que el
+        // panel sea alcanzable. O sea: la re-siembra del popover le gana la carrera
+        // en todo entorno medido, y por eso ningún test la distingue. Se queda
+        // igual —sembrar en el load es correcto por construcción y no cuesta nada—,
+        // pero como cobertura no vale nada.
+        this.resetHexDraft();
+        // ⛔ NINGUNO de los dos sellos va detrás de `if (parsed)`, y no es simetría:
+        // cada uno abre su propia puerta al mismo bug de pérdida de datos, porque en
+        // Stencil el @Watch NO corre para el valor inicial y este es el único lugar
+        // donde se pueden sembrar.
+        //
+        //  · `committed` es la línea de base del deshacer. Gateado, un `value`
+        //    inicial que no parsea (`var(--co-brand)`, un nombre CSS) lo dejaba en
+        //    `''`, y como el cierre del panel deshace todo preview colgado, abrir y
+        //    cerrar SIN TOCAR NADA le borraba el valor al host y se lo anunciaba por
+        //    `coInput`. Es el mismo razonamiento que el del @Watch, con el síntoma
+        //    invertido: allá resucitaba el color viejo, acá borra el nuevo, porque
+        //    el initializer es `''` en vez de un hex.
+        //
+        //  · `emitted` es el caché anti-drift, no la línea de base — pero gatearlo
+        //    abre la MISMA pérdida por composición, y está medido: con `committed`
+        //    ya arreglado y `emitted` en `''`, un host que BORRA el color escribe
+        //    justo el `''` que el guard toma por "esto ya lo emitimos nosotros",
+        //    corta antes de actualizar `committed`, y el cierre del panel le
+        //    devuelve el token que acababa de borrar. Sembrarlo con el valor inicial
+        //    además es lo correcto por definición: el guard existe para saltear la
+        //    re-derivación de un valor que ya tenemos, y al montar `value` ES lo que
+        //    tenemos (`componentWillLoad` acaba de derivarlo).
+        this.committed = this.value;
+        this.emitted = this.value;
+    }
+    /**
+     * 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.
+     */
+    previewHsv(next) {
+        this.hsv = Object.assign(Object.assign({}, this.hsv), next);
+        this.emitPreview(hsvToHex(this.hsv));
+    }
+    /**
+     * 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.
+     */
+    previewHex(hex) {
+        const parsed = hexToHsv(hex);
+        if (parsed)
+            this.hsv = parsed;
+        this.emitPreview(hex);
+    }
+    emitPreview(hex) {
+        this.emitted = hex;
+        this.value = hex;
+        this.coInput.emit(hex);
+    }
+    /**
+     * 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.
+     */
+    commit(hex) {
+        if (hsvToHex(this.hsv) !== hex) {
+            const parsed = hexToHsv(hex);
+            if (parsed)
+                this.hsv = parsed;
+        }
+        this.emitted = hex;
+        this.committed = hex;
+        this.value = hex;
+        this.coChange.emit(hex);
+    }
+    get strings() {
+        return getColorPickerStrings(this.locale);
     }
     get parsedPresets() {
         if (Array.isArray(this.presets)) {
-            return this.presets.map(p => typeof p === 'string' ? { name: p, value: p } : p);
+            return this.presets.map(resolvePreset);
         }
         if (typeof this.presets === 'string' && this.presets.trim()) {
             try {
                 const parsed = JSON.parse(this.presets);
                 if (Array.isArray(parsed)) {
-                    return parsed.map((p) => typeof p === 'string' ? { name: p, value: p } : p);
+                    return parsed.map((p) => resolvePreset(p));
                 }
             }
             catch ( /* ignore */_a) { /* ignore */ }
         }
         return DEFAULT_PRESETS;
     }
+    /**
+     * 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.
+     */
+    get presetGroups() {
+        const presets = this.parsedPresets;
+        // La partición sale de la MEMBRESÍA de `key` (`splitPaletteGroups`), no de
+        // comparar identidad contra `DEFAULT_PRESETS`: el consumidor real manda la
+        // misma paleta re-serializada con los nombres traducidos, y por identidad
+        // eso caía siempre en "custom" — los rótulos no se anunciaban nunca.
+        const split = splitPaletteGroups(presets);
+        // Sin partición que signifique algo (hexes sueltos, keys desconocidas, un
+        // solo lado) va todo en un grupo, sin rótulo inventado.
+        if (!split) {
+            return [{ label: undefined, items: presets, from: 0 }];
+        }
+        return [
+            { label: this.strings.groupNeutrals, items: split.neutrals, from: 0 },
+            { label: this.strings.groupBrand, items: split.brand, from: split.neutrals.length },
+        ];
+    }
+    /** Los swatches aplanados en orden de render: la lista que recorren las flechas. */
+    get flatPresets() {
+        return flattenGroups(this.presetGroups);
+    }
     /** Devuelve el foco al trigger al cerrar el panel (Escape, selección),
      *  salvo que el cierre venga de un click-outside que ya movió el foco a
      *  otro elemento — en ese caso no robarlo. */
@@ -79,11 +694,120 @@ export class CoColorPicker {
         }
     }
     handleSwatchClick(hex) {
-        this.value = hex;
-        this.coChange.emit(hex);
+        // Elegir un preset es un commit como cualquier otro: la asignación y el
+        // emit viven en `commit`, no duplicados acá (si no, el swatch dejaría el
+        // HSV del color anterior y el área abriría en el color equivocado).
+        this.commit(hex);
         this.isOpen = false;
         this.restoreTriggerFocus();
     }
+    /** Mueve el tab stop del área (y el foco) al eje pedido. */
+    focusAxis(axis) {
+        this.areaAxis = axis;
+        const el = axis === 's' ? this.satEl : this.valEl;
+        if (!el)
+            return;
+        // El render de Stencil es ASÍNCRONO: enfocar mientras el input todavía
+        // tiene `aria-hidden` puede hacer que el lector de pantalla se coma el
+        // anuncio (el nodo no está en el árbol en el instante del evento), y un
+        // frame después no hay ningún evento nuevo que lo dispare. Se sincroniza a
+        // mano y el próximo render converge al mismo valor. Guard: area.spec.
+        //
+        // El `tabindex` NO hace falta tocarlo: `focus()` entra igual en un
+        // `tabindex=-1` —es exactamente lo que hace operable al eje oculto— y el
+        // tab order se corrige en el render, dentro del mismo frame.
+        el.removeAttribute('aria-hidden');
+        el.focus();
+    }
+    optionEls() {
+        var _a, _b;
+        // `Array.from`, NO spread: el build de Stencil tipa con `lib: ["dom","es2020"]`
+        // SIN `dom.iterable`, así que spreadear un NodeList no compila (y `tsc --noEmit`
+        // con este tsconfig no lo detecta — sólo revienta en `stencil build`).
+        return Array.from((_b = (_a = this.gridEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="option"]')) !== null && _b !== void 0 ? _b : []);
+    }
+    /**
+     * 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.
+     */
+    verticalNeighbor(groups, current, dir) {
+        const gi = groups.findIndex((g) => current >= g.from && current < g.from + g.items.length);
+        if (gi < 0)
+            return current;
+        const g = groups[gi];
+        const j = current - g.from;
+        const col = j % GRID_COLS;
+        const rows = Math.ceil(g.items.length / GRID_COLS);
+        const targetRow = Math.floor(j / GRID_COLS) + dir;
+        // Hay fila dentro del MISMO grupo. La última puede estar incompleta.
+        if (targetRow >= 0 && targetRow < rows) {
+            return g.from + Math.min(targetRow * GRID_COLS + col, g.items.length - 1);
+        }
+        const neighbor = groups[gi + dir];
+        if (!neighbor)
+            return current;
+        // Entrando desde arriba se aterriza en la primera fila; desde abajo, en la última.
+        const nRows = Math.ceil(neighbor.items.length / GRID_COLS) || 1;
+        const landingRow = dir === 1 ? 0 : nRows - 1;
+        return neighbor.from + Math.min(landingRow * GRID_COLS + col, neighbor.items.length - 1);
+    }
+    /**
+     * 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.
+     */
+    renderArea() {
+        const { h: hue, s, v } = this.hsv;
+        // El eje enfocado es el único con tab stop y el único anunciado.
+        const satFocused = this.areaAxis === 's';
+        return (h("div", { class: "co-color-picker__area", role: "group", "aria-label": this.strings.area, ref: (el) => (this.areaEl = el), style: { '--co-color-picker-hue': `${hue}` }, onPointerDown: this.handleAreaPointerDown, onPointerMove: this.handleAreaPointerMove, onPointerUp: this.handleAreaPointerUp, onPointerCancel: this.handleAreaPointerCancel }, h("span", { class: "co-color-picker__area-thumb", role: "presentation", style: { left: `${s}%`, top: `${100 - v}%`, background: this.value } }), h("input", { type: "range", min: "0", max: "100", step: "1", class: "co-color-picker__channel", "data-channel": "s", value: Math.round(s), ref: (el) => (this.satEl = el), tabIndex: satFocused ? 0 : -1, "aria-hidden": satFocused ? undefined : 'true', "aria-label": this.strings.saturation, "aria-roledescription": this.strings.area2D, "aria-valuetext": fillTemplate(this.strings.satValue, { n: Math.round(s) }), "aria-orientation": "horizontal", disabled: this.disabled, onFocus: () => (this.areaAxis = 's'), onInput: (e) => this.previewHsv({ s: +e.target.value }), onChange: () => this.commit(hsvToHex(this.hsv)), onKeyDown: this.handleAreaKeyDown }), h("input", { type: "range", min: "0", max: "100", step: "1", class: "co-color-picker__channel", "data-channel": "v", value: Math.round(v), ref: (el) => (this.valEl = el), tabIndex: satFocused ? -1 : 0, "aria-hidden": satFocused ? 'true' : undefined, "aria-label": this.strings.brightness, "aria-roledescription": this.strings.area2D, "aria-valuetext": fillTemplate(this.strings.briValue, { n: Math.round(v) }), "aria-orientation": "vertical", disabled: this.disabled, onFocus: () => (this.areaAxis = 'v'), onInput: (e) => this.previewHsv({ v: +e.target.value }), onChange: () => this.commit(hsvToHex(this.hsv)), onKeyDown: this.handleAreaKeyDown })));
+    }
+    renderHue() {
+        return (h("input", { type: "range", min: "0", max: "360", step: "1", class: "co-color-picker__hue-input", value: Math.round(this.hsv.h), "aria-label": this.strings.hue, "aria-valuetext": fillTemplate(this.strings.hueValue, { n: Math.round(this.hsv.h) }), disabled: this.disabled, onInput: (e) => this.previewHsv({ h: +e.target.value }), onChange: () => this.commit(hsvToHex(this.hsv)), onKeyDown: this.handleHueKeyDown }));
+    }
+    renderSwatches() {
+        return (h("div", { class: "co-color-picker__grid", role: "listbox", "aria-label": this.strings.swatches, ref: (el) => (this.gridEl = el), onKeyDown: this.handleGridKeyDown }, this.presetGroups.map((g) => (
+        // Agrupación SÓLO para lectores de pantalla: en pantalla los separa el
+        // gap, sin rótulos (costaban ~56px y no aportaban — spec §4).
+        // `key` por el índice plano de arranque (0 / 5), NO por el rótulo:
+        // el rótulo cambia con `locale` y remontaría los grupos al traducir.
+        //
+        // Sin rótulo el contenedor es PRESENTACIONAL: un `role="group"`
+        // anónimo particiona el listbox para el lector de pantalla anunciando
+        // una frontera que no significa nada. El div igual tiene que existir
+        // —es el que da las 6 columnas—, así que `presentation` lo saca del
+        // árbol de accesibilidad y las opciones quedan colgando del listbox.
+        h("div", { class: "co-color-picker__grid-group", key: g.from, role: g.label ? 'group' : 'presentation', "aria-label": g.label }, g.items.map((preset, j) => {
+            const i = g.from + j;
+            const selected = preset.value.toUpperCase() === (this.value || '').toUpperCase();
+            return (h("div", { key: preset.value, role: "option", "aria-selected": selected ? 'true' : 'false', "aria-label": preset.name, tabIndex: i === this.focusedIndex ? 0 : -1, class: {
+                    'co-color-picker__grid-item': true,
+                    'co-color-picker__grid-item--selected': selected,
+                    // Un swatch claro se pierde contra el panel: se decide por
+                    // luminancia, no por una lista de hex hardcodeada.
+                    'co-color-picker__grid-item--light': isLightColor(preset.value),
+                }, style: { background: preset.value }, onFocus: () => (this.focusedIndex = i), onClick: () => this.handleSwatchClick(preset.value) }, selected && (h("co-icon", { name: "check", size: 16, weight: "bold", class: "co-color-picker__grid-check" }))));
+        }))))));
+    }
     get statusIcon() {
         const map = {
             error: 'warning-circle',
@@ -92,6 +816,142 @@ export class CoColorPicker {
         };
         return map[this.status] || null;
     }
+    /**
+     * 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.
+     */
+    escapeHex(v) {
+        return (v || '').replace(/[^0-9a-f]/gi, '').substring(0, 6).toUpperCase();
+    }
+    /** `F00` → `#FF0000`: lo emitido es SIEMPRE de 6 dígitos. */
+    expandHex(v) {
+        const hx = v.replace('#', '');
+        const full = hx.length === 3 ? hx[0] + hx[0] + hx[1] + hx[1] + hx[2] + hx[2] : hx;
+        return `#${full.toUpperCase()}`;
+    }
+    /**
+     * 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ó.
+     */
+    resetHexDraft() {
+        // Apagar la edición va PRIMERO y es lo que hace incondicional a la
+        // siembra: `syncHexDraft` se abstiene mientras el flag esté prendido, así
+        // que sin esto un flag colgado dejaría la re-siembra en no-op.
+        //
+        // Hoy es defensivo y conviene decirlo: `finishHexEdit` —que corre en todo
+        // cierre de panel— ya apaga el flag antes de cualquier otra cosa, así que
+        // ningún test lo distingue. Se queda porque es la precondición de la línea
+        // de abajo, no por un caso conocido que lo necesite.
+        this.hexEditing = false;
+        this.syncHexDraft(this.value);
+    }
+    /**
+     * 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.
+     */
+    syncHexDraft(hex) {
+        if (this.hexEditing)
+            return;
+        if (hex && !isValidHex(hex))
+            return;
+        this.hexDraft = this.escapeHex(hex);
+    }
+    /**
+     * 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ó—.
+     */
+    finishHexEdit() {
+        const editing = this.hexEditing;
+        this.hexEditing = false;
+        // Un picker deshabilitado no emite ni escribe, ni siquiera para deshacer:
+        // si el host lo apagó con un preview colgado, el `value` es asunto suyo.
+        if (this.disabled)
+            return;
+        if (editing && isValidHex(this.hexDraft)) {
+            const hex = this.expandHex(this.hexDraft);
+            this.commit(hex);
+            // El espejo se hace acá a mano porque el @Watch NO dispara: `commit`
+            // reasigna a `value` el mismo hex que el preview ya había escrito, y
+            // Stencil no corre el watcher cuando el valor no cambió. Sin esto, tipear
+            // `F00` deja el campo mostrando `F00` mientras el color real ya es
+            // `#FF0000` — el texto y el trigger diciendo cosas distintas.
+            this.syncHexDraft(hex);
+            return;
+        }
+        this.revertToCommitted();
+    }
+    /** Vuelve al último color commiteado y retira el preview que quedó colgado. */
+    revertToCommitted() {
+        const target = this.committed;
+        // Por `syncHexDraft` y no por `escapeHex` a pelo: `committed` puede no ser
+        // un hex (el host puede haber puesto `var(--co-brand)`), y escaparlo
+        // fabricaría el mismo `ACBAD` verosímil que el guard de allá evita.
+        this.syncHexDraft(target);
+        // Volver a "sin color" devuelve el área a su vértice vivo. Si el gesto
+        // abandonado terminó con `v=0`, reabrir dejaba el campo vacío Y el área en
+        // negro, donde mover matiz o saturación no produce color alguno: es
+        // exactamente el estado que EMPTY_HSV existe para evitar.
+        if (!target)
+            this.hsv = EMPTY_HSV;
+        if ((this.value || '').toUpperCase() === (target || '').toUpperCase())
+            return;
+        // SIN sellar: acá el @Watch sí tiene que re-derivar el HSV, para que el área
+        // vuelva al color commiteado y no se quede en el que se abandonó.
+        this.value = target;
+        // El @Watch no sella cuando `target` no es un hex (nunca se commiteó nada y
+        // el campo vuelve a vacío), así que se sella acá.
+        this.emitted = target;
+        // El preview se anunció por `coInput`; retirarlo también. Un host que
+        // previsualiza en vivo se quedaría si no con el color que nadie eligió.
+        this.coInput.emit(target);
+    }
+    /**
+     * 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.
+     */
+    get hasEyeDropper() {
+        return typeof window !== 'undefined' && 'EyeDropper' in window;
+    }
+    renderHexRow() {
+        const hasValue = !!this.value;
+        return (h("div", { class: "co-color-picker__hex-row" }, h("span", { class: "co-color-picker__hex-prefix" }, "#"), h("input", { type: "text", class: "co-color-picker__hex-input", value: this.hexDraft, spellcheck: false, autocomplete: "off", maxLength: 6, "aria-label": this.strings.hexField, disabled: this.disabled, onInput: this.handleHexInput, onBlur: this.handleHexBlur, onKeyDown: this.handleHexKeyDown, onPaste: this.handleHexPaste }), this.hasEyeDropper && (h("button", { type: "button", class: "co-color-picker__eyedropper", title: this.strings.eyedropper, "aria-label": this.strings.eyedropper, disabled: this.disabled, onClick: this.handleEyeDropper }, h("co-icon", { name: "eyedropper", size: 16 }))), h("button", { type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: this.strings.copy, "aria-label": this.strings.copy,
+            // La fila ya no está detrás de `hasValue` —hay que poder tipear el
+            // primer color—, así que el que se apaga es el botón: sin valor no
+            // hay nada que copiar.
+            disabled: this.disabled || !hasValue, onClick: () => this.handleCopy() }, h("co-icon", { name: this.copied ? 'check' : 'copy', size: 16 }))));
+    }
     async handleCopy() {
         if (!this.value)
             return;
@@ -103,13 +963,14 @@ export class CoColorPicker {
         catch ( /* ignore */_a) { /* ignore */ }
     }
     render() {
-        const presets = this.parsedPresets;
         const hasValue = !!this.value;
         const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
-        return (h("div", { key: '5b99c6a39399a6731d09115e7fd2ce2d64baffb2', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: '816392c0b3cebcb2e84ea28ea7e6b7976503b6f9', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: 'e0e1c97522f4516763fc663878203e2dafb783b3', required: this.required }))), h("co-popover", { key: 'd49ba1f9cd64d2498940247f3ba02897dcc9d2d7', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '1121b429c89fb9cc066cc66564ae547687bf8ed3', slot: "trigger", class: "co-color-picker__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-controls": this.isOpen ? CoColorPicker.PANEL_ID : undefined, "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onKeyDown: this.handleTriggerKeyDown }, h("span", { key: '2567db35022b5ffdd9921d8bec263c90103fd5f3', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '7fecc93b5ecc91acf2c874a26ed1f9d8770d9adf', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '44d904e4156fac15b302ffe86d68cef72bc7518e', class: "co-color-picker__panel", id: CoColorPicker.PANEL_ID, role: "dialog", "aria-label": this.label || this.placeholder }, h("div", { key: 'a566f189c87792f0af3e493c00eed7240dcd49c9', class: "co-color-picker__grid" }, presets.map((preset) => {
-            var _a;
-            return (h("button", { type: "button", key: preset.value, class: `co-color-picker__grid-item ${preset.value.toUpperCase() === ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toUpperCase()) ? 'co-color-picker__grid-item--selected' : ''}`, style: { background: preset.value }, title: preset.name, onClick: () => this.handleSwatchClick(preset.value) }));
-        })), hasValue && (h("div", { key: 'bae8ffe387fe30710b654975379e70a4b3724ec9', class: "co-color-picker__hex-row" }, h("span", { key: '671a5a64abc2f824c8d1ef8c2404023d8d51c28d', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '3a6742eb528c5a92fe16b2f2e5d8b2ebdf885450', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: 'f53957b494dbed0648d32fcb743673a2ada063b4', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, h("co-icon", { key: 'c99e611beddc2108f3973ecee4f6012423cffd23', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: '1d6a6e97eab1eafcb9265944693cb0d1121e04ee', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: 'bcf943836fddf264cede2f339844f35aa167002f', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: 'a439c4d102d17d0d6c9e55757dcf43ec8b3ade8f', class: "co-color-picker__helper-text" }, this.helperText)))));
+        return (h("div", { key: 'd0069249895cc3cf148c963f149ff7b3a15ab939', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: 'e28d265aefc19f7e86ed36bfbfe6b6ec537d1ca2', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '0aff2dde3002e1c9a79f2c3a385b64d33dc3418c', required: this.required }))), h("co-popover", { key: 'edac2d09e0d15c2f09dfff2ea0a2b95f5384d8de', open: this.isOpen, placement: "bottom-start",
+            // Sin `matchWidth`: el panel tiene ancho INTRÍNSECO (grilla de 8
+            // swatches fijos de 32px). Copiar el ancho del trigger achica los
+            // tracks bajo 32px con un campo angosto (media columna de un modal) y
+            // los swatches desbordan el card — guard: panel-width.spec.
+            offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '98c2e3c5ed50f8cc869c1cf791ddce85e8887b8e', slot: "trigger", class: "co-color-picker__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-controls": this.isOpen ? CoColorPicker.PANEL_ID : undefined, "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onKeyDown: this.handleTriggerKeyDown }, h("span", { key: '65e49a6246c71b6366f7907c715c64259c30be46', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: 'd8e6e852383ec925c4336f9b49a69e73d88e2234', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '2893b57d82d7ac2edc4e3bd8eac266fdc6cbfba0', class: "co-color-picker__panel", id: CoColorPicker.PANEL_ID, role: "dialog", "aria-label": this.label || this.placeholder }, this.renderArea(), this.renderHue(), this.renderSwatches(), this.renderHexRow()))), this.helperText && (h("div", { key: 'ca583c8033afaafa5bdd59ccd63e711eaf02e6df', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: 'aca2fd8186658e7d4e13ab67dc7a6e93c2fd8b89', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: 'e8e3cdf72353a1f5fb8b53fe725389386c7d75ea', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-color-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -348,13 +1209,37 @@ export class CoColorPicker {
                 "reflect": false,
                 "attribute": "presets",
                 "defaultValue": "''"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Idioma de los textos accesibles. Misma prop que co-file-field/co-date-picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'en'"
             }
         };
     }
     static get states() {
         return {
             "isOpen": {},
-            "copied": {}
+            "copied": {},
+            "hsv": {},
+            "hexDraft": {},
+            "areaAxis": {},
+            "focusedIndex": {}
         };
     }
     static get events() {
@@ -373,9 +1258,30 @@ export class CoColorPicker {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "coInput",
+                "name": "coInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hex en vivo mientras se arrastra el \u00E1rea o el matiz. El host lo usa para\nprevisualizar si quiere.\n\nLa partici\u00F3n con `coChange` es el contrato nuevo y existe por una raz\u00F3n\nconcreta: un arrastre produce ~60 valores por segundo, y emitirlos todos\ncomo `coChange` ensucia la sesi\u00F3n del formulario en cada frame (un\n\"cambios sin guardar\" por p\u00EDxel movido). `coChange` sigue significando\nexactamente lo que significaba \u2014commit\u2014, as\u00ED que los consumidores actuales\nno cambian una l\u00EDnea."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "syncFromValue"
+            }];
+    }
 }
 /**
  * Id del panel de presets, target de `aria-controls` del trigger. Constante
@@ -386,3 +1292,14 @@ export class CoColorPicker {
  * on-demand, así que cerrado el IDREF quedaría colgante.
  */
 CoColorPicker.PANEL_ID = 'co-color-picker-panel';
+/**
+ * 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.
+ */
+CoColorPicker.AREA_KEYS = {
+    ArrowRight: { axis: 's', dir: 1 },
+    ArrowLeft: { axis: 's', dir: -1 },
+    ArrowUp: { axis: 'v', dir: 1 },
+    ArrowDown: { axis: 'v', dir: -1 },
+};