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