Using storybook to document the Toggle button.

.storybook/main.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-svelte-csf"
+  ],
+}

.storybook/preview.cjs

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package.json

@@ -6,16 +6,26 @@
     "build": "svelte-kit build",
     "preview": "svelte-kit preview",
     "lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
-    "format": "prettier --write --plugin-search-dir=. ."
+    "format": "prettier --write --plugin-search-dir=. .",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "devDependencies": {
+    "@babel/core": "^7.14.8",
+    "@storybook/addon-actions": "^6.3.6",
+    "@storybook/addon-essentials": "^6.3.6",
+    "@storybook/addon-links": "^6.3.6",
+    "@storybook/addon-svelte-csf": "^1.1.0",
+    "@storybook/svelte": "^6.3.6",
     "@sveltejs/kit": "next",
+    "babel-loader": "^8.2.2",
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-svelte3": "^3.2.0",
     "prettier": "~2.2.1",
     "prettier-plugin-svelte": "^2.2.0",
-    "svelte": "^3.34.0"
+    "svelte": "^3.41.0",
+    "svelte-loader": "^3.1.2"
   },
   "type": "module",
   "dependencies": {

src/lib/Toggle.stories.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { Meta, Story, Template } from '@storybook/addon-svelte-csf';
+	import Toggle from './Toggle.svelte';
+</script>
+
+<Meta title="Toggle" component={Toggle} />
+
+<Template let:args>
+	<Toggle {...args} />
+</Template>
+
+<Story name="default" />
+<Story name="with props" args={{ label: 'Hello' }} />

src/lib/Toggle.svelte

@@ -1,13 +1,13 @@
 <script>
-  export let label = "";
+	export let label = '';
 	export let isToggled = false;
-  export let style = "";
+	export let style = '';
 </script>
 
 <label {style}>
+	{label}
 	<input type="checkbox" bind:checked={isToggled} />
 	<div class="toggle" />
-  {label}
 </label>
 
 <style>
@@ -28,7 +28,7 @@
 		background-color: var(--toggleBackgroundColor, white);
 	}
 	.toggle::after {
-    content: "";
+		content: '';
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -51,5 +51,4 @@
 	input:checked + .toggle::after {
 		transform: translate3d(100%, 0, 0);
 	}
-
 </style>