desy-html 17.0.0 → 17.0.2

package/src/templates/components/combobox/_examples.combobox.njk

@@ -58,7 +58,7 @@
           { "text": "Valencia" }
         ]
       },
-    "visualDescription": "Combobox con label negro encima. Campo rectangular con borde gris, fondo blanco e icono de chevron a la derecha, con texto de ayuda gris para filtrar. Al desplegarse muestra la lista de opciones. Puede tener varias opciones seleccionadas. Las seleccionadas aparecen en negrita con un checkmark a la izquierda. El listbox permanece abierto al elegir varias."
+    "visualDescription": "Combobox con label negro encima. Campo rectangular con borde gris, fondo blanco e icono de chevron a la derecha, con texto de ayuda gris para filtrar. Al desplegarse muestra la lista de opciones. Puede tener varias opciones seleccionadas. Las seleccionadas aparecen en negrita con un checkmark a la izquierda. El combobox permanece abierto al elegir varias."
     },
     {
       "name": "con estado activo",
@@ -309,29 +309,25 @@
     },
     {
       "name": "peque",
-      "description": "Label solo visible para lectores de pantalla.",
       "data": {
-        "id": "small",
-        "name": "provincia-small",
+        "id": "combobox-sm",
+        "name": "combobox-sm",
+        "classes": "c-combobox--sm",
         "label": {
-          "text": "Provincia",
-          "classes": "sr-only"
+          "text": "Esto es un label",
+          "classes": "text-sm"
         },
-        "classes": "px-2 py-1 text-sm",
         "items": [
-          { "text": "Huesca" },
-          { "text": "Zaragoza" },
-          { "text": "Teruel" },
-          { "text": "Barcelona" },
-          { "text": "Madrid" },
-          { "text": "Valencia" }
+          { "text": "Opción 1" },
+          { "text": "Opción 2", "selected": true },
+          { "text": "Opción 3" }
         ]
       },
-    "visualDescription": "Combobox con label negro en tamaño estándar posicionado arriba del campo. Dropdown rectangular compacto con borde gris de 1px, fondo blanco, esquinas redondeadas y flecha desplegable gris a la derecha. Altura reducida del campo de entrada en comparación con dimensiones estándar.",
+    "visualDescription": "Combobox pequeño con label visible en tamaño reducido. Campo rectangular compacto con borde gris, fondo blanco, texto pequeño y flecha desplegable alineada a la derecha.",
     "_generated": {
-      "hash": "9ceb87c4fb1288fdef9c191d3ea711dc",
+      "hash": "f4c92a618d70e35b9a14cc782ebf063d",
       "version": "1.0.0",
-      "timestamp": "2026-04-20T17:48:28.284Z"
+      "timestamp": "2026-07-22T00:00:00.000Z"
     }
     },
     {
@@ -436,5 +432,71 @@
       "version": "1.0.0",
       "timestamp": "2026-04-20T17:48:37.642Z"
     }
+    },
+    {
+      "name": "ancho completo",
+      "description": "Utiliza <code>classes: \"w-full\"</code> para que el combobox ocupe todo el ancho disponible.",
+      "data": {
+        "id": "full-width",
+        "name": "provincia-full",
+        "label": {
+          "text": "Provincia"
+        },
+        "classes": "w-full",
+        "autocomplete": "both",
+        "items": [
+          {
+            "text": "Huesca"
+          },
+          {
+            "text": "Zaragoza"
+          },
+          {
+            "text": "Teruel"
+          },
+          {
+            "text": "Barcelona"
+          },
+          {
+            "text": "Madrid"
+          },
+          {
+            "text": "Valencia"
+          }
+        ]
+      },
+    "visualDescription": "Combobox que ocupa todo el ancho del contenedor. Label gris oscuro pequeño posicionado arriba. Campo rectangular a ancho completo con borde gris claro de 1px, fondo blanco, y ícono de chevron gris apuntando hacia abajo pegado al borde derecho del input."
+    },
+    {
+      "name": "con clases de form-group opcionales",
+      "description": "Label en línea + Combobox flexible y mensaje de error",
+      "data": {
+        "id": "combobox-form-group-opcionales",
+        "name": "combobox-form-group-opcionales",
+        "classes": "w-full",
+        "classesContainer": "lg:flex-1",
+        "label": {
+          "text": "Label en línea:",
+          "classes": "lg:py-sm lg:mt-sm"
+        },
+        "formGroup": {
+          "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
+        },
+        "errorMessage": {
+          "text": "Esto es un mensaje de error",
+          "classes": "order-1 w-full pt-sm"
+        },
+        "items": [
+          { "text": "Opción 1" },
+          { "text": "Opción 2", "selected": true },
+          { "text": "Opción 3" }
+        ]
+      },
+    "visualDescription": "Combobox con label en línea horizontal en negro a la izquierda del campo en pantallas grandes (label arriba en móvil). Contenedor con borde rojo de 2px por el mensaje de error, fondo blanco, y valor seleccionado visible. Mensaje de error en rojo debajo del campo indicando validación fallida. Botón toggle con chevron gris a la derecha del campo.",
+    "_generated": {
+      "hash": "f27e5d917921b62038775f3ad51fc257",
+      "version": "1.0.0",
+      "timestamp": "2026-07-22T00:00:00.000Z"
+    }
     }
 ] %}

