OTP Input

---
/**
 * OtpInput — a one-time code in cells, zero JS. **One** native input, not
 * one per digit: paste, SMS autofill (`autocomplete="one-time-code"`),
 * screen readers and Backspace all work only in the single-input pattern.
 * The cells are server-rendered boxes under the input; a monospace font with
 * tabular figures, a letter-spacing of one cell minus one character and a
 * matching start padding put every glyph in the middle of its cell, and the
 * caret lands at the front of the next one. The wrapper clips the trailing
 * spacing so no seventh cell appears; the focus ring is drawn on the wrapper
 * through :focus-within so it is never clipped. Full and valid → the check
 * draws itself; `:user-invalid` tints the cells only after the reader has
 * been there. Every attribute you pass goes to the input. The field is
 * left to right on any page, since the glyphs have to meet their cells. A
 * code pasted with spaces or dashes ("123 456") is cut at `length`
 * characters: stripping them needs a script, and this component has none.
 */
import type { HTMLAttributes } from 'astro/types';

interface Props extends Omit<HTMLAttributes<'input'>, 'type' | 'size' | 'maxlength' | 'pattern' | 'inputmode'> {
  /** Number of characters. */
  length?: number;
  /** Digits only (numeric keyboard, \d pattern) or letters and digits. */
  charset?: 'numeric' | 'alphanumeric';
  name?: string;
  /** Visible label, rendered as <label for>. Without it, pass aria-label. */
  label?: string;
  /** Placeholder glyph per cell; the attribute is what :placeholder-shown reads, so it is always set. */
  placeholder?: string;
  /** Cell width, any CSS length; the height and the font follow. */
  cell?: string;
  /** Gap between cells. */
  gap?: string;
  /** The input's id and the label's for. Unset, unique per render. */
  id?: string;
}

