Secret from @prepared911/ui/secret masks sensitive values (tokens, keys, phone numbers) while offering a toggle to reveal, copy, or regenerate them. The primitive wires the visibility toggle and copy action; your job is to label the field, announce state changes, and keep the reveal action obvious.
What the component handles
Visibility toggle. The reveal button toggles between masked and unmasked states and exposes aria-pressed.
Copy action. The copy button copies the underlying value and optionally fires a status message.
Masked output. Dots or fixed-width placeholder characters render by default.
What you must provide
Field label. A visible label ("API key", "Webhook secret") or an aria-label when none fits.
Revealed state announcement. When the value is revealed, the rotor should announce the change—use the toggle's pressed state, and pair a copy action with a Snackbar or live-region confirmation.
Destructive regenerate warnings. If regenerating a secret invalidates existing tokens, surface the consequence in a Banner before confirming.
Keyboard behavior
Tab / Shift+Tab move between the field, reveal button, and copy button.
Enter / Space activate the focused button.
The masked input accepts typing like a normal text field when editable.
Semantics and roles
Reveal button → role="button" with aria-pressed.
Copy button → role="button" with a descriptive label ("Copy API key").
Input → standard text or password input depending on whether the value is user-editable.
Screen reader announcements
Copy confirmations should use a polite live region ("API key copied").
When a value is regenerated, announce the new state ("Secret regenerated; previous value invalidated").
Known caveats
Revealed secrets in shoulder-surfing contexts. Default to masked; auto-remask on blur or after a timeout for session safety.
Hidden copy buttons. Don't hide copy behind hover-only reveal; users on touch devices or assistive tech can't discover it.