Skip to content

v0.3.0 — la plaza

Choose a tag to compare

@rodrigoteamx rodrigoteamx released this 04 Jul 06:55

La plaza: el header público de marketing — el tercer header del sistema, junto a mui-topbar (admin) y mui-docs__topbar (docs) — más contenido/media y un gate más estricto.

npm i @milpa/design

65 piezas con contrato · 193 pares WCAG AA · el check de @layer pasa de substring a brace-walk.

Added

  • mui-header — el header público de marketing. Barra sólida sticky (brand + nav + actions) que colapsa a off-canvas ≤880px (mismo mecanismo que el shell docs: [data-nav-open] en el root, aria-expanded en el toggle, scrim aria-hidden) y variante --overlay transparente sobre un hero que se solidifica con [data-scrolled]. Cinco proofs migran a esta pieza compartida: el landing adopta --overlay; blog, saas y gallery retiran sus headers bespoke; commerce deja de usar mal el mui-topbar del shell admin.
  • mui-card__media — slot de cover edge-to-edge (16/9 por defecto, --media-ratio configurable) para .mui-card. Pieza nueva: acepta :is(img, svg, picture) de fábrica.
  • mui-byline — línea de autoría (avatar + nombre + meta: fecha · tiempo de lectura · rol); reusa mui-avatar tal cual. Variante --sm.
  • Media slots aceptan :is(img, svg, picture) en product-card, media-gallery, media-grid y lightbox (antes img-only): los SVG token-driven ya ocupan esos huecos sin plomería extra.

Changed

  • Gate de @layer endurecido: de substring a brace-walk. scripts/layer-guard.mjs camina las llaves del CSS publicado para cazar reglas que queden FUERA de su @layer (el check anterior no detectaba una regla escapada). Test propio (layer-guard.test.mjs) cableado a npm test.
  • El lightbox del gallery respeta el filtro activo. El contador lee "n / filtrados" y la navegación cicla solo entre los ítems visibles, no los 12 totales.
  • Contratos: 63 → 65 (nuevos: mui-header, mui-byline; actualizados: card, product-card, media-gallery, media-grid, lightbox).

Changelog completo: CHANGELOG.md · La constitución: DESIGN.md · Cómo un plugin inyecta su look & feel: THEMING.md