{#
  Interactive 1–5 star input (radiogroup semantics, hover preview, keyboard arrows / 1-5).
  Params: key (Twig string; null for the overall rating, or a criteria key Alpine expr like `c.key`),
          size, aria (aria-label Alpine expr).
  Writes form.rating or form.criterias[key] through setRating / setCriteria.
#}
{% set size = size|default(28) %}
{% set keyExpr = key is defined and key ? key : 'null' %}
<div class="rvx-flex rvx-items-center rvx-gap-space8 rvx-flex-wrap"
     role="radiogroup"
     :aria-label="{{ aria|default("labels.text_rating_star_title") }}"
     tabindex="0"
     @keydown="ratingKey($event, {{ keyExpr }})"
     @mouseleave="{{ keyExpr }} ? (hoverCriteria = { ...hoverCriteria, [{{ keyExpr }}]: 0 }) : (hoverRating = 0)">
  <div class="rvx-star-input rvx-flex rvx-items-center rvx-gap-[2px]">
    <template x-for="star in 5" :key="star">
      <button type="button"
              class="rvx-star-input__star rvx-block rvx-shrink-0 rvx-rounded-[4px] rvx-p-[2px] rvx-leading-none"
              role="radio"
              :aria-checked="({{ keyExpr }} ? form.criterias[{{ keyExpr }}] : form.rating) === star"
              :aria-label="star + ' - ' + ratingLabel(star)"
              tabindex="-1"
              @mouseenter="{{ keyExpr }} ? (hoverCriteria = { ...hoverCriteria, [{{ keyExpr }}]: star }) : (hoverRating = star)"
              @focus="{{ keyExpr }} ? (hoverCriteria = { ...hoverCriteria, [{{ keyExpr }}]: star }) : (hoverRating = star)"
              @click="{{ keyExpr }} ? setCriteria({{ keyExpr }}, star) : setRating(star)">
        {% include 'storefront/ui/icon.twig' with { name: 'star', size: size, class: 'rvx-transition-colors rvx-duration-fast', attrs: ':class="star <= ratingFor(' ~ keyExpr ~ ') ? \'rvx-text-merchant-star rvx-review-form__star-active\' : \'rvx-text-line-strong rvx-review-form__star-inactive\'"' } %}
      </button>
    </template>
  </div>
  <span class="rvx-text-sm rvx-text-fg-muted rvx-min-w-[5.5em]" x-text="ratingLabel(ratingFor({{ keyExpr }}))" aria-live="polite"></span>
</div>