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

<script lang="ts">
	/**
	 * Eidos `<Switch>` — visual wrapper over `$soma/components/switch`.
	 *
	 * Soma owns: `checked` state, `data-state='checked|unchecked'`,
	 * `aria-checked`, the `commit-toggle` perceptual event, intent
	 * resolution, field integration. Eidos adds the visual API: `size`
	 * + an optional `thumb` snippet for in-thumb glyphs, and emits the
	 * `data-size` attr that the recipe consumes.
	 *
	 * `Switch.Thumb` from soma is rendered automatically inside the
	 * track — the consumer doesn't have to compose it. If they need
	 * raw access to the thumb, they can fall back to the soma compound
	 * primitive via `import * as Switch from '$soma/components/switch'`.
	 */
	import * as Switch from '$soma/components/switch';
	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',
		thumb,
		checked = $bindable(false),
		...somaProps
	}: SwitchProps = $props();
</script>

<Switch.Provider {...somaProps} bind:checked data-size={size}>
	{#snippet children({ checked: c })}
		<Switch.Thumb>
			{#if thumb}
				{@render thumb({ checked: c })}
			{/if}
		</Switch.Thumb>
	{/snippet}
</Switch.Provider>