通知・オーバーレイ
スナックバー＋取り消し
リスト項目を削除すると「削除しました ［取り消す］」が下部に出て3秒で自動消滅。取り消しで元に戻る。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
プレビューは枠内に収めるため、スナックバーを position:absolute（ステージ基準）で実装しています。実際のページで画面下端に固定するときは position:fixed; bottom に変え、body 直下など高い階層へ置いてください。
コード（コピーして使えます）
<div class="stage" id="stage">
<ul class="item-list" id="itemList">
<li class="item" data-id="1">
<span class="item-text">タスク A</span>
<button class="del-btn" aria-label="削除">
<svg width="13" height="13" viewBox="0 0 13 13" fill="none">
<line x1="2" y1="2" x2="11" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="11" y1="2" x2="2" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</li>
<li class="item" data-id="2">
<span class="item-text">タスク B</span>
<button class="del-btn" aria-label="削除">
<svg width="13" height="13" viewBox="0 0 13 13" fill="none">
<line x1="2" y1="2" x2="11" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="11" y1="2" x2="2" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</li>
<li class="item" data-id="3">
<span class="item-text">タスク C</span>
<button class="del-btn" aria-label="削除">
<svg width="13" height="13" viewBox="0 0 13 13" fill="none">
<line x1="2" y1="2" x2="11" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="11" y1="2" x2="2" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</li>
</ul>
<div class="snackbar" id="snackbar" role="status" aria-live="polite" aria-atomic="true">
<span class="snackbar-msg" id="snackbarMsg">削除しました</span>
<button class="undo-btn" id="undoBtn">取り消す</button>
</div>
</div>