@if (visible) {
  <div
    class="usr-rating"
    [class.usr-rating--small]="size === 'small'"
    [class.usr-rating--large]="size === 'large'"
    [class.usr-rating--disabled]="isDisabled"
    [style.--star-active-color]="activeColor"
    [style.--star-inactive-color]="inactiveColor"
    data-testid="usr-rating"
  >
    @if (isReadOnly) {
      <div
        class="usr-rating__display"
        role="img"
        [attr.aria-label]="'Rating: ' + ratingValue + ' of ' + stars.length + ' stars'"
        data-testid="usr-rating-display"
      >
        @for (star of stars; track star) {
          <span class="usr-rating__star" [class.usr-rating__star--filled]="star <= ratingValue" aria-hidden="true">{{
            star <= ratingValue ? filledGlyph : emptyGlyph
          }}</span>
        }
      </div>
    } @else {
      <div
        class="usr-rating__group"
        role="radiogroup"
        aria-label="Rating"
        [attr.aria-disabled]="isDisabled"
        (keydown)="onKeydown($event)"
        data-testid="usr-rating-group"
      >
        @for (star of stars; track star) {
          <button
            type="button"
            role="radio"
            class="usr-rating__star"
            [class.usr-rating__star--filled]="star <= ratingValue"
            [attr.data-star]="star"
            [attr.aria-checked]="star === ratingValue"
            [attr.aria-label]="star + (star === 1 ? ' star' : ' stars')"
            [tabIndex]="star === focusableStar ? 0 : -1"
            [disabled]="isDisabled"
            (click)="onStarClick(star)"
            data-testid="usr-rating-star"
          >
            <span aria-hidden="true">{{ star <= ratingValue ? filledGlyph : emptyGlyph }}</span>
          </button>
        }
      </div>
    }
    <span class="usr-rating__live" aria-live="polite" data-testid="usr-rating-live">
      {{ ratingValue }} of {{ stars.length }} stars selected
    </span>
  </div>
}