You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.2 KiB
39 lines
1.2 KiB
<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>
|