削除の確認ダイアログで、確かめの言葉を打つと削除のボタンが使えるようになる

<!-- 一覧の行。data-name が、削除のときに打ってもらう確かめの言葉になる -->
<ul class="projects">
  <li class="project" data-name="春の新生活フェア">
    <span class="project__thumb" data-tone="slate"></span>
    <span class="project__name">春の新生活フェア<small>公開中</small></span>
    <span class="project__meta">9月12日</span>
    <span class="project__meta">3人</span>
    <button class="project__delete" type="button" aria-label="「春の新生活フェア」を削除">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3" /></svg>
    </button>
  </li>
  <li class="project" data-name="店舗サイトのリニューアル">
    <span class="project__thumb" data-tone="sage"></span>
    <span class="project__name">店舗サイトのリニューアル<small>公開中</small></span>
    <span class="project__meta">9月20日</span>
    <span class="project__meta">6人</span>
    <button class="project__delete" type="button" aria-label="「店舗サイトのリニューアル」を削除">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3" /></svg>
    </button>
  </li>
  <li class="project" data-name="秋の新作キャンペーン">
    <span class="project__thumb" data-tone="greige"></span>
    <span class="project__name">秋の新作キャンペーン<small>公開中</small></span>
    <span class="project__meta">9月26日</span>
    <span class="project__meta">4人</span>
    <button class="project__delete" type="button" aria-label="「秋の新作キャンペーン」を削除">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3" /></svg>
    </button>
  </li>
  <li class="project" data-name="採用ページの改修">
    <span class="project__thumb" data-tone="rose"></span>
    <span class="project__name">採用ページの改修<small>公開中</small></span>
    <span class="project__meta">9月27日</span>
    <span class="project__meta">2人</span>
    <button class="project__delete" type="button" aria-label="「採用ページの改修」を削除">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3" /></svg>
    </button>
  </li>
  <li class="project" data-name="会員向けニュースレター">
    <span class="project__thumb" data-tone="lavender"></span>
    <span class="project__name">会員向けニュースレター<small>公開中</small></span>
    <span class="project__meta">9月28日</span>
    <span class="project__meta">5人</span>
    <button class="project__delete" type="button" aria-label="「会員向けニュースレター」を削除">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3" /></svg>
    </button>
  </li>
</ul>

<!-- showModal() で開く <dialog> には、焦点の閉じ込め・背面の締め出し・閉じたあとの焦点の戻しが付いてくる -->
<dialog class="confirm" aria-labelledby="confirm-title" aria-describedby="confirm-desc">
  <div class="confirm__scrim" data-confirm-cancel></div>
  <form class="confirm__panel" novalidate>
    <h2 class="confirm__title" id="confirm-title">プロジェクトを削除しますか？</h2>
    <p class="confirm__desc" id="confirm-desc">「<span data-confirm-name></span>」を削除すると、ページ・画像・分析のデータもすべて消え、元に戻せません。</p>
    <label class="confirm__label" for="confirm-input">削除するプロジェクトの名前を入力してください</label>
    <div class="confirm__field">
      <input class="confirm__input" id="confirm-input" type="text" autocomplete="off" spellcheck="false" aria-describedby="confirm-hint">
    </div>
    <!-- 3 つの文言は data-* に置き、状態に合わせて入れ替える -->
    <p class="confirm__hint" id="confirm-hint" aria-live="polite" data-idle="名前が一致すると、削除できるようになります" data-error="名前が一致しません" data-ok="名前が一致しました"></p>
    <div class="confirm__actions">
      <button class="confirm__button" type="button" data-confirm-cancel>キャンセル</button>
      <!-- disabled にすると押しても何も起きず、焦点も当たらない。aria-disabled にして、押されたら理由を見せる -->
      <button class="confirm__button confirm__remove" type="submit" aria-disabled="true">削除する</button>
    </div>
  </form>
</dialog>

<!-- 知らせ。role="status" の入れ物は隠さず、中の文を入れ替えて読み上げに届ける -->
<div class="toast" role="status" data-message="プロジェクトを削除しました">
  <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="11" /><path d="M7 12.5l3.2 3.2L17 9" /></svg>
  <span></span>
</div>

