<!-- Semmet Angular: Tabs — https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %>, <%= classify(name) %>List, <%= classify(name) %>Tab and <%= classify(name) %>Panel
in that parent component. This directive set never owns markup: bring your own wrapper, tab strip,
buttons and panels, in whatever structure the layout needs.

<div <%= camelize(name) %> [(activeId)]="activeTab">
  <div <%= camelize(name) %>List label="Account">
    <button type="button" <%= camelize(name) %>Tab value="profile" [selected]="true">Profile</button>
    <button type="button" <%= camelize(name) %>Tab value="settings">Settings</button>
    <button type="button" <%= camelize(name) %>Tab value="billing" [disabled]="true">Billing</button>
  </div>

  <div <%= camelize(name) %>Panel value="profile">
    <app-profile-panel />
  </div>
  <div <%= camelize(name) %>Panel value="settings">
    <app-settings-panel [userId]="userId()" (saved)="reload()" />
  </div>
  <div <%= camelize(name) %>Panel value="billing">
    <app-billing-panel />
  </div>
</div>
-->
