ColorPicker

La muestra abre el selector nativo del sistema y el campo acepta el hexadecimal pegado de un manual de marca, con o sin # y en forma corta (09F). Mientras escribes, solo se propaga un #RRGGBB completo; al salir del campo, la forma corta se expande y lo que no es un color vuelve al último válido con una sacudida. El valor sale siempre en minúsculas, como el de <input type="color">. Úsalo para colores que define el hotel, nunca para elegir un estado o una variante del kit.

hint se ve siempre bajo la etiqueta; description se abre al pulsar el icono. En el kit 0.1 era un tooltip que solo llegaba con el ratón: ahora se abre también con el teclado y con el dedo. Aun así, lo imprescindible va en hint, y en description solo el consejo extra.

Los componentes del kit pintan con --primary, así que redefinirlo en un contenedor re-tematiza lo que hay dentro, igual que hace el White Label con la app entera. El color es una perilla del tenant (la Regla del Tenant): el kit no comprueba el contraste, y con un color claro el texto blanco deja de leerse. Si dejas elegir libremente, enseña la vista previa junto al selector.

onInput llega con cada color válido, mientras arrastras en el selector o terminas de escribir el hexadecimal; onChange, al fijarlo. Los dos reciben el evento, no el color como en el kit 0.1: lee value del elemento.

Para una paleta de varios colores, como la del correo de confirmación. Con name, cada color entra en el FormData como hex en minúsculas. Las muestras se alinean abajo aunque las pistas tengan distinto largo, así que la fila se lee pareja.

Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).