svelte-kit-vice/src/uix/eidos/components/radio-group

Eidos RadioGroup

Visual wrapper over Soma RadioGroup. Eidos stamps only visual attrs (data-size, data-variant, data-color, data-columns) and keeps selection, keyboard, ARIA, Field state and form participation in Soma/Morfo.

Baselines

Platform	Surface	Comparison
Air (glm-5)	No equivalent component found.	Eidos starts from Soma, not from an Air visual baseline.
Radix RadioGroup	Root, Item, Indicator; controlled/uncontrolled value, name, required, orientation, dir, loop, hidden input/form support.	Covered by Soma/Eidos. Hidden input is explicit as RadioGroup.HiddenInput instead of auto-internal.
Bits UI RadioGroup	Root, Item, Label composed externally; bindable value, forms, required, disabled, readonly, orientation.	Covered. RadioGroup.Label is group-level; per-item text can be plain children or external label composition.
Ark UI RadioGroup	Root, Label, Item, ItemControl, ItemText, ItemHiddenInput, Indicator; invalid/readOnly/required/form IDs.	Covered except separate ItemControl/ItemText: Eidos uses Item as the control and plain children for text.
shadcn-svelte RadioGroup	Styled Bits/Radix-like root + item, labels composed externally.	Covered with first-party recipe tokens and compound namespace.
React Aria RadioGroup	RadioGroup, Radio, Label, descriptions/errors through field composition, validation flags and orientation.	Covered through Soma Field integration; descriptions/errors remain Field, not RadioGroup-specific parts.

Sources: Radix, Bits UI, Ark UI, shadcn-svelte, React Aria.

Anatomy

<script lang="ts">
	import { RadioGroup } from '$uix/eidos/components/radio-group';

	let value = $state('pro');
</script>

<RadioGroup bind:value name="plan" color="primary" variant="solid">
	<RadioGroup.Label>Choose plan</RadioGroup.Label>

	<RadioGroup.Item value="free">
		<RadioGroup.Indicator />
		Free
		<RadioGroup.HiddenInput />
	</RadioGroup.Item>

	<RadioGroup.Item value="pro">
		<RadioGroup.Indicator />
		Pro
		<RadioGroup.HiddenInput />
	</RadioGroup.Item>
</RadioGroup>

Decisions

Gap / Choice	Decision
Air baseline absent	Use APG + Soma behavior + reference libraries as baseline.
Automatic hidden input like Radix	Keep explicit HiddenInput, matching Ark-style composability and avoiding hidden DOM magic.
Ark ItemControl / ItemText	Not added now. Item is already the interactive control; text can be plain children. Add a visual-only ItemText only if recipes need stable text styling beyond current selectors.
Labels/descriptions/errors	Group label is RadioGroup.Label; richer field chrome belongs to Field.Label, Field.HelperText, Field.ErrorText.
Evaluative colors	RadioGroup only exposes primary, secondary, neutral, affirm; validation uses invalid/data-invalid instead of risk/threat/loss color choices.

Visual Props

Prop	Values	Effect
size	sm | md | lg	Radio size, dot size and label text scale.
variant	solid | outline | ghost	Checked/off-state treatment.
color	primary | secondary | neutral | affirm	Active palette.
columns	number	Switches root layout to CSS grid using --_radio-group-columns.

Ownership

• Morfo declares radiogroup roles, item states, data attrs and the commit-select perceptive event.
• Soma owns value, roving tabindex, Field integration, hidden inputs and form flags.
• Eidos owns only visual tokens, icon default (SvgDot) and layout attributes.

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.