Username Availability Check

<div class="nuda-fs2-username-check">
  <label for="fs2-uname" class="nuda-fs2-username-check__label">Username</label>
  <div class="nuda-fs2-username-check__field is-checking">
    <input id="fs2-uname" class="nuda-fs2-username-check__input" type="text"
           value="santi_dev" aria-describedby="fs2-uname-status">
    <span class="nuda-fs2-username-check__spinner" aria-hidden="true"></span>
    <svg class="nuda-fs2-username-check__ok" 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>
    <svg class="nuda-fs2-username-check__bad" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="3" stroke-linecap="round"
         stroke-linejoin="round" aria-hidden="true">
      <path d="M6 6 L18 18 M18 6 L6 18" />
    </svg>
  </div>
  <p id="fs2-uname-status" class="nuda-fs2-username-check__status" role="status" aria-live="polite">
    Checking availability…
  </p>
</div>
<!-- JS: on input (debounced) toggle .is-checking, then swap to .is-available or
     .is-taken once the async lookup resolves, and update the status text. -->

/* Username Availability Check — debounced async lookup simulation. */
(function () {
  var wrap = document.querySelector('.nuda-fs2-username-check');
  if (!wrap) return;
  var input = wrap.querySelector('.nuda-fs2-username-check__input');
  var field = wrap.querySelector('.nuda-fs2-username-check__field');
  var status = wrap.querySelector('.nuda-fs2-username-check__status');
  var timer;

  input.addEventListener('input', function () {
    clearTimeout(timer);
    field.classList.remove('is-available', 'is-taken');
    field.classList.add('is-checking');
    status.textContent = 'Checking availability…';

    timer = setTimeout(function () {
      var taken = input.value.trim().toLowerCase() === 'admin';
      field.classList.remove('is-checking');
      field.classList.add(taken ? 'is-taken' : 'is-available');
      status.textContent = taken ? 'That username is taken.' : 'Username is available.';
    }, 900);
  });
})();

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

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

.nuda-fs2-username-check__field {
  position: relative;
  display: flex;
  align-items: center;
}

.nuda-fs2-username-check__input {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 12px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  color: #fafafa;
  font-size: 13px;
  box-sizing: border-box;
  transition: border-color .2s;
}

.nuda-fs2-username-check__input:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
  border-color: #e4ff54;
}

.nuda-fs2-username-check__spinner,.nuda-fs2-username-check__ok,.nuda-fs2-username-check__bad {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  opacity: 0;
  transition: transform .25s,opacity .2s;
}

.nuda-fs2-username-check__spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: #e4ff54;
}

.nuda-fs2-username-check__ok {
  width: 18px;
  height: 18px;
  color: #7be08a;
}

.nuda-fs2-username-check__bad {
  width: 16px;
  height: 16px;
  color: #ff8080;
}

.nuda-fs2-username-check__field.is-checking .nuda-fs2-username-check__spinner {
  transform: translateY(-50%) scale(1);
  opacity: 1;
  animation: _nuda-fs2usernamecheck-spin 1s linear infinite;
}

.nuda-fs2-username-check__field.is-available .nuda-fs2-username-check__ok {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}

.nuda-fs2-username-check__field.is-taken .nuda-fs2-username-check__bad {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}

.nuda-fs2-username-check__field.is-available .nuda-fs2-username-check__input {
  border-color: #7be08a;
}

.nuda-fs2-username-check__field.is-taken .nuda-fs2-username-check__input {
  border-color: #ff8080;
}

.nuda-fs2-username-check__status {
  margin: 0;
  font-size: 11px;
  color: #777;
}

@keyframes _nuda-fs2usernamecheck-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-fs2-username-check__field.is-checking .nuda-fs2-username-check__spinner {
    animation: none !important;
  }
}