Sicheres Feld 1.2.0

Nur Demo. Clientseitiges Encoding ist keine Verschlüsselung.

Optionales clientseitiges Encoding für Formularfelder über <velin-secure-field> — a transport helper only. TLS and server-side crypto remain required in production. English: Sicheres Feld

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

Wann verwenden

Demo or prototype flows that need a labelled input emitting an encoded payload on change.
Opt-in via the @birdapi/velinstyle/secure subpath when you deliberately keep it out of the default bundle.

Wann nicht

Behandle Client-Encoding nie als Verschlüsselung, Passwortspeicher oder Secret Management.
Nutze es nicht statt HTTPS, CSRF-Schutz oder Servervalidierung.
Prefer ordinary .velin-form-control inputs for normal forms; pair errors with Formularzusammenfassung.

Nur Demo. Client-side encoding is not encryption. Never store passwords or API keys in the browser.

Beispiel

<velin-secure-field type="email" name="contact" label="Email" autocomplete="email"></velin-secure-field>

<script type="module">
  import '@birdapi/velinstyle/secure';
</script>

Not in the default IIFE bundle — import the ./secure Package-Export, um das Hauptbundle klein zu halten. Standard mode ist aes-gcm when Web Crypto is available; otherwise the payload falls back to base64 encoding.

Attribute

Attribut	Standard	Hinweise
`type`	sanitisierter Input-Typ	Passed to the inner `<input>`
`name`	`secure`	Included in event `detail.name`
`label`	`Secure field`	Sichtbarer Labeltext
`mode`	`aes-gcm`	Encoding-Modus für die Payload
`autocomplete`	`off`	Forwarded to the input

CSS part: input.

Events

Event	Detail
`velin-secure-submit`	`{ name, payload }` — fired on input `change`

Native <label for> association with the shadowed textbox (part="input").
Die Focus-visible-Outline nutzt das Focus-Token des Frameworks.
Hilfetext unter dem Feld weist darauf hin, dass Encoding nur Demo ist.

Contract-Status: pass.