holygrail5 1.0.19 → 1.0.21

package/src/docs-generator/value-tracker.js

@@ -0,0 +1,154 @@
+// value-tracker.js
+// Persistencia y diff de valores del design system entre builds.
+//
+// Antes vivía dentro de html-generator.js como ~160 líneas de lógica
+// mezclada con la generación de HTML. Se extrae aquí porque:
+//   - No depende del HTML en absoluto: es I/O + comparación.
+//   - Se puede testear de forma aislada sin construir toda la guía.
+//   - Mantiene html-generator.js enfocado en... generar HTML.
+//
+// Contrato:
+//   - `loadPreviousValues(path)` devuelve el JSON previo o null.
+//   - `saveCurrentValues(values, path)` persiste el estado actual.
+//   - `getChangedValues(current, previous)` devuelve un Set con las
+//     claves cambiadas, usando el mismo formato que esperaba el
+//     callsite original ("className.prop", "className.bp.prop",
+//     "colors.key", "spacingMap.key", "fontFamilyMap.key",
+//     "breakpoints.mobile|desktop", "variable.<name>").
+
+const fs = require('fs');
+const path = require('path');
+
+function loadPreviousValues(previousValuesPath) {
+  try {
+    if (fs.existsSync(previousValuesPath)) {
+      const content = fs.readFileSync(previousValuesPath, 'utf8');
+      return JSON.parse(content);
+    }
+  } catch (_) {
+    // Si no existe o hay error, devuelve null
+  }
+  return null;
+}
+
+function saveCurrentValues(currentValues, previousValuesPath) {
+  try {
+    const dir = path.dirname(previousValuesPath);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+    fs.writeFileSync(previousValuesPath, JSON.stringify(currentValues, null, 2), 'utf8');
+  } catch (error) {
+    console.warn('⚠️  No se pudo guardar los valores anteriores:', error.message);
+  }
+}
+
+function diffMap(current, previous, prefix, changes) {
+  const cur = current || {};
+  const prev = previous || {};
+  Object.keys(cur).forEach(key => {
+    if (cur[key] !== prev[key]) {
+      changes.add(`${prefix}.${key}`);
+    }
+  });
+  // Claves eliminadas: el callsite histórico las marca también.
+  Object.keys(prev).forEach(key => {
+    if (!(key in cur)) {
+      changes.add(`${prefix}.${key}`);
+    }
+  });
+}
+
+function getChangedValues(currentValues, previousValues) {
+  const changes = new Set();
+
+  // Primera ejecución: sin diff (nada se marca cambiado).
+  if (!previousValues) {
+    return changes;
+  }
+
+  // Breakpoints
+  if (currentValues.breakpoints) {
+    const curBp = currentValues.breakpoints;
+    const prevBp = previousValues.breakpoints;
+    if (!prevBp) {
+      changes.add('breakpoints.mobile');
+      changes.add('breakpoints.desktop');
+    } else {
+      if (curBp.mobile !== prevBp.mobile) changes.add('breakpoints.mobile');
+      if (curBp.desktop !== prevBp.desktop) changes.add('breakpoints.desktop');
+    }
+  }
+
+  // Mapas planos (fontFamilyMap, spacingMap, colors) comparten el mismo
+  // patrón de diff: misma clave con valor distinto → marca.
+  if (currentValues.fontFamilyMap) {
+    diffMap(currentValues.fontFamilyMap, previousValues.fontFamilyMap, 'fontFamilyMap', changes);
+  }
+  if (currentValues.spacingMap) {
+    diffMap(currentValues.spacingMap, previousValues.spacingMap, 'spacingMap', changes);
+  }
+  if (currentValues.colors) {
+    diffMap(currentValues.colors, previousValues.colors, 'colors', changes);
+  }
+
+  // Clases de tipografía (typo): tienen propiedades base + breakpoints
+  // anidados (mobile/desktop.fontSize|lineHeight). Mantenemos el
+  // comportamiento histórico: aceptar tanto `currentValues.typo` como
+  // `currentValues` al raíz, por compatibilidad con callsites antiguos.
+  const currentClasses = currentValues.typo || currentValues;
+  const previousClasses = previousValues.typo || previousValues;
+  Object.keys(currentClasses).forEach(className => {
+    const current = currentClasses[className];
+    const previous = previousClasses[className];
+    if (!current || typeof current !== 'object') return;
+    if (!previous) {
+      // Clase nueva: marcar todas sus props base (no mobile/desktop).
+      Object.keys(current).forEach(prop => {
+        if (prop !== 'mobile' && prop !== 'desktop') {
+          changes.add(`${className}.${prop}`);
+        }
+      });
+      return;
+    }
+    ['fontFamily', 'fontWeight', 'letterSpacing', 'textTransform'].forEach(prop => {
+      if (current[prop] !== previous[prop]) {
+        changes.add(`${className}.${prop}`);
+      }
+    });
+    ['mobile', 'desktop'].forEach(bp => {
+      if (!current[bp]) return;
+      if (!previous[bp]) {
+        if (current[bp].fontSize) changes.add(`${className}.${bp}.fontSize`);
+        if (current[bp].lineHeight) changes.add(`${className}.${bp}.lineHeight`);
+      } else {
+        if (current[bp].fontSize !== previous[bp].fontSize) {
+          changes.add(`${className}.${bp}.fontSize`);
+        }
+        if (current[bp].lineHeight !== previous[bp].lineHeight) {
+          changes.add(`${className}.${bp}.lineHeight`);
+        }
+      }
+    });
+  });
+
+  // Variables CSS compartidas: solo marca nuevas o cambiadas
+  // (no detecta eliminadas, manteniendo el comportamiento histórico).
+  if (currentValues.variables) {
+    const curVars = currentValues.variables;
+    const prevVars = previousValues.variables || {};
+    Object.keys(curVars).forEach(varName => {
+      if (prevVars[varName] === undefined || curVars[varName] !== prevVars[varName]) {
+        changes.add(`variable.${varName}`);
+      }
+    });
+  }
+
+  return changes;
+}
+
+module.exports = {
+  loadPreviousValues,
+  saveCurrentValues,
+  getChangedValues
+};

