Email 1.2.2

The <velin-email> component reveals an address on click or keyboard activation — reduces casual scraper exposure while staying WCAG-friendly. Deutsch: Email De

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Public pages where you want a deliberate reveal step before showing a mailto: link.
Optional obfuscation of the stored value via obfuscate="rot13" or base64.

When not

Do not treat obfuscation as security — determined scrapers still win; it only raises the bar.
Do not put real production addresses in committed HTML if your pipeline scans for PII; use the Security guidance.
For form email inputs, use type="email" with Form summary, not this component.

Basic

<velin-email value="contact@example.com" label="Show email address"></velin-email>

<!-- Obfuscated value -->
<velin-email value="pbagnpg@rknzcyr.pbz" obfuscate="rot13" label="Show email"></velin-email>

Included in the main components bundle, or via import '@birdapi/velinstyle/email'.

Attributes

Attribute	Notes
`value`	Plain email, or obfuscated string when `obfuscate` is set
`obfuscate`	`rot13`, or omit / other → decode with `atob` (base64)
`label`	Button text and `aria-label` before reveal (default: `Show email address`)

CSS parts: reveal (button), email (revealed link). Property: email returns the decoded address.

Events

Event	Detail
`velin-email-reveal`	`{ email }` — after the user reveals the address

Before reveal: focusable <button type="button"> with accessible name from label.
After reveal: mailto: link inside part="email".
Minimum target size follows the 2.75rem touch guidance.

Contract status: pass.