ColorPicker

label と送信する名前の接頭辞 name、初めの色 value（colorSpace・hue・saturation・brightness・alpha）を渡します。1px #dedede の枠で囲んだ淡い灰色（#f9f9f9、角丸8px）の面に、彩度と明度を決める色の面（Backpackの配色の設定と同じく枠と角丸の無い四角で、今の位置は白い輪に暗い縁を付けた直径約12pxの輪）と選んでいる色の見本、色相・彩度・明度・不透明度の四本のスライダーを縦に並べます。スライダーは Range と同じ溝とつまみで、溝の中を各値の色の移り変わりにします。見本は1pxの灰色の枠を付けた26pxの四角（角丸2px）で、透明な部分は市松模様で示します。欄の幅が28rem以上ではスライダーを二列にし、38rem以上では色の面とスライダーを左右に並べます。色の面とスライダーは同じ値に合わせて動きます。

送信する値：name="brandColor" なら、brandColor[hue]（0〜360）・brandColor[saturation]（0〜100）・brandColor[brightness]（0〜100）・brandColor[alpha]（0〜1）と、brandColor[colorSpace]（srgb か display-p3）を送ります。色空間は画面からは変えられず、value のまま送ります。

help と error は欄の下に出し、まとまりに関連付けます。error は表示するだけで、色の検証（背景とのコントラストなど）は利用側で行います。disabled は全ての操作を止め、形と面はそのままで文字だけを灰色にし、値を送りません。

値を変更すると、取り消せる color-picker:beforechange と、確定した後の color-picker:change を発火します。detailの color は color(srgb r g b / a)（広色域では color(display-p3 …)）の形のCSSの色で、そのまま表示に使えます。

JavaScriptが無い時は色の面を隠し、四本の標準のスライダーで値を決めて送れます。見本は初めの色のまま動きません。