La sección de planes: un toggle de periodo sobre una fila de planes, uno
destacado. Es el primer block cuyas partes se COORDINAN de verdad (no solo se
repiten como en feature-grid/split): el `Switch` escribe el periodo de
facturación y cada `PlanPrice` lo lee. Esa coordinación es lo que gana un
contexto compartido — la forma más fuerte de compound.
`<Pricing bind:period>` + `.Header` + `.Switch` + `.Plans` + `.Plan`(featured,
badge) + `.PlanName`/`.PlanDescription`/`.PlanPrice`/`.PlanFeatures`/
`.PlanFeature`/`.PlanAction`.
- **Contexto reactivo** (`context.ts`): la raíz provee el periodo como getter
sobre un `$bindable`; el `Switch` (un `ToggleGroup`) lo escribe, el
`PlanPrice` lo lee y muestra el snippet `monthly` o `annual`. Mismo patrón que
`CardGroup`. `period` es bindable por si la app quiere observarlo.
- **El block NUNCA formatea moneda**: la app compone `FormatNumber` dentro de
los snippets de precio (B-7). El block posee el switch, no el dinero.
- `.PlanAction` fija el CTA al borde inferior de la tarjeta
(`margin-block-start: auto`) para que una fila de planes alinee sus botones
aunque tengan distinto nº de features; `.Plan` con `align="start"` deja los
checks en columna limpia; `featured` da acento (borde primary) + elevación.
Demo (`web/routes/blocks/pricing/`): full-bleed + ruta `preview`, tres planes
(Pro destacado en el centro) con el toggle mensual/anual vivo.
Hueco a decisión del usuario (Gaps del block): la **tabla de comparación**
(features × planes) — la brecha recurrente del dossier en pricing. Es una tabla,
no una fila de tarjetas: candidato a hermano `pricing-table`. Presentado, no
resuelto.
Verificado en navegador: el toggle cambia los TRES precios a la vez (0/29/99 →
0/23/79), tarjetas de igual alto con CTAs alineados, featured con acento, en
claro/oscuro × LTR/RTL. `blocks:check` verde (5 blocks) · `svelte-check` sin
errores propios.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
dev
594e5a5db4