Copy-to-Clipboard Field

<div class="nuda-fs2-copy-field">
  <label for="fs2-cf-link" class="nuda-fs2-copy-field__label">Share link</label>
  <div class="nuda-fs2-copy-field__row">
    <input id="fs2-cf-link" class="nuda-fs2-copy-field__input" type="text" readonly
           value="https://nuda.dev/s/8f2ac1">
    <button type="button" class="nuda-fs2-copy-field__btn" aria-label="Copy link">
      <svg class="nuda-fs2-copy-field__icon-copy" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" stroke-width="2" stroke-linecap="round"
           stroke-linejoin="round" aria-hidden="true">
        <rect x="9" y="9" width="12" height="12" rx="2" />
        <path d="M5 15V5a2 2 0 0 1 2-2h10" />
      </svg>
      <svg class="nuda-fs2-copy-field__icon-check" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" stroke-width="3" stroke-linecap="round"
           stroke-linejoin="round" aria-hidden="true">
        <path d="M5 12 L10 17 L20 7" />
      </svg>
    </button>
  </div>
  <span class="nuda-fs2-copy-field__sr" role="status" aria-live="polite"></span>
</div>

/* Copy-to-Clipboard Field — copies the input value, flashes a confirm state. */
(function () {
  var wrap = document.querySelector('.nuda-fs2-copy-field');
  if (!wrap) return;
  var input = wrap.querySelector('.nuda-fs2-copy-field__input');
  var btn = wrap.querySelector('.nuda-fs2-copy-field__btn');
  var sr = wrap.querySelector('.nuda-fs2-copy-field__sr');
  var timer;

  btn.addEventListener('click', function () {
    navigator.clipboard.writeText(input.value).then(function () {
      clearTimeout(timer);
      btn.classList.add('is-copied');
      sr.textContent = 'Link copied to clipboard.';
      timer = setTimeout(function () { btn.classList.remove('is-copied'); }, 1800);
    });
  });
})();

.nuda-fs2-copy-field {
  width: 100%;
  max-width: 270px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: ui-sans-serif,system-ui,sans-serif;
}

.nuda-fs2-copy-field__label {
  font-size: 12px;
  font-weight: 600;
  color: #cfcfcf;
}

.nuda-fs2-copy-field__row {
  display: flex;
  gap: 8px;
}

.nuda-fs2-copy-field__input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  color: #a0a0a8;
  font-size: 12px;
  box-sizing: border-box;
}

.nuda-fs2-copy-field__btn {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: #1e1e1e;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  color: #cfcfcf;
  cursor: pointer;
  transition: background .2s,border-color .2s;
}

.nuda-fs2-copy-field__btn:hover {
  background: #242424;
}

.nuda-fs2-copy-field__btn:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

.nuda-fs2-copy-field__icon-copy,.nuda-fs2-copy-field__icon-check {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
  transition: transform .25s,opacity .2s;
}

.nuda-fs2-copy-field__icon-check {
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
  color: #7be08a;
}

.nuda-fs2-copy-field__btn.is-copied {
  border-color: #7be08a;
}

.nuda-fs2-copy-field__btn.is-copied .nuda-fs2-copy-field__icon-copy {
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
}

.nuda-fs2-copy-field__btn.is-copied .nuda-fs2-copy-field__icon-check {
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
}

.nuda-fs2-copy-field__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-fs2-copy-field__icon-copy,.nuda-fs2-copy-field__icon-check {
    transition: opacity .12s linear;
  }
}