bs-accordion wraps a stack of bs-accordion-tab children, backed by the mp-accordion web component. Each tab declares its header with the *bsAccordionTabHeader structural directive; the rest of the tab body is projected below. Set [multi]="true" to allow multiple tabs to stay open simultaneously, or [highlightActiveTab]="true" to visually mark the active tab.
The accordion stays interactive with JavaScript disabled: the server-rendered shadow DOM carries a hidden radio (or checkbox, under [multi]) per tab, so opening and closing are pure CSS. Headers are reachable with Tab and, once focused, ↑ / ↓, Home and End move between them.
The chrome now lives inside the web component's shadow root, so the page reaches it through Bootstrap's --bs-accordion-* custom properties and the exposed ::part(header), ::part(button) and ::part(content) — which is how the dark multi-level example above is styled.