const { length = 6, charset = 'numeric', name = 'code', label, placeholder, cell = '2.5rem', gap = '0.5rem', id, class: className, style, ...rest } = Astro.props;
const n = Math.max(1, Math.min(12, Math.round(length)));
// unique per render, not per name: a sign-in form and a dialog can both carry a field named "code" (the VanishInput rule)
const inputId = id ?? `ma-otp-${name}-${Math.random().toString(36).slice(2, 7)}`;
const pattern = charset === 'numeric' ? `\\d{${n}}` : `[A-Za-z0-9]{${n}}`;
const vars = [`--ma-otp-n:${n}`, `--ma-otp-cell:${cell}`, `--ma-otp-gap:${gap}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
const ph = placeholder ?? '•'.repeat(n);
---

{label && <label class="ma-otp__label" for={inputId}>{label}</label>}
<span class:list={['ma-otp', className]} style={vars}>
  <span class="ma-otp__field">
  <span class="ma-otp__cells" aria-hidden="true">{Array.from({ length: n }).map(() => <i></i>)}</span>
  <input
    id={inputId}
    class="ma-otp__input"
    type="text"
    name={name}
    inputmode={charset === 'numeric' ? 'numeric' : 'text'}
    autocomplete="one-time-code"
    autocapitalize="off"
    autocorrect="off"
    spellcheck="false"
    maxlength={n}
    pattern={pattern}
    placeholder={ph}
    {...rest}
  />
  </span>
  <svg class="ma-otp__check" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7" pathLength="1" /></svg>
</span>

<style is:global>
  @layer components {
    :where(.ma-otp) {
      --ma-otp-font: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
      --ma-otp-h: calc(var(--ma-otp-cell) * 1.2);
      position: relative;
      display: inline-block;
      vertical-align: middle;
    }
    :where(.ma-otp__field) {
      /* the cells and the glyphs meet only left to right: on a right-to-left page the text would start at the far end,
         one letter-spacing off every cell. A code is read in Latin order there too */
      direction: ltr;
      display: inline-grid;
      /* the input's trailing letter-spacing would add a phantom cell: the box is exactly n cells and n − 1 gaps */
      inline-size: calc(var(--ma-otp-n) * var(--ma-otp-cell) + (var(--ma-otp-n) - 1) * var(--ma-otp-gap));
      block-size: var(--ma-otp-h);
      border-radius: 0.5em;
      overflow: clip;
      vertical-align: middle;
    }
    :where(.ma-otp__label) {
      display: block;
      margin-block-end: 0.5em;
      font-size: 0.875em;
    }
    :where(.ma-otp__cells) {
      grid-area: 1 / 1;
      display: flex;
      gap: var(--ma-otp-gap);
      pointer-events: none;
    }
    :where(.ma-otp__cells > i) {
      flex: none;
      inline-size: var(--ma-otp-cell);
      block-size: 100%;
      border: 1px solid var(--ma-edge);
      border-radius: 0.45em;
      background: var(--ma-panel);
      transition:
        border-color var(--ma-duration-fast) var(--ma-ease-out),
        background-color var(--ma-duration-fast) var(--ma-ease-out);
    }
    :where(.ma-otp__input) {
      /* the field: transparent over the cells; every glyph sits in the middle of its cell through spacing alone. One cell
         wider than the box, which clips it: with the last character typed, the caret sits past the box's end, and an input
         exactly as wide scrolled to show it, which moved every digit off its cell and the first out of sight */
      grid-area: 1 / 1;
      inline-size: calc(100% + var(--ma-otp-cell));
      block-size: 100%;
      margin: 0;
      padding: 0 0 0 calc((var(--ma-otp-cell) - 1ch) / 2);
      border: 0;
      background: transparent;
      color: inherit;
      font: 500 calc(var(--ma-otp-cell) * 0.5) / 1 var(--ma-otp-font);
      font-variant-numeric: tabular-nums;
      letter-spacing: calc(var(--ma-otp-cell) + var(--ma-otp-gap) - 1ch);
      text-transform: uppercase;
      caret-color: var(--ma-ink);
      outline: none;
      appearance: none;
      -webkit-appearance: none;
    }
    :where(.ma-otp__input)::placeholder {
      color: color-mix(in srgb, var(--ma-ink) 28%, transparent);
      opacity: 1;
    }
    :where(.ma-otp__input:disabled) {
      cursor: not-allowed;
      opacity: 0.6;
    }
    :where(.ma-otp__input:read-only) {
      caret-color: transparent;
    }
    /* focus: on the field's box, outside the clip; one cell at a time is not known without a script */
    :where(.ma-otp__field:focus-within) {
      outline: 2px solid var(--ma-ink);
      outline-offset: 3px;
    }
    :where(.ma-otp:has(.ma-otp__input:focus) .ma-otp__cells > i) {
      border-color: color-mix(in srgb, var(--ma-ink) 45%, transparent);
    }
    /* full and valid: the cells go ink-edged and the check draws */
    :where(.ma-otp:has(.ma-otp__input:valid:not(:placeholder-shown)) .ma-otp__cells > i) {
      border-color: var(--ma-ink);
    }
    /* the red is a hook: on a coloured ground a caller points --ma-otp-invalid at a red that keeps 3 : 1 there */
    :where(.ma-otp:has(.ma-otp__input:user-invalid) .ma-otp__cells > i) {
      border-color: var(--ma-otp-invalid, #e0563f);
      background: color-mix(in srgb, var(--ma-otp-invalid, #e0563f) 8%, var(--ma-panel));
    }
    :where(.ma-otp:has(.ma-otp__input:disabled) .ma-otp__cells > i),
    :where(.ma-otp:has(.ma-otp__input:disabled) .ma-otp__cells > i) {
      transition: none;
      background: color-mix(in srgb, var(--ma-ink) 6%, var(--ma-panel));
    }
    /* the check: beside the field, never over the last digit */
    :where(.ma-otp__check) {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 100%;
      inline-size: calc(var(--ma-otp-cell) * 0.55);
      block-size: calc(var(--ma-otp-cell) * 0.55);
      margin-inline-start: calc(var(--ma-otp-gap) * 1.2);
      translate: 0 -50%;
      fill: none;
      stroke: var(--ma-ink);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
      opacity: 0;
    }
    :where(.ma-otp__check path) {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      transition: stroke-dashoffset var(--ma-duration-fast) var(--ma-ease-in);
    }
    :where(.ma-otp:has(.ma-otp__input:valid:not(:placeholder-shown)) .ma-otp__check) {
      opacity: 1;
    }
    :where(.ma-otp:has(.ma-otp__input:valid:not(:placeholder-shown)) .ma-otp__check path) {
      stroke-dashoffset: 0;
      transition: stroke-dashoffset var(--ma-duration) var(--ma-ease);
    }
    @media (forced-colors: active) {
      :where(.ma-otp__cells > i) {
        border-color: ButtonText;
        background: Canvas;
      }
      :where(.ma-otp:has(.ma-otp__input:valid:not(:placeholder-shown)) .ma-otp__cells > i) {
        border-color: Highlight;
      }
      :where(.ma-otp__check) {
        stroke: Highlight;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-otp__cells > i),
      :where(.ma-otp__check path) {
        transition: none;
      }
    }
  }
</style>