E-Mail 1.2.0

The <velin-email> Komponente reveals an address on click or Tastatur activation — reduces casual scraper exposure while staying WCAG-friendly. English: Email

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Grundlage wo entsprechend angegeben.

Wann verwenden

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

Wann nicht verwenden

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 Formular-Zusammenfassung, not this Komponente.

Grundlagen

<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 Komponenten bundle, or via import '@birdapi/velinstyle/email'.

Attribut

Attribut	Hinweise
`value`	Klartext-E-Mail oder verschleierte Zeichenfolge, wenn `obfuscate` is set
`obfuscate`	`rot13`, or omit / other → decode with `atob` (base64)
`label`	Buttontext und `aria-label` before reveal (Standard: `E-Mail-Adresse anzeigen`)

CSS parts: reveal (Button), email (revealed Link). Property: email returns the decoded address.

Ereignisse

Ereignis	Detail
`velin-email-reveal`	`{ email }` — after the Nutzer reveals the address

Before reveal: focusable <Button type="Button"> with accessible name from label.
After reveal: mailto: Link inside part="email".
Die Mindest-Zielgröße folgt der 2.75rem-Touch-Empfehlung.

Vertragsstatus: bestanden.