<!-- Semmet Angular: Button — https://www.w3.org/WAI/ARIA/apg/patterns/button/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> label="Save changes" variant="primary" (click)="save()" />
<<%= selector %> label="Saving" [busy]="isSaving()" />
<<%= selector %> label="Upload">
  <ng-template <%= camelize(name) %>Leading>
    <app-upload-icon aria-hidden="true" />
  </ng-template>
</<%= selector %>>
-->
<button
  type="button"
  [id]="instanceId"
  [class]="buttonClasses()"
  [disabled]="disabled() || busy()"
  [attr.aria-busy]="busy() ? 'true' : null"
  [attr.aria-pressed]="ariaPressed()"
  (click)="handleClick($event)"
>
  @if (busy()) {
    <span class="<%= dasherize(name) %>__spinner" aria-hidden="true"></span>
  } @else if (leading(); as leadingSlot) {
    <span class="<%= dasherize(name) %>__slot" aria-hidden="true">
      <ng-container [ngTemplateOutlet]="leadingSlot.templateRef" />
    </span>
  }
  <span>
    @if (labelTemplate(); as labelSlot) {
      <ng-container [ngTemplateOutlet]="labelSlot.templateRef" />
    } @else {
      {{ label() }}
    }
  </span>
  @if (trailing(); as trailingSlot) {
    <span class="<%= dasherize(name) %>__slot" aria-hidden="true">
      <ng-container [ngTemplateOutlet]="trailingSlot.templateRef" />
    </span>
  }
</button>
