docs: clarify composition variable usage (#420)

## Summary
- replace the unsupported `data-var-*` example with the current `data-variable-values` pattern
- document that variable values are carried through but still applied manually inside the nested composition
- add matching reference notes in the data-attributes, HTML schema, core package, and CLI docs

## Verification
- `npx mintlify dev --port 3100`
- browser verification with `agent-browser` on `/concepts/compositions` and `/reference/html-schema`
- proof artifacts saved locally under `tmp/issue-416-docs/`
This commit is contained in:
Miguel Ángel
2026-04-22 20:41:35 +02:00
committed by GitHub
parent 4df85579bb
commit fc52d21c59
5 changed files with 63 additions and 6 deletions
+8 -2
View File
@@ -26,8 +26,14 @@ Use `npx hyperframes compositions` to see all compositions in a project.
## Variables
Compositions can expose variables for dynamic content:
HyperFrames does not automatically bind `data-var-*` attributes into your composition DOM.
```html
<div data-composition-id="card" data-var-title="string" data-var-color="color"></div>
<div
data-composition-id="card"
data-composition-src="compositions/card.html"
data-variable-values='{"title":"Hello","color":"#ff4d4f"}'
></div>
```
Read `data-variable-values` inside the nested composition and apply the values in your own script. Variable metadata for tooling is declared separately via `data-composition-variables` and read with `extractCompositionMetadata()`.