Skip to main content
VelinStyle v1.4.0
⌂ Home

Semantic Runtime Contract 1.4.0

The implemented role, density, layout, theme, and contrast contract consumed by Adapt.

Contract surface

AttributeValues / sourceEffect
data-velin-roleSection registry roles; dashboard; nav aliasCanonical semantic region
data-velin-densitycompact / comfortable / spaciousDensity token and known bridges
data-velin-layoutstack / split / gridKnown layout bridges
data-velin-themeExisting theme contractReused by Adapt
data-velin-contrastExisting contrast contractReused by Adapt

Markup

<section data-velin-role="hero"
  data-velin-density="comfortable"
  data-velin-layout="split">
</section>

Validation semantics

Valid values become canonical state. Unknown values remain in markup but are ignored for bridges and report invalid; missing values are neutral null.

Read API

const api = getVelinAPI(element);
api.role;
api.density;
api.layout;
api.theme;
api.contrast;
api.getSemanticState();
getSemanticState(element);

Lifecycle and events

bootFromDOM(root, { adapt: true }) starts contract observation in the same runtime lifecycle. Recognized attributes and inserted semantic subtrees produce velin-adapt-change.

Continue through the pipeline