fix svelecte event handling for svelte 5

src/lib/components/ui/CharacterTypeahead.svelte

@@ -75,8 +75,9 @@
 		}
 	}
 
-	function handleInput(event: CustomEvent) {
-		const query = (event.detail as { inputValue?: string })?.inputValue ?? ''
+	function handleInput(event: Event) {
+		const target = event.target as HTMLInputElement | null
+		const query = target?.value ?? ''
 
 		// Debounce the search
 		if (searchTimeout) {
@@ -88,9 +89,7 @@
 		}, 300)
 	}
 
-	function handleChange(event: CustomEvent) {
-		// Svelecte emits the selected option directly in event.detail
-		const selected = event.detail as CharacterOption | null
+	function handleChange(selected: CharacterOption | null) {
 		const newValue = selected?.id || null
 		value = newValue
 		onValueChange?.(newValue)
@@ -106,7 +105,8 @@
 	})
 </script>
 
-<div class={typeaheadClasses}>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class={typeaheadClasses} oninput={handleInput}>
 	<Svelecte
 		{options}
 		value={displayValue}
@@ -116,8 +116,7 @@
 		{placeholder}
 		{disabled}
 		{clearable}
-		on:input={handleInput}
-		on:change={handleChange}
+		onChange={handleChange}
 		keepSelectionInList={false}
 	/>
 	{#if isLoading}

src/lib/components/ui/Typeahead.svelte

@@ -1,7 +1,7 @@
 <!-- Typeahead Component (Svelecte wrapper) -->
 <svelte:options runes={true} />
 
-<script lang="ts" generics="T">
+<script lang="ts" generics="T extends object">
 	import Svelecte from 'svelecte';
 	import { Label } from 'bits-ui';
 
@@ -83,8 +83,7 @@
 			.join(' ')
 	);
 
-	function handleChange(event: CustomEvent<{ detail: T | T[] | null }>) {
-		const newValue = event.detail;
+	function handleChange(newValue: T | T[] | null) {
 		value = newValue;
 		onValueChange?.(newValue);
 	}
@@ -114,7 +113,7 @@
 				{placeholder}
 				{disabled}
 				{clearable}
-				on:change={handleChange}
+				onChange={handleChange}
 			/>
 		</div>
 
@@ -136,7 +135,7 @@
 			{placeholder}
 			{disabled}
 			{clearable}
-			on:change={handleChange}
+			onChange={handleChange}
 		/>
 	</div>
 {/if}