HTML attributes 1.2.2

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

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Declarative HTML that lazy-loads Web Components or motion without writing registration code.
Extend the registry with registerAttribute(name, { enhance }) for project-specific bridges.

When not

Do not invent undocumented velin-* attributes — check the generated attribute reference first.
Do not skip bootFromDOM(..., { attributes: true }) (or bootAttributes) and expect bridges to run.

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 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.