", "el mantra es contenido decorativo-editorial: se lee tal cual, sin ARIA extra" ], "keyboard": [ "Tab recorre wordmark (si es link) → links por columna → legal, en orden de documento" ], "behavior": [ "margin-block-start auto empuja el footer al fondo SOLO si el wrapper (.mui-page o body) es display flex, flex-direction column, min-height 100dvh — fuera de ese contexto el margin auto colapsa a 0 y el footer fluye normal: degradación segura", "≤880px la grilla cae a 1 columna (brand primero, span reseteado); el orden de lectura no cambia", "con menos columnas de links que tracks a ancho completo, los tracks vacíos colapsan (auto-fit)" ], "contrast": "todos pares del gate sobre --bg: links, mantra, headings y legal text-muted ≥4.5; hover text ≥4.5 + subrayado (doble señal); anillo focus ≥3; hairlines border-subtle decorativas — exentas de 1.4.11" }, "motion": { "transitions": "color de los links: --dur-fast --ease-standard; el subrayado aparece sin animar", "reducedMotion": "contrato global de milpa-motion.css: la transición de color cae a 1ms — el hover sobrevive congelado (color final + subrayado inmediatos)" }, "examples": [ { "title": "Mega footer: brand + dos columnas + legal", "html": "<footer class=\"mui-footer\"><div class=\"mui-footer__grid\"><div class=\"mui-footer__brand\"><a href=\"/\"></a><p class=\"mui-footer__mantra\">Siembra módulos, cosecha aplicaciones.</p></div><nav aria-labelledby=\"ft-producto\"><p class=\"mui-footer__heading\" id=\"ft-producto\">Producto</p><ul class=\"mui-footer__links\"><li><a href=\"/docs\">Documentación</a></li><li><a href=\"/docs/0.2/tokens\">Tokens</a></li><li><a href=\"/changelog\">Changelog</a></li></ul></nav><nav aria-labelledby=\"ft-comunidad\"><p class=\"mui-footer__heading\" id=\"ft-comunidad\">Comunidad</p><ul class=\"mui-footer__links\"><li><a href=\"https://github.com/milpa\">GitHub</a></li><li><a href=\"/contribuir\">Contribuir</a></li></ul></nav></div><div class=\"mui-footer__legal\"><p>© 2026 Milpa — Apache-2.0</p><p><a href=\"/privacidad\">Privacidad</a></p></div></footer>" } ] }

{ "$schema": "https://milpa.lat/schemas/component-contract.v1.json", "name": "footer", "layer": "layout", "version": "0.5.0", "status": "stable", "class": "mui-footer", "summary": "El mega footer — la línea de tierra que cierra la página: hairline superior, marca con mantra (slot __mantra: el tagline PROPIO del producto que consume el layout — opcional, no hardcodeado a Milpa; el propio Milpa lo llena con 'Siembra módulos, cosecha aplicaciones.' en español, pero cualquier otro producto pone el suyo, en su propio idioma) y columnas de links silenciosos sobre var(--bg). margin-block-start auto lo empuja al fondo cuando el wrapper (.mui-page o el body) es flex column con min-height 100dvh. La grilla usa tracks auto-fit de 9rem y la marca ocupa 2 (grid-column: span 2) — el spec de grid no admite fr junto a repeat(auto-fit) en una misma lista de tracks, así que 'brand 2fr' se logra por span: mismo resultado visual. ≤880px cae a una columna con la marca arriba (mismo breakpoint que el drawer de mui-docs).", "element": [ "footer (landmark contentinfo — SIEMPRE