Board

columns に列を渡し、各列の items へ項目の id・label・content を渡します。content には見出し・本文・TagGroup・Progress など任意の要素を置けます。列の見出しには件数を添えます。

項目の代わりに任意の中身を置く列は、items の代わりに content と見出しに出す count を渡します。この列は移動先になりません。

列は背後のシートと同じ淡い灰色の面（#f9f9f9、1px #e5e5e5 の枠、影なし、角は丸めない）で、項目はその中に白いカード（枠なし、四方への短いぼかしの影、角丸3px）として重ねます。項目の題名は13pxの太字、補足は11pxの灰色の文字です。列の名前は Section の見出しと同じ15pxの赤の通常の太さの文字で、件数は名前の隣の件数のピル（高さ18px、淡い青に青緑の数字）に書きます。

tone（info・warning・success・danger）で列の色を選びます。色は列の上端の2pxの線と、項目の code の文字にだけ出し、カードは染めません。既定の neutral は上端の線を引かず、current の列は tone に関わらず青緑の線にします。disabled の列は面をそのままにして列の名前の文字だけを灰色にし、移動先から外します。項目に code を渡すと、番号などの文字をカードの上の先頭側に列の色の11pxの太字で置きます（中立の列では灰色）。面は塗りません。

項目の無い列には、empty の文を破線の枠で囲んで置きます。

movable を渡すと各項目の上の末尾側の角にハンドルを置き、BoardController を board として登録すると、列の間の移動と並べ替えができます。動かせる項目にホバーすると、影を少し広げて持ち上げます。ハンドルをドラッグすると、項目のコピーを持ち上げた影で半透明にしてポインターに付け、元の項目を灰色に薄めて跡として残し、移動先の列を淡い青緑の面と青緑の2pxの破線で縁取って、挿入位置に青緑の3pxの線を出します。離した所へ項目を移します。キーボードで移動している項目は、青緑の破線で縁取って持ち上げた影を付けます。Boardの外や受け付けない列で離すと取り消します。ドラッグしている間は、Boardの左右の端でBoardを、画面の上下の端で画面をスクロールします。

ドラッグを離して移動を確定すると、取り消し可能な board:beforemove イベントを発火します。取り消すと項目を元の位置へ戻し、取り消さなければ board:move イベントを発火します。どちらも項目を新しい位置へ移した後に発火し、位置が変わらなかった時は発火しません。移動の保存と、保存できなかった時の表示の戻しは利用側で行います。

collapsed の列は、件数のピルと縦書きの名前を載せた列と同じ淡い灰色の細い縦長の枠になり、中の項目を隠して移動先から外します。狭い幅（36rem未満）では横長の枠にして一行に並べます。collapsible を渡すと、枠のどこを押しても開き、開いた列の見出しの末尾のボタンでたたみます。開閉には BoardController が要ります（movable でなくても登録します）。

開閉の時、BoardController は表示だけを切り替え、取り消し可能な board:toggle イベントを発火します。開閉の状態は保存しないので、残す時は利用側で保存し、次に描画する時の collapsed に反映します。

JavaScriptが無い時は、ハンドルは無効のまま置かれ、項目は動かせません。開閉のボタンは BoardController が接続するまで出さないので、列は描画した時の開閉のままです。件数は描画した時の数のままです。