holygrail5 1.0.20 → 1.0.22

package/README.md

@@ -45,6 +45,16 @@ Generador de CSS + guía HTML pensado para design systems ligeros: declaras tu `
     - [Contribuir](#contribuir)
   - [15. Licencia](#15-licencia)
   - [Changelog](#changelog)
+    - [v1.0.22 - Junio 2026](#v1022---junio-2026)
+    - [v1.0.21 - Mayo 2026](#v1021---mayo-2026)
+    - [v1.0.20 - Abril 2026](#v1020---abril-2026)
+    - [v1.0.19 - Abril 2026](#v1019---abril-2026)
+    - [v1.0.18 - Abril 2026](#v1018---abril-2026)
+    - [v1.0.17 - Febrero 2026](#v1017---febrero-2026)
+    - [v1.0.16 - Febrero 2026](#v1016---febrero-2026)
+    - [v1.0.15 - Febrero 2026](#v1015---febrero-2026)
+    - [v1.0.14 - Febrero 2026](#v1014---febrero-2026)
+    - [v1.0.13 - Febrero 2026](#v1013---febrero-2026)
     - [v1.0.12 - Diciembre 2024](#v1012---diciembre-2024)
 
 ---
@@ -547,6 +557,68 @@ Usa, adapta y comparte libremente mientras conserves la atribución.
 
 ## Changelog
 
+### v1.0.22 - Junio 2026
+
+- **Seguridad (guía y demos):** se escapan todos los valores del `config.json` al volcarse en la documentación generada (colores, tipografía, font families, variables CSS, helpers, aspect ratios, breakpoints, grid y containers). Evita inyección de HTML/JS al construir con un config no confiable y publicar `dist/index.html`. Nuevo `escapeHtml` centralizado en `src/generators/utils.js`.
+- **Seguridad (dev-server):** `src/dev-server.js` ahora captura URLs malformadas (ya no cae el proceso con `GET /%`), corrige el filtro de path traversal por prefijo y escucha solo en `127.0.0.1`.
+- **Fix:** los reemplazos del `ThemeTransformer` usan replacer de función para no corromper la salida cuando el contenido inyectado contiene `$`.
+- **Fix:** `getPackageVersion()` leía una ruta inexistente y la guía mostraba la versión como vacía; ahora muestra la versión real.
+- **Tests:** nuevo `tests/escaping.test.js` de regresión anti-inyección (suite en 29 tests). El CSS generado (`dist/output.css`, `dist/themes/dutti.css`) no cambia.
+
+### v1.0.21 - Mayo 2026
+
+- Ajustes en `typo-generator`: refinamiento de la generación de tablas tipográficas y casos límite del placeholder `HG_TYPO_TABLE`.
+
+### v1.0.20 - Abril 2026
+
+- Actualización de labels en la guía y demos (etiquetas de utilidades y secciones).
+- Nuevas clases tipográficas y sus estilos asociados (`config.json`, `typo-generator.js`, demo de Dutti).
+
+### v1.0.19 - Abril 2026
+
+- Bump de versión y mantenimiento de `package.json`.
+
+### v1.0.18 - Abril 2026
+
+- Refactor amplio bajo el commit "cambios hg5":
+  - Reorganización de skills (`.claude/skills`, `.cursor/skills/maquetar-holygrail5`) y `.cursorrules`.
+  - Fuentes Suisse Intl y Suisse Works incorporadas en `src/assets/fonts/`.
+  - Documentación nueva en `docs/`: `ANALISIS-ARQUITECTURA.md`, `ANALISIS-DESIGN-SYSTEM.md`, `CHANGELOG-MEJORAS.md`, `ESTRUCTURA-CSS.md`, `GUIA-USO-OTRO-PROYECTO.md`, `SUPERPROMPT.md`.
+  - Ajustes en `asset-manager.js`, `build-orchestrator.js`, `components-generator.js` y `guide-styles.css`.
+- Nueva clase de botón **badge** y documentación asociada en el tema Dutti.
+- Tarjeta de producto y ajustes de `margin-left` y configuración del grid.
+
+### v1.0.17 - Febrero 2026
+
+- Nueva release con limpieza general y consolidación de cambios previos.
+
+### v1.0.16 - Febrero 2026
+
+- Botón **badge** inicial (variantes y estilos personalizados).
+
+### v1.0.15 - Febrero 2026
+
+- Nuevo botón con estilos personalizados (`themes/dutti/_buttons.css`, `dutti-demo.html`).
+
+### v1.0.14 - Febrero 2026
+
+- Limpieza: eliminados estilos duplicados traspasados desde HG2.
+- Mejoras en grids (`Grids`).
+- Cambio del color verde y nuevo skill para estructura de archivos CSS.
+- Ajuste de columnas (`cambios cols`).
+
+### v1.0.13 - Febrero 2026
+
+- Refactor de la guía: ajustes de estilos y estructura (`guide-styles.css`, `html-generator.js`, demo de Dutti).
+- Mejoras en `docs-generator`:
+  - Generación de la cuadrícula de colores con clasificación de primarios y semánticos.
+  - Margen lateral y columnas de gutter en la tabla HTML; configuración de grid actualizada.
+  - Conversión de `fontSize` a px y mejora de la tabla de clases.
+- Nuevos helpers de espaciado con prefijo `hg-` para clases inline y block.
+- **Soporte para ratios de aspecto** en `config.json`, generadores y guía HTML, con tests dedicados; nueva clase para imágenes/vídeos en ratios de aspecto y propiedad `display` en `hg-aspect-image`.
+- Integración de la gestión de assets en el flujo de build (eliminada duplicación entre scripts).
+- Documentación: índice y secciones del README, simplificación de `SUPERPROMPT.md`.
+
 ### v1.0.12 - Diciembre 2024
 
 **🎉 Refactorización arquitectural completa**

package/config.json

@@ -68,6 +68,22 @@
         "source": "src/assets/fonts/suisse-intl-semibold.woff",
         "dest": "dist/assets/fonts/suisse-intl-semibold.woff"
       },
+      {
+        "source": "src/assets/fonts/SuisseIntlMono-Regular-WebS.woff2",
+        "dest": "dist/assets/fonts/SuisseIntlMono-Regular-WebS.woff2"
+      },
+      {
+        "source": "src/assets/fonts/SuisseIntlMono-Regular-WebS.woff",
+        "dest": "dist/assets/fonts/SuisseIntlMono-Regular-WebS.woff"
+      },
+      {
+        "source": "src/assets/fonts/SuisseIntlMono-Bold-WebS.woff2",
+        "dest": "dist/assets/fonts/SuisseIntlMono-Bold-WebS.woff2"
+      },
+      {
+        "source": "src/assets/fonts/SuisseIntlMono-Bold-WebS.woff",
+        "dest": "dist/assets/fonts/SuisseIntlMono-Bold-WebS.woff"
+      },
       {
         "source": "src/assets/fonts/suisse-works-regular.woff2",
         "dest": "dist/assets/fonts/suisse-works-regular.woff2"
@@ -120,7 +136,9 @@
     "primary-light": "\"suisse-light\", Arial, Helvetica, sans-serif",
     "primary-regular": "\"suisse-regular\", Arial, Helvetica, sans-serif",
     "primary-bold": "\"suisse-semibold\", Arial, Helvetica, sans-serif",
-    "secondary": "\"suisse-medium\", Arial, Helvetica, sans-serif"
+    "secondary": "\"suisse-medium\", Arial, Helvetica, sans-serif",
+    "mono-regular": "\"suisse-mono-regular\", Consolas, Menlo, Monaco, \"Courier New\", monospace",
+    "mono-bold": "\"suisse-mono-bold\", Consolas, Menlo, Monaco, \"Courier New\", monospace"
   },
   "spacingMap": {
     "0": "0",
@@ -876,6 +894,76 @@
         "fontSize": "12px",
         "lineHeight": "1"
       }
+    },
+    "label-m-b": {
+      "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
+      "fontWeight": "300",
+      "letterSpacing": "0.16em",
+      "textTransform": "uppercase",
+      "mobile": {
+        "fontSize": "12px",
+        "lineHeight": "1"
+      },
+      "desktop": {
+        "fontSize": "12px",
+        "lineHeight": "1"
+      }
+    },
+    "label-s": {
+      "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
+      "fontWeight": "100",
+      "letterSpacing": "0.06em",
+      "textTransform": "uppercase",
+      "mobile": {
+        "fontSize": "10px",
+        "lineHeight": "1"
+      },
+      "desktop": {
+        "fontSize": "10px",
+        "lineHeight": "1"
+      }
+    },
+    "label-s-b": {
+      "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
+      "fontWeight": "300",
+      "letterSpacing": "0.06em",
+      "textTransform": "uppercase",
+      "mobile": {
+        "fontSize": "10px",
+        "lineHeight": "1"
+      },
+      "desktop": {
+        "fontSize": "10px",
+        "lineHeight": "1"
+      }
+    },
+    "label-mono": {
+      "fontFamily": "\"suisse-mono-regular\", Arial, Helvetica, sans-serif",
+      "fontWeight": "400",
+      "letterSpacing": "0.06em",
+      "textTransform": "uppercase",
+      "mobile": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      },
+      "desktop": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      }
+    },
+    "label-mono-b": {
+      "fontFamily": "\"suisse-mono-bold\", Arial, Helvetica, sans-serif",
+      "fontWeight": "700",
+      "letterSpacing": "0.06em",
+      "textTransform": "uppercase",
+      "mobile": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      },
+      "desktop": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      }
     }
   }
 }

package/dist/developer-guide.md

@@ -384,6 +384,10 @@ Las clases tipográficas se generan desde `config.typo`. Cada clase se aplica di
 <!-- Body variants -->
 <p class="hg-hg-body-m">Body medium (12→13px)</p>
 <p class="hg-hg-body-m-b">Body medium bold (weight 400)</p>
+
+<!-- Labels mono (Suisse Intl Mono, 10px / 120%) -->
+<span class="label-mono">Label mono regular</span>
+<span class="label-mono-b">Label mono bold</span>
 ```
 
 ### Cómo funciona

