Kopieren 1.2.0

Die <velin-copy> Web Component kopiert Text in die Zwischenablage und zeigt kurz einen Erfolgszustand. Nutze sie neben Codebloecken, API-Tastes oder Share-Links. English

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

Wann verwenden

Ein-Klick-Kopieren eines Werts (API-Keys, Snippets, Codes) mit <velin-copy>.
Wenn Zwischenablage-Feedback neben dem zu kopierenden Inhalt erscheinen soll.

Wann nicht verwenden

Massenexport oder Datei-Herunterladen: verwende einen Herunterladen-Link oder eine App-Aktion.
Inhalte bearbeiten: dies kopiert nur und oeffnet keinen Editor.

Grundlagen

npm install @birdapi/velinstyle

<velin-copy value="npm install @birdapi/velinstyle" label="Kopieren"></velin-copy>

Alternativ setzen Sie text (Alias) oder data-source on the element, or copy from a nearby element id via data-source="#copyDemoText".

API note: <velin-copy> reads value / text (or data-source). Do not wrap a child button with data-velin-copy — that attribute pattern is not the Web Component API.

Attribut

Attribut	Hinweise
`value` / `text`	String, der beim Klick kopiert wird (erster Treffer gewinnt)
`label`	Optional sichtbares Label neben dem Icon
`data-source`	CSS-Selektor; kopiert `textContent` des gefundenen Nodes

Ereignisse

Listen for velin-copied (bubbles) — detail.value contains the copied string.

document.querySelector('velin-copy').addEventListener('velin-copied', (e) => {
  console.log('Copied', e.detail.value);
});

Declarative twin: velin-copy HTML attribute — see HTML attributes.

Nativer button mit aria-label (wechselt kurz zu "Kopiert").
Mindest-Touch-Ziel 44 x 44 px; Fokus-Ring ueber :focus-visible.