package/src/generators/typo-generator.js

@@ -198,7 +198,8 @@ function generateClassCSS(className, cls, breakpointName, valueMap, prefix, cate
       varName = getSharedVarName(prop, props[prop], prefix, category);
     }
     
-    cssProps.push(`    ${toKebabCase(prop)}: var(${varName});`);
+    const importantFlag = prop === 'lineHeight' ? ' !important' : '';
+    cssProps.push(`    ${toKebabCase(prop)}: var(${varName})${importantFlag};`);
   });
   
   return cssProps.length ? `  .${className} {\n${cssProps.join('\n')}\n  }` : '';

package/src/generators/utils.js

@@ -112,12 +112,101 @@ function combineThemeCSS(themeDir) {
   }
 }
 
+/**
+ * Devuelve la lista canónica de temas activos a partir de un config.
+ *
+ * Soporta dos formatos de configuración:
+ *   - Nuevo:  { themes: [{ name, enabled }, ...] }
+ *   - Antiguo: { theme:  { name, enabled } }
+ *
+ * Cuando hay ambos, `themes[]` tiene prioridad. Los consumidores que
+ * heredan configs antiguos siguen funcionando sin cambios. El objeto
+ * devuelto por cada tema se enriquece con `label` (capitalización del
+ * slug) para que los generadores de nav no tengan que recalcularlo.
+ *
+ * @param {Object} configData - Config ya cargado (objeto JS).
+ * @returns {Array<{name:string, enabled:boolean, label:string}>}
+ */
+function resolveActiveThemes(configData) {
+  if (!configData) return [];
+
+  const rawList = Array.isArray(configData.themes)
+    ? configData.themes
+    : (configData.theme ? [configData.theme] : []);
+
+  return rawList
+    .filter(t => t && t.enabled && t.name)
+    .map(t => ({
+      name: t.name,
+      enabled: true,
+      label: 'Tema ' + t.name.charAt(0).toUpperCase() + t.name.slice(1)
+    }));
+}
+
+/**
+ * Aplica los overrides de tipografía de un tema sobre el config base.
+ *
+ * Motivación: la tabla de tipografía lee `config.typo.*.fontFamily`
+ * (strings CSS crudos). Cuando un tema redefine las variables
+ * `--hg-typo-font-family-*` en su `_variables.css`, el Preview se
+ * renderiza con la fuente del tema (porque las variables ganan), pero
+ * las columnas "Font family" seguirían mostrando las de la base. Para
+ * que la tabla refleje lo que realmente se pinta, mapeamos cada
+ * `fontFamily` del typo a través de su alias en la fontFamilyMap base
+ * y lo sustituimos por el override del tema.
+ *
+ * Convención: el tema declara sus overrides en
+ *   theme.json → typography.fontFamilyMap
+ * con las MISMAS claves que la base (`primary-light`, `primary-regular`,
+ * `primary-bold`, `secondary`, …). Así seguimos teniendo una única
+ * fuente de verdad para la tabla y evitamos duplicar la lista de clases
+ * (`title-xxl`, `title-l`, …) en cada tema.
+ *
+ * Devuelve un NUEVO objeto (no muta el config original). Si no hay
+ * overrides, devuelve el config tal cual.
+ *
+ * @param {Object} config   - Config base (config.json parseado).
+ * @param {Object} themeData - theme.json parseado (puede ser null).
+ * @returns {Object} Config con `fontFamilyMap` y `typo.*.fontFamily` remapeados.
+ */
+function applyThemeTypographyOverrides(config, themeData) {
+  if (!config) return config;
+  const overrides =
+    themeData &&
+    themeData.typography &&
+    themeData.typography.fontFamilyMap;
+  if (!overrides || Object.keys(overrides).length === 0) return config;
+
+  const baseMap = config.fontFamilyMap || {};
+  const mergedMap = { ...baseMap, ...overrides };
+
+  const remappedTypo = {};
+  Object.entries(config.typo || {}).forEach(([className, cls]) => {
+    const alias = getFontFamilyName(cls.fontFamily, baseMap);
+    // `alias` será una clave conocida (primary-regular, …) cuando el
+    // fontFamily del typo coincida con un valor de la base. Si coincide
+    // y el tema la sobreescribe, sustituimos el fontFamily por el del
+    // tema. Si no, dejamos el string original (no hay nada que remapear).
+    const overriddenFamily =
+      overrides[alias] !== undefined ? overrides[alias] : cls.fontFamily;
+    remappedTypo[className] = { ...cls, fontFamily: overriddenFamily };
+  });
+
+  return {
+    ...config,
+    fontFamilyMap: mergedMap,
+    typo: remappedTypo
+  };
+}
+
 module.exports = {
   toKebabCase,
   pxToRem,
   remToPx,
   getFontFamilyName,
   writeFile,
-  combineThemeCSS
+  combineThemeCSS,
+  resolveActiveThemes,
+  applyThemeTypographyOverrides
 };
 

