ボタン・クリック演出
ボタングループ
複数ボタンを罫線を共有して連結したセグメント操作。上段は単一選択（左/中央/右揃え）、下段は複数トグル（太字/斜体/下線）の2パターンを見せる。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
連結の罫線は「先頭以外のボタンの左辺に1pxだけ」引き、外枠はグループ側の border と overflow:hidden の角丸で処理しています。単一選択は role=radiogroup + ローミング tabindex（矢印キーで移動と同時に選択、Tabはグループ単位で抜ける）、複数トグルは各ボタンの aria-pressed を独立して切り替えます。選択状態はどちらも同じ藍のアクセント面で表しています。
コード（コピーして使えます）
<div class="stage" id="stage">
<div class="bg-block">
<p class="bg-label">配置（単一選択）</p>
<div class="bg-group" id="alignGroup" role="radiogroup" aria-label="テキストの配置">
<button class="bg-btn" role="radio" aria-checked="true" tabindex="0" data-val="left" aria-label="左揃え">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<line x1="3" y1="4" x2="13" y2="4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<line x1="3" y1="8" x2="9" y2="8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<line x1="3" y1="12" x2="11" y2="12" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
</svg>
</button>
<button class="bg-btn" role="radio" aria-checked="false" tabindex="-1" data-val="center" aria-label="中央揃え">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<line x1="3" y1="4" x2="13" y2="4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<line x1="5" y1="8" x2="11" y2="8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<line x1="4" y1="12" x2="12" y2="12" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
</svg>
</button>
<button class="bg-btn" role="radio" aria-checked="false" tabindex="-1" data-val="right" aria-label="右揃え">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<line x1="3" y1="4" x2="13" y2="4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<line x1="7" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<line x1="5" y1="12" x2="13" y2="12" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
</svg>
</button>
</div>
</div>
<div class="bg-block">
<p class="bg-label">書式（複数トグル）</p>
<div class="bg-group" id="styleGroup" role="group" aria-label="文字の書式">
<button class="bg-btn bg-btn--wide" aria-pressed="false" data-val="bold" aria-label="太字">
<span class="bg-glyph bg-glyph--bold">B</span>
</button>
<button class="bg-btn bg-btn--wide" aria-pressed="false" data-val="italic" aria-label="斜体">
<span class="bg-glyph bg-glyph--italic">I</span>
</button>
<button class="bg-btn bg-btn--wide" aria-pressed="false" data-val="underline" aria-label="下線">
<span class="bg-glyph bg-glyph--underline">U</span>
</button>
</div>
</div>
</div>