下書き自動保存インジケータ付きフォーム

<div class="d06-11-09-wrap">
          <textarea class="d06-11-09-input" rows="3" placeholder="コメントを入力…下書きは自動保存されます"></textarea>
          <div class="d06-11-09-footer">
            <div class="d06-11-09-status">
              <span class="d06-11-09-dot"></span>
              <span class="d06-11-09-text">下書きはまだありません</span>
            </div>
            <button class="d06-11-09-clear" type="button">下書きを破棄</button>
          </div>
        </div>

.d06-11-09-wrap{width:100%;max-width:240px;display:flex;flex-direction:column;gap:8px}
        .d06-11-09-input{border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;font-size:12px;resize:none;font-family:inherit}
        .d06-11-09-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
        .d06-11-09-status{display:flex;align-items:center;gap:6px;font-size:11px;color:#9ca3af}
        .d06-11-09-dot{width:7px;height:7px;border-radius:50%;background:#d1d5db;transition:background .2s;flex:none}
        .d06-11-09-dot.d06-11-09-saving{background:#f59e0b;animation:d1309pulse 1s ease-in-out infinite}
        .d06-11-09-dot.d06-11-09-saved{background:#22c55e;animation:none}
        @keyframes d1309pulse{0%,100%{opacity:1}50%{opacity:.3}}
        .d06-11-09-clear{border:none;background:none;color:#9ca3af;font-size:11px;cursor:pointer;padding:0;white-space:nowrap}

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-11-09');
          var input = root.querySelector('.d06-11-09-input');
          var dot = root.querySelector('.d06-11-09-dot');
          var text = root.querySelector('.d06-11-09-text');
          var clearBtn = root.querySelector('.d06-11-09-clear');
          var saveTimer = null, doneTimer = null;
          input.addEventListener('input', function(){
            clearTimeout(saveTimer);
            clearTimeout(doneTimer);
            dot.className = 'd06-11-09-dot';
            if(!input.value.trim()){ text.textContent = '下書きはまだありません'; return; }
            text.textContent = '入力中…';
            saveTimer = setTimeout(function(){
              dot.className = 'd06-11-09-dot d06-11-09-saving';
              text.textContent = '下書きを保存中…';
              doneTimer = setTimeout(function(){
                dot.className = 'd06-11-09-dot d06-11-09-saved';
                text.textContent = '下書きを保存しました ✓';
              }, 800);
            }, 700);
          });
          clearBtn.addEventListener('click', function(){
            clearTimeout(saveTimer);
            clearTimeout(doneTimer);
            input.value = '';
            dot.className = 'd06-11-09-dot';
            text.textContent = '下書きはまだありません';
          });
        })();