svelte-kit-vice/src/uix/eidos/components/aspect-ratio

Eidos AspectRatio

Constrains its inner content to a fixed width/height ratio. Eidos-native: the recipe writes a single --aspect-ratio custom property on a <div data-box data-aspect-ratio> shell (composed through <Box>) and the CSS aspect-ratio property does the rest. Useful for video / image / iframe containers that must hold their shape regardless of inline size.

Superficie

<AspectRatio ratio={16 / 9}>
  <img src="hero.jpg" alt="" />
</AspectRatio>

<AspectRatio ratio="4/3" maxWidth={480}>
  <iframe src="https://example.com/embed" title="Embed" />
</AspectRatio>

<!-- Number or fractional string both work -->
<AspectRatio ratio="21 / 9"><video src="…" /></AspectRatio>

Baseline

Origen: air/components/layout/aspect-ratio (rama morfo-runtime).

Adaptaciones aplicadas durante el port:

• Drop del prefijo air- y de la dependencia de Terra. Air delegaba la geometría en TerraAspectRatio.Provider, que envolvía el contenido en un <div> posicionado con el truco padding-bottom y posicionaba el hijo en absoluto. Eidos usa directamente CSS aspect-ratio, soportado por todos los navegadores modernos.
• Selectores [data-box][data-aspect-ratio] en lugar de la clase air-aspect-ratio.
• Variable renombrada de --air-aspect-ratio-radius (que no se mapeaba contra nada de la receta) a --aspect-ratio (el ratio en sí mismo). El border-radius no es propio de aspect-ratio: si el consumidor lo necesita, lo pasa vía style o componiendo otro primitive.
• Resolución reactiva del prop ratio vía ActiveEidos.require().resolve() para soportar ResponsiveProp.
• El componente compone a través de <Box>, así que hereda todas las props del box-model (padding, maxWidth, gridColumn, …).

Comparativa

Capacidad	UIX (eidos)	Radix Themes	Chakra UI	Mantine
ratio numeric	Sí (ratio={16 / 9})	Sí (ratio={16 / 9})	Sí (ratio={16 / 9})	Sí (ratio={16 / 9})
ratio string fraction	Sí (ratio="16/9")	No (sólo number)	No	No
Implementation	CSS aspect-ratio	CSS aspect-ratio	CSS aspect-ratio	CSS aspect-ratio
Composes through Box	Sí (hereda padding/maxWidth/etc.)	Box ancestor	Box ancestor	Box ancestor
maxWidth / sizing props	Sí (vía Box)	Sí	Sí	Sí
Stretches lone child to fill	Sí (> * { 100% × 100% })	Sí	Manual	Manual
Responsive ratio prop	Sí (ResponsiveProp)	Sí	Sí (objeto breakpoint)	Sí ({ base, sm, md })

Decisiones

• ratio acepta number y string — los tres referentes sólo soportan number. UIX añade la forma string ("16/9") porque deja el valor intacto en DevTools (aspect-ratio: 16 / 9 se lee literal) y evita el cálculo en JS para ratios canónicos. Las dos formas tipadas como AspectRatioValue quedan en types.ts.
• CSS aspect-ratio puro, sin padding-bottom — air vía Terra usaba el truco padding-bottom + child posicionado en absoluto. Esa técnica era necesaria antes de 2021; hoy aspect-ratio es baseline. Eliminamos la complejidad del DOM (un wrapper menos, sin position:absolute en el hijo).
• Compose through <Box> — patrón consistente con Flex/Grid: el shell [data-box] da el box-model y AspectRatio sólo añade la propiedad aspect-ratio en su capa.
• object-fit: cover por defecto en el hijo — replicated images, videos e iframes se ajustan al box sin estirarse. Si el consumidor quiere contain, lo override en el hijo.
• No borderRadius específico — diferencia con air, que exponía --air-aspect-ratio-radius sin proporcionar prop ni control. UIX delega border-radius a la cascada normal (se aplica desde un style= o desde la clase del consumidor).

Eventos Sema

AspectRatio declara 0 eventos. Es una primitiva pasiva: ajusta la geometría de su único hijo y nada más — sin commit, sin emerge, sin keyboard. Componentes que animan al cambiar de ratio (raros) componen AspectRatio con un primitive interactivo (popover, drawer, collapsible) que sí posee los verbos sema relevantes. Misma justificación que Box, Flex y Grid.

Gaps

Gap	Disposición	Detalle
as prop para semantic tag (figure, picture)	diferir	Hoy se envuelve AspectRatio en el tag semántico. Reconsiderar si llegan ≥2 casos reales.
Per-instance object-fit prop sobre el hijo	descartar	Hereda de la cascada normal del hijo (img/video/iframe). Si se necesita override one-off, va vía style en el hijo.
borderRadius shorthand	descartar	Border-radius no es propio de aspect-ratio. Se aplica desde fuera, igual que en Box.
Detección automática del intrinsic ratio del hijo	diferir	Mantine ofrece esto vía data-ratio="auto". Bajo prioridad: el consumidor casi siempre sabe el ratio.
Documentación per-prop con ejemplos visuales	implementar	Pasada de docs final. Hoy la demo cubre los casos comunes.

Referencias

• Radix Themes AspectRatio: https://www.radix-ui.com/themes/docs/components/aspect-ratio
• Chakra UI AspectRatio: https://chakra-ui.com/docs/components/aspect-ratio
• Mantine AspectRatio: https://mantine.dev/core/aspect-ratio/
• CSS aspect-ratio: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

Passive justification

Visual-only primitive (scope: ['eidos'] en el morfo). Una sola part Provider que emite el marker [data-aspect-ratio], sin estados, sin data-attrs específicos, sin ARIA, sin keyboard. El recipe consume la variable --aspect-ratio que el componente escribe inline. No hay nada que animar, ningún ciclo de vida que enviar a sema, ningún evento en el sentido de Morfo. La superficie expuesta es geometría pura.