finish custom class and improved options overhaul

src/lib/Combobox.svelte

@@ -29,6 +29,7 @@
 	import { browser } from '$app/environment';
 	import { scale } from 'svelte/transition';
 	import { generateIdentifier } from './util.js';
+	import type { ClassValue } from 'svelte/elements';
 
 	interface Props {
 		name?: string;
@@ -42,6 +43,7 @@
 		label?: string;
 		placeholder?: string;
 		notFoundMessage?: string;
+		class?: ClassValue | null | undefined;
 		onvalidate?: (e: InputValidatorEvent) => void;
 		onchange?: (e: ComboboxChangeEvent) => void;
 	}
@@ -54,10 +56,11 @@
 		matchWidth = false,
 		options,
 		required = false,
-		invalidMessage,
+		invalidMessage = 'Please select an option',
 		label,
 		placeholder,
 		notFoundMessage = 'No results found',
+		class: classValue,
 		onvalidate,
 		onchange
 	}: Props = $props();
@@ -324,7 +327,7 @@
 	{/if}
 </Portal>
 
-<div>
+<div class={classValue}>
 	<!-- Combobox Label -->
 	{#if label}
 		<Label for={id}>{label}</Label>
@@ -335,7 +338,7 @@
 		{name}
 		{id}
 		value={value?.value ?? ''}
-		class="hidden"
+		type="hidden"
 		use:validate={validateOpts}
 		onvalidate={(e) => {
 			valid = e.detail.valid;
@@ -349,11 +352,9 @@
 	</div>
 
 	<!-- Error message if invalid -->
-	{#if invalidMessage}
-		<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
-			<Label for={id} error>{invalidMessage}</Label>
-		</div>
-	{/if}
+	<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
+		<Label for={id} error>{invalidMessage}</Label>
+	</div>
 </div>
 
 {#snippet searchInputBox(caret: boolean = true)}