Tumbler lock

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<div class="tui-field">
  <label class="tui-label" for="otp">Sign-in code</label>
  <tui-tumbler length="6"
      data-right="Signed in"
      data-wrong="That code didn’t match. Check the latest email.">
    <input id="otp" name="code">
  </tui-tumbler>
</div>

<!-- A device PIN, and a recovery code with letters -->
<tui-tumbler length="4" label="Meter PIN"><input name="pin"></tui-tumbler>
<tui-tumbler length="8" charset="alphanumeric" label="Recovery code"><input name="recovery"></tui-tumbler>

import '/kit/kit.mjs';   // defines <tui-tumbler>

const lock = document.querySelector('tui-tumbler');

// Every wheel set by typing, paste or autofill (or Enter): hand it the real check.
// Resolve true or false; reject only when the code could not be checked.
lock.addEventListener('verify', (e) => {
  e.detail.wait(fetch('/auth/code', { method: 'POST', body: new URLSearchParams({ code: e.detail.value }) })
    .then((r) => (r.ok ? true : r.status === 401 ? false : Promise.reject(new Error('Server busy, try again')))));
});

// Or check it yourself.
if (await lock.check(api.verify(lock.value))) location.assign('/runs');

Needs kit.css and kit.mjs. How to install the kit.

• One labelled text input, not a spinbutton per wheel: SMS autofill, WebOTP and password managers fill a single autocomplete="one-time-code" field, and paste lands whole; split into six they fill the first box or nothing. A screen reader meets one edit field (“Sign-in code, 6 digits”) and hears each character as it is typed, instead of six stops.
• The wheels, the bar and the notches are the input’s picture (aria-hidden). ↑/↓ turning a wheel is an extra; typing does everything.
• The lamp always has words beside it, in a polite live region the input points to with aria-describedby: “Checking…”, “Code accepted”, “That code didn’t match. Type it again.” A wrong code sets aria-invalid until the next character.
• While checking and once right the input is read-only, not disabled, so focus stays on it. A required lock that is not full says how many are missing as its validity message.
• Reduced motion drops the rolling, the shake, the drop and the settle: the wheels jump to their characters, the bar is down or up, the lamp and the words carry every state.

One custom element around a real input, which lies transparent over the wheels and takes every key, paste and autofill. Each wheel is an eleven-flat drum, a blank then 0–9 (letters ride the same drum past the window), drawn as five flats round the read line, each placed by its angle alone: translateY(sin a · r) scaleY(cos a), so the figures foreshorten as they roll over and under. The light is a separate fixed layer over the drum: occlusion under the slot’s walls, a band of the room’s brightness above the read line and the dark floor below it (chrome in aluminium, anodised black in graphite) so the figures pass through the reflection and it never turns with them. The slot’s walls are drawn over the wheels, so the upper wall shades their tops. The locking bar and its teeth rest on the rims; on a right code they drop 4px into notches and the drums settle 1.5px under them. A wrong code shakes the bank, then unwinds every wheel downward to blank, right to left.