Password field

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="pw">Password</label>
  <tui-password-field>
    <input class="tui-password-field__input" id="pw" name="password" type="password"
           autocomplete="current-password" minlength="12" required>
    <button class="tui-password-field__key" type="button" data-peek></button>
  </tui-password-field>
  <span class="tui-hint">At least 12 characters.</span>
</div>

<!-- Another secret: say which, and the key says Show API key -->
<tui-password-field>
  <input class="tui-password-field__input" id="key" name="key" type="password" readonly value="sk_live_4f2a91c0d7">
  <button class="tui-password-field__key" type="button" data-peek data-what="API key"></button>
</tui-password-field>

import { peekKeyState } from '/kit/kit.mjs';

const field = document.querySelector('tui-password-field');
field.addEventListener('tui-peek', (e) => track(e.detail.shown));

field.shown = true;                    // open the shutter from code (quietly: no event, no announcement)
field.input.type;                      // 'text'
peekKeyState(true, 'API key');         // { type: 'text', legend: 'Hide', label: 'Hide API key', say: 'API key shown' }

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

• The field stays a native <input>, so password managers, autofill, validation and a form post all work as before.
• The key is a native button whose name says what pressing it does, “Show password” or “Hide password”, and its visible word is the first one of that name. It does not use aria-pressed, because its name already changes with the state.
• Showing and hiding are announced politely (“Password shown”); the password itself is never put in a live region.
• Pressing the key with the pointer does not take the focus from the field, and the caret and any selection are put back after the type changes, so nothing is lost mid-word. From the keyboard the focus stays on the key.
• The state is the shutter and the key down, and also the words on the key, so it never rests on one cue.
• On a phone the field is 48px tall with a 16px text size so it is not zoomed, and the key is 44px. The slide is 180ms and reduced motion turns it off.

The shutter is only drawing: a row of thin slats, each a dark cut and a lit lip, laid over the characters and let through between. The state it shows is the input’s type, which the script flips between password and text, so there is no second copy of the secret and nothing for a screen reader to read twice. The caret is saved before the flip and restored after it, and the key swallows the pointer’s focus change when the field has the focus. The well is the field’s, 38px high, with the key inset three pixels so its corner is the well’s less that gap.