Changelog

Beta

Qué cambió en Polen, de lo más nuevo a lo más viejo.

Octubre 2026

Guía para developers desde cero

Para developers es ahora un paso a paso verificado en un proyecto nuevo: crear el proyecto, preparar Polen, conectar los estilos, la fuente, dark mode y el primer componente en pantalla. Dos cambios de fondo lo hacen posible. npx shadcn@latest init https://…/r/init.json deja el proyecto listo (escribe components.json y trae los estilos sin tocar globals.css); el init de shadcn a secas, que la guía mandaba antes, escribe su propio tema después del @import de Polen y lo pisa. Y el mapeo de tokens a utilidades de Tailwind (text-md, shadow-lg, ease-enter, bg-white…) más los estilos base vivían solo en el CSS del sitio: ahora van en styles/polen.css, que se instala junto con tokens.css. Sin eso, los componentes instalados afuera perdían sombras, easing y tamaños de texto. De paso, la URL de los comandos de instalación sale sola del dominio de producción de Vercel, y Button mostraba el tag <Install> como texto.

Code Connect

68 templates de Code Connect en figma/: uno por cada set público de 🌻 FDS Components y por cada sub-componente privado con equivalente en código. Escritos contra las propiedades reales de los sets y verificados sin Figma: npm run figma:check compara cada lectura con un snapshot de los sets, exige que toda propiedad esté mapeada o justificada, ejecuta 4.227 combinaciones y compila los 1.585 snippets distintos contra registry/ds. La publicación queda pendiente: Figma solo la habilita en planes Organization o Enterprise. Guía nueva: Code Connect, con el índice Figma ↔ código completo.

Profundidad de ejemplos

25 ejemplos nuevos en los componentes que tenían uno solo. Table: selección múltiple con acciones en lote, estados cargando/vacía, muchas filas con encabezado fijo y menú de acciones. Toast: toast.promise() (nuevo en el hook: cargando con spinner → éxito o error) y apilado con persistente y prioridad. Drawer: formulario, bottom sheet y tamaños. Popover: confirmación liviana, ayuda contextual y controlado. Card: grilla, horizontal, seleccionable (radio cards) e indicadores. Y uno más para Avatar, Divider, Empty state, File upload, Number field, Skeleton, Slider, Spinner, Stepper, Link y Banner. Tests de Toast (3) → 266.

Templates de página

Sección nueva con cinco páginas completas armadas solo con componentes: Login, Dashboard, Listado, Configuración y Checkout. Cada una se ve a pantalla completa en /templates/<nombre> (sin el header de Polen, gracias a un route group), la doc la embebe en un iframe con anchos de escritorio, tablet y móvil, y se instala con npx shadcn add …/r/template-<nombre>.json en app/<nombre>/page.tsx. De paso, Progress acepta aria-label para barras sin label visible.

Playground en los 41 componentes

Cada página de componente tiene ahora un playground en la pestaña Código: controles para cada prop que cambia algo visible, preview en vivo y snippet generado del mismo estado (34 nuevos; ya existían Button, Input, Switch, Alert, Badge, Avatar y Progress). Chip y Banner tienen el suyo dentro de Badge y Alert. De paso: Navbar collapse="never" para barras con pocos links y Footer compact para la versión de solo fila final. 82 tests nuevos montan cada playground, pasan axe y renderizan cada opción de cada control.

Figma: los 9 nacidos en código

Construidos en 🌻 FDS Components, una página por componente, con el spec de cada doc: Combobox (+ opción y chip), Number field, Slider, Toggle group (+ item), File upload (+ archivo), Date picker (+ Calendar y día), Navbar (+ link, desplegable, drawer), Sidebar (+ item y sub-ítem) y Footer (+ link). Todo bindeado a Semantic / Spacing / Radius / Border / Typography, iconos reales de FDS Iconography, Button y Avatar anidados. Texto en Inter hasta aplicar PP Neue Montreal.

Los tres componentes de estructura que faltaban. Navbar con desplegables (Base UI Navigation Menu) que se pliega a ☰ + Drawer según el ancho de la barra; Sidebar con grupos, un nivel de anidado y riel de iconos plegable; Footer con marca, columnas y fila legal. Patrón "Estructura de app" en Patrones. 15 iconos nuevos.

Date picker y Calendar

Campo dd/mm/aaaa con validación y Calendar en un Popover; Calendar también suelto, simple o de rango, con teclado APG completo.

Formularios avanzados

Combobox (simple y múltiple con chips), Number field, Slider (simple y rango), Toggle group y File upload. Input suma prefix, suffix, action y radius="full" (Rounded Input y Trailing button de Figma). Badge Group portado.

Tests

Vitest + Testing Library + axe-core: 127 tests. Todos los ejemplos del registry pasan por axe; tests de comportamiento para Button, formularios, navegación y overlays. Encontraron tres bugs reales: loading dejaba pasar el clic por teclado, dos <nav> iguales en una página, y aria-label sobre <div> sin rol en contenedores de carga.

Septiembre 2026

Figma: higiene y componentes nuevos

Chip: set reparado (los tres tipos compartían ejes distintos).
Páginas renombradas y las legacy marcadas 🗄 Archivo; sets OLD privados y deprecados.
Descripciones en Modal, Card, Tooltip y sub-componentes; página 📋 Auditoría.
Construidos en Figma los 13 componentes que nacieron en código: Switch, Avatar (público, con grupo), Link, Divider, Spinner, Skeleton, Progress, Empty state, Stepper, Popover, Dropdown menu, Drawer y Table. Texto en Inter hasta aplicar PP Neue Montreal.

Colección Semantic en Figma (105 roles) y tokens/semantic.ts. Todos los componentes de FDS Components migrados de primitivas a roles.
Roles accent (color del rol en primer plano) por cada rol de color.
Spacing (19) y Radius (11) con los valores reales de Figma; 6xl era 40 y es 36.
Colecciones nuevas: Elevation (6 sombras), Border width, Opacity, Size, Breakpoints, Motion.
Descripción y nombre de CSS en las 216 variables existentes.

Documentación

Plantilla de componente con pestañas Uso · Specs · Código · Accesibilidad, anatomía, do/don't, tokens por estado y mapa Figma ↔ código.
Sección Empezar (diseñadores, developers, estado de componentes) y Guías (patrones, contenido, contribuir).
Registry instalable con npx shadcn add. Playground genérico.
⌘K busca también secciones dentro de las páginas.
Fix: los componentes mostraban doble anillo de foco (regla global fuera de capa).

Agosto 2026

Color: las 135 primitivas reales de Figma (11 rampas × 12 pasos, light y dark) reemplazan la paleta provisional. Verificador de contraste con selector visual.

Julio 2026

Fase 0–4 del sitio: fundación, hero, sistema de componentes con preview y código sincronizados, motion, ⌘K.
Button portado 1:1 del set de 640 variantes.
Iconografía: sets Line y Duocolor (1172 cada uno).
Tipografía: la escala real de Figma (3 tiers × 6 pasos).