svelte-kit-vice/src/uix/eidos/components/avatar/README.md

Eidos Avatar

Avatar no existe en la rama Air anterior (glm-5:src/uix/air/components), asi que el componente parte del contrato Eidos/Morfo actual y se compara con Radix, Bits UI, Ark/Reka y shadcn-svelte.

Superficie

<Avatar size="md" variant="soft" color="neutral" radius="full" delayMs={150}>
	<Avatar.Image src="/users/ada.png" alt="Ada Lovelace" />
	<Avatar.Fallback>AL</Avatar.Fallback>
</Avatar>

Partes publicas: Image, Fallback.

Talla y tema

88 claves públicas. Las escalas van por talla con su nombre resuelto (size-{xs..xxl}, font-size-{xs..xxl}, ring-width-{sm,md,lg}) y la forma por radius-{full,md,sm,none}; el tono entra por la matriz {tono}-{solid,soft,outline}-{bg,fg,border} que la receta compone en TSC v2.2.

Lo que entró el 2026-08-23 (75 % → 90 %):

• group-overlap-{xs..xxl}, la escala de solape de AvatarGroup. Había una sola clave, --avatar-group-overlap, y la receta la RE-DECLARABA en seis bloques [data-size]: escrita en el elemento, ganaba siempre al :root donde un tema escribe. Medido — desde el asiento del tema no movía nada, y sólo parecía viva porque el centinela escribe también sobre el nodo. Ahora el paso viaja por --_avatar-group-overlap y los seis alcanzan desde :root (−8,4 px … −33,6 px → 37 px, uno a uno).
• --avatar-group-max RETIRADO, de la receta y del envoltorio. El tope se aplica con data-has-max + :nth-child(n + M) —una variable no entra en :nth-child()— así que la propiedad que el wrapper escribía inline no la leía nadie, y su default 99 tampoco. Diff de computed 0 al quitarla.
• Seis literales firmados: los 100 % de Image y Fallback son identidad (la parte ES la superficie del avatar, no una talla propia) y los dos line-height: 1 mantienen el glifo centrado por la caja flex.

Lo que queda privado, y por qué: --_avatar-bg / --_avatar-fg / --_avatar-badge-bg son un CONMUTADOR — cambian de fuente con la variante (solid · soft · outline) y su valor sale del forward de paleta THM-2 que la capa de color alimenta por instancia desde [data-color]. Un público encima dejaría que un tema los fijara y matara el color= de cada avatar.

Comparativa

Capacidad	Eidos	Radix	Bits UI	Ark/Reka	shadcn-svelte
Compound API	Si: <Avatar.Image> / <Avatar.Fallback>	Si	Si	Si	Si
Fallback por error	Si	Si	Si	Si	Si
Estado de imagen observable	Si: imageStatus / onImageStatusChange	Si, en Image	Si	Si	Via Bits
delayMs para fallback	Si, root o fallback	Si, Fallback	Si	Si	Si
Bypass de carga	Si: imageStatus="loaded"	No directo	Si	Si	Via Bits
data-status	Si, root/image/fallback	Si	Si	Si	Si
Variantes visuales	Si: solid/soft/outline	No, unstyled	No, unstyled	No, unstyled	Tailwind local
Paleta de intents UIX	Si	No	No	No	No
Radios y tamanos canonicos	Si	No	No	No	Tailwind local

Decisiones

• Avatar se mantiene sin componente Soma publico: no hay foco, teclado ni ARIA coordinada que justifique una part headless propia.
• El comportamiento de imagen vive en ImageProvider ($soma/layers), no en Avatar. El root crea esa instancia, Image registra su src y actualiza loading, loaded y error; Fallback solo consume fallbackVisible.
• delayMs puede vivir en el root para cubrir el caso comun, o en Avatar.Fallback para ajustar una instancia concreta.
• El bypass imageStatus="loaded" existe para iconos locales o imagenes ya cacheadas donde el consumer no quiere esperar al evento load.
• El fallback se renderiza en idle y error sin demora; la demora solo aplica al estado loading.

Eventos Sema

Avatar declara 0 eventos semanticos de forma deliberada. La carga de imagen es un ciclo de recurso (idle / loading / loaded / error), no una ocurrencia perceptiva iniciada por el usuario. Si un Avatar se usa dentro de un boton, menu o perfil interactivo, el evento pertenece a ese componente contenedor.

Referencias

• Radix Avatar: https://www.radix-ui.com/primitives/docs/components/avatar
• Bits UI Avatar: https://next.bits-ui.com/docs/components/avatar
• Ark UI Avatar: https://ark-ui.com/svelte/docs/components/avatar
• Reka UI Avatar: https://www.reka-ui.com/docs/components/avatar
• shadcn-svelte Avatar: https://shadcn-svelte.com/docs/components/avatar

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.

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.