feat: Move ts-toggle to site-kit (#96)

* Push

* Add changeset

.changeset/wild-bulldogs-tie.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/site-kit': minor
+---
+
+Add TSToggle

packages/site-kit/src/lib/components/TSToggle.svelte

@@ -0,0 +1,38 @@
+<script>
+	import { browser } from '$app/environment';
+	import { persisted } from 'svelte-local-storage-store';
+	import ToggleButton from './ToggleButton.svelte';
+
+	const checked = persisted('svelte:prefers-ts', false);
+
+	$: browser && document.body.classList.toggle('prefers-ts', $checked);
+</script>
+
+<div class="input-output-toggle">
+	<span aria-hidden="true">JavaScript</span>
+	<ToggleButton bind:pressed={$checked} label="TypeScript code examples" />
+	<span aria-hidden="true">TypeScript</span>
+</div>
+
+<style>
+	.input-output-toggle {
+		position: relative;
+		display: flex;
+		gap: 0.5em;
+		user-select: none;
+		align-items: center;
+		width: 100%;
+		height: var(--ts-toggle-height);
+		z-index: 2;
+		padding: 0 var(--sk-page-padding-side);
+		margin: 0 auto;
+	}
+
+	@media (min-width: 832px) {
+		.input-output-toggle {
+			padding-left: 3.2rem;
+			width: var(--sidebar-menu-width);
+			margin: 0 0 0 auto;
+		}
+	}
+</style>

packages/site-kit/src/lib/components/ToggleButton.svelte

@@ -0,0 +1,69 @@
+<script>
+	/** @type {boolean}*/
+	export let pressed;
+
+	/** @type {string} */
+	export let label;
+</script>
+
+<button aria-pressed={pressed} on:click={() => (pressed = !pressed)}>
+	<span class="visually-hidden">{label}</span>
+</button>
+
+<style>
+	button {
+		--size: 1em;
+		--bg: var(--sk-theme-2);
+		--fg: white;
+		--bg-active: var(--bg);
+		--fg-active: var(--fg);
+		position: relative;
+		height: var(--size);
+		width: calc(100% - 0.6em);
+		max-width: calc(2 * var(--size));
+		top: -2px;
+		border-radius: 0.5em;
+		-webkit-appearance: none;
+		appearance: none;
+		outline-offset: 2px;
+		border: transparent;
+	}
+
+	button::before {
+		content: '';
+		position: absolute;
+		display: block;
+		height: 100%;
+		width: 100%;
+		padding: 2px;
+		border-radius: var(--size);
+		top: 0;
+		left: 0;
+		background: var(--bg);
+		box-sizing: border-box;
+	}
+
+	button[aria-pressed='true']::before {
+		background: var(--bg-active);
+	}
+
+	button::after {
+		content: '';
+		position: absolute;
+		display: block;
+		width: calc(var(--size) - 4px);
+		height: calc(var(--size) - 4px);
+		aspect-ratio: 1;
+		top: 2px;
+		left: 2px;
+		border-radius: 50%;
+		background: var(--fg);
+		box-shadow: 0 0px 1px rgba(0, 0, 0, 0.4), 0 4px 2px rgba(0, 0, 0, 0.1);
+		transition: background 0.2s ease-out, left 0.2s ease-out;
+	}
+
+	button[aria-pressed='true']::after {
+		background: var(--fg-active);
+		left: calc(100% - var(--size) + 2px);
+	}
+</style>

packages/site-kit/src/lib/components/index.js

@@ -8,3 +8,4 @@ export { default as Section } from './Section.svelte';
 export { default as Separator } from './Separator.svelte';
 export { default as Shell } from './Shell.svelte';
 export { default as SkipLink } from './SkipLink.svelte';
+export { default as TSToggle } from './TSToggle.svelte';

packages/site-kit/src/lib/theme/store.js

@@ -6,7 +6,7 @@ import { persisted } from 'svelte-local-storage-store';
  */
 
 /** @type {import('svelte/store').Writable<Theme>} */
-export const theme = persisted('sveltekit:theme', {
+export const theme = persisted('svelte:theme', {
 	preference: 'system',
 	current: browser
 		? window.matchMedia('(prefers-color-scheme: dark)').matches