Color Components
A hex input that opens our own color picker (InputColor), the standalone ColorPicker panel, and the ColorIndicator swatch.
Color Picker Examples
Type a hex value or click the eyedropper to open the picker
Selected : #FF5733
clearable — the × button clears the field (default : off)
Selected : #EF4444
footer — the picker edits a draft ; Appliquer commits it, Annuler / backdrop / Escape discard it
Selected : #0EA5E9
Selected : #3B82F6CC
The picker opens horizontal by default (folds to vertical on mobile). Pass orientation="vertical" for the stacked layout.
The picker modal is portaled to document.body, so using it (drag, presets, hex field, footer buttons, backdrop, Escape) only ever closes the picker — never the host modal. Escape closes the topmost dialog first : the picker when it is open, then « Éditer ».
Live : #3366FF · Footer : #F59E0B
Square on the left, controls on the right. Resize the window / panel to see it collapse back to vertical : collapse="viewport" reacts to the screen, collapse="container" reacts to its own width.
A presentational color chip (xs → xl), used by the picker presets, lists, legends… The last one shows the empty state (border only).