<!-- Semmet Angular: Spinner — https://www.w3.org/TR/wai-aria-1.2/#status -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> label="Loading results" />
<<%= selector %> [decorative]="true" />
-->
<span
  [id]="instanceId"
  [class]="spinnerClasses()"
  [attr.role]="statusRole()"
  [attr.aria-live]="ariaLive()"
  [attr.aria-hidden]="ariaHidden()"
>
  <span class="<%= dasherize(name) %>__visual" aria-hidden="true"></span>
  @if (!decorative()) {
    <span
      class="<%= dasherize(name) %>__label"
      [class.<%= dasherize(name) %>__label--visually-hidden]="!labelVisible()"
    >
      {{ label() }}
    </span>
  }
</span>
