From 6825154f8f6e2e9f9f8a4f139b113781f239dc56 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Tue, 15 Jul 2025 18:44:27 -0700
Subject: [PATCH] combobox: improve compact item spacing & spinner centering

---
 src/lib/Combobox.svelte |  7 +++++--
 src/routes/+page.svelte | 19 +++++++++++++------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/lib/Combobox.svelte b/src/lib/Combobox.svelte
index 3b21486..c31c673 100644
--- a/src/lib/Combobox.svelte
+++ b/src/lib/Combobox.svelte
@@ -401,7 +401,10 @@
 					aria-label={getLabel(item)}
 					aria-disabled={item.disabled}
 					class={[
-						'mb-0.5 flex min-h-10 flex-wrap items-center py-2.5 pr-1.5 pl-5',
+						!compact
+							? 'mb-0.5 min-h-10 py-2.5 pr-1.5 pl-5'
+							: 'mb-0.25 min-h-8 py-1.5 pr-1.5 pl-2.5',
+						'flex flex-wrap items-center',
 						'rounded-sm text-sm capitalize outline-hidden select-none',
 						'hover:bg-sui-accent-500/30 dark:hover:bg-sui-accent-700/30',
 						item.value === highlighted?.value && 'bg-sui-accent-500/80 dark:bg-sui-accent-700/80',
@@ -496,7 +499,7 @@
 				transition:scale
 			>
 				{#if loading}
-					<Spinner class="stroke-sui-accent!" size="1em" />
+					<Spinner class="stroke-sui-accent! -mt-0.5" size="1em" />
 				{:else if useHighlighted && highlighted?.icon}
 					{@render highlighted.icon(highlighted)}
 				{:else if value?.icon}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3b8ffe8..0300cb1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -32,6 +32,11 @@
 	import type { ComboboxOption, Option } from '$lib';
 	import Tabs from '$lib/Tabs.svelte';
 
+	const comboboxOptions = [
+		{ value: 'option1', label: 'Option 1' },
+		{ value: 'option2', label: 'Option 2' },
+		{ value: 'option3', label: 'Option 3', disabled: true }
+	];
 	let lazyOptions: ComboboxOption[] = $state([]);
 	let dateInputValue = $state<CalendarDate | undefined>(undefined);
 	let checkboxValue = $state<CheckboxState>('indeterminate');
@@ -126,11 +131,7 @@
 			name="example-combobox"
 			label="Select an option"
 			placeholder="Choose..."
-			options={[
-				{ value: 'option1', label: 'Option 1' },
-				{ value: 'option2', label: 'Option 2' },
-				{ value: 'option3', label: 'Option 3', disabled: true }
-			]}
+			options={comboboxOptions}
 			onchange={(e) => console.log('Selected:', e.value)}
 			onvalidate={(e) => console.log('Validation:', e.detail)}
 		/>
@@ -164,7 +165,13 @@
 				}, 2500);
 			}}
 		/>
-		<Combobox label="Compact combobox" placeholder="Choose..." options={[]} lazy compact />
+		<Combobox
+			label="Compact combobox"
+			placeholder="Choose..."
+			lazy
+			compact
+			options={comboboxOptions}
+		/>
 	</InputGroup>
 </div>