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

Eidos Wrap

Like Group but enforces wrapping. Pensado para clusters de elementos de ancho variable (pills, badges, tags) donde la nueva línea es comportamiento explícito, no fallback. Expone rowGap / columnGap como first-class para separar espaciado de ejes en wrap dinámico.

Superficie

<Wrap rowGap={2} columnGap={3}>
	<Pill>svelte</Pill>
	<Pill>kit</Pill>
	<Pill>vite</Pill>
	…
</Wrap>

Baseline

Origen: air/components/layout/wrap. Adaptación estándar. Composición: a través de Flex con wrap="wrap" fijo. DOM: <div data-box data-flex data-wrap>.

Comparativa

Capacidad	UIX	Chakra Wrap	Mantine	Radix Themes
wrap siempre activo	Sí (fijo)	Sí	Vía Group	Vía Flex
rowGap / columnGap first-class	Sí	Sí (spacingX/spacingY)	Sí	Sí
align / justify	Sí	Sí	Sí	Sí
shouldWrapChildren (auto-wrap cada hijo en WrapItem)	No — gap conocido	Sí	—	—
Componente WrapItem paralelo	No	Sí	—	—

Decisiones

• Sin WrapItem companion — los hijos son Box plain. Si necesitas control individual de wrap, ponlo en el Box hijo via flex / basis props.
• shouldWrapChildren no por defecto — Chakra lo hace con un Children.map que envuelve cada hijo. En Svelte sería un snippet pattern más complejo; no añade poder real. Backlog si llega caso.
• Differencia con Group — Group por defecto tiene wrap pero la intención semántica es "row con fallback wrap"; Wrap es "siempre wrap, optimiza para clusters dinámicos".

Eventos Sema

0 eventos. Pasivo.

Gaps

Gap	Disposición	Detalle
shouldWrapChildren (auto-wrap cada hijo)	diferir	Patrón Chakra. En Svelte sería más complejo; valorar si llega caso real.
WrapItem companion para control fino	descartar	Box hijo ya cubre. Reduce superficie pública.

Referencias

• Chakra Wrap: https://chakra-ui.com/docs/components/wrap
• Mantine: usa Group sin componente separado.
• Radix Themes: Flex con wrap="wrap".

Passive justification

Visual-only (scope: ['eidos']). Marker [data-wrap]. Sin estados, sin ARIA, sin eventos.