combobox: refactor w/ snippet rendering overrides & better lazy loading

src/routes/+page.svelte

@@ -164,16 +164,6 @@
 	</div>
 </div>
 
-{#snippet comboRender(item: ComboboxOption)}
-	Opt 1
-{/snippet}
-{#snippet comboInfotext(item: ComboboxOption)}
-	User
-{/snippet}
-{#snippet comboPreview(item: ComboboxOption)}
-	Preview {item.label}
-{/snippet}
-
 <div class="component">
 	<p class="title">Combobox</p>
 
@@ -187,17 +177,21 @@
 					value: 'option1',
 					label: 'Option 1',
 					preview: 'Prvw',
-					infotext: 'Info',
-					render: comboRender,
-					infotextRender: comboInfotext,
-					previewRender: comboPreview
+					infotext: 'Info'
 				},
 				{ value: 'option2', label: 'Option 2' },
 				{ value: 'option3', label: 'Option 3', disabled: true }
 			]}
 			onchange={(e) => console.log('Selected:', e.value)}
 			onvalidate={(e) => console.log('Validation:', e.detail)}
-		/>
+		>
+			{#snippet labelRender(opt: ComboboxOption)}
+				Processed {opt.label}
+			{/snippet}
+			{#snippet infotextRender(opt: ComboboxOption)}
+				Processed {opt.infotext}
+			{/snippet}
+		</Combobox>
 
 		<Combobox
 			loading
@@ -223,15 +217,17 @@
 			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);
+			lazy={'always'}
+			onlazy={async () => {
+				await new Promise((resolve) => setTimeout(resolve, 2500));
+				lazyOptions = [
+					{ value: 'option1', label: 'Option 1' },
+					{ value: 'option2', label: 'Option 2' },
+					{ value: 'option3', label: 'Option 3' }
+				];
+			}}
+			onopenchange={(open) => {
+				if (!open) lazyOptions = [];
 			}}
 		/>
 		<Combobox