v0.8.0 — el rocío

El rocío: cierra los tres huecos de theming de marca que reveló el proof Milpa⇄Brutalist (0.7.0) — un skin podía retokenizar color/tipografía/dimensión pero no podía tocar bordes (solid hardcodeado), superficies (sin backdrop-filter posible) ni blurs (frosted en px), y el gate de contraste no sabía componer una superficie translúcida contra el fondo.

npm i @milpa/design

Todo aditivo: cada token nuevo defaultea a su valor actual (solid/none/mismos blurs) → el build por defecto es pixel-idéntico. 68 piezas con contrato · 193 pares WCAG AA · audit de cierre 0 pares nuevos (release sin color).

Added

• Grupo effect — cierra el theming de bordes/superficies/blur:
  • --border-style (default solid): los ~83 bordes del bundle repuntan su solid literal → un skin pasa dashed/double/none sin tocar una regla.
  • --surface-backdrop (default none): expuesto como backdrop-filter: var(--surface-backdrop) en .mui-card/.mui-modal/.mui-drawer — un skin glass setea blur(...) y listo.
  • --blur-sm/base/lg (2/4/10px): tokenizan los blurs frosted ya existentes (header/topbar/drawer).
  • Invariante nueva: --bg debe ser opaco (referencia de composición para superficies translúcidas).
• Glass como 3er flavor del proof de theme-swap (proof/theme-swap.html + proof/skins/glass-skin.css): junto a Nopal y Brutalist, demuestra el caso que motivó el release — superficies translúcidas + backdrop-filter + --bg opaco detrás, pasando el mismo gate.

Changed

