diff --git a/.zed/settings.json b/.zed/settings.json
new file mode 100644
index 0000000..4980a77
--- /dev/null
+++ b/.zed/settings.json
@@ -0,0 +1,9 @@
+{
+	"lsp": {
+		"tailwindcss-language-server": {
+			"settings": {
+				"classFunctions": ["tw"]
+			}
+		}
+	}
+}
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index b0eda4c..98c016c 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,45 +1,40 @@
 <script lang="ts">
 	import { tw } from '$lib/tw';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
 	type Props = {
 		variant?: 'primary' | 'secondary';
 		class?: string;
 		children?: import('svelte').Snippet;
-		[key: string]: unknown;
-	} & (
-		| ({
-				href: string;
-		  } & HTMLAttributes<HTMLAnchorElement>)
-		| ({
-				href?: undefined;
-		  } & HTMLAttributes<HTMLButtonElement>)
-	);
+	} & Omit<HTMLAnchorAttributes | HTMLButtonAttributes, 'class'>;
 
-	let { variant = 'secondary', class: className = '', href, children, ...rest }: Props = $props();
+	let { variant = 'secondary', class: externalClass, children, ...rest }: Props = $props();
+
+	const className = $derived(
+		tw(
+			'text-sf-secondary bg-sb-primary ring-ss-secondary inline-flex cursor-default items-center justify-center rounded-md px-2.5 py-1 shadow-xs ring-1',
+			'hover:ring-ss-primary font-normal transition-shadow duration-200 active:shadow-inner',
+			variant === 'primary' && [
+				'relative text-slate-50 ring-0 duration-200',
+				'before:absolute before:-inset-px before:rounded-[7px]',
+				'before:from-accent-400 before:to-accent-500 before:bg-linear-to-b before:from-40% before:ring-1 before:ring-black/10 before:ring-inset',
+				'dark:before:from-accent-500 dark:before:to-accent-600 before:transition-shadow active:before:shadow-inner'
+			],
+			externalClass
+		)
+	);
 </script>
 
-<svelte:element
-	this={href ? 'a' : 'button'}
-	{href}
-	class={tw(
-		'text-sf-secondary bg-sb-primary ring-ss-secondary inline-flex cursor-default items-center justify-center rounded-md px-2.5 py-1 shadow-xs ring-1',
-		'hover:ring-ss-primary font-normal transition-shadow duration-200 active:shadow-inner',
-		variant === 'primary' && [
-			'relative text-slate-50 ring-0 duration-200',
-			'before:absolute before:-inset-px before:rounded-[7px]',
-			'before:from-accent-400 before:to-accent-500 before:bg-linear-to-b before:from-40% before:ring-1 before:ring-black/10 before:ring-inset',
-			'dark:before:from-accent-500 dark:before:to-accent-600 before:transition-shadow active:before:shadow-inner'
-		],
-		className
-	)}
-	role="button"
-	tabindex="0"
-	{...rest}
->
+{#snippet content()}
 	{#if variant === 'primary'}
 		<div class="z-10 drop-shadow-[0_-1px_0_--theme(--color-black/0.2)]">{@render children?.()}</div>
 	{:else}
 		{@render children?.()}
 	{/if}
-</svelte:element>
+{/snippet}
+
+{#if 'href' in rest}
+	<a class={className} {...rest}>{@render content()}</a>
+{:else}
+	<button class={className} {...rest}>{@render content()}</button>
+{/if}
diff --git a/src/lib/components/GroupedList/GroupedListItem.svelte b/src/lib/components/GroupedList/GroupedListItem.svelte
index 6f41873..f149a9a 100644
--- a/src/lib/components/GroupedList/GroupedListItem.svelte
+++ b/src/lib/components/GroupedList/GroupedListItem.svelte
@@ -1,29 +1,37 @@
 <script lang="ts">
 	import { tw } from '$lib/tw';
 	import { Icon, type IconSource } from 'svelte-hero-icons';
+	import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
-	interface Props {
-		href?: string | undefined;
+	type Props = {
 		icon?: IconSource | undefined;
 		selected?: boolean;
 		children?: import('svelte').Snippet;
-		onclick?: (e: MouseEvent) => void;
-	}
+		class?: string;
+	} & (
+		| ({ href: string } & Omit<HTMLAnchorAttributes, 'class' | 'href'>)
+		| ({ onclick: Required<HTMLButtonAttributes['onclick']> } & Omit<HTMLButtonAttributes, 'class'>)
+		| Omit<HTMLAttributes<HTMLDivElement>, 'onclick'>
+	);
 
-	let { href = undefined, icon = undefined, selected = false, children, onclick }: Props = $props();
+	let {
+		icon = undefined,
+		selected = false,
+		children,
+		class: externalClass,
+		...rest
+	}: Props = $props();
+
+	const className = $derived(
+		tw(
+			'text-sf-primary flex w-full cursor-default items-center gap-2 px-4 py-3 font-medium first:rounded-t-lg last:rounded-b-lg',
+			selected && 'bg-accent-500 dark:bg-accent-900 dark:text-sf-primary text-white shadow-inner',
+			externalClass
+		)
+	);
 </script>
 
-<svelte:element
-	this={href ? 'a' : 'button'}
-	{href}
-	class={tw(
-		'text-sf-primary flex w-full cursor-default items-center gap-2 px-4 py-3 font-medium first:rounded-t-lg last:rounded-b-lg',
-		selected && 'bg-accent-500 dark:bg-accent-900 dark:text-sf-primary text-white shadow-inner'
-	)}
-	tabindex="0"
-	role="button"
-	{onclick}
->
+{#snippet content()}
 	{#if icon}
 		<Icon
 			src={icon}
@@ -34,4 +42,12 @@
 	<div class="min-w-0 truncate text-start">
 		{@render children?.()}
 	</div>
-</svelte:element>
+{/snippet}
+
+{#if 'href' in rest}
+	<a class={className} {...rest}>{@render content()}</a>
+{:else if 'onclick' in rest}
+	<button class={className} {...rest}>{@render content()}</button>
+{:else}
+	<div class={className} {...rest}>{@render content()}</div>
+{/if}