setHoverRating(0)} use:focusOutside={{ onFocusOut: reset }} {@attach onKeydown(['ArrowLeft', 'ArrowRight'], (event) => event.stopPropagation())} >
{$t('rating')}
{#each { length: count } as _, index (index)} {@const value = index + 1} {@const filled = hoverRating >= value || (hoverRating === 0 && ratingSelection >= value)} {@const starId = `${id}-${value}`}
setHoverRating(value)} tabindex={-1} data-testid="star" >
{$t('rating_count', { values: { count: value } })}
{ focusRating = value; }} onchange={() => handleSelectDebounced(value)} class="sr-only" /> {/each}
{#if ratingSelection > 0 && !readOnly}
{ ratingSelection = 0; handleSelect(ratingSelection); }} class="cursor-pointer text-xs text-primary" > {$t('rating_clear')}
{/if}