Comparison

label と、before・after に変更前後の内容を渡します。中には ValueList や段落など任意の要素を置けます。null を渡した側は「未登録」と表示します。

changed は値が変わるかどうかで、差分の判定は利用側が行います。現在と変更後は、内側の余白12pxの細い枠の面（角丸3px）に入れて並べます。見出しは11pxの太字です。true なら見出しの隣に「変更あり」を件数と同じ淡い青のピル（高さ18px）で添え、現在を古い版の灰色の面（#eeeeee、1px #cccccc）、変更後を新しい版の緑の面（#ccffcc、1px #99cc99）にして、二つの面の間に24px空けて青緑の矢印を置きます。false なら「変更なし」を灰色のピルで添え、両方を背後のシートと同じ淡い灰色の面（#f9f9f9、1px #e5e5e5）にして、間を灰色の等号にします。矢印と等号は丸で囲みません。

変わる時の現在の側は、中に置いたコンポーネントも含めて灰色の文字で表示します。

配置先の幅が30rem以上なら左右に並べ、狭ければ現在→変更後の順に上下へ並べます。右から左に読むページでは矢印の向きを反転します。JavaScriptは使いません。