{"component":{"aria":"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.","category":"components","css":"","description":"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.","display_name":"Preview Frame","html":"<div class=\"ps-preview\" data-theme=\"light\">\n  <div class=\"ps-preview__toolbar\">\n    <button type=\"button\" class=\"ps-preview__toggle\" aria-pressed=\"true\" data-ps-theme=\"light\">Light</button>\n    <button type=\"button\" class=\"ps-preview__toggle\" aria-pressed=\"false\" data-ps-theme=\"dark\">Dark</button>\n  </div>\n  <div class=\"ps-preview__canvas\">{{content}}</div>\n</div>","name":"preview-frame","registry_type":"component","research_links":[],"tabs_available":[],"variants":[],"wcag":{"focus_visible":true,"target":"2.2 AA"}},"tenant":"pointsav","theme":"pointsav-brand"}