package/src/templates/components/combobox/_styles.combobox.css

@@ -6,6 +6,10 @@
     @apply relative;
     @apply inline-flex;
     @apply items-center;
+
+    &:has(> .w-full) {
+      @apply w-full;
+    }
   }
 
   .c-combobox__toggle {
@@ -89,4 +93,17 @@
     @apply text-neutral-dark;
     @apply italic;
   }
+
+  .c-combobox--base {
+    @apply pr-10;
+    @apply pl-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+  .c-combobox--sm {
+    @apply pl-2;
+    @apply py-1;
+    @apply text-sm;
+  }
 }

package/src/templates/components/combobox/_template.combobox.njk

@@ -58,7 +58,7 @@
 {% endif %}
   <div class="c-combobox relative {%- if params.classesContainer %} {{ params.classesContainer }}{% endif %}">
     <div class="c-combobox__input-wrapper">
-      <input class="c-input c-combobox__input block mt-sm {% if params.errorMessage %}border-alert-base ring-2 ring-alert-base{% else %}border-black{% endif %} rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" type="text" role="combobox" autocomplete="off" aria-autocomplete="{{ autocompleteMode }}" aria-expanded="false" aria-haspopup="listbox" aria-controls="{{ listboxId }}"
+      <input class="c-input c-combobox__input block mt-sm pr-10 {% if params.errorMessage %}border-alert-base ring-2 ring-alert-base{% else %}border-black{% endif %} rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" type="text" role="combobox" autocomplete="off" aria-autocomplete="{{ autocompleteMode }}" aria-expanded="false" aria-haspopup="listbox" aria-controls="{{ listboxId }}"
       {%- if inputValue %} value="{{ inputValue }}"{% endif %}
       {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
       {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}

package/vite.config.js

@@ -40,6 +40,13 @@ function serveFileWithMimeType(filePath, res) {
   return true;
 }
 
+// Checks that the resolved filePath stays inside baseDir (defense against path traversal)
+function isPathInside(filePath, baseDir) {
+  if (!filePath) return false;
+  const resolved = path.resolve(filePath);
+  return resolved === baseDir || resolved.startsWith(baseDir + path.sep);
+}
+
 // Helper functions
 function kebabCaseToPascalCase(value) {
   return value
@@ -705,10 +712,34 @@ function customNunjucksPlugin() {
         });
       });
 
