toggle group: add arrow key navigation

src/lib/ToggleSelect.svelte

@@ -1,23 +1,41 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { ClassValue, MouseEventHandler } from 'svelte/elements';
+	import type { HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
 
-	interface Props {
+	interface Props extends Omit<HTMLButtonAttributes, 'type' | 'ontoggle'> {
+		ref?: HTMLButtonElement | null;
 		name?: string;
 		selected?: boolean;
-		class?: ClassValue | null | undefined;
 		children: Snippet;
 		onclick?: MouseEventHandler<HTMLButtonElement>;
 		ontoggle?: (selected: boolean) => void;
 	}
 
-	let { name, selected = false, class: classValue, children, onclick, ontoggle }: Props = $props();
+	let {
+		ref = $bindable(null),
+		name,
+		selected = false,
+		class: classValue,
+		children,
+		onclick,
+		ontoggle,
+		...others
+	}: Props = $props();
 
 	const handleToggleSelectClick: MouseEventHandler<HTMLButtonElement> = (event) => {
 		selected = !selected; // update state
 		ontoggle?.(selected); // send event to parent
 		onclick?.(event); // pass onclick handler through
 	};
+
+	export const toggle = () => {
+		selected = !selected; // update state
+		ontoggle?.(selected); // send event to parent
+	};
+
+	export const focus = () => {
+		ref?.focus();
+	};
 </script>
 
 {#if name}
@@ -25,6 +43,8 @@
 {/if}
 
 <button
+	bind:this={ref}
+	{...others}
 	class={[
 		'rounded-3xl border px-6 py-2.5 font-medium transition-colors',
 		selected