Recording Timer

<div class="nuda-in2-rectimer" role="status" aria-live="polite">
  <span class="nuda-in2-rectimer__dot" aria-hidden="true"></span>
  <span class="nuda-in2-rectimer__label">REC</span>
  <span class="nuda-in2-rectimer__time">00:00</span>
</div>

/* Recording Timer — vanilla JS
   Counts elapsed mm:ss. The accessible name is refreshed
   every 10s so screen readers get progress without being spammed. */

(function () {
  document.querySelectorAll(".nuda-in2-rectimer").forEach(function (el) {
    var time = el.querySelector(".nuda-in2-rectimer__time");
    var seconds = 0;
    function fmt(s) {
      var m = Math.floor(s / 60);
      var r = s % 60;
      return String(m).padStart(2, "0") + ":" + String(r).padStart(2, "0");
    }
    el.setAttribute("aria-label", "Recording, " + fmt(seconds) + " elapsed");
    setInterval(function () {
      seconds++;
      time.textContent = fmt(seconds);
      if (seconds % 10 === 0) {
        el.setAttribute("aria-label", "Recording, " + fmt(seconds) + " elapsed");
      }
    }, 1000);
  });
})();

.nuda-in2-rectimer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #161616;
  border: 1px solid rgba(239,68,68,.35);
  border-radius: 99px;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 11px;
  color: #cfcfcf;
  font-variant-numeric: tabular-nums;
}

.nuda-in2-rectimer__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: _nuda-in2rectimer-blink 1.6s ease-in-out infinite;
}

.nuda-in2-rectimer__label {
  font-weight: 700;
  letter-spacing: .06em;
  color: #ef4444;
}

.nuda-in2-rectimer__time {
  color: #fafafa;
}

@keyframes _nuda-in2rectimer-blink {
  0%,100% {
    opacity: 1;
  }
  50% {
    opacity: .35;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-in2-rectimer__dot {
    animation: none !important;
    opacity: 1;
  }
}