Preview Frame

Bordered surface for previewing component recipes. Carries a data-theme attribute (light/dark) on the container. Toolbar with two toggle buttons in the top-right; JS flips data-theme and updates aria-pressed on each toggle.

Live previewrendered from recipe via {tokens} resolution
{{content}}
ARIA notes

Each theme toggle button carries aria-pressed reflecting the active state. Update aria-pressed via JS when the theme changes. The preview frame itself is not a landmark — it is a visual container. The content inside it should carry its own appropriate landmark roles.

The usage tab for this component is not yet authored. Creative Design Contributors — pick this up.

Recipe is at /api/components/preview-frame.json.