svelte-kit-vice/src/uix/eidos/components/toggle

Eidos Toggle

Single-part visual wrapper over Soma Toggle. Soma owns pressed state, Field integration, form submission, aria-pressed and the commit-toggle perceptive event. Eidos owns only variant, size, layout flags and optional icon/checkmark rendering.

Baselines

Platform	Surface	Comparison
Air (glm-5)	No toggle component found.	Eidos starts from Soma/Morfo and external references.
Radix Toggle	Single Toggle root, pressed/defaultPressed, onPressedChange, disabled, data-state, aria-pressed.	Covered. Soma adds readonly, required/invalid Field merge and optional hidden form input.
Bits UI Toggle	Toggle.Root, bindable pressed, controlled function binding, disabled, render delegation.	Covered through Soma bindable pressed, child snippet and child passthrough.
Ark UI Toggle	Root plus Indicator part with fallback content, controlled pressed state and disabled.	Covered functionally through icon and checkMark snippets, not a separate part.
React Aria ToggleButton	Toggle button with selected state, disabled, ARIA naming and form-friendly button behavior.	Covered with aria-label, native button semantics and Field integration.

Sources: Radix, Bits UI, Ark UI, React Aria.

Usage

<script lang="ts">
	import Toggle from '$uix/eidos/components/toggle';

	let bold = $state(false);
</script>

<Toggle bind:pressed={bold} aria-label="Bold" iconOnly>
	{#snippet icon({ pressed })}
		<strong>{pressed ? 'B' : 'B'}</strong>
	{/snippet}
	Bold
</Toggle>

<Toggle intent="risk" variant="outline" size={{ base: 'sm', md: 'lg' }}>
	Publish live
</Toggle>

<Toggle bind:pressed checkMark>Saved</Toggle>

Decisions

Gap / Choice	Decision
Air baseline absent	Use Soma/Morfo + Radix/Bits/Ark/React Aria as baseline.
Ark Indicator part	Not added as a namespace part. Toggle remains single-part; icon and checkMark snippets cover indicator use without extra component structure.
Evaluative colors	intent and color stay in Soma because they drive data-color and the semantic event. Eidos only paints the resolved attrs.
fulfill / loss intents	Excluded. A reversible toggle is not a culmination and should not represent irreversible loss.
Default checkmark glyph	Uses the shared Eidos/Lucide icon system (Check), not manual SVG.

Visual Props

Prop	Values	Effect
variant	solid | outline | ghost	Button treatment.
size	responsive sm | md | lg	Height, gap, padding and icon scale.
block	boolean	Fills available inline size.
iconOnly	boolean	Square control; body text is visually hidden but remains accessible.
icon	snippet { pressed }	Leading custom icon.
checkMark	`boolean	snippet`

Ownership

• Morfo declares data-state, state flags, aria-pressed, data-color and commit-toggle.
• Soma owns state mutation, form hidden input, Field merge and semantic event triggering.
• Eidos owns only recipe-facing visual attrs and optional decorative glyphs.

Baseline

Referencia local: Soma + Morfo + Eidos. La capa visual de Eidos expone size / variant / color sobre el comportamiento que Soma ya implementa; el morfo declara parts, ARIA, keyboard y eventos sema. Las decisiones se alinean con las bibliotecas externas listadas en la Comparativa.

Comparativa

Capacidad	Bits UI	Ark UI	React Aria	shadcn-svelte	UIX
Surface compound (root + parts)	✓	✓	✓	✓	✓
ARIA semantics + keyboard nav	✓	✓	✓	parcial	✓ via morfo
Variantes visuales (size / variant)	parcial	parcial	n/a	tailwind	✓ recipe
Form integration	parcial	parcial	✓	parcial	✓ via Field
Eventos sema declarativos	n/a	n/a	n/a	n/a	✓

Decisiones

• El wrapper Eidos se mantiene fino: ergonomía visual + tokens. Comportamiento y ARIA viven en Soma + Morfo.
• Strings públicos usan idlangref bajo components.{kebab}.*, con catálogo en src/uix/langs/components/{kebab}.ts.
• Eventos sema declarados en el morfo cubren los cambios de estado que cargan peso perceptivo (commit, signal). Las navegaciones internas por teclado son focus moves, no eventos.
• Cuando la API necesita comportamiento nuevo, va a Soma / Morfo primero; Eidos sólo expone la receta visual del resultado.

Gaps

Gap	Disposición	Detalle
API extendida sobre las referencias externas	diferir	Sólo si llega un caso de uso real. Mantener la superficie estable.
Cobertura adicional de variantes visuales	diferir	El recipe cubre sm/md/lg + solid/outline/ghost. Más variantes requieren caso concreto.
Documentación per-prop exhaustiva	implementar	Cuando se cierre el ciclo de remediación de cada componente.
Tests browser-level del flujo completo (Playwright)	implementar	Cobertura visual + interacciones. Se hace en una pasada conjunta de tests.