@prolibu-suite/cobalt-core 0.9.5 → 0.10.0

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,178 @@ 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 negro, que es lo que pinta el área
+     * mientras no hay color elegido.
+     */
+    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 +233,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-date-time-picker/co-date-time-picker.d.ts

@@ -2,8 +2,10 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import type { Placement } from '../../utils/positioning';
 /**
  * Date + TIME picker: one field, one popover. Composes `co-popover` (floating
- * panel, outside-click) + `co-calendar` (day grid) + a scrollable list of times
- * beside it — the Google Calendar layout.
+ * panel, outside-click) + `co-calendar` (day grid) + a side panel with
+ * shortcuts (`presetIds`: morning/noon/afternoon/endOfDay/now) and a segmented
+ * `co-time-field` (hh:mm, PageUp/PageDown stepping by `stepMinutes`) for the
+ * exact hour, plus a "Listo" button.
  *
  * VALUE CONTRACT — the committed `value` is a UTC ISO instant
  * ("2026-07-25T21:30:00.000Z"), never a wall-clock string. The wall clock the
@@ -16,16 +18,26 @@ import type { Placement } from '../../utils/positioning';
  * would shift the day west of UTC).
  *
  * INTERACTION (Google):
- *   - Click the field → opens. Picking a DAY commits and keeps the panel open
- *     (you almost always want to set the hour next); picking a TIME commits and
- *     closes. So there is no draft/apply step and no confirm button.
+ *   - Click the field → opens. Picking a DAY commits (with the current DRAFT
+ *     hour, not the previously committed one) and keeps the panel open — you
+ *     almost always want to set the hour next.
+ *   - The exact time is a DRAFT (`draftMinutes`) while `co-time-field` is
+ *     edited (`coInput`) — editing alone never commits. It only commits (and
+ *     closes) on: clicking a shortcut, Enter/`coCommit` from the time field,
+ *     or the "Listo" button.
+ *   - Outside click — and, on mobile, swiping the bottom sheet down — commits
+ *     the draft if it changed, then closes: the same "apply on blur" model a
+ *     text field uses.
+ *   - Escape is the opposite: an explicit DISCARD. It closes WITHOUT applying
+ *     the draft and returns focus to the trigger field.
  *   - ArrowDown on the field → moves focus into the calendar grid.
- *   - The time list is a listbox: Arrow/Home/End/PageUp/PageDown move the active
- *     option, Enter/Space selects it.
- *   - Escape → closes and returns focus to the field. Outside click → closes.
+ *   - Mobile (viewport ≤ `mobileBreakpoint`) renders the same panel as a
+ *     bottom sheet (`co-drawer position="bottom"`) instead of the desktop
+ *     popover; the draft/commit/discard model is identical.
  *
- * Escape is owned here (co-popover `closeOnEscape=false`) so focus can return to
- * the field; outside-click stays with co-popover.
+ * Escape is owned here (co-popover `closeOnEscape=false`) so focus can return
+ * to the field; outside-click/sheet-dismiss stay with co-popover/co-drawer and
+ * are handled by `closeApplyingDraft` (see its doc for the Escape asymmetry).
  *
  * @part field - The bordered trigger row
  * @part label - The field label
@@ -39,8 +51,10 @@ export declare class CoDateTimePicker {
     value: string | null;
     /** IANA zone the wall clock is rendered in. Defaults to the browser zone. */
     timeZone?: string;
-    /** Minutes between consecutive options in the time list. */
+    /** Paso de PageUp/PageDown del campo de hora (antes: paso de la lista). */
     stepMinutes: number;
+    /** Atajos del panel, en orden. Ids del catálogo: morning|noon|afternoon|endOfDay|now. */
+    presetIds: string[] | string;
     /** 12-hour clock (Google style). `false` renders a 24h clock. */
     hour12: boolean;
     /** Earliest selectable day. Date-only "YYYY-MM-DD" or an instant. */
@@ -77,8 +91,8 @@ export declare class CoDateTimePicker {
     mobileBreakpoint: number;
     /** True when the viewport is at/under `mobileBreakpoint`. */
     isMobile: boolean;
-    /** Minutes-of-day highlighted by the keyboard in the time list. */
-    activeMinutes: number;
+    /** Minutes-of-day drafted in the exact-time field (co-time-field), not yet committed. */
+    draftMinutes: number;
     /** Committed instant (UTC ISO) or null. */
     coChange: EventEmitter<string | null>;
     coClear: EventEmitter<void>;
@@ -89,15 +103,13 @@ export declare class CoDateTimePicker {
     private popoverEl?;
     private calendarEl?;
     private triggerBtn?;
-    private listEl?;
     private pendingFocusGrid;
     private pendingFocusTrigger;
-    /** 'center' when the list is (re)opened, 'nearest' while arrowing through it. */
-    private pendingScroll;
     private mql?;
     private mqlHandler;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    componentWillLoad(): void;
     onOpenChange(next: boolean): void;
     private get zone();
     private get isInvalid();
@@ -112,17 +124,27 @@ export declare class CoDateTimePicker {
     private onClearClick;
     private onCalendarSelect;
     private pickTime;
-    private onListKeyDown;
+    private static readonly PRESET_CATALOG;
+    private get presets();
+    private onTimeFieldInput;
+    private onTimeFieldCommit;
     private onPopoverOpen;
+    /**
+     * Closes applying whatever is drafted (R7) — outside click / drawer
+     * swipe-down behave like a field's blur: what you typed sticks. This is
+     * the ONLY path that commits the draft on close; Escape is the opposite —
+     * an explicit discard — and it does NOT go through here: `onRootKeyDown`
+     * flips `this.open` to `false` via `setOpen()` FIRST, so by the time the
+     * real co-popover/co-drawer finish closing and bubble their own `coClose`
+     * back to `onPopoverClose`/this drawer's `onCoClose`, the guard below
+     * already reads `false` and no-ops — the draft is discarded, not applied.
+     */
+    private closeApplyingDraft;
     private onPopoverClose;
     private onRootKeyDown;
     private focusGridSoon;
-    private scrollActiveIntoView;
     componentDidRender(): void;
     private get step();
-    /** Grid of minutes-of-day, plus the committed hour when it falls off-grid
-     *  (an imported 16:37 meeting must stay visible and selectable). */
-    private get options();
     private renderTrigger;
     private renderPanel;
     private renderHelper;

package/dist/types/components/co-drawer/co-drawer.d.ts

@@ -71,9 +71,10 @@ export declare class CoDrawer {
     private stopPropagation;
     private handleTransitionEnd;
     private asideEl?;
-    /** Modeless only: keep the aside promoted to the top layer for its whole
-     *  lifetime (mirrors co-overlay's syncPopover; eviction on disconnect is
-     *  automatic). */
+    /** Ref del aside — SIEMPRE adjunto (handleTransitionEnd lo necesita como
+     *  target). Modeless only: además mantiene el aside promovido al top layer
+     *  para toda su vida (mirrors co-overlay's syncPopover; eviction on
+     *  disconnect is automatic). */
     private promoteModeless;
     componentDidLoad(): void;
     render(): any;