HTML-Attribute 1.2.0

Fuege velin-*-Attribute in HTML hinzu; das Framework interpretiert sie und laedt Web Components oder CSS lazy nach - ohne doppelte Implementierungen. English: HTML attributes

Reifegrad

Dokumentiert als stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) ist getrennt und je nach Bereich als beta / foundation markiert.

Wann sinnvoll

Deklaratives HTML, das Web Components oder Motion lazy laedt, ohne eigenen Registrierungs-Code zu schreiben.
Registry mit registerAttribute(name, { enhance }) fuer projektspezifische Bridges erweitern.

Wann nicht

Keine undokumentierten velin-*-Attribute erfinden - zuerst die generierte Attribut-Referenz pruefen.
bootFromDOM(..., { attributes: true }) (oder bootAttributes) nicht auslassen und trotzdem Bridges erwarten.

Boot

import { bootFromDOM } from '@birdapi/velinstyle';
import { registerAttribute, listRegisteredAttributes } from '@birdapi/velinstyle/attributes';

registerAttribute('velin-my-widget', {
  enhance(el) {
    el.setAttribute('data-velin-component', 'velin-my-widget');
  },
});

await bootFromDOM(document, { attributes: true });
console.log(listRegisteredAttributes());

Bridge-Modell

bootAttributes() scannt nach registrierten Attributnamen, fuehrt enhance(el) genau einmal pro Element aus, startet danach initMotion() und stellt bei Bedarf ein globales <velin-announcer> sicher. Eigene Handler mit registerAttribute(name, { enhance }) registrieren. 27 Attribute sind eingebaut (siehe generierte Referenz).

Motion-Attribute

velin-reveal, velin-fade, velin-slide, velin-scale
velin-parallax, velin-hover, velin-stagger, velin-scroll, velin-anchor

Component-Bridges

Attribut	Laedt
`velin-modal`	`<velin-modal>`
`velin-tabs`	`<velin-tabs>`
`velin-accordion`	`<velin-accordion>`
`velin-tooltip="text"`	`<velin-tooltip>`
`velin-copy="text"`	`<velin-copy>`
`velin-counter`	`<velin-counter>`
`velin-notify`	Toast per `velin-toast-show`-Event
`velin-theme`	`data-velin-theme` oder `<velin-theme-toggle>`
`velin-progress`	`.velin-progress` oder Ring mit `ring`
`velin-search`	`<velin-search>`
`velin-scroll-top`	`<velin-scroll-top>` (Schwelle aus Attributwert)

Content-Helper

velin-code="html" - Codeblock + Copy-Button
velin-quote - gestaltetes Blockquote
velin-highlight - Inline-Highlight
velin-lazy - loading="lazy" + optionales Skeleton
velin-skeleton="text|avatar|image"
velin-loading, velin-grid

Deklaratives Scroll-to-top

velin-scroll-top auf <body> oder einem beliebigen Element setzen - ohne zusaetzliches Markup. Funktioniert mit bootFromDOM(document, { attributes: true }):

<body velin-scroll-top="400">
  ...
</body>

Siehe auch Scroll to top component.

Generierte Doku

Markdown pro Attribut wird mit velinstyle docs generate nach docs/generated/attributes/ erzeugt (inklusive velin-scroll-top.md). Mit npm run sync:generated in diese Site uebernehmen.