repro

src/lib/ui/Select.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" generics="Value extends string">
+	import { tv } from 'tailwind-variants';
+
+	const select = tv({
+		base: 'cursor-pointer border-2 border-border focus:si-border-border focus:si-border-2 bg-surface px-2 py-1 text-xs font-bold text-text transition-opacity focus:outline-3'
+	});
+
+	type Option = {
+		value: Value;
+		label: string;
+	};
+
+	let {
+		value = $bindable(),
+		options = [] as Option[],
+		label,
+		id: propId,
+		class: className = ''
+	}: {
+		value: Value;
+		options: Option[];
+		label?: string;
+		id?: string;
+		class?: string;
+	} = $props();
+
+	const svelteId = $props.id();
+	const id = $derived(propId ?? svelteId);
+</script>
+
+<div class="flex items-center gap-2 {className}">
+	{#if label}
+		<label for={id} class="text-xs font-bold tracking-wider text-text-muted uppercase">
+			{label}
+		</label>
+	{/if}
+	<select {id} bind:value class={select()}>
+		{#each options as option (option.value)}
+			<option value={option.value}>{option.label}</option>
+		{/each}
+	</select>
+</div>