La versión 2.0.1 reúne correcciones en las utilidades base, mejora la guía de instalación e incorpora nuevas formas de construir consultas de medios y de contenedor.
Se corrigió la integración de normalize-svg con replace-base y position. Antes podía generarse primero el z-index predeterminado de position y después el configurado para el SVG, lo cual causaba como efecto la aparición de un z-index duplicado. Ahora el valor se propaga directamente y el CSS resultante contiene una sola declaración.
Las utilidades de tamaño y posición convierten automáticamente a píxeles los números sin unidad. La normalización se aplica a tamaños tipográficos, desplazamientos, ancho, alto, separación, máscaras SVG y dimensiones del scroll, mientras conserva medidas que ya tienen unidad y valores como auto.
normalize-px agrega px únicamente a un número sin unidad. Por ejemplo, normalize-px(220) devuelve 220px; valores como 20rem o auto se mantienen sin cambios.
La función elimina la unidad solo cuando recibe un número. Si recibe una palabra clave u otro tipo de valor, lo devuelve sin modificar; así evita operaciones matemáticas inválidas con entradas como normal y conserva el resultado esperado de strip-unit(24px): 24.
El nuevo menú se construye con los encabezados seleccionados de cada página, conserva la jerarquía de secciones, navega mediante hashes y destaca el contenido visible durante el desplazamiento. En pantallas estrechas se vuelve desplegable, se oculta al imprimir y excluye los encabezados internos de TabPanel.
Node.js, npm y la raíz del proyecto se presentan en tarjetas independientes con versiones recomendadas y comandos de comprobación. Los comandos pueden copiarse desde la tarjeta y la distribución se adapta al ancho disponible.
La guía separa los pasos comunes de los específicos de cada entorno. npm init -y solo se indica cuando falta package.json; SISASS se instala una vez; y cada integración especifica su compilador: sass para Vanilla, SQHTML y React con Webpack, o preferentemente sass-embedded para React con Vite.
pb calcula la medida representada por un porcentaje respecto a una base mediante la operación (value * base) / 100. Usa px como unidad predeterminada: un valor de 20 sobre una base de 1920 devuelve 384px. Es la operación inversa conceptual de bp.
brp, brpp, brpl, brph y brpwh conservan sus llamadas posicionales y añaden una sintaxis alternativa mediante mapas y alias. También validan claves, tipos y unidades, y conservan medidas propias como 48rem sin convertirlas en valores inválidos como 48rempx. mbr acepta ahora números o mapas para cada breakpoint.
Genera un rango inclusivo mínimo y máximo sobre width o height. Comprueba que existan ambos límites, valida el eje y evita rangos en los que el valor mínimo sea mayor que el máximo.
Construye media queries mediante un único mapa. Admite dimensiones, orientación, relación de aspecto, resolución, gama y rango de color, modo de visualización, capacidades de interacción y preferencias de accesibilidad. Las condiciones usan and de forma predeterminada y también admiten or y negación.
Genera reglas @container para adaptar un componente al espacio disponible en su contenedor, sin depender del tamaño de la ventana. Admite contenedores nombrados, dimensiones, rangos, relación de aspecto y orientación.
El nuevo mixin privado _media_single_axis centraliza la construcción y validación de consultas sobre un solo eje. brp, brpp, brpl y brph lo reutilizan para mantener un comportamiento consistente sin duplicar lógica.