From ad7e5ad467a3e55af858a14df4d041d61991fd7a Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 28 Jul 2026 19:06:08 +0200
Subject: [PATCH] web: add Toggle component

---
 .../lib/components/ui/Toggle.stories.svelte   | 44 ++++++++++++++
 web/src/lib/components/ui/Toggle.svelte       | 57 +++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 web/src/lib/components/ui/Toggle.stories.svelte
 create mode 100644 web/src/lib/components/ui/Toggle.svelte

diff --git a/web/src/lib/components/ui/Toggle.stories.svelte b/web/src/lib/components/ui/Toggle.stories.svelte
new file mode 100644
index 00000000..4bc86f15
--- /dev/null
+++ b/web/src/lib/components/ui/Toggle.stories.svelte
@@ -0,0 +1,44 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Toggle from "./Toggle.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Toggle",
+		component: Toggle,
+		tags: ["autodocs"],
+		argTypes: {
+			checked: { control: "boolean" },
+			disabled: { control: "boolean" },
+			layout: { control: "inline-radio", options: ["inline", "block"] }
+		},
+		args: {
+			checked: false,
+			disabled: false,
+			layout: "inline"
+		}
+	});
+</script>
+
+<!-- Toggle content comes through its `children` snippet, provided here as Story slot content. -->
+<Story name="Default">Label</Story>
+<Story name="Checked" args={{ checked: true }}>Label</Story>
+<Story name="Disabled" args={{ disabled: true }}>Label</Story>
+<Story name="Disabled checked" args={{ disabled: true, checked: true }}>Label</Story>
+
+<Story name="Without label" />
+
+<Story name="States">
+	<div class="flex flex-col gap-3">
+		<Toggle>Unchecked</Toggle>
+		<Toggle checked>Checked</Toggle>
+		<Toggle disabled>Disabled</Toggle>
+		<Toggle disabled checked>Disabled checked</Toggle>
+	</div>
+</Story>
+
+<Story name="Block layout">
+	<div class="flex w-64 flex-col gap-3">
+		<Toggle layout="block">Label pushed to the far edge</Toggle>
+		<Toggle layout="block" checked>Another one, wrapping when the text runs long</Toggle>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Toggle.svelte b/web/src/lib/components/ui/Toggle.svelte
new file mode 100644
index 00000000..3357bd48
--- /dev/null
+++ b/web/src/lib/components/ui/Toggle.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLInputAttributes } from "svelte/elements";
+
+	interface Props extends Omit<HTMLInputAttributes, "type" | "class" | "checked" | "children"> {
+		checked?: boolean;
+		disabled?: boolean;
+		/** `inline` hugs the label, `block` stretches it to fill the row. */
+		layout?: "inline" | "block";
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		checked = $bindable(false),
+		disabled = false,
+		layout = "inline",
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const labelClasses = $derived(
+		[
+			"items-center gap-2",
+			layout === "block" ? "flex w-full" : "inline-flex",
+			disabled ? "cursor-not-allowed text-foreground-disabled" : "cursor-pointer",
+			className ?? ""
+		].join(" ")
+	);
+
+	const inputClasses = [
+		"peer absolute inset-0 size-full appearance-none rounded-full bg-background-muted",
+		"transition-colors duration-150",
+		"checked:bg-foreground-default",
+		"enabled:hover:bg-background-inset checked:enabled:hover:bg-foreground-muted",
+		"focus-visible:ring-2 focus-visible:ring-border-strong focus-visible:outline-none",
+		"disabled:cursor-not-allowed disabled:bg-background-inset checked:disabled:bg-foreground-disabled"
+	].join(" ");
+
+	const thumbClasses = [
+		"pointer-events-none absolute top-px left-px size-4 rounded-full bg-foreground-on-emphasis",
+		"transition-transform duration-150 peer-checked:translate-x-[15px]"
+	].join(" ");
+
+	const textClasses = $derived(layout === "block" ? "min-w-0 flex-1" : "whitespace-nowrap");
+</script>
+
+<label class={labelClasses}>
+	<span class="relative inline-flex h-[18px] w-[33px] shrink-0">
+		<input type="checkbox" role="switch" bind:checked {disabled} class={inputClasses} {...rest} />
+		<span class={thumbClasses} aria-hidden="true"></span>
+	</span>
+	{#if children}
+		<span class={textClasses}>{@render children()}</span>
+	{/if}
+</label>
-- 
2.51.2