Formulario adaptable
The form is the breakpoint container; each field group is a
<.breaker> that declares the modes it survives in. As the
card narrows it sheds optional fields down to the essentials. Notice the call
site below has no data-pc-show / .d-none — the
components emit that. Drag the slider (or open this on a phone).
Nuevo contacto
How it's wired.
<.breakpoint_container steps=… initial=…> measures its own width
and names a mode (compact / comfy / wide);
each <.breaker show="…"> appears only in the listed modes (it emits
data-pc-show, the engine toggles the shared .d-none). Thresholds
are rem — root 10px, so 34 = 340px and 64 = 640px. The two-up
row uses the reflected [data-mode="wide"], since this keys off the card's
own width, not the viewport.