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

Field

Estado

Field es el wrapper visual de Eidos sobre el campo de formulario de Soma. Soma posee el estado (disabled, readonly, required, invalid, dirty, touched, loading), la integracion con Form.Provider y todo el cableado ARIA entre label, input, helper text y error text. Eidos anade size, variant, orientation, color y receta visual.

API publica:

<Field required invalid size="md" variant="outline" orientation="vertical" color="primary">
	<Field.Label>
		Email
		<Field.RequiredIndicator />
	</Field.Label>
	<Field.Control>
		<Field.Prefix>@</Field.Prefix>
		<Field.Input type="email" bind:value />
		<Field.Suffix>.com</Field.Suffix>
	</Field.Control>
	<Field.HelperText>Use your work email.</Field.HelperText>
	<Field.ErrorText>Enter a valid email.</Field.ErrorText>
</Field>

Baseline Air

Air tenia Field.Root, Label, Control, Input, HelperText, Error, Prefix y Suffix. El root anadia size: xs | sm | md | lg y variant: outline | ghost, resolvia responsive sizes con air.dom.resolve, y escribia tokens inline para el control.

Eidos mantiene el mismo alcance visual, pero mueve los tokens inline de Air a la receta generada por ActiveEidos y cambia Error a ErrorText para alinearse con el contrato Soma/Morfo.

Soma/Morfo

Capacidad	Owner	Estado
Root con estado compuesto	Soma	idle, error, disabled, readonly, loading
Form.Provider integration	Soma	Registra campo por name, hereda invalid/dirty/touched
Label -> Input	Morfo/Soma	for + aria-labelledby
Helper/Error -> Input	Soma	aria-describedby con helper y error si aplica
Required / invalid / busy	Morfo/Soma	aria-required, aria-invalid, aria-busy
Error live region	Morfo/Soma	role="alert", aria-live="polite"
Prefix/Suffix decorativos	Morfo/Soma	aria-hidden="true"
Required indicator	Morfo/Soma/Eidos	Parte publica contract-backed; Eidos renderiza * por defecto
Visual size	Eidos	xs, sm, md, lg, responsive
Visual variant	Eidos	outline, ghost
Visual orientation	Eidos	vertical, horizontal, responsive
Intent color	Eidos	Focus/required accent; invalid sigue usando estado de error

Comparativa externa

Plataforma	Modelo	Eidos/UIX
Ark UI Field	Root, Label, Input, Textarea, Select, HelperText, ErrorText, RequiredIndicator; contexto de disabled/invalid/required/readOnly.	UIX cubre contexto, label, input, helper, error y required indicator. Textarea/Select se integran via otros componentes y Field context, no como partes internas.
Base UI Field	Root, Label, Control, Description, Item, Error, Validity; soporta touched/dirty/focused/filled y validacion.	UIX cubre root/control/error y dirty/touched desde Form. Validity, Item, focused/filled quedan para Soma si aparece un consumer.
Radix Form	Form.Field, Label, Control, Message, ValidityState; mensajes asociados automaticamente al control.	UIX cubre asociacion label/control/error. ValidityState nativo esta diferido al modulo Form, no a Eidos.
React Aria TextField	TextField, Label, Input/TextArea, description slot y FieldError; data attrs para disabled/invalid/readonly/required.	UIX cubre Input, description via HelperText, error via ErrorText y los mismos estados data.
shadcn-svelte Field	Campo visual de composicion con Field, Label, Description, Error, Group, Set, Legend, Content, orientacion responsive.	UIX cubre el campo individual y orientacion vertical/horizontal/responsive. Group/Set/Legend quedan como futuro Fieldset/Form.
Bits UI	No tiene Field completo; ofrece Label y componentes de formulario separados.	UIX tiene Field dedicado.

Fuentes:

• Air Field
• Ark UI Field
• Base UI Field
• Radix Form
• React Aria TextField
• shadcn-svelte Field
• Bits UI Label

Decisiones

ErrorText, no Error

Air exportaba Error. Soma/Morfo ya tienen ErrorText, igual que Ark UI. Mantener ambos nombres crearia dos superficies para la misma parte.

Decision: Eidos exporta solo Field.ErrorText.

RequiredIndicator

Air tenia selector visual para required indicator y Ark UI lo expone como parte. Como el indicador tiene atributo aria-hidden y debe estar contract-backed, se anade en Morfo/Soma antes de envolverlo en Eidos.

Decision: Field.RequiredIndicator existe. Eidos renderiza * por defecto y Soma lo oculta cuando el field no es required.

Textarea / Select

Ark y React Aria permiten textarea/select dentro del field. En UIX no se anaden como partes de Field: cada control especializado mantiene su propio Soma y puede integrarse con Field.Provider.

Decision: no hay Field.Textarea ni Field.Select en Eidos.

Group / Set / Legend

shadcn-svelte resuelve layout de formularios con Field.Group, Field.Set y Field.Legend. Eso no pertenece al campo individual; es una capa de layout / fieldset que afecta a grupos de campos.

Decision: diferido a Fieldset/Form/layout de formulario, no a este wrapper.

Orientation

La orientacion de un campo individual si pertenece a Eidos: cambia la relacion visual entre label, control y mensajes sin crear estado ni comportamiento.

Decision: Field expone orientation="vertical" | "horizontal" | "responsive". El modo responsive usa container query para pasar a dos columnas cuando hay ancho suficiente.

ValidityState

Radix y Base UI exponen partes para inspeccionar ValidityState. UIX ya tiene Form.Provider y estados derivados por campo; duplicarlo en Eidos seria comportamiento, no visual.

Decision: si se necesita, se implementa en Soma/Form.

Eventos Sema

Field declara 0 eventos semanticos de forma deliberada. Es una envoltura de composicion para label, control, mensajes y estado de formulario; las acciones del usuario pertenecen al control que vive dentro (Input, SearchField, NumberField, Select, etc.) o al modulo Form, no al shell visual del campo.

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.

Passive justification

Componente passive por diseño: no gestiona estado mutable propio, no responde a teclado más allá del foco del navegador, no emite eventos sema propios. El feedback perceptivo correspondiente al cambio que rodea al componente (validación, progreso, transición) pertenece a quien orquesta ese cambio — Form / Field / Toast / Dialog — no al componente visual.