• verify-theme parsea color con alpha (#RRGGBBAA/rgba) y compone las superficies translúcidas sobre --bg (alpha-blend) antes de medir contraste AA — calcula el color efectivo contra el fondo real, así el gate valida glassmorphism en serio. (+ form-check del grupo effect.)
• El bundle repunta sus literales: los ~83 bordes solid → --border-style; las superficies de panel ganan --surface-backdrop; los blurs → --blur-*.
• COMPAT — ninguna ruptura: los tres tokens defaultean al comportamiento actual → ningún skin ni bundle existente cambia una regla computada. Cero cambio visual por defecto.

---

Changelog completo: CHANGELOG.md · Theming: THEMING.md · Proof de theme-swap: proof/theme-swap.html (Milpa ⇄ Brutalist ⇄ Glass)

v0.7.0 — la piel

La piel: el theming pasa de release-grade en color/spacing/radios/motion/dark-light a release-grade también en tipografía y dimensiones estructurales — la brecha que dejó la auditoría de personalización (32 hallazgos).

npm i @milpa/design

Todo aditivo: cada token nuevo defaultea a su valor actual, así que el build por defecto es pixel-idéntico salvo un ajuste deliberado de 70ch→65ch en dos bloques de prose. 68 piezas con contrato · 193 pares WCAG AA · audit de cierre 0 pares nuevos (release sin color).

Added

• --font-heading / --font-body — el split 2-tier que reemplaza el --font-display único; ambos defaultean al mismo stack ('Space Grotesk', system-ui, sans-serif). --font-display queda vivo como alias (var(--font-heading)) — nadie que lo consuma se rompe. Además una regla base :is(h1..h6) { font-family: var(--font-heading) }, así que CUALQUIER heading —no solo los .mui-*__title— sigue la fuente de títulos.
• --font-serif — fuente de prose/quotes; defaultea a var(--font-body) (cero cambio hasta que el consumidor ponga un serif editorial).
• --weight-semibold (600) — completa la escala 400/500/600/700.
• Grupo size de tokens públicos (diez, default = literal que reemplazan): --focus-width/--focus-offset, --border-width, --container-max/narrow/wide, --header-h/--sidebar-w/--drawer-width, --measure.
• Doc de carga de fuentes en THEMING.md: snippet self-host @font-face + alternativa <link>, y nota de que la degradación a system-ui es intencional (el paquete no envía fuentes).

Changed

• verify-theme valida los 7 grupos del contrato por FORMA (tipo + no-vacío) para cualquier token no-color que un skin setee — no solo color. El contrato distingue hard-gate (contraste AA) de form-gate (longitud/número/tiempo/…) y deja de sobre-declarar.
• Tailwind fontFamily pasa a var-based (heading/body/serif/mono + display alias) — themeable desde Tailwind también.
• Los cuatro bundles repuntan sus literales a los tokens nuevos: ~45 sitios de fuente → heading/body/serif, 42 anillos de foco → --focus-width/--focus-offset (signo preservado en offsets negativos), ~86 bordes → --border-width, container/app-shell/drawer/measure → sus tokens; aspect-ratio reusa --media-ratio.
• COMPAT — ninguna ruptura: --font-display sigue resolviendo (alias vivo). Quien quiera títulos ≠ cuerpo ahora setea --font-heading/--font-body por separado.

Fixed

• Ancho de lectura de prose unificado a --measure (65ch): .mui-api__desc/__deprecated-note usaban 70ch inconsistente — el único cambio visual del release (angostamiento de 5ch en esos dos sitios).

---

Changelog completo: CHANGELOG.md · Theming: THEMING.md · La constitución: DESIGN.md

v0.6.0 — el deshierbe

El deshierbe: cierre del backlog T9 abierto desde 0.3 — los tres hallazgos F (#8/#9/#10) y los Minors diferidos del review final de 0.3.0. El off-canvas móvil cambia de mecanismo (panel position:fixed → <dialog class="mui-drawer"> nativo, top layer) — el único cambio de comportamiento del release. Sin piezas nuevas de peso (mui-drawer--start es variante): 68 piezas con contrato · 193 pares WCAG AA · audit de cierre 0 pares nuevos.

Nota: los cambios de esta versión también viajan dentro de 0.7.0 en npm — 0.6.0 se tagueó retroactivamente para completar el historial; en npm la versión publicada que los incluye es 0.7.0+.

Added

• mui-drawer--start — variante de mui-drawer anclada al inline-start (izquierda): mismo contrato de foco/teclado que el default, ancla/borde/animación de entrada espejados. La usa el shell mui-docs para su menú móvil ≤880px.

Changed

• El off-canvas móvil de mui-header y mui-docs pasa de un panel position:fixed + [data-nav-open] (+ scrim) a un <dialog class="mui-drawer"> (--start en docs) abierto con .showModal() — top layer nativo: focus trap, Esc y ::backdrop los da el navegador. Consecuencias:
  1. Ya NO hace falta html,body { overflow-x: clip } en la raíz — se removió de los cuatro proofs que lo tenían (blog, commerce, gallery, saas), y docs.html deja de overflowear gracias al <dialog> (top layer) — el fondo de F#8.
  2. El menú móvil es un elemento APARTE (un <dialog> hermano con los links duplicados) — el patrón estándar de "mobile menu".
  3. COMPAT — quien consumía el off-canvas viejo migra el toggle de [data-nav-open] a dialog.showModal()/.close() sobre un mui-drawer; el scrim y [data-nav-open] se borran (el ::backdrop nativo los reemplaza).
• El buscador de commerce vuelve en móvil (F#9): antes se ocultaba ≤880px sin sustituto; ahora vive duplicado dentro del <dialog> del menú móvil.
• Badge SOC 2 de saas.html unificado a --accent; mui-stack/mui-cluster documentan su anatomy.
• DESIGN §6 fija la política del guard [hidden]: aplica al contenedor que un filtro oculta (.mui-media-grid__item[hidden]), NO a los medios internos — resuelve la política abierta del review de 0.3.0.
• Contratos: 68 → 68 (mui-drawer--start es variante, no pieza nueva).

Fixed

• Media slots usan combinador HIJO (> :is(img, svg, picture)): un <picture><img></picture> ya no matchea ambos y compone el hover-scale dos veces (≈1.061 vs ≈1.03) — F#10. En mui-media-grid el guard queda al nivel del figure puente.
• Guard de set vacío en el lightbox del gallery: show(i) corta si visibleItems() devuelve [] en vez de indexar items[NaN].

Backlog T9 cerrado: los cinco clusters (A–E, 0.3.0–0.5.0) + los hallazgos F (#8/#9/#10) + los Minors.

---

Changelog completo: CHANGELOG.md

v0.5.0 — la mano

La mano: el cluster D del battle-test 0.3 — siete piezas de pulido reportadas por los proofs, sin gaps nuevos.

npm i @milpa/design

Tres piezas nuevas (mui-pager, mui-stack, mui-cluster) y el resto variantes/behaviors sobre contratos existentes: 68 piezas con contrato · 193 pares WCAG AA · audit de cierre 0 pares nuevos.

Added

• mui-pager — navegación prev/next entre páginas hermanas (docs, blog, cualquier secuencia), extraída como pieza standalone del shell docs para que cualquier consumidor la reuse: grid de 2 columnas, cards silenciosas (border-subtle → border-strong al hover), sin prev el --next se ancla solo a la columna 2.
• mui-stack / mui-cluster — utilidades de ritmo y agrupación, puro layout (sin fondo, borde ni semántica): mui-stack apila en columna con gap consistente; mui-cluster arma una fila que ENVUELVE (badges, botones, tags) con gap + alineación centrada. --sm/--lg mueven el gap a space-2/space-6 (default space-4).
• mui-stat --lg — variante hero-stat: solo el valor sube de escala (text-4xl), para KPIs destacados.
• mui-drawer --docked — la piel del drawer sobre un <aside> estático en vez de un <dialog>: panel lateral persistente, NO modal — sin backdrop, foco-trap, Esc ni [open]. El contrato documenta la línea dura docked ≠ dialog.
• mui-chart --line + fila de ticks en HTML — serie temporal vía <polyline>/<path> con --viz-1..6; los ticks del eje X van como .mui-chart__ticks/__tick en HTML (mono, text-muted) porque el <text> SVG se distorsiona al escalar bajo el viewBox.

Changed

• El shell docs compone mui-pager en vez de tener su propio idiom.
• El contrato de mui-footer documenta __mantra como slot GENÉRICO de tagline de producto (no hardcodeado a Milpa): cualquier consumidor lo llena con el suyo, en su idioma.
• El contrato de mui-media-gallery documenta el swap de thumbs: click en un __thumb reemplaza __main, mueve aria-current al thumb elegido y actualiza el nombre accesible de __main por tag (alt en <img>/<picture>, role="img" + aria-label en <svg>); re-seleccionar el activo es un no-op. JS de referencia en proof/commerce.html.
• Contratos: 65 → 68 (nuevos mui-pager/mui-stack/mui-cluster; el resto son variantes/behaviors).

---

Changelog completo: CHANGELOG.md · La constitución: DESIGN.md · Theming: THEMING.md

v0.4.0 — el trato

El trato: dos variantes que cierran el cluster C del battle-test 0.3 — el stepper de cantidad extraído a primitiva compartida, y las tabs con variante pill que estrena el patrón de filtro de panel único.

npm i @milpa/design

Sin piezas nuevas (son variantes): 65 piezas con contrato · 193 pares WCAG AA · audit de cierre 0 pares nuevos.

Added

• mui-input-group--stepper — número ± segmentado: el grupo lleva el borde/radio/foco, el .mui-input interior va borderless, y los botones .mui-input-group__step se deshabilitan ([disabled]) en los límites (el consumidor cablea click → ajusta value respetando min/max/step y emite input+change; cada botón lleva aria-label Decrease/Increase). Compone con --sm. El PDP y el cart-line de commerce lo adoptan — antes cada uno re-implementaba su propio control de cantidad.
• mui-tabs--pill — variante visual de mui-tabs: pestañas con forma de pill en vez del subrayado; la seleccionada = fondo accent-subtle + texto accent-text (el fill ES el indicador, sin border-bottom). El gallery la estrena para su filtro de categorías.

Changed

• El contrato de mui-tabs documenta el patrón de filtro de panel único: todas las tabs de un role="tablist" apuntan a UNA región role="tabpanel" (vía aria-controls); seleccionar una tab filtra los ítems de esa región vía [hidden] en vez de cambiar de panel, con roving tabindex y aria-selected sincronizados por el JS del consumidor. Caveat documentado: role="tab" implica nativamente cambio de panel — usarlo para un filtro es un estiramiento aceptado del patrón (elegido por familiaridad sobre un toolbar aria-pressed).
• Contratos: 65 (sin cambio — ambas piezas son variantes): actualizados mui-input (variante stepper + group__step) y mui-tabs (variante pill + el patrón de filtro).

---

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

v0.3.0 — la plaza

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

v0.2.0 — la segunda cosecha

La segunda cosecha: documentación versionada, artefactos de contenido, vocabulario de layouts y el contrato de theming para plugins.

npm i @milpa/design

63 piezas con contrato · 193 pares WCAG AA (dark + light, verificados en CI) · todo el CSS publicado en @layer milpa.*.

Added

• Theming inyectable (la costura para plugins). Todo el CSS publicado declara el orden canónico @layer milpa.tokens, …, milpa.layouts y envuelve sus reglas en su capa: el CSS sin layer del consumidor/plugin siempre gana — sin !important, sin guerras de especificidad. Tres niveles en THEMING.md (retokenizar / reskin / reemplazo total). theme.contract.json (generado, drift-gated) publica los tokens requeridos + los pares AA como datos + invariantes; scripts/verify-theme.mjs (npm run verify:theme) es el validador de referencia.
• Tokens nuevos: --syntax-* (11, highlighting de código, cada color 4.5:1 sobre --syntax-bg en ambos temas) y --viz-1..6 + --viz-*-active (charts categóricos, 3:1, separación verificada para daltonismo).
• artifacts/ — el elote, 15 piezas de contenido: Code, Terminal, CodeGroup, Chart (bars/line/donut/sparkline), Quote, Callout, Api, Steps, FileTree, Prose, Toc, Search (⌘K) + el kit de versionado (VersionSwitcher, VersionBanner, Changelog) y las variantes de estabilidad del Badge (--since / --deprecated / --experimental).
• layouts/ — la parcela, 11 piezas de estructura: mui-docs (shell de documentación versionada), Page/Section/Container, Hero, FeatureGrid, CtaBand, Pricing, Faq, Testimonial, Footer, MediaGrid, Lightbox.
• Commerce en components/: ProductCard, Price, Rating, MediaGallery, CartLine.
• Seis battle-tests en proof/ (compuestos SOLO del sistema): docs, blog, commerce, gallery (lightbox real con teclado), saas y themed — el blog vistiendo el skin "Nopal" (validado 193/193) sin tocar un solo bundle.
• Exports nuevos: ./artifacts.css, ./layouts.css, ./theme, ./artifacts/*, ./layouts/*, ./package.json.

Changed

• Todo el CSS publicado vive en cascade layers — nota de compat: los overrides sin layer de consumidores existentes ahora ganan SIEMPRE (antes dependían de especificidad). Es una mejora de comportamiento de cascada → minor bump.
• Gate: 135 → 193 checks AA. Governance verifica la declaración @layer de cada CSS publicado (63 contratos).
• La landing pasa a inglés (el mantra "Siembra módulos, cosecha aplicaciones." queda en español, es la firma) y consume el vocabulario nuevo de layouts/.

---

Changelog completo: CHANGELOG.md · La constitución: DESIGN.md

@milpa/design 0.1.0 — la primera cosecha 🌽

Primera versión publicada: npm i @milpa/design

Base de componentes admin completa:

• Tokens dark-first (DTCG, fuente de verdad) + preset Tailwind — generados con drift gate
• 32 componentes token-driven con contrato introspectable (*.contract.json): 14 primitivas + 18 componentes, incluido el shell admin completo
• Motion "el viento" con contrato reduced-motion
• Kit de logo: símbolo Grano, wordmark grano-i, lockups, app icon (mono-oro)
• Triple quality gate: 135 pares WCAG AA + gobernanza del molde + drift de dist/ (npm test, corre en CI)

Docs: DESIGN.md (la constitución) · HANDOFF.md

Siembra módulos, cosecha aplicaciones.