スタック型トースト

<button class="d09-02-02-btn">トーストを出す</button>
        <div class="d09-02-02-stack"></div>

.d09-02-02{flex-direction:column;gap:14px}
        .d09-02-02-btn{padding:11px 20px;border:none;border-radius:8px;background:#4f46e5;color:#fff;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px rgba(79,70,229,.3)}
        .d09-02-02-btn:active{transform:translateY(1px)}
        .d09-02-02-stack{position:absolute;left:0;right:0;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
        .d09-02-02-toast{display:flex;align-items:center;gap:9px;background:#1f2430;color:#fff;padding:10px 12px;border-radius:9px;font-size:13px;box-shadow:0 6px 18px rgba(0,0,0,.25);max-width:260px;width:100%;pointer-events:auto;animation:d262up .35s cubic-bezier(.2,.9,.3,1.3) both}
        .d09-02-02-toast svg{width:18px;height:18px;flex:none;stroke:#4ade80;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none}
        .d09-02-02-toast span{flex:1}
        .d09-02-02-toast button{border:none;background:none;color:#9aa2b1;cursor:pointer;font-size:16px;line-height:1;padding:0}
        .d09-02-02-toast.d09-02-02-out{animation:d262down .3s ease forwards}
        @keyframes d262up{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
        @keyframes d262down{to{opacity:0;transform:translateX(20px)}}

(function(){
        var root=document.getElementById('item-09-02-02');
        var stack=root.querySelector('.d09-02-02-stack');
        var n=0;
        function remove(t){t.classList.add('d09-02-02-out');setTimeout(function(){t.remove();},320);}
        root.querySelector('.d09-02-02-btn').addEventListener('click',function(){
          n++;
          var t=document.createElement('div');
          t.className='d09-02-02-toast';
          t.innerHTML='<svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-11"/></svg><span>項目'+n+' を追加しました</span><button aria-label="閉じる">&times;</button>';
          t.querySelector('button').addEventListener('click',function(){remove(t);});
          stack.appendChild(t);
          var items=stack.querySelectorAll('.d09-02-02-toast');
          if(items.length>4)remove(items[0]);
          setTimeout(function(){if(t.parentNode)remove(t);},3600);
        });
      })();