Dialog

DialogController を dialog として登録します。id は画面内で一意にします。閉じたネイティブの dialog と開く操作を出力し、開く操作を押すとモーダルで開きます。

パネルは白いパネル（1px #bbb の枠、角丸5px、外への柔らかい影）で、見出し・本文・操作欄に分け、長い本文は本文だけをスクロールします。見出しは問いの形の赤茶（#a52a2a）の太字で、本文の大きさ（13px）です。見出しと本文の間に罫線は引きません。description は見出しの下に12pxの灰色の文字で置きます。操作欄は末尾側に揃えます。見出しの行の末尾の角に、枠も塗りも持たない灰色の×の閉じる操作を置き、closeLabel はその名前です。actions を渡すと、操作欄の先頭に closeLabel の文言の閉じる操作を置き、その後ろに actions を並べます。

操作欄の操作で閉じるには data-dialog-target="close" を付けます。確認の後の保存・削除・通信は利用側が行い、dialog:close などのイベントや、操作の onclick で受け取ります。

フォームを載せる時は、form に method="dialog" を付けると、入力が有効な時だけ送信で閉じます。送信で閉じる時も dialog:beforeclose・dialog:close を発火し、dialog:beforeclose を取り消すと開いたままにします。initialFocus を content にし、最初に入力する欄に autofocus を付けます。本文の外の操作欄から送る時は、送信の Button に form でフォームのidを渡します。

size はパネルの幅の上限で、compact は26rem、default は32rem、wide は52remです。画面が狭い時は、画面の幅から余白を引いた幅に収めます。

幅40rem以下のタッチ画面では、画面の下端に付くシートとして出し、上端に灰色の短いハンドルを置きます。上端のハンドルと見出しを下へ引くと閉じます（少し動かしただけでは閉じません）。

開閉はその場で切り替え、アニメーションはしません。開いている間は背後を濃い灰色（#323136）の80%で覆って暗くし、Escape・閉じる操作・背景を押すと閉じ、フォーカスを開いた操作へ戻します。JavaScriptなしでは開きません。