Password Meter

<!-- Password Meter — bar fills (scaleX) and shifts color by strength -->
<div class="nuda-pwd-meter" data-strength="0">
  <input class="nuda-pwd-meter__input" type="password" placeholder="Password" />
  <span class="nuda-pwd-meter__track">
    <span class="nuda-pwd-meter__fill"></span>
  </span>
</div>

/* ── Password Meter ──────────────────────────────────────────
   data-strength (0–3) drives both the scaleX fill and the color.
   ──────────────────────────────────────────────────────────── */
.nuda-pwd-meter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 240px;
}

.nuda-pwd-meter__input {
  width: 100%;
  padding: 10px 14px;
  background: #0c0c10;
  color: #fafafa;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.25s ease;
}

.nuda-pwd-meter__input:focus { border-color: #e4ff54; }

.nuda-pwd-meter__track {
  position: relative;
  height: 6px;
  border-radius: 99px;
  background: #2a2a32;
  overflow: hidden;
}

.nuda-pwd-meter__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: left;
  background: #ff5e7a;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), background 0.35s ease;
}

.nuda-pwd-meter[data-strength="1"] .nuda-pwd-meter__fill { transform: scaleX(0.34); background: #ff5e7a; }
.nuda-pwd-meter[data-strength="2"] .nuda-pwd-meter__fill { transform: scaleX(0.67); background: #ffb45e; }
.nuda-pwd-meter[data-strength="3"] .nuda-pwd-meter__fill { transform: scaleX(1); background: #e4ff54; }

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-pwd-meter__fill,
  .nuda-pwd-meter__input { transition: none; }
}

/* ── Password Meter — vanilla JS ─────────────────────────────
   Scores the password and sets data-strength (0–3) on the wrapper.
   ──────────────────────────────────────────────────────────── */
(function () {
  document.querySelectorAll(".nuda-pwd-meter").forEach(function (meter) {
    var input = meter.querySelector(".nuda-pwd-meter__input");
    if (!input) return;
    input.addEventListener("input", function () {
      var v = input.value;
      var s = 0;
      if (v.length >= 6) s++;
      if (/[A-Z]/.test(v) || /[0-9]/.test(v)) s++;
      if (/[^A-Za-z0-9]/.test(v) && v.length >= 10) s++;
      meter.setAttribute("data-strength", String(s));
    });
  });
})();