svelte-kit-vice/src/uix/eidos/components/switch/switch.svelte

<script lang="ts">
	import './switch.css';
	/**
	 * Eidos `<Switch>` — visual wrapper over the Soma.
	 *
	 * The Soma owns: `checked` state, `data-state='checked|unchecked'`,
	 * `aria-checked`, the `commit-toggle` perceptual event, intent
	 * resolution and field integration. Eidos adds only the visual `size`
	 * attr consumed by the recipe; Thumb remains an explicit compound part
	 * attached from `index.ts`.
	 */
	import { ActiveEidos } from '$uix/eidos';
	import * as Switch from '$soma/components/switch';
	import SwitchThumb from './switch-thumb.svelte';
	import type { SwitchProps } from './types';

	// `checked` is re-bindable: consumers using `bind:checked` need the
	// eidos wrapper to forward the binding, not just the value.
	let {
		size = 'md',
		checked = $bindable(false),
		children: bodyContent,
		...headlessProps
	}: SwitchProps = $props();

	const eidos = ActiveEidos.require();
	const resolvedSize = $derived(eidos.resolve(size, 'md'));
</script>

<Switch.Provider {...headlessProps} bind:checked data-size={resolvedSize}>
	{#snippet children(snippetProps)}
		{#if bodyContent}
			{@render bodyContent(snippetProps)}
		{:else}
			<SwitchThumb />
		{/if}
	{/snippet}
</Switch.Provider>