<div
  class="impact-stars"
  role="radiogroup"
  [attr.aria-label]="ariaLabel"
  (keydown)="onKeydown($event)"
  [class.is-disabled]="disabled"
  [class.is-readonly]="readonly"
  tabindex="0"
>
  <!-- 1..maxStars -->
  @for (idx of stars(); track track($index, idx)) {
    <button
      type="button"
      class="impact-stars__star"
      [class.is-active]="isActive(idx)"
      role="radio"
      [attr.aria-checked]="value() === idx"
      [attr.aria-label]="idx + ' ' + starLabel(idx)"
      [disabled]="disabled"
      (click)="handleClick(idx)"
      (mouseenter)="preview(idx)"
      (mouseleave)="preview(null)"
    >
      <!-- Material icons -->
      <mat-icon>
        {{ isActive(idx) ? activeIcon : inactiveIcon }}
      </mat-icon>
    </button>
  }
</div>
