Refresh Spin

<button class="nuda-ai2-refresh-spin" type="button" aria-label="Refresh">
  <svg class="nuda-ai2-refresh-spin__svg" viewBox="0 0 24 24" aria-hidden="true">
    <g class="nuda-ai2-refresh-spin__glyph">
      <polyline points="23 4 23 10 17 10" />
      <polyline points="1 20 1 14 7 14" />
      <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
    </g>
  </svg>
  <span class="nuda-ai2-refresh-spin__status" aria-live="polite"></span>
</button>

/* Refresh Spin — vanilla JS
   One-shot rotation on click; announces "Refreshed" via aria-live. */

(function () {
  document.querySelectorAll(".nuda-ai2-refresh-spin").forEach(function (btn) {
    btn.addEventListener("click", function () {
      if (btn.classList.contains("nuda-ai2-refresh-spin--active")) return;
      btn.classList.add("nuda-ai2-refresh-spin--active");
      var status = btn.querySelector(".nuda-ai2-refresh-spin__status");
      if (status) status.textContent = "Refreshed";
      setTimeout(function () {
        btn.classList.remove("nuda-ai2-refresh-spin--active");
        if (status) status.textContent = "";
      }, 650);
    });
  });
})();

.nuda-ai2-refresh-spin {
  position: relative;
  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-refresh-spin:hover,.nuda-ai2-refresh-spin:focus-visible {
  border-color: rgba(228,255,84,.4);
  outline: none;
}

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

.nuda-ai2-refresh-spin--active {
  color: #e4ff54;
}

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

.nuda-ai2-refresh-spin__glyph {
  transform-origin: 12px 12px;
}

.nuda-ai2-refresh-spin--active .nuda-ai2-refresh-spin__glyph {
  animation: _nuda-ai2refresh-spin .6s cubic-bezier(.4,.2,.2,1);
}

.nuda-ai2-refresh-spin__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@keyframes _nuda-ai2refresh-spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ai2-refresh-spin--active .nuda-ai2-refresh-spin__glyph {
    animation: none !important;
  }
}