package/dist/guide-styles.css

@@ -41,6 +41,22 @@
        url('assets/fonts/suisse-intl-semibold.woff2') format('woff2'),
        url('assets/fonts/suisse-intl-semibold.woff') format('woff');
 }
+@font-face {
+  font-family: "suisse-mono-regular";
+  font-weight: 400;
+  font-display: swap;
+  src: local("SuisseIntlMono-Regular"),
+       url('assets/fonts/SuisseIntlMono-Regular-WebS.woff2') format('woff2'),
+       url('assets/fonts/SuisseIntlMono-Regular-WebS.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-mono-bold";
+  font-weight: 700;
+  font-display: swap;
+  src: local("SuisseIntlMono-Bold"),
+       url('assets/fonts/SuisseIntlMono-Bold-WebS.woff2') format('woff2'),
+       url('assets/fonts/SuisseIntlMono-Bold-WebS.woff') format('woff');
+}
 /* Suisse Works (serif) — reservado para el tema Limited */
 @font-face {
   font-family: "suisse-works-regular";

package/dist/index.html

@@ -15,8 +15,8 @@
 
   <!-- Lenis Smooth Scroll - Solo para la guía -->
   <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.29/bundled/lenis.min.js"></script>
-  <link rel="stylesheet" href="output.css?v=1777016281960">
-  <link rel="stylesheet" href="guide-styles.css?v=1777016281948">
+  <link rel="stylesheet" href="output.css">
+  <link rel="stylesheet" href="guide-styles.css?v=1780410224827">
   <style>
     
     body {
@@ -74,7 +74,11 @@
         </a>
       </div>
                <p class="text-m guide-sidebar-meta">
-          last update: 24/4/2026, 9:38:01
+          last update: 2/6/2026, 16:23:44
+        </p>
+      
+        <p class="text-m guide-sidebar-meta-small">
+          Version: 1.0.22
         </p>
       
       
@@ -425,27 +429,39 @@
           
       <tr>
         <td class="guide-table-name">primary-light</td>
-        <td class="guide-font-family-preview" style='font-family: "suisse-light", Arial, Helvetica, sans-serif;'>Aa</td>
-        <td class="guide-table-value ">"suisse-light", Arial, Helvetica, sans-serif</td>
+        <td class="guide-font-family-preview" style='font-family: &quot;suisse-light&quot;, Arial, Helvetica, sans-serif;'>Aa</td>
+        <td class="guide-table-value ">&quot;suisse-light&quot;, Arial, Helvetica, sans-serif</td>
         <td class="guide-table-value">--hg-typo-font-family-primary-light</td>
       </tr>
       <tr>
         <td class="guide-table-name">primary-regular</td>
-        <td class="guide-font-family-preview" style='font-family: "suisse-regular", Arial, Helvetica, sans-serif;'>Aa</td>
-        <td class="guide-table-value ">"suisse-regular", Arial, Helvetica, sans-serif</td>
+        <td class="guide-font-family-preview" style='font-family: &quot;suisse-regular&quot;, Arial, Helvetica, sans-serif;'>Aa</td>
+        <td class="guide-table-value ">&quot;suisse-regular&quot;, Arial, Helvetica, sans-serif</td>
         <td class="guide-table-value">--hg-typo-font-family-primary-regular</td>
       </tr>
       <tr>
         <td class="guide-table-name">primary-bold</td>
-        <td class="guide-font-family-preview" style='font-family: "suisse-semibold", Arial, Helvetica, sans-serif;'>Aa</td>
-        <td class="guide-table-value ">"suisse-semibold", Arial, Helvetica, sans-serif</td>
+        <td class="guide-font-family-preview" style='font-family: &quot;suisse-semibold&quot;, Arial, Helvetica, sans-serif;'>Aa</td>
+        <td class="guide-table-value ">&quot;suisse-semibold&quot;, Arial, Helvetica, sans-serif</td>
         <td class="guide-table-value">--hg-typo-font-family-primary-bold</td>
       </tr>
       <tr>
         <td class="guide-table-name">secondary</td>
-        <td class="guide-font-family-preview" style='font-family: "suisse-medium", Arial, Helvetica, sans-serif;'>Aa</td>
-        <td class="guide-table-value ">"suisse-medium", Arial, Helvetica, sans-serif</td>
+        <td class="guide-font-family-preview" style='font-family: &quot;suisse-medium&quot;, Arial, Helvetica, sans-serif;'>Aa</td>
+        <td class="guide-table-value ">&quot;suisse-medium&quot;, Arial, Helvetica, sans-serif</td>
         <td class="guide-table-value">--hg-typo-font-family-secondary</td>
+      </tr>
+      <tr>
+        <td class="guide-table-name">mono-regular</td>
+        <td class="guide-font-family-preview" style='font-family: &quot;suisse-mono-regular&quot;, Consolas, Menlo, Monaco, &quot;Courier New&quot;, monospace;'>Aa</td>
+        <td class="guide-table-value ">&quot;suisse-mono-regular&quot;, Consolas, Menlo, Monaco, &quot;Courier New&quot;, monospace</td>
+        <td class="guide-table-value">--hg-typo-font-family-mono-regular</td>
+      </tr>
+      <tr>
+        <td class="guide-table-name">mono-bold</td>
+        <td class="guide-font-family-preview" style='font-family: &quot;suisse-mono-bold&quot;, Consolas, Menlo, Monaco, &quot;Courier New&quot;, monospace;'>Aa</td>
+        <td class="guide-table-value ">&quot;suisse-mono-bold&quot;, Consolas, Menlo, Monaco, &quot;Courier New&quot;, monospace</td>
+        <td class="guide-table-value">--hg-typo-font-family-mono-bold</td>
       </tr>
         </tbody>
       </table>
@@ -682,6 +698,61 @@
           <td><span class="hg-typo-num">1</span></td>
           <td>0.16em</td>
           <td>uppercase</td>
+        </tr>
+        <tr>
+          <td class="hg-typo-preview"><span class="label-m-b">Aa Bb Cc 123</span></td>
+          <td><code>.label-m-b</code></td>
+          <td><code>primary-regular</code> <span class="hg-typo-meta">&quot;suisse-regular&quot;, Arial, Helvetica, sans-serif</span></td>
+          <td>300</td>
+          <td><span class="hg-typo-num">12px</span></td>
+          <td><span class="hg-typo-num">12px</span></td>
+          <td><span class="hg-typo-num">1</span></td>
+          <td>0.16em</td>
+          <td>uppercase</td>
+        </tr>
+        <tr>
+          <td class="hg-typo-preview"><span class="label-s">Aa Bb Cc 123</span></td>
+          <td><code>.label-s</code></td>
+          <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-light&quot;, Arial, Helvetica, sans-serif</span></td>
+          <td>100</td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">1</span></td>
+          <td>0.06em</td>
+          <td>uppercase</td>
+        </tr>
+        <tr>
+          <td class="hg-typo-preview"><span class="label-s-b">Aa Bb Cc 123</span></td>
+          <td><code>.label-s-b</code></td>
+          <td><code>primary-regular</code> <span class="hg-typo-meta">&quot;suisse-regular&quot;, Arial, Helvetica, sans-serif</span></td>
+          <td>300</td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">1</span></td>
+          <td>0.06em</td>
+          <td>uppercase</td>
+        </tr>
+        <tr>
+          <td class="hg-typo-preview"><span class="label-mono">Aa Bb Cc 123</span></td>
+          <td><code>.label-mono</code></td>
+          <td><code>suisse-mono-regular</code> <span class="hg-typo-meta">&quot;suisse-mono-regular&quot;, Arial, Helvetica, sans-serif</span></td>
+          <td>400</td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">1.2</span></td>
+          <td>0.06em</td>
+          <td>uppercase</td>
+        </tr>
+        <tr>
+          <td class="hg-typo-preview"><span class="label-mono-b">Aa Bb Cc 123</span></td>
+          <td><code>.label-mono-b</code></td>
+          <td><code>suisse-mono-bold</code> <span class="hg-typo-meta">&quot;suisse-mono-bold&quot;, Arial, Helvetica, sans-serif</span></td>
+          <td>700</td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">1.2</span></td>
+          <td>0.06em</td>
+          <td>uppercase</td>
         </tr>
             </tbody>
           </table>
@@ -713,7 +784,7 @@
     <div class="guide-variables-grid">
       
         <div class="guide-variables-group">
-          <h4 class="guide-variables-group-title">Font family <span class="guide-variables-group-count">(7)</span></h4>
+          <h4 class="guide-variables-group-title">Font family <span class="guide-variables-group-count">(9)</span></h4>
           <div class="guide-variables-group-list">
             
           <div class="guide-variable-item">
@@ -722,27 +793,35 @@
           </div>
           <div class="guide-variable-item">
             <span class="guide-variable-name guide-copyable " data-copy-value="--hg-typo-font-family-secondary" title="Click para copiar --hg-typo-font-family-secondary">--hg-typo-font-family-secondary</span>
-            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value=""ms-serif", serif" title="Click para copiar "ms-serif", serif">"ms-serif", serif</span></span>
+            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value="&quot;ms-serif&quot;, serif" title="Click para copiar &quot;ms-serif&quot;, serif">&quot;ms-serif&quot;, serif</span></span>
           </div>
           <div class="guide-variable-item">
             <span class="guide-variable-name guide-copyable " data-copy-value="--hg-typo-font-family-serif" title="Click para copiar --hg-typo-font-family-serif">--hg-typo-font-family-serif</span>
-            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value="'Playfair Display', 'Georgia', serif" title="Click para copiar 'Playfair Display', 'Georgia', serif">'Playfair Display', 'Georgia', serif</span></span>
+            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value="&#39;Playfair Display&#39;, &#39;Georgia&#39;, serif" title="Click para copiar &#39;Playfair Display&#39;, &#39;Georgia&#39;, serif">&#39;Playfair Display&#39;, &#39;Georgia&#39;, serif</span></span>
           </div>
           <div class="guide-variable-item">
             <span class="guide-variable-name guide-copyable " data-copy-value="--hg-typo-font-family-primary-regular" title="Click para copiar --hg-typo-font-family-primary-regular">--hg-typo-font-family-primary-regular</span>
-            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value=""Suisse Intl", Arial, Helvetica, sans-serif" title="Click para copiar "Suisse Intl", Arial, Helvetica, sans-serif">"Suisse Intl", Arial, Helvetica, sans-serif</span></span>
+            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value="&quot;Suisse Intl&quot;, Arial, Helvetica, sans-serif" title="Click para copiar &quot;Suisse Intl&quot;, Arial, Helvetica, sans-serif">&quot;Suisse Intl&quot;, Arial, Helvetica, sans-serif</span></span>
           </div>
           <div class="guide-variable-item">
             <span class="guide-variable-name guide-copyable " data-copy-value="--hg-typo-font-family-primary-regular" title="Click para copiar --hg-typo-font-family-primary-regular">--hg-typo-font-family-primary-regular</span>
-            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value=""suisse-regular", Arial, Helvetica, sans-serif" title="Click para copiar "suisse-regular", Arial, Helvetica, sans-serif">"suisse-regular", Arial, Helvetica, sans-serif</span></span>
+            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value="&quot;suisse-regular&quot;, Arial, Helvetica, sans-serif" title="Click para copiar &quot;suisse-regular&quot;, Arial, Helvetica, sans-serif">&quot;suisse-regular&quot;, Arial, Helvetica, sans-serif</span></span>
           </div>
           <div class="guide-variable-item">
             <span class="guide-variable-name guide-copyable " data-copy-value="--hg-typo-font-family-primary-light" title="Click para copiar --hg-typo-font-family-primary-light">--hg-typo-font-family-primary-light</span>
-            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value=""suisse-light", Arial, Helvetica, sans-serif" title="Click para copiar "suisse-light", Arial, Helvetica, sans-serif">"suisse-light", Arial, Helvetica, sans-serif</span></span>
+            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value="&quot;suisse-light&quot;, Arial, Helvetica, sans-serif" title="Click para copiar &quot;suisse-light&quot;, Arial, Helvetica, sans-serif">&quot;suisse-light&quot;, Arial, Helvetica, sans-serif</span></span>
           </div>
           <div class="guide-variable-item">
             <span class="guide-variable-name guide-copyable " data-copy-value="--hg-typo-font-family-primary-bold" title="Click para copiar --hg-typo-font-family-primary-bold">--hg-typo-font-family-primary-bold</span>
-            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value=""suisse-semibold", Arial, Helvetica, sans-serif" title="Click para copiar "suisse-semibold", Arial, Helvetica, sans-serif">"suisse-semibold", Arial, Helvetica, sans-serif</span></span>
+            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value="&quot;suisse-semibold&quot;, Arial, Helvetica, sans-serif" title="Click para copiar &quot;suisse-semibold&quot;, Arial, Helvetica, sans-serif">&quot;suisse-semibold&quot;, Arial, Helvetica, sans-serif</span></span>
+          </div>
+          <div class="guide-variable-item">
+            <span class="guide-variable-name guide-copyable " data-copy-value="--hg-typo-font-family-mono-regular" title="Click para copiar --hg-typo-font-family-mono-regular">--hg-typo-font-family-mono-regular</span>
+            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value="&quot;suisse-mono-regular&quot;, Arial, Helvetica, sans-serif" title="Click para copiar &quot;suisse-mono-regular&quot;, Arial, Helvetica, sans-serif">&quot;suisse-mono-regular&quot;, Arial, Helvetica, sans-serif</span></span>
+          </div>
+          <div class="guide-variable-item">
+            <span class="guide-variable-name guide-copyable " data-copy-value="--hg-typo-font-family-mono-bold" title="Click para copiar --hg-typo-font-family-mono-bold">--hg-typo-font-family-mono-bold</span>
+            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value="&quot;suisse-mono-bold&quot;, Arial, Helvetica, sans-serif" title="Click para copiar &quot;suisse-mono-bold&quot;, Arial, Helvetica, sans-serif">&quot;suisse-mono-bold&quot;, Arial, Helvetica, sans-serif</span></span>
           </div>
           </div>
         </div>
@@ -819,7 +898,7 @@
           </div>
         </div>
         <div class="guide-variables-group">
-          <h4 class="guide-variables-group-title">Letter spacing <span class="guide-variables-group-count">(9)</span></h4>
+          <h4 class="guide-variables-group-title">Letter spacing <span class="guide-variables-group-count">(10)</span></h4>
           <div class="guide-variables-group-list">
             
           <div class="guide-variable-item">
@@ -858,6 +937,10 @@
             <span class="guide-variable-name guide-copyable " data-copy-value="--hg-typo-letter-spacing-0-04em" title="Click para copiar --hg-typo-letter-spacing-0-04em">--hg-typo-letter-spacing-0-04em</span>
             <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value="0.04em" title="Click para copiar 0.04em">0.04em</span></span>
           </div>
+          <div class="guide-variable-item">
+            <span class="guide-variable-name guide-copyable " data-copy-value="--hg-typo-letter-spacing-0-06em" title="Click para copiar --hg-typo-letter-spacing-0-06em">--hg-typo-letter-spacing-0-06em</span>
+            <span class="guide-variable-values"><span class="guide-variable-value guide-copyable " data-copy-value="0.06em" title="Click para copiar 0.06em">0.06em</span></span>
+          </div>
           </div>
         </div>
         <div class="guide-variables-group">
@@ -3530,14 +3613,14 @@
               <tr>
                 <td class="guide-table-name">Mobile</td>
                 <td class="guide-table-value ">
-                  1px 
+                  1px
                   (0.0625rem)
                 </td>
               </tr>
               <tr>
                 <td class="guide-table-name">Desktop</td>
                 <td class="guide-table-value ">
-                  992px 
+                  992px
                   (62rem)
                 </td>
               </tr>

package/dist/output.css

@@ -60,6 +60,8 @@ p, h1, h2, h3, h4, h5, h6 {
   --hg-typo-font-family-primary-regular: "suisse-regular", Arial, Helvetica, sans-serif;
   --hg-typo-font-family-primary-bold: "suisse-semibold", Arial, Helvetica, sans-serif;
   --hg-typo-font-family-secondary: "suisse-medium", Arial, Helvetica, sans-serif;
+  --hg-typo-font-family-mono-regular: "suisse-mono-regular", Consolas, Menlo, Monaco, "Courier New", monospace;
+  --hg-typo-font-family-mono-bold: "suisse-mono-bold", Consolas, Menlo, Monaco, "Courier New", monospace;
   --hg-typo-line-height-1: 1;
   --hg-typo-line-height-1-976: 1.976;
   --hg-typo-line-height-1-2: 1.2;
@@ -84,6 +86,7 @@ p, h1, h2, h3, h4, h5, h6 {
   --hg-typo-letter-spacing-110: 110rem;
   --hg-typo-letter-spacing-0-16em: 0.16em;
   --hg-typo-letter-spacing-0-04em: 0.04em;
+  --hg-typo-letter-spacing-0-06em: 0.06em;
   --hg-typo-text-transform-none: none;
   --hg-typo-text-transform-uppercase: uppercase;
   --hg-typo-text-transform-otro: otro;
@@ -2331,6 +2334,51 @@ p, h1, h2, h3, h4, h5, h6 {
     text-transform: var(--hg-typo-text-transform-uppercase);
   }
 
+  .label-m-b {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-12);
+    line-height: var(--hg-typo-line-height-1);
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
+  .label-s {
+    font-family: var(--hg-typo-font-family-primary-light);
+    font-weight: var(--hg-typo-font-weight-100);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1);
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
+  .label-s-b {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1);
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
+  .label-mono {
+    font-family: var(--hg-typo-font-family-suisse-mono-regular);
+    font-weight: var(--hg-typo-font-weight-400);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1-2);
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
+  .label-mono-b {
+    font-family: var(--hg-typo-font-family-suisse-mono-bold);
+    font-weight: var(--hg-typo-font-weight-700);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1-2);
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
 }
 
 /* Tipografías - Desktop (min-width: 62rem) */
@@ -2458,4 +2506,49 @@ p, h1, h2, h3, h4, h5, h6 {
     text-transform: var(--hg-typo-text-transform-uppercase);
   }
 
+  .label-m-b {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-12);
+    line-height: var(--hg-typo-line-height-1);
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
+  .label-s {
+    font-family: var(--hg-typo-font-family-primary-light);
+    font-weight: var(--hg-typo-font-weight-100);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1);
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
+  .label-s-b {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1);
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
+  .label-mono {
+    font-family: var(--hg-typo-font-family-suisse-mono-regular);
+    font-weight: var(--hg-typo-font-weight-400);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1-2);
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
+  .label-mono-b {
+    font-family: var(--hg-typo-font-family-suisse-mono-bold);
+    font-weight: var(--hg-typo-font-weight-700);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1-2);
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
 }

package/dist/skills.html

@@ -436,7 +436,11 @@ border-color: var(--hg-color-error);
 
 <!-- Body variants -->
 <p class="hg-hg-body-m">Body medium (12→13px)</p>
-&lt;p class="hg-hg-body-m-b"&gt;Body medium bold (weight 400)&lt;/p&gt;</code></div>
+&lt;p class="hg-hg-body-m-b"&gt;Body medium bold (weight 400)&lt;/p&gt;
+
+&lt;!-- Labels mono (Suisse Intl Mono, 10px / 120%) --&gt;
+&lt;span class="label-mono"&gt;Label mono regular&lt;/span&gt;
+&lt;span class="label-mono-b"&gt;Label mono bold&lt;/span&gt;</code></div>
 <h4 class="sk-md-h3">Cómo funciona</h4>
 <p class="sk-md-p">Las clases son mobile-first. Los valores base aplican a mobile y un media query <code class="sk-inline-code">@media (min-width: 992px)</code> sobrescribe para desktop.</p>
 <div class="sk-code-block"><code>/* CSS generado (ejemplo) */