Copy to Check

<button class="nuda-icon-copy" type="button" aria-label="Copy" aria-pressed="false" data-copy="">
  <svg class="nuda-icon-copy__svg" viewBox="0 0 24 24" aria-hidden="true">
    <g class="nuda-icon-copy__clip">
      <rect x="9" y="9" width="11" height="11" rx="2" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </g>
    <polyline class="nuda-icon-copy__check" points="6 12.5 10 16.5 18 8.5" />
  </svg>
</button>

/* Copy to Check
   Clipboard scales out as a checkmark draws in via stroke-dashoffset.
   GPU-only: transform + opacity + dashoffset. Customize: --icon-accent */

.nuda-icon-copy {
  --icon-accent: #e4ff54;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #09090b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fafafa;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}

.nuda-icon-copy:hover,
.nuda-icon-copy:focus-visible {
  border-color: rgba(228, 255, 84, 0.4);
  outline: none;
}

.nuda-icon-copy:focus-visible {
  box-shadow: 0 0 0 2px rgba(228, 255, 84, 0.5);
}

.nuda-icon-copy[aria-pressed="true"] { color: var(--icon-accent); }

.nuda-icon-copy__svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.nuda-icon-copy__clip {
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-origin: center;
  will-change: transform, opacity;
}

.nuda-icon-copy__check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  opacity: 0;
  transition: stroke-dashoffset 0.4s ease 0.1s, opacity 0.2s 0.1s;
}

.nuda-icon-copy[aria-pressed="true"] .nuda-icon-copy__clip {
  opacity: 0;
  transform: scale(0.5);
}

.nuda-icon-copy[aria-pressed="true"] .nuda-icon-copy__check {
  opacity: 1;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-icon-copy__clip,
  .nuda-icon-copy__check { transition: opacity 0.25s; }
}

/* Copy to Check — vanilla JS
   Copies data-copy text, shows the check, reverts after 1.6s. */

(function () {
  document.querySelectorAll(".nuda-icon-copy").forEach(function (btn) {
    btn.addEventListener("click", function () {
      if (btn.getAttribute("aria-pressed") === "true") return;
      var text = btn.getAttribute("data-copy") || "";
      if (navigator.clipboard && text) navigator.clipboard.writeText(text);
      btn.setAttribute("aria-pressed", "true");
      btn.setAttribute("aria-label", "Copied");
      setTimeout(function () {
        btn.setAttribute("aria-pressed", "false");
        btn.setAttribute("aria-label", "Copy");
      }, 1600);
    });
  });
})();