Edit Expanded

Name

Also known as (comma separated)

Brief definition Component is open.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "summaryText", "type": "text", "label": "Summary", "default": "Order details" }, { "id": "body", "type": "text", "label": "Content", "default": "2× Ceramic mug, 1× Saucer set — shipped 12 August." }, { "id": "accent", "type": "color", "label": "Accent", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "force", "type": "toggle", "label": "Force open", "default": true } ]

Templates (JSON object keyed by format) { "html": "<details class=\"exp-el\" style=\"--accent:{{accent}};\"{{#if force}} open{{/if}}>\n <summary class=\"exp-el__summary\">{{summaryText}}</summary>\n <p class=\"exp-el__body\">{{body}}</p>\n</details>\n<p class=\"exp-el__hint\">Open is the real expanded state, matched here with the <code>open</code> attribute — click the summary to close it yourself.</p>\n<style>\n.exp-el { width: 300px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143025; border-radius: 10px; padding: 4px 16px; }\n.exp-el__summary { list-style: none; cursor: pointer; padding: 13px 0; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }\n.exp-el__summary::-webkit-details-marker { display: none; }\n.exp-el__summary::after { content: \"▸\"; color: var(--accent); }\n@media (prefers-reduced-motion: no-preference) {\n.exp-el__summary::after { transition: transform .15s; }\n}\n.exp-el[open] .exp-el__summary::after { transform: rotate(90deg); display: inline-block; }\n.exp-el__body { margin: 0 0 14px; font-size: 13px; color: #241430cc; }\n.exp-el__hint { width: 300px; box-sizing: border-box; margin: 8px 0 0; font-size: 11px; color: #241430888; }\n.exp-el__hint code { background: #24143012; padding: 1px 5px; border-radius: 4px; }\n</style>", "tailwind": "<details{{#if force}} open{{/if}} class=\"w-[300px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143025] rounded-[10px] px-4 py-1 [&_summary::-webkit-details-marker]:hidden\">\n <summary class=\"list-none cursor-pointer py-3.5 font-bold flex justify-between items-center\">\n {{summaryText}}\n <span aria-hidden=\"true\" style=\"color:{{accent}}\">▾</span>\n </summary>\n <p class=\"m-0 mb-3.5 text-[13px] text-[#241430]/80\">{{body}}</p>\n</details>\n<p class=\"w-[300px] box-border mt-2 text-[11px] text-[#241430]/55\">Open is the real expanded state, matched here with the <code class=\"bg-[#24143012] px-1.5 py-0.5 rounded\">open</code> attribute — click the summary to close it yourself.</p>", "react": "import { useState } from \"react\";\n\nexport function ExpandedState({\n summaryText = \"{{summaryText}}\",\n body = \"{{body}}\",\n accent = \"{{accent}}\",\n force = {{force}},\n}) {\n const [open, setOpen] = useState(force);\n return (\n <div>\n <details open={open} onToggle={(e) => setOpen(e.target.open)}\n style={{ width: 300, boxSizing: \"border-box\", font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", border: \"1.5px solid #24143025\", borderRadius: 10, padding: \"4px 16px\" }}>\n <summary style={{ listStyle: \"none\", cursor: \"pointer\", padding: \"13px 0\", fontWeight: 700, display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\" }}>\n {summaryText}\n <span aria-hidden=\"true\" style={{ color: accent, display: \"inline-block\", transform: open ? \"rotate(90deg)\" : \"none\" }}>▸</span>\n </summary>\n <p style={{ margin: \"0 0 14px\", fontSize: 13, color: \"#241430cc\" }}>{body}</p>\n </details>\n <p style={{ width: 300, margin: \"8px 0 0\", fontSize: 11, color: \"#241430888\" }}>Open is the real expanded state, matched with the real <code>open</code> attribute — click the summary to close it, or pass <code>force</code> false.</p>\n </div>\n );\n}" }