Selector de color

Elegir un color: un botón con la muestra y el valor escrito, y un panel con el área de saturación y brillo, la tira de tono, el campo hexadecimal y los colores guardados. Esas tripas están sueltas en ColorPanel (Panel de color), que tiene su propia ficha, para montarlas en un panel propio.

Cuándo usarlo

• Colores que elige quien usa la aplicación y que se guardan: el color de marca de la tienda, el de una etiqueta, el fondo de un cartel.
• El valor entra y sale como texto (#A16207, o el formato que diga outputFormat: hex, rgb, hsl, hsb y sus versiones con alfa), que es lo que se guarda en una base de datos. Se controla con value y onChange, o se deja suelto con initialValue. alphaChannel añade la tira de transparencia.
• samples pone a mano los colores de siempre.
• size y variant son los de todos los campos: el botón mide 30, 36 o 44 px, y el panel (área, hexadecimal y colores guardados) crece con él. disabled deja ver el color sin abrir el panel.

Cuándo no

• Los colores de la propia librería: son tokens en oklch(), que este selector no entiende, y no se editan desde aquí.
• Elegir el color de un producto entre los que hay: VariantPicker.

Teclado: Tab llega al botón; Intro o Espacio abren el panel, y Escape lo cierra y devuelve el foco al botón. Dentro, el área y las tiras se mueven con las flechas y saltan con Re Pág y Av Pág; los colores guardados se recorren con las flechas (Inicio y Fin van a los extremos) y se eligen con Intro o Espacio; el hexadecimal se escribe.

Accesibilidad: el botón se llama con la etiqueta y el valor («Color de marca #A16207»), no con un cuadrado mudo; la ayuda (hint) y el error (error) se leen como su descripción. El área y las tiras son deslizadores que dicen su canal y su valor, y cada color guardado se anuncia con su nombre en palabras, no con su hexadecimal. Si el texto que llega en value no es un color, lo dice («No se entiende el color «pistacho»») en vez de pintar un negro y callarse. El botón lleva el anillo de 2 px de los campos, también con el panel abierto; el tirador y los colores guardados, el de los botones, y el elegido se marca con un aro. Con el dedo, los colores guardados y las tiras miden 44 px y el área crece.

Movimiento: el panel entra como todos los flotantes; el tirador crece al apuntarlo y al arrastrarlo, y los colores guardados crecen al apuntarlos y ceden al pulsarlos.

Aspecto fino: el botón, --amset-color-sample (el cuadrado de dentro) y las variables de los campos, --amset-field-*. El panel, en .amset-color__panel (va en el flotante, fuera del selector): --amset-color-panel-width, --amset-color-area-height, --amset-color-strip-height (la barra), --amset-color-strip-touch (la zona que se pulsa), --amset-color-thumb y --amset-color-sample-side (los colores guardados).