finish custom class and improved options overhaul

src/lib/TimezoneInput.svelte

@@ -18,21 +18,27 @@
 </script>
 
 <script lang="ts">
-	import ExpandableCombobox, { type ComboboxItem } from './Combobox.svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	import Combobox, { type ComboboxItem } from './Combobox.svelte';
+
+	interface Props {
+		label?: string;
+		name?: string;
+		value?: string;
+		invalidMessage?: string;
+		required?: boolean;
+		class?: ClassValue | null | undefined;
+	}
 
 	let {
 		label,
 		name,
 		value = $bindable(''),
-		invalidMessage,
-		required
-	}: {
-		label?: string;
-		name: string;
-		value?: string;
-		invalidMessage?: string;
-		required?: boolean;
-	} = $props();
+		invalidMessage = 'Please select a timezone',
+		required,
+		class: classValue
+	}: Props = $props();
 
 	const sortedTimeZones = Intl.supportedValuesOf('timeZone')
 		.map((timeZone) => {
@@ -88,7 +94,7 @@
 	});
 </script>
 
-<ExpandableCombobox
+<Combobox
 	{label}
 	{name}
 	{invalidMessage}
@@ -97,6 +103,7 @@
 	{options}
 	matchWidth
 	placeholder="Select a timezone"
+	class={classValue}
 />
 
 {#snippet timezoneLabel(item: ComboboxItem)}