Card

Bloque de contenido discreto — fondo color.surface.raised, radius.3xl (24px) y borde de 1px en color.surface.border-strong, el mismo color de borde que usa el resto de los contenedores de Orbit. Sin sombra — la sombra en Orbit está reservada para lo que realmente flota (menú, modal), y una card vive en el flujo normal, no flota. El contenido es totalmente libre — varía demasiado entre cards (label + chevron, título/descripción, steppers, botones…) como para que OrbitCard imponga nada más allá del shell.

Uso

Onboarding

Pantalla de bienvenida del builder.

Web

<orbit-card>
  <strong>Onboarding</strong>
  <p>Pantalla de bienvenida del builder.</p>
</orbit-card>

Compose Multiplatform

OrbitCard {
    Text("Onboarding", fontWeight = FontWeight.Bold)
    Text("Pantalla de bienvenida del builder.")
}

Group

OrbitCardGroup orquesta la selección mutuamente excluyente entre varias cards — mismo patrón que OrbitRadioGroup, pero con contenido libre por card en vez de un label plano. selected/onClick de cada OrbitCard se derivan automáticamente de su value dentro del group; OrbitCard no está pensada para usarse seleccionable/clickeable por fuera de un OrbitCardGroup.

Starter

Para probar la idea.

Pro

Para producción.

Web

<orbit-card-group value="starter">
  <orbit-card value="starter">Starter</orbit-card>
  <orbit-card value="pro">Pro</orbit-card>
</orbit-card-group>

Compose Multiplatform

var plan by remember { mutableStateOf("starter") }
OrbitCardGroup(selected = plan, onSelectedChange = { plan = it }) {
    OrbitCard(value = "starter") { Text("Starter") }
    OrbitCard(value = "pro") { Text("Pro") }
}

Props

OrbitCard

Prop	Tipo	Default	Descripción
content (Kotlin) / children (web)	slot	—	Contenido de la card.
padding (Kotlin)	Dp	space.md (16dp)	Padding interno.
value (Kotlin) / attr value (web)	Any? / string	null	Dentro de un OrbitCardGroup, identifica la card — de acá se derivan selected/onClick.
selected	Boolean? (Kotlin) / attr selected (web)	null (lo maneja el group)	Borde lima + fondo surface.card. Se deriva automáticamente dentro de un OrbitCardGroup.
onClick (Kotlin) / attr clickable (web)	(() -> Unit)? / boolean	null (lo maneja el group)	Hace la card interactiva. Se deriva automáticamente dentro de un OrbitCardGroup.

OrbitCardGroup

Prop	Tipo	Default	Descripción
content (Kotlin) / children <orbit-card value> (web)	slot	—	Las OrbitCard (con su value) declaradas dentro.
selected / attr value (web)	T? / string	—	Valor seleccionado.
onSelectedChange (Kotlin) / evento orbit-change (web)	(T) -> Unit	—	Se dispara al hacer click en una card.
orientation (Kotlin) / attr orientation (web)	OrbitCardGroupOrientation / "horizontal" | "vertical"	Horizontal / "horizontal"	Dirección del layout.