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

<<%= selector %> label="New" variant="success" />
<<%= selector %> label="7" accessibleLabel="7 unread notifications" />
<<%= selector %> accessibleLabel="Build passed">
  <ng-template <%= camelize(name) %>Label>
    Passed
  </ng-template>
</<%= selector %>>
-->
<span
  [id]="instanceId"
  [class]="badgeClasses()"
  [attr.aria-hidden]="ariaHidden()"
  [attr.aria-label]="ariaLabel()"
>
  @if (dot()) {
    <span class="<%= dasherize(name) %>__dot" aria-hidden="true"></span>
  }
  @if (!dot() || label()) {
    <span class="<%= dasherize(name) %>__label">
      @if (labelTemplate(); as labelSlot) {
        <ng-container [ngTemplateOutlet]="labelSlot.templateRef" />
      } @else {
        {{ label() }}
      }
    </span>
  }
</span>
