finish custom class and improved options overhaul

src/lib/FramelessButton.svelte

@@ -1,20 +1,24 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { MouseEventHandler } from 'svelte/elements';
+	import type { ClassValue, MouseEventHandler } from 'svelte/elements';
+
+	interface Props {
+		icon?: string;
+		iconPosition?: 'left' | 'right';
+		disabled?: boolean;
+		class?: ClassValue | null | undefined;
+		children: Snippet;
+		onclick?: MouseEventHandler<HTMLButtonElement>;
+	}
 
 	let {
 		icon,
 		iconPosition = 'right',
 		disabled = false,
+		class: classValue,
 		children,
 		onclick
-	}: {
-		icon?: string;
-		iconPosition?: 'left' | 'right';
-		disabled?: boolean;
-		children: Snippet;
-		onclick?: MouseEventHandler<HTMLButtonElement>;
-	} = $props();
+	}: Props = $props();
 </script>
 
 {#snippet iconSnippet()}
@@ -24,7 +28,8 @@
 <button
 	class={[
 		'text-accent hover:text-primary inline-flex cursor-pointer items-center gap-1.5 transition-colors',
-		disabled && 'pointer-events-none cursor-not-allowed opacity-50'
+		disabled && 'pointer-events-none cursor-not-allowed opacity-50',
+		classValue
 	]}
 	{onclick}
 >