HTML attributes 0.9.0 extension

Add velin-* attributes in HTML; the framework interprets them and lazy-loads Web Components or CSS — no duplicate implementations.

Bridge model

bootAttributes() scans for registered attribute names, runs enhance(el) once per element, then initMotion() and ensures a global <velin-announcer> when needed. Register custom handlers with registerAttribute(name, { enhance }). 27 attributes are built in (see generated reference).

Motion attributes

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

Component bridges

Attribute	Loads
`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 via `velin-toast-show` event
`velin-theme`	`data-velin-theme` or `<velin-theme-toggle>`
`velin-progress`	`.velin-progress` or ring with `ring`
`velin-search`	`<velin-search>`
`velin-scroll-top`	`<velin-scroll-top>` (threshold from attribute value)

Content helpers

velin-code="html" — code block + copy button
velin-quote — styled blockquote
velin-highlight — inline highlight
velin-lazy — loading="lazy" + optional skeleton
velin-skeleton="text|avatar|image"
velin-loading, velin-grid

Declarative scroll-to-top

Add velin-scroll-top on <body> or any element — no extra markup. Works with bootFromDOM(document, { attributes: true }):

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

Generated docs

Per-attribute Markdown is generated by velinstyle docs generate into docs/generated/attributes/ (including velin-scroll-top.md). Sync to this site with npm run sync:generated.