+      // Per-asset base directories used to validate containment of served
+      // paths. Each middleware confines requests to its own folder (not cwd),
+      // so a `..` in the URL cannot escape into sensitive files.
+      const brandingDir = path.resolve(process.cwd(), 'branding');
+      const publicImagesDir = path.resolve(process.cwd(), 'public/images');
+      const brandingLogosDir = path.resolve(process.cwd(), 'branding/logos');
+      const brandingImagesDir = path.resolve(process.cwd(), 'branding/images');
+
       // Middleware to serve branding assets in development
       middlewares.use(async (req, res, next) => {
         if (req.url.startsWith('/branding/')) {
-          const filePath = path.join(process.cwd(), req.url);
+          let decodedUrl;
+          try {
+            decodedUrl = decodeURIComponent(req.url);             // neutralizes %2e%2e
+          } catch {
+            res.statusCode = 400;
+            res.end('Bad Request');
+            return;
+          }
+          // Strip the /branding/ prefix and resolve relative to brandingDir,
+          // so any `..` is contained to the branding folder (not cwd).
+          const relPath = decodedUrl.slice('/branding/'.length);
+          const filePath = path.resolve(brandingDir, '.' + path.sep + relPath);
+          if (!isPathInside(filePath, brandingDir)) {
+            res.statusCode = 403;
+            res.end('Forbidden');
+            return;
+          }
           if (serveFileWithMimeType(filePath, res)) return;
         }
         next();
@@ -733,30 +764,37 @@ function customNunjucksPlugin() {
       // Middleware to serve branding assets from /images/ in development
       middlewares.use(async (req, res, next) => {
         if (req.url.startsWith('/images/')) {
-          let filePath = path.join(process.cwd(), 'public', req.url);
-
-          if (!fs.existsSync(filePath)) {
-            const fileName = path.basename(req.url);
-            
-            // Search in branding/logos (including subdirectories like eu/)
-            const brandingLogosPath = path.join(process.cwd(), 'branding/logos');
-            const foundInLogos = findFileRecursive(brandingLogosPath, fileName);
-            
-            if (foundInLogos) {
-              filePath = foundInLogos;
-            } else {
-              // Search in branding/images
-              const brandingImagesPath = path.join(process.cwd(), 'branding/images');
-              const foundInImages = findFileRecursive(brandingImagesPath, fileName);
-              if (foundInImages) {
-                filePath = foundInImages;
-              }
-            }
+          let decodedUrl;
+          try {
+            decodedUrl = decodeURIComponent(req.url);            // neutralizes %2e%2e
+          } catch {
+            res.statusCode = 400;
+            res.end('Bad Request');
+            return;
           }
-
-          if (fs.existsSync(filePath)) {
-            if (serveFileWithMimeType(filePath, res)) return;
+          // connect does not normalize req.url, so reject any literal `..`
+          // before touching the filesystem.
+          if (decodedUrl.includes('..')) {
+            res.statusCode = 403;
+            res.end('Forbidden');
+            return;
           }
+
+          // Primary lookup: strip the /images/ prefix, resolve under
+          // public/images and validate containment there.
+          const relPath = decodedUrl.slice('/images/'.length);
+          let filePath = path.resolve(publicImagesDir, '.' + path.sep + relPath);
+          if (isPathInside(filePath, publicImagesDir) && serveFileWithMimeType(filePath, res)) return;
+
+          // Fallbacks: search branding folders by basename, each candidate
+          // validated against its own base before serving.
+          const fileName = path.basename(decodedUrl);
+
+          const foundInLogos = findFileRecursive(brandingLogosDir, fileName);
+          if (foundInLogos && isPathInside(foundInLogos, brandingLogosDir) && serveFileWithMimeType(foundInLogos, res)) return;
+
+          const foundInImages = findFileRecursive(brandingImagesDir, fileName);
+          if (foundInImages && isPathInside(foundInImages, brandingImagesDir) && serveFileWithMimeType(foundInImages, res)) return;
         }
         next();
       });
@@ -765,10 +803,9 @@ function customNunjucksPlugin() {
       middlewares.use(async (req, res, next) => {
         if (req.url.startsWith('/branding/logos/')) {
           const fileName = path.basename(req.url);
-          const brandingLogosPath = path.join(process.cwd(), 'branding/logos');
-          const filePath = findFileRecursive(brandingLogosPath, fileName);
+          const filePath = findFileRecursive(brandingLogosDir, fileName);
 
-          if (serveFileWithMimeType(filePath, res)) return;
+          if (isPathInside(filePath, brandingLogosDir) && serveFileWithMimeType(filePath, res)) return;
         }
         next();
       });
@@ -777,10 +814,9 @@ function customNunjucksPlugin() {
       middlewares.use(async (req, res, next) => {
         if (req.url.startsWith('/branding/images/')) {
           const fileName = path.basename(req.url);
-          const brandingImagesPath = path.join(process.cwd(), 'branding/images');
-          const filePath = findFileRecursive(brandingImagesPath, fileName);
+          const filePath = findFileRecursive(brandingImagesDir, fileName);
 
-          if (serveFileWithMimeType(filePath, res)) return;
+          if (isPathInside(filePath, brandingImagesDir) && serveFileWithMimeType(filePath, res)) return;
         }
         next();
       });
@@ -959,7 +995,10 @@ export default defineConfig({
     watch: {
       ignored: ['!**/docs/**', '!**/src/templates/**']
     },
-    host: '0.0.0.0',
+    // 0.0.0.0 exposes the dev-server to the whole network; default to localhost
+    // only. Set DEV_HOST=0.0.0.0 in environments like Replit, where allowedHosts
+    // includes the specific *.replit.dev host needed for that public access.
+    host: process.env.DEV_HOST || '127.0.0.1',
     allowedHosts: [
       '82c7d68c-1131-4db5-bf36-165d8f8b1d98-00-2b55tnaqky432.worf.replit.dev',
       'localhost'