<!-- Semmet Angular: Accordion — https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %>, <%= classify(name) %>Header and <%= classify(name) %>Panel
in that parent component. This directive set never owns markup: bring your own wrapper,
heading level and panel content, in whatever structure the layout needs.

<div <%= camelize(name) %>>
  <h3>
    <button type="button" <%= camelize(name) %>Header value="profile" [expanded]="true">Profile</button>
  </h3>
  <div <%= camelize(name) %>Panel value="profile">
    <app-profile-panel />
  </div>

  <h3>
    <button type="button" <%= camelize(name) %>Header value="settings">Settings</button>
  </h3>
  <div <%= camelize(name) %>Panel value="settings">
    <app-settings-panel [userId]="userId()" (saved)="reload()" />
  </div>
</div>
-->
