Trash Lid Lift

<button class="nuda-ai2-trash-lift" type="button" aria-label="Delete item" aria-pressed="false">
  <svg class="nuda-ai2-trash-lift__svg" viewBox="0 0 24 24" aria-hidden="true">
    <g class="nuda-ai2-trash-lift__lid">
      <path d="M3 6h18" />
      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
    </g>
    <path class="nuda-ai2-trash-lift__body" d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
    <line class="nuda-ai2-trash-lift__stripe" x1="10" y1="11" x2="10" y2="17" />
    <line class="nuda-ai2-trash-lift__stripe" x1="14" y1="11" x2="14" y2="17" />
  </svg>
</button>

/* Trash Lid Lift — vanilla JS
   Marks deleted, shows the emptied can, reverts after 1.4s. */

(function () {
  document.querySelectorAll(".nuda-ai2-trash-lift").forEach(function (btn) {
    btn.addEventListener("click", function () {
      if (btn.getAttribute("aria-pressed") === "true") return;
      btn.setAttribute("aria-pressed", "true");
      btn.setAttribute("aria-label", "Deleted");
      setTimeout(function () {
        btn.setAttribute("aria-pressed", "false");
        btn.setAttribute("aria-label", "Delete item");
      }, 1400);
    });
  });
})();

.nuda-ai2-trash-lift {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #fafafa;
  cursor: pointer;
  transition: border-color .25s,color .25s;
}

.nuda-ai2-trash-lift:hover,.nuda-ai2-trash-lift:focus-visible {
  border-color: rgba(228,255,84,.4);
  outline: none;
}

.nuda-ai2-trash-lift:focus-visible {
  box-shadow: 0 0 0 2px rgba(228,255,84,.5);
}

.nuda-ai2-trash-lift[aria-pressed="true"] {
  color: #e4ff54;
}

.nuda-ai2-trash-lift__svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.nuda-ai2-trash-lift__lid {
  transform-origin: 4px 6px;
  transition: transform .35s cubic-bezier(.4,.2,.2,1);
}

.nuda-ai2-trash-lift__body {
  transition: transform .3s cubic-bezier(.4,.2,.2,1);
  transform-origin: 12px 21px;
}

.nuda-ai2-trash-lift__stripe {
  transition: opacity .25s,transform .3s cubic-bezier(.4,.2,.2,1);
  transform-origin: center;
}

.nuda-ai2-trash-lift[aria-pressed="true"] .nuda-ai2-trash-lift__lid {
  transform: translateY(-2px) rotate(-28deg);
}

.nuda-ai2-trash-lift[aria-pressed="true"] .nuda-ai2-trash-lift__body {
  transform: scaleY(.92);
}

.nuda-ai2-trash-lift[aria-pressed="true"] .nuda-ai2-trash-lift__stripe {
  opacity: 0;
  transform: translateY(3px);
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ai2-trash-lift__lid,.nuda-ai2-trash-lift__body,.nuda-ai2-trash-lift__stripe {
    transition: opacity .25s;
  }
}