combobox: don't highlight first item on first open

src/lib/Combobox.svelte

@@ -114,6 +114,7 @@
 
 	/** stores currently highlighted option (according to keyboard navigation or default item) */
 	let highlighted = $derived.by((): ComboboxOption | undefined => {
+		if (!searching) return undefined; // otherwise, the first item is highlighted on first open
 		if (filteredItems.length === 0) return undefined;
 		if (value !== undefined && filteredItems.find((v) => v.value === value?.value)) return value;
 		if (!filteredItems[0]?.disabled) return filteredItems[0];

src/routes/+page.svelte

@@ -29,9 +29,10 @@
 		TextStrikethrough,
 		TextUnderline
 	} from 'phosphor-svelte';
-	import type { Option } from '$lib';
+	import type { ComboboxOption, Option } from '$lib';
 	import Tabs from '$lib/Tabs.svelte';
 
+	let lazyOptions: ComboboxOption[] = $state([]);
 	let dateInputValue = $state<CalendarDate | undefined>(undefined);
 	let checkboxValue = $state<CheckboxState>('indeterminate');
 	let dialogOpen = $state(false);
@@ -148,7 +149,21 @@
 			onvalidate={(e) => console.log('Validation:', e.detail)}
 		/>
 
-		<Combobox label="Lazy combobox" placeholder="Choose..." options={[]} lazy />
+		<Combobox
+			label="Lazy combobox"
+			placeholder="Choose..."
+			options={lazyOptions}
+			lazy
+			onlazy={() => {
+				setTimeout(() => {
+					lazyOptions = [
+						{ value: 'option1', label: 'Option 1' },
+						{ value: 'option2', label: 'Option 2' },
+						{ value: 'option3', label: 'Option 3' }
+					];
+				}, 2500);
+			}}
+		/>
 		<Combobox label="Compact combobox" placeholder="Choose..." options={[]} lazy compact />
 	</InputGroup>
 </div>