package/src/skills.html

@@ -321,6 +321,7 @@
     <nav class="sk-nav">
       <a href="index.html">Guía</a>
       <a href="themes/dutti-demo.html">Tema Dutti</a>
+      <a href="themes/limited-demo.html">Tema Limited</a>
       <a href="skills.html" class="active">Skills</a>
     </nav>
   </header>

package/src/watch-config.js

@@ -7,8 +7,8 @@ const path = require('path');
 const crypto = require('crypto');
 const { BuildOrchestrator } = require('./build/build-orchestrator');
 const { AssetManager } = require('./build/asset-manager');
-const { ThemeTransformer } = require('./build/theme-transformer');
 const { loadConfig } = require('./config-loader');
+const { resolveActiveThemes } = require('./generators/utils');
 
 // Constantes
 const DEBOUNCE_DELAY = 300; // ms - tiempo de espera antes de regenerar
@@ -50,18 +50,41 @@ function generateFiles(configPath, outputPath, htmlPath, silent = false) {
 }
 
 // Función para copiar archivos CSS e imágenes usando AssetManager
-function copyCSSFiles(silent = false) {
+// IMPORTANTE: Carga `assets` desde config.json (misma fuente de verdad que
+// usa el BuildOrchestrator). Si no pudiera leerse, AssetManager aplica su
+// fallback interno ASSETS_CONFIG. Esto evita que watch use una lista
+// distinta a la del build principal (incl. woff además de woff2).
+function loadAssetsConfig(configPath) {
+  if (!configPath) return null;
+  try {
+    const cfg = loadConfig(configPath);
+    return cfg && cfg.assets ? cfg.assets : null;
+  } catch (_) {
+    return null;
+  }
+}
+
+function copyCSSFiles(silent = false, configPath = null) {
   const projectRoot = path.join(__dirname, '..');
-  const assetManager = new AssetManager(projectRoot);
+  const assetsConfig = loadAssetsConfig(configPath);
+  const assetManager = new AssetManager(projectRoot, assetsConfig);
   assetManager.copyCSS(silent);
 }
 
-function copyImageFiles(silent = false) {
+function copyImageFiles(silent = false, configPath = null) {
   const projectRoot = path.join(__dirname, '..');
-  const assetManager = new AssetManager(projectRoot);
+  const assetsConfig = loadAssetsConfig(configPath);
+  const assetManager = new AssetManager(projectRoot, assetsConfig);
   assetManager.copyImages(silent);
 }
 
+function copyFontFiles(silent = false, configPath = null) {
+  const projectRoot = path.join(__dirname, '..');
+  const assetsConfig = loadAssetsConfig(configPath);
+  const assetManager = new AssetManager(projectRoot, assetsConfig);
+  assetManager.copyFonts(silent);
+}
+
 // Función principal de watch optimizada
 function watch(configPath = path.join(__dirname, '..', 'config.json'), outputPath = path.join(__dirname, '..', 'dist', 'output.css'), htmlPath = path.join(__dirname, '..', 'dist', 'index.html'), silent = false) {
   if (!silent) {
@@ -86,10 +109,54 @@ function watch(configPath = path.join(__dirname, '..', 'config.json'), outputPat
     path.join(__dirname, 'docs-generator', 'guide-styles.css')
   ];
   
-  // Archivos de tema a observar
-  const themeFilesToWatch = [
-    path.join(projectRoot, 'themes', 'dutti', 'demo.html')
-  ];
+  // Archivos de tema a observar.
+  // Antes solo se vigilaba themes/dutti/demo.html. Con la arquitectura
+  // actual:
+  //   - Puede haber varios temas activos (config.themes[]).
+  //   - Los componentes compartidos viven en themes/_base/ y cambios ahí
+  //     también deben disparar un rebuild de todas las demos.
+  // Recolectamos dinámicamente los demo.html de cada tema activo +
+  // todos los .css de themes/_base/ (recursivo).
+  const themeFilesToWatch = (() => {
+    const watched = [];
+
+    // Intentamos leer el config para saber qué temas están activos.
+    // Delegamos en `resolveActiveThemes` para que el watch reaccione
+    // exactamente a los mismos temas que construye el orquestador.
+    // Soporta tanto `config.themes[]` (nuevo) como `config.theme` (antiguo).
+    let activeThemes = [];
+    try {
+      const configData = loadConfig(configPath);
+      activeThemes = resolveActiveThemes(configData);
+    } catch (e) {
+      // Si no podemos leer el config, caemos al fallback histórico
+      // para no romper flujos existentes.
+      activeThemes = [{ name: 'dutti', enabled: true, label: 'Tema Dutti' }];
+    }
+
+    activeThemes.forEach(t => {
+      const demoFile = path.join(projectRoot, 'themes', t.name, 'demo.html');
+      if (fs.existsSync(demoFile)) watched.push(demoFile);
+    });
+
+    // Componentes compartidos: watch recursivo simple sobre themes/_base/.
+    const baseDir = path.join(projectRoot, 'themes', '_base');
+    if (fs.existsSync(baseDir)) {
+      const walk = (dir) => {
+        for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+          const full = path.join(dir, entry.name);
+          if (entry.isDirectory()) {
+            walk(full);
+          } else if (entry.isFile() && full.endsWith('.css')) {
+            watched.push(full);
+          }
+        }
+      };
+      try { walk(baseDir); } catch (_) { /* ignorar errores de lectura */ }
+    }
+
+    return watched;
+  })();
   
   // Estado del watch
   let lastHash = getFileHash(configPath);
@@ -156,8 +223,9 @@ function watch(configPath = path.join(__dirname, '..', 'config.json'), outputPat
         if (!silent) {
           console.log(`🔄 Detectado cambio en ${path.basename(cssFile)}, copiando a dist/...\n`);
         }
-        copyCSSFiles(silent);
-        copyImageFiles(silent);
+        copyCSSFiles(silent, configPath);
+        copyImageFiles(silent, configPath);
+        copyFontFiles(silent, configPath);
         if (!silent) {
           console.log('✨ CSS actualizado - Recarga el navegador para ver los cambios\n');
         }
@@ -166,44 +234,43 @@ function watch(configPath = path.join(__dirname, '..', 'config.json'), outputPat
     }, DEBOUNCE_DELAY);
   }
   
-  // Función para manejar cambios en archivos de tema
+  // Función para manejar cambios en archivos de tema.
+  // Antes el handler intentaba re-transformar SOLO la demo de un único
+  // tema (leyendo `configData.theme` singular). Con la arquitectura
+  // actual, un cambio puede venir de:
+  //   - themes/<name>/demo.html  → afecta a la demo de ESE tema
+  //   - themes/_base/**/*.css    → afecta al CSS de TODOS los temas
+  // Para cubrir ambos casos sin reimplementar la orquestación,
+  // delegamos en `generateFiles`, que usa BuildOrchestrator y ya sabe
+  // recorrer `config.themes[]` (o el antiguo `config.theme`).
   function handleThemeChange(themeFile) {
     if (debounceTimer) {
       clearTimeout(debounceTimer);
     }
-    
+
     debounceTimer = setTimeout(() => {
       const currentHash = getFileHash(themeFile);
       const lastThemeHash = themeHashes.get(themeFile);
-      
+
       if (currentHash && currentHash !== lastThemeHash && !isRegenerating) {
         isRegenerating = true;
         themeHashes.set(themeFile, currentHash);
         if (!silent) {
-          console.log(`🔄 Detectado cambio en ${path.basename(themeFile)}, regenerando demo...\n`);
+          const rel = path.relative(projectRoot, themeFile);
+          console.log(`🔄 Detectado cambio en ${rel}, regenerando...\n`);
         }
-        
-        // Usar ThemeTransformer en lugar de ejecutar script externo
+
         try {
-          const configData = loadConfig(configPath);
-          if (configData.theme && configData.theme.enabled && configData.theme.name) {
-            const themeName = configData.theme.name;
-            const outputDir = path.dirname(outputPath);
-            const targetFile = path.join(outputDir, 'themes', `${themeName}-demo.html`);
-            
-            const themeTransformer = new ThemeTransformer(projectRoot);
-            themeTransformer.transform(themeFile, targetFile, themeName, silent);
-            
-            if (!silent) {
-              console.log('✨ Demo actualizado - Recarga el navegador para ver los cambios\n');
-            }
+          generateFiles(configPath, outputPath, htmlPath, silent);
+          if (!silent) {
+            console.log('✨ Tema(s) actualizado(s) - Recarga el navegador para ver los cambios\n');
           }
         } catch (error) {
           if (!silent) {
-            console.error('❌ Error al regenerar demo:', error.message);
+            console.error('❌ Error al regenerar tema:', error.message);
           }
         }
-        
+
         isRegenerating = false;
       }
     }, DEBOUNCE_DELAY);
@@ -337,4 +404,4 @@ if (require.main === module) {
   watch(configPath, outputPath, htmlPath);
 }
 
-module.exports = { watch, generateFiles, copyCSSFiles, copyImageFiles };
+module.exports = { watch, generateFiles, copyCSSFiles, copyImageFiles, copyFontFiles };

package/themes/{dutti → _base}/_buttons.css

@@ -9,7 +9,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--hg-spacing-8);
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-size: var(--hg-typo-font-size-13);
   font-weight: var(--hg-typo-font-weight-400);
   line-height: var(--hg-typo-line-height-1-5);
@@ -45,7 +45,7 @@
   color: var(--hg-color-white);
   background-color: var(--hg-color-black);
   border: var(--border-width) var(--border-style) var(--hg-color-black);
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-weight: var(--hg-typo-font-weight-400);
 }
 

package/themes/{dutti → _base}/_checkboxes.css

@@ -89,7 +89,7 @@
 }
 
 .checkbox-label {
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-size: var(--hg-typo-font-size-13);
   font-weight: var(--hg-typo-font-weight-400);
   line-height: var(--hg-typo-line-height-1-5);

package/themes/{dutti → _base}/_forms.css

@@ -28,7 +28,7 @@
 /* Helper Text / Messages */
 .helper-text {
   display: block;
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-size: var(--hg-typo-font-size-12);
   font-weight: var(--hg-typo-font-weight-400);
   line-height: var(--hg-typo-line-height-1-5);

package/themes/{dutti → _base}/_inputs.css

@@ -6,7 +6,7 @@
 .input {
   display: block;
   width: 100%;
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-size: var(--hg-typo-font-size-13);
   font-weight: var(--hg-typo-font-weight-400);
   line-height: var(--hg-typo-line-height-1-5);
@@ -56,7 +56,7 @@
 
 .form-input-label-2,
 .error-zone {
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
   position: relative;
 
   display: block;
@@ -74,7 +74,7 @@
 
 .form-input-label-2 .help,
 .error-zone .help {
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
   position: relative;
   line-height: 1.5;
   font-size: 12px;
@@ -104,15 +104,23 @@
 }
 
 .form-input-label-2 > input,
+.form-input-label-2 > textarea,
+.form-input-label-2 > select,
 .form-input-label-2 > label,
 .error-zone > input,
+.error-zone > textarea,
+.error-zone > select,
 .error-zone > label {
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-weight: normal;
 }
 
 .form-input-label-2 > input,
-.error-zone > input {
+.form-input-label-2 > textarea,
+.form-input-label-2 > select,
+.error-zone > input,
+.error-zone > textarea,
+.error-zone > select {
   border: none;
   border-bottom: var(--border-width) var(--border-style) var(--hg-color-primary);
   border-radius: 0;
@@ -120,13 +128,27 @@
   padding: var(--hg-spacing-16) 0 var(--hg-spacing-8) 0;
   padding-left: 0;
   padding-right: 0;
-  height: 40px;
   box-sizing: border-box;
   transition: border-bottom-color 0.1s ease-in-out, border-bottom-width 0.1s ease-in-out;
   margin: 0;
   vertical-align: top;
 }
 
+.form-input-label-2 > input,
+.form-input-label-2 > select,
+.error-zone > input,
+.error-zone > select {
+  height: 40px;
+}
+
+/* El textarea mantiene su altura natural (rows) pero respeta el padding
+   superior para dejar aire al label flotado. */
+.form-input-label-2 > textarea,
+.error-zone > textarea {
+  min-height: 40px;
+  resize: vertical;
+}
+
 .form-input-label-2 > label,
 .error-zone > label {
   box-sizing: border-box;
@@ -147,12 +169,27 @@
 }
 
 .form-input-label-2 input::placeholder,
-.error-zone input::placeholder {
+.form-input-label-2 textarea::placeholder,
+.error-zone input::placeholder,
+.error-zone textarea::placeholder {
   color: transparent;
 }
 
 .form-input-label-2 input:not(:placeholder-shown) ~ label,
-.error-zone input:not(:placeholder-shown) ~ label {
+.form-input-label-2 textarea:not(:placeholder-shown) ~ label,
+.error-zone input:not(:placeholder-shown) ~ label,
+.error-zone textarea:not(:placeholder-shown) ~ label {
+  top: 0;
+  font-size: 12px;
+  color: var(--hg-color-dark-grey);
+  transform: translateY(0);
+}
+
+/* El <select> no soporta :placeholder-shown (siempre tiene una option
+   seleccionada), así que forzamos el label a estar permanentemente
+   flotado arriba cuando el control es un select. */
+.form-input-label-2 > select ~ label,
+.error-zone > select ~ label {
   top: 0;
   font-size: 12px;
   color: var(--hg-color-dark-grey);
@@ -160,12 +197,20 @@
 }
 
 .form-input-label-2 input:focus,
-.error-zone input:focus {
+.form-input-label-2 textarea:focus,
+.form-input-label-2 select:focus,
+.error-zone input:focus,
+.error-zone textarea:focus,
+.error-zone select:focus {
   outline: none;
 }
 
 .form-input-label-2 input:focus ~ label,
-.error-zone input:focus ~ label {
+.form-input-label-2 textarea:focus ~ label,
+.form-input-label-2 select:focus ~ label,
+.error-zone input:focus ~ label,
+.error-zone textarea:focus ~ label,
+.error-zone select:focus ~ label {
   top: 0;
   font-size: 12px;
   color: var(--hg-color-dark-grey);

package/themes/{dutti → _base}/_labels.css

@@ -5,7 +5,7 @@
 
 .label {
   display: block;
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-size: var(--hg-typo-font-size-12);
   font-weight: var(--hg-typo-font-weight-700);
   line-height: var(--hg-typo-line-height-1-5);