Accordion
AccordionComponent (items: array of {label, icon, open}, name: string). Plain <details>/<summary>: any group of sibling <details class="accordion" name="..."> elements sharing the same name attribute keeps only one open at a time, natively, with no JS. Standalone and composable: used by Builder + Preview for its multi-section builder column, but nothing about it depends on that pattern, so it can be reused anywhere a same-page, single-open-section behavior is needed.
Section A
Content for the first section. Open by default.
Section B
Opening this closes Section A automatically; the browser handles it via the shared name attribute.
Section C
A third section, collapsed by default.
Usage guidance
Use this when a page has several distinct, self-contained groups of controls and showing them all expanded at once would push later content far down the page. The name attribute is what makes it a true accordion (only one section open); omit it if you want independently collapsible sections instead (more than one open at a time).
Real usage: flows/publisher-edit/homepage.html groups Navigation, Hero banner, and Page modules as an accordion (name="homepage-builder"), with Navigation open by default. This replaced an earlier version that rendered all three sections expanded simultaneously.
The trigger is the section's <summary>, styled via .accordion__trigger: a chevron rotates on open/close, and the native details marker is hidden in favor of that chevron.