{#each items as item, i (i)}
{@render row(i, item, rowActions(i))}
{/each}
{#snippet bandBox({ start, end }: Range, styles: string)}
{/snippet}
{#snippet pill({ start, end }: Range)}
{#if end > start}
{@render bandBox(
{ start, end: end - 1 },
"mt-2.5 -mb-7.5 ml-2.5 w-5 rounded-full bg-(--range-fill) outline-1 outline-border-default"
)}
{:else}
{@render bandBox(
{ start: end, end },
"mt-2.5 ml-2.5 size-5 self-start rounded-full bg-(--range-fill) outline-1 outline-border-default"
)}
{/if}
{/snippet}
{#snippet handle(id: HandleId, label: string)}
grab(e, id)}
onkeydown={(e) => handleKeyDown(e, id)}
title="Drag or use arrow keys to adjust the range"
>
{/snippet}
{#if items.length > 0}
{#if interacting}
{@render bandBox(displayRange, "bg-background-subtle rounded")}
{/if}
{#if !muted}
{@render bandBox(
selectedRange,
"bg-background-inset rounded border border-border-default"
)}
{/if}
{@render pill(displayRange)}
{@render handle("a", "Range boundary 1")}
{@render handle("b", "Range boundary 2")}
{/if}