ボタン・クリック演出
スプリットボタン
主操作ボタンの右端に▼トグルが連結し、押すと別動作（名前を付けて保存など）のメニューが開く。外側クリック・Escで閉じる。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
プレビューは枠内に収めるためメニューを split ラッパー基準の position:absolute で下方向に開いています。継ぎ目の仕切りは box-shadow の inset で1本だけ描いています。実ページでメニューが画面下端で切れる場合は、開く方向（top / bottom）を配置に応じて出し分けてください。▼トグルは aria-haspopup / aria-expanded を持ち、閉状態で下キーを押すと開いて先頭項目へフォーカスします。
コード（コピーして使えます）
<div class="stage" id="stage">
<div class="split" id="split">
<button class="split-main" id="splitMain">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
<path d="M2.5 2.5h7l3 3v7a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-9a.5.5 0 01.5-.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
<path d="M4.5 2.5v3h5v-3M5 13v-3.5h5V13" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
</svg>
保存
</button>
<button class="split-toggle" id="splitToggle" aria-haspopup="menu" aria-expanded="false" aria-label="他の保存方法">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
<polyline points="2,4 6,8 10,4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="split-menu" id="splitMenu" role="menu" aria-label="保存の種類" aria-hidden="true">
<button class="split-item" role="menuitem">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<path d="M2.5 2.5h6l3 3v6a.5.5 0 01-.5.5h-8.5a.5.5 0 01-.5-.5v-8.5a.5.5 0 01.5-.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
<path d="M8 9.5l2-2M10 9.5l-2-2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
</svg>
名前を付けて保存
</button>
<button class="split-item" role="menuitem">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<rect x="2.5" y="4.5" width="7" height="7" rx="1.2" stroke="currentColor" stroke-width="1.2"/>
<path d="M5 4.5V3a1 1 0 011-1h5a1 1 0 011 1v5a1 1 0 01-1 1h-1.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
</svg>
コピーを保存
</button>
<button class="split-item" role="menuitem">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<path d="M7 1.8l1.5 3.1 3.4.5-2.45 2.4.58 3.4L7 9.9l-3.03 1.7.58-3.4L2.1 5.4l3.4-.5L7 1.8z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
</svg>
テンプレートとして保存
</button>
</div>
</div>
<p class="split-result" id="splitResult" role="status" aria-live="polite"></p>
</div>