.projects, .confirm, .toast {
  --ink: #262626; /* 文字 */
  --mute: #6b6b6b; /* 小さい補足の文字 */
  --surface: #ffffff; /* ダイアログと知らせの地 */
  --line: rgba(38, 38, 38, 0.12); /* 罫線 */
  --danger: #c4553d; /* 押せるようになった「削除する」 */
  --danger-text: #a8432d; /* 小さいエラーの文字 */
  --ok: #4f8a64; /* 知らせの印 */
  --ok-text: #3f7352; /* 小さい成功の文字 */
  --idle: #c8c7c3; /* 押せない間のボタン */
  --scrim: rgba(17, 17, 17, 0.45); /* 後ろを暗くする幕 */
  color: var(--ink);
}

.projects { margin: 0; padding: 0; list-style: none; box-shadow: inset 0 1px 0 var(--line); }

/* 行の高さは GSAP が 0 まで畳む。はみ出しを切り、罫線は行の中に引く */
.project { display: flex; align-items: center; gap: 16px; height: 72px; overflow: hidden; box-shadow: inset 0 -1px 0 var(--line); }

.project__thumb { flex: none; width: 40px; height: 40px; border-radius: 4px; }
.project__thumb[data-tone="slate"] { background: #688297; }
.project__thumb[data-tone="sage"] { background: #739374; }
.project__thumb[data-tone="greige"] { background: #A28767; }
.project__thumb[data-tone="rose"] { background: #b27771; }
.project__thumb[data-tone="lavender"] { background: #877fa1; }
.project__name { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }
.project__name small { display: block; margin-top: 6px; color: var(--mute); font-size: 12px; font-weight: 400; }
.project__meta { flex: none; width: 120px; font-size: 14px; font-variant-numeric: tabular-nums; }

/* アイコンだけのボタンは線の丸 */
.project__delete {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0; border: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--ink);
  background: none; color: var(--ink);
  cursor: pointer;
}

.project__delete svg, .toast svg { fill: none; stroke: currentColor; stroke-width: 2.67; stroke-linecap: round; stroke-linejoin: round; }
.project__delete svg { width: 18px; height: 18px; }

/* dialog を画面いっぱいに広げ、幕とパネルを中に置く */
.confirm { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: none; overflow: clip; }
.confirm::backdrop { background: none; }
.confirm[open] { display: grid; place-items: center; }
.confirm__scrim { position: absolute; inset: 0; background: var(--scrim); }
html:has(.confirm[open]) { overflow: hidden; }

.confirm__panel { position: relative; box-sizing: border-box; width: min(520px, calc(100% - 32px)); padding: 32px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); word-break: auto-phrase; }

.confirm__title { margin: 0 0 12px; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.confirm__desc { margin: 0 0 24px; font-size: 14px; line-height: 1.7; letter-spacing: 0.04em; }
.confirm__label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.confirm__input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; letter-spacing: 0.02em; }
.confirm__input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
.confirm__field.is-error .confirm__input { box-shadow: inset 0 0 0 1px var(--danger); }
.confirm__hint { min-height: 13px; margin: 12px 0 24px; color: var(--mute); font-size: 13px; line-height: 1; letter-spacing: 0.04em; }
.confirm__hint[data-state="error"] { color: var(--danger-text); }
.confirm__hint[data-state="ok"] { color: var(--ok-text); }
.confirm__actions { display: flex; justify-content: flex-end; gap: 12px; }
.confirm__button { height: 48px; padding: 0 28px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ink); background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; }

/* 押せない間も焦点は当たる。押されたら欄を震わせて理由を見せる */
.confirm__remove { box-shadow: none; background: var(--danger); color: #ffffff; transition: background-color 0.25s; }
.confirm__remove[aria-disabled="true"] { background: var(--idle); cursor: not-allowed; }
.confirm button:focus-visible, .project__delete:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* 知らせは画面の下の中央（横の中央そろえは GSAP の xPercent）。入れ物は隠さず、濃さだけで出し入れする */
.toast {
  position: fixed;
  bottom: 32px; left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 20px; border-radius: 8px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.toast svg { width: 22px; height: 22px; color: #ffffff; }
.toast circle { fill: var(--ok); stroke: none; }
@media (max-width: 640px) { .project__meta { display: none; } }
@media (prefers-reduced-motion: reduce) { .confirm__remove { transition-duration: 0.01s; } }

import { gsap } from "gsap";

const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const SPEED = reduce ? 20 : 1; // 動きを減らす設定では、ほぼ一瞬で切り替える
const SHAKE = 5; // 震えの振れ幅（px）
const dialog = document.querySelector(".confirm");
const scrim = dialog.querySelector(".confirm__scrim");
const form = dialog.querySelector(".confirm__panel");
const input = form.querySelector(".confirm__input");
const field = form.querySelector(".confirm__field");
const hint = form.querySelector(".confirm__hint");
const remove = form.querySelector(".confirm__remove");
const toast = document.querySelector(".toast");
gsap.set(toast, { xPercent: -50 }); // 中央そろえは GSAP に持たせる（CSS の translate だと y と取り合う）
let row = null; // 削除しようとしている行
let motion, hideLater;

const matches = () => Boolean(row) && input.value.trim() === row.dataset.name;

// 文言は data-idle・data-error・data-ok から読む（HTML だけ直せば変わる）
function setHint(state) {
  hint.textContent = hint.dataset[state];
  hint.dataset.state = state;
  field.classList.toggle("is-error", state === "error");
}

function update() {
  remove.setAttribute("aria-disabled", String(!matches()));
  setHint(matches() ? "ok" : "idle");
}

function open(target) {
  row = target;
  dialog.querySelector("[data-confirm-name]").textContent = row.dataset.name;
  input.value = "";
  update();
  motion?.kill();
  dialog.showModal();
  input.focus();
  motion = gsap.timeline()
    .fromTo(scrim, { opacity: 0 }, { opacity: 1, duration: 0.3, ease: "none" }, 0)
    .fromTo(form, { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.4, ease: "power3.out" }, 0)
    .timeScale(SPEED);
}

function close(then) {
  motion?.kill();
  motion = gsap.timeline({ onComplete: () => { dialog.close(); then?.(); } })
    .to(form, { opacity: 0, y: 12, duration: 0.22, ease: "power2.in" }, 0)
    .to(scrim, { opacity: 0, duration: 0.28, ease: "none" }, 0)
    .timeScale(SPEED);
}

// 行は中身を先に消してから高さを畳み、下の行を詰める
function fold(target) {
  const next = target.nextElementSibling ?? target.previousElementSibling;
  next?.querySelector("button").focus(); // 消える行のボタンに焦点を残さない
  gsap.timeline({ onComplete: () => target.remove() })
    .to(target.children, { opacity: 0, duration: 0.2, ease: "none" })
    .to(target, { height: 0, duration: 0.45, ease: "power2.inOut" }, 0.1)
    .add(showToast, 0.45)
    .timeScale(SPEED);
}

function showToast() {
  toast.querySelector("span").textContent = toast.dataset.message;
  gsap.fromTo(toast, { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.35, ease: "power3.out" }).timeScale(SPEED);
  hideLater?.kill();
  // 見せておく時間は、動きを減らす設定でも縮めない
  hideLater = gsap.delayedCall(3, () => {
    gsap.to(toast, { opacity: 0, y: 16, duration: 0.25, ease: "power2.in", onComplete: () => (toast.querySelector("span").textContent = "") }).timeScale(SPEED);
  });
}

document.querySelectorAll(".project__delete").forEach((button) => {
  button.addEventListener("click", () => open(button.closest(".project")));
});
input.addEventListener("input", update);
dialog.querySelectorAll("[data-confirm-cancel]").forEach((node) => node.addEventListener("click", () => close()));

// Enter でも「削除する」でも届く。押せない間は送らず、欄を震わせて理由を見せる
form.addEventListener("submit", (event) => {
  event.preventDefault();
  if (!matches()) {
    setHint("error");
    if (!reduce) gsap.fromTo(field, { x: 0 }, { x: SHAKE, duration: 0.36, ease: (p) => (1 - p) * Math.sin(p * Math.PI * 6) });
    input.focus();
    return;
  }
  close(fold.bind(null, row));
});

// Esc は既定だとその場で消えるので、止めて同じ動きで閉じる
dialog.addEventListener("cancel", (event) => {
  event.preventDefault();
  close();
});
// Esc を続けて押すと、動きを待たずに閉じることがある。残った値はここで戻す
dialog.addEventListener("close", () => gsap.set([form, scrim], { clearProps: "opacity,transform" }));