desy-html 16.0.2 → 16.0.4

package/AGENTS.md

@@ -155,8 +155,9 @@ desy-html/
 
 To customize for different organizations:
 1. Edit `branding/branding.config.js` or create `branding/branding.config.{name}.js`
-2. Replace logos in `branding/logos/`
-3. Run `BRANDING_CONFIG={name} npm run build`
+2. Add favicon files to `branding/logos/` (favicon.svg, favicon.ico, apple-touch-icon.png). The plugin automatically copies them to `/dist/images/` during build.
+3. Replace logos in `branding/logos/`
+4. Run `BRANDING_CONFIG={name} npm run build`
 
 ## Common Patterns
 
@@ -175,6 +176,32 @@ To customize for different organizations:
 2. Export function that accepts `aria` namespace
 3. Register in `src/js/desy-html.js`
 
+## Post-Implementation Documentation Review
+
+After making code changes, review if documentation needs updates:
+
+### Checklist
+
+- [ ] **AGENTS.md** - If adding new commands, patterns, or workflows
+- [ ] **README.md** - If changing project setup or usage
+- [ ] **TESTING_PLAN.md** - If adding new test scenarios
+- [ ] **branding/BRANDING.md** - If changing branding configuration
+- [ ] **Other .md files** - Check for relevant changes
+
+### When to Update
+
+| Change Type | Files to Review |
+| ----------- | --------------- |
+| New feature | AGENTS.md, README.md, possibly TESTING_PLAN.md |
+| Config change | BRANDING.md, AGENTS.md |
+| Bug fix | TESTING_PLAN.md if adding test scenarios |
+| Documentation only | Only the .md files being changed |
+
+**Tip**: After any technical change, run a quick grep to find relevant .md files:
+```bash
+grep -r "keyword" --include="*.md"
+```
+
 ## License
 
 This project uses EUPL-1.2 license. See EUPL-1.2.txt for details.

package/TESTING_PLAN.md

@@ -27,6 +27,10 @@ This document defines the complete testing plan to execute before publishing the
 - [ ] Verify background images exist:
   - `branding/images/header-background.svg`
   - `branding/images/header-background-lg.svg`
+- [ ] Verify favicon files exist:
+  - `branding/logos/favicon.svg`
+  - `branding/logos/favicon.ico`
+  - `branding/logos/apple-touch-icon.png`
 
 ### 1.2. package.json Exports Review
 
@@ -53,6 +57,10 @@ This document defines the complete testing plan to execute before publishing the
   - Organization logos (aragon-*.svg)
   - EU logos (*.svg in subfolder or root)
   - Background images (header-background*.svg)
+- [ ] Verify favicon files are copied to dist/images/:
+  - `dist/images/favicon.svg`
+  - `dist/images/favicon.ico`
+  - `dist/images/apple-touch-icon.png`
 
 ### 2.3. Production Paths Verification
 
@@ -75,6 +83,7 @@ Using the browser agent, test the following pages:
 - [ ] Verify organization logo displays (not broken, no 404)
 - [ ] Verify primary colors are Aragón's (#00607a)
 - [ ] Verify typography is correct (Open Sans)
+- [ ] Verify favicon displays in browser tab (all 3: svg, ico, apple-touch-icon in /images/)
 
 #### Header
 
@@ -351,6 +360,7 @@ The project is ready for npm publishing when:
 - [ ] Organization logos display correctly
 - [ ] EU logos display correctly
 - [ ] Header background images display correctly
+- [ ] Favicon files are generated and load correctly
 - [ ] All interactive components work correctly
 - [ ] No 404 errors in console
 - [ ] No JavaScript errors in console

package/branding/BRANDING.md

@@ -29,6 +29,11 @@ export default {
       plurifondo: '/branding/logos/eu/logo-plurifondo.svg',
     },
   },
+  favicon: {
+    svg: '/branding/logos/favicon.svg',
+    ico: '/branding/logos/favicon.ico',
+    appleTouch: '/branding/logos/apple-touch-icon.png'
+  },
 };
 ```
 
@@ -133,6 +138,21 @@ Additional images.
 | `headerBackground` | string | No | Header background image |
 | `headerBackgroundLg` | string | No | Large header background image |
 
+### favicon
+
+Favicon configuration for browser tabs and mobile devices.
+
+| Field              | Type   | Required | Size      | Description                                                |
+| ------------------ | ------ | -------- | --------- | ---------------------------------------------------------- |
+| `favicon.svg`        | string | Yes      | 32×32     | Main favicon in SVG format (modern browsers)               |
+| `favicon.ico`        | string | Yes      | 32×32     | Legacy favicon in ICO format (fallback for older browsers) |
+| `favicon.appleTouch` | string | Yes      | 180×180   | Apple Touch Icon for iOS home screen                       |
+
+> **Note:** For optimal compatibility, use the following sizes: 32×32 for browser tabs (both SVG and ICO), and 180×180 for Apple Touch Icon. The vite-branding-plugin automatically copies favicon files to `/dist/images/` during build and rewrites the HTML paths:
+> - `favicon.svg` → `/dist/images/favicon.svg`
+> - `favicon.ico` → `/dist/images/favicon.ico`
+> - `apple-touch-icon.png` → `/dist/images/apple-touch-icon.png`
+
 ## CSS Variables
 
 The following CSS variables are available for runtime customization:
@@ -197,6 +217,9 @@ You only need:
 - `logos.organization.expanded`
 - `logos.organization.mini`
 - `logos.organization.alt`
+- `favicon.svg`
+- `favicon.ico`
+- `favicon.appleTouch`
 
 See `branding/branding.config.yourorganization.js` for a minimal example.
 
@@ -339,6 +362,12 @@ export default {
     headerBackground: '/branding/images/header-background.svg',
     headerBackgroundLg: '/branding/images/header-background-lg.svg',
   },
+
+  favicon: {
+    svg: '/branding/logos/favicon.svg',
+    ico: '/branding/logos/favicon.ico',
+    appleTouch: '/branding/logos/apple-touch-icon.png',
+  },
 };
 ```
 

package/branding/branding.config.js

@@ -66,4 +66,11 @@ export default {
     headerBackground: '/branding/images/header-background.svg',
     headerBackgroundLg: '/branding/images/header-background-lg.svg',
   },
+
+  // Favicon Configuration
+  favicon: {
+    svg: '/branding/logos/favicon.svg',
+    ico: '/branding/logos/favicon.ico',
+    appleTouch: '/branding/logos/apple-touch-icon.png'
+  },
 };

package/branding/branding.config.yourorganization.js

@@ -62,4 +62,11 @@ export default {
     headerBackground: '/branding/images/header-background.svg',
     headerBackgroundLg: '/branding/images/header-background-lg.svg',
   },
+
+  // Favicon Configuration
+  favicon: {
+    svg: '/branding/logos/yourorganization-favicon.svg',
+    ico: '/branding/logos/yourorganization-favicon.ico',
+    appleTouch: '/branding/logos/yourorganization-apple-touch-icon.png'
+  },
 };

package/branding/logos/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-label="Ir a la página de inicio de la aplicación" role="img"><defs><clipPath id="b-logo-mini"><path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z"/></clipPath><clipPath id="a-logo-mini"><path d="M0 0h32v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-mini)"><path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z"/><g clip-path="url(#b-logo-mini)" transform="translate(0 .305)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z"/></g></g></g></svg>

package/branding/logos/yourorganization-favicon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-label="YourLogo" role="img">
+  <defs>
+    <clipPath id="clip-hex">
+      <path d="M16 1.5L29 9V23L16 30.5L3 23V9L16 1.5Z"/>
+    </clipPath>
+  </defs>
+  <!-- Hexagono exterior -->
+  <path d="M16 1.5L29 9V23L16 30.5L3 23V9L16 1.5Z" fill="#00607a" stroke="#00475c" stroke-width="1"/>
+  <!-- Cuadrado interior -->
+  <rect x="10" y="10" width="12" height="12" rx="1" fill="#ffffff"/>
+  <!-- Círculo centro -->
+  <circle cx="16" cy="16" r="3" fill="#00607a"/>
+</svg>

package/branding/vite-branding-plugin.js

@@ -121,6 +121,99 @@ export function brandingPlugin(config) {
       }
 
       return hasChanges ? { code: transformed, map: null } : null;
+    },
+
+    closeBundle() {
+      const distDir = path.resolve(process.cwd(), 'dist');
+      const imagesDir = path.resolve(process.cwd(), 'dist/images');
+      const favicon = config?.favicon;
+      
+      // Early exit if no favicon configuration
+      if (!favicon) return;
+
+      // Helper function to recursively find HTML files
+      const findHtmlFiles = (dir, files = []) => {
+        if (!fs.existsSync(dir)) return files;
+        const items = fs.readdirSync(dir, { withFileTypes: true });
+        for (const item of items) {
+          const fullPath = path.join(dir, item.name);
+          if (item.isDirectory()) {
+            findHtmlFiles(fullPath, files);
+          } else if (item.name.endsWith('.html')) {
+            files.push(fullPath);
+          }
+        }
+        return files;
+      };
+
+      const faviconFiles = [
+        { key: 'svg', fileName: 'favicon.svg' },
+        { key: 'ico', fileName: 'favicon.ico' },
+        { key: 'appleTouch', fileName: 'apple-touch-icon.png' }
+      ];
+
+      // All go to imagesDir
+      const destDir = imagesDir;
+
+      for (const { key, fileName } of faviconFiles) {
+        const faviconPath = favicon[key];
+        if (!faviconPath) continue;
+
+        // Extraer el nombre del archivo de la ruta configurada
+        const fileNameFromPath = path.basename(faviconPath);
+        const src = path.resolve(process.cwd(), faviconPath.slice(1)); // Quitar el / inicial
+
+        if (fs.existsSync(src)) {
+          try {
+            // Ensure destination directory exists
+            if (!fs.existsSync(destDir)) {
+              fs.mkdirSync(destDir, { recursive: true });
+            }
+            fs.copyFileSync(src, path.join(destDir, fileNameFromPath));
+            console.log(`✓ Favicon ${fileNameFromPath}: branding/logos/${fileNameFromPath} → dist/images/`);
+          } catch (err) {
+            console.warn(`Warning: Could not copy ${fileNameFromPath}:`, err.message);
+          }
+        }
+      }
+
+      // Rewrite HTML files to update favicon href paths
+      // Note: This is now handled in vite.config.js after HTML generation (rewriteFaviconPaths)
+      // Kept here for reference but not executed (HTML files don't exist yet at this point)
+      try {
+        const htmlFiles = findHtmlFiles(distDir);
+        
+        for (const htmlFile of htmlFiles) {
+          let content = fs.readFileSync(htmlFile, 'utf8');
+          let modified = content;
+
+          // Rewrite favicon hrefs from /branding/logos/ to ./images/
+          // Only rewrite if the file was actually copied (exists in imagesDir)
+          for (const { key } of faviconFiles) {
+            const faviconPath = favicon[key];
+            if (!faviconPath) continue;
+            
+            const fileNameFromPath = path.basename(faviconPath);
+            const sourcePath = faviconPath; // e.g., "/branding/logos/favicon.svg"
+            const destPath = `./images/${fileNameFromPath}`;
+            
+            // Only rewrite if the destination file exists
+            const destFilePath = path.join(destDir, fileNameFromPath);
+            if (fs.existsSync(destFilePath)) {
+              // Simple string replacement - sourcePath is like "/branding/logos/favicon.svg"
+              const oldHref = `href="${sourcePath}"`;
+              const newHref = `href="${destPath}"`;
+              modified = modified.replaceAll(oldHref, newHref);
+            }
+          }
+
+          if (modified !== content) {
+            fs.writeFileSync(htmlFile, modified);
+          }
+        }
+      } catch (err) {
+        // Silently ignore - favicon rewriting is handled in vite.config.js
+      }
     }
   };
 }

package/docs/_global.head.njk

@@ -5,7 +5,6 @@
   <meta name="viewport" content="width=1=device-width, initial-scale=1.0">
   <title>{{ title if title else "desy-html docs" }}</title>
   {% if description %}<meta name="description" content="{{ description }}">{% endif %}
-  <link rel="icon" type="image/x-icon" href="https://aplicaciones.aragon.es/favicon.ico">
   {% if branding and branding.typography and branding.typography.fontUrl %}
     {% if 'fonts.googleapis.com' in branding.typography.fontUrl %}
       <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -18,6 +17,13 @@
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
   {% endif %}
   <link rel="stylesheet" href="css/styles.css">
+  {% if branding and branding.favicon %}
+    <link rel="icon" href="{{ branding.favicon.svg }}" type="image/svg+xml">
+    <link rel="icon" href="{{ branding.favicon.ico }}" sizes="32x32">
+    <link rel="apple-touch-icon" href="{{ branding.favicon.appleTouch }}">
+  {% else %}
+    <link rel="icon" type="image/x-icon" href="https://aplicaciones.aragon.es/favicon.ico">
+  {% endif %}
   <style>
     pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
     Theme: StackOverflow Light

package/docs/index.html

@@ -147,6 +147,17 @@ cd desy-html</code></pre>
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.16.0.4</h3>
+  <ul class="text-sm">
+    <li>Fixed env vars in Windows to allow branding configuration.</li>
+    <li>Minor fixes.</li>
+  </ul>
+  <h3>v.16.0.3</h3>
+  <ul class="text-sm">
+    <li>Added favicon to branding configuration and vite plugin.</li>
+    <li>Fixed breakpoints variants in text classes.</li>
+    <li>Added missing params in header components.</li>
+  </ul>
   <h3>v.16.0.2</h3>
   <ul class="text-sm">
     <li>Fixed a bug in footer logos urls.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "16.0.2",
+  "version": "16.0.4",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "type": "module",
   "author": {
@@ -30,27 +30,30 @@
   },
   "scripts": {
     "dev": "vite",
-    "dev:yourorganization": "BRANDING_CONFIG=yourorganization vite",
+    "dev:yourorganization": "cross-env BRANDING_CONFIG=yourorganization npm run dev",
     "build": "vite build",
-    "preview": "vite preview"
+    "build:yourorganization": "cross-env BRANDING_CONFIG=yourorganization npm run build",
+    "preview": "vite preview",
+    "preview:yourorganization": "cross-env BRANDING_CONFIG=yourorganization npm run preview"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.18",
     "@tailwindcss/vite": "^4.1.17",
     "autoprefixer": "^10.4.21",
     "cally": "^0.8.0",
     "chokidar": "^3.6.0",
     "hex-rgb": "^5.0.0",
     "js-yaml": "^4.1.0",
-    "tailwindcss": "^4.1.17",
-    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/typography": "^0.5.18"
+    "tailwindcss": "^4.1.17"
   },
   "devDependencies": {
+    "cross-env": "^10.1.0",
     "glob": "^11.0.1",
     "highlight.js": "^11.11.1",
-    "nunjucks": "^3.2.4",
     "js-beautify": "^1.14.11",
+    "nunjucks": "^3.2.4",
     "outdent": "^0.8.0",
     "sharp": "^0.34.3",
     "vite": "^7.1.6"

package/public/images/demo-icon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-label="Demo Icon" role="img">
+  <!-- Face circle -->
+  <circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="2"/>
+  <!-- Eyes -->
+  <circle cx="10" cy="12" r="2" fill="currentColor"/>
+  <circle cx="22" cy="12" r="2" fill="currentColor"/>
+  <!-- Smile -->
+  <path d="M10 20 Q16 26 22 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/src/css/component.text.css

@@ -2,169 +2,167 @@
    text.css
    ========================================================================== */
 
-@layer components {
-  .c-h0 {
-    @apply mb-8;
-    font-size: 2.5rem;
-    font-family: var(--font-heading);
-    @apply font-bold;
-    @apply leading-tight;
-  }
+@utility c-h0 {
+  @apply mb-8;
+  font-size: 2.5rem;
+  font-family: var(--font-heading);
+  @apply font-bold;
+  @apply leading-tight;
+}
 
-  .c-h1 {
-    @apply mb-lg;
-    @apply text-3xl;
-    font-family: var(--font-heading);
-    @apply font-bold;
-    @apply leading-tight;
-  }
+@utility c-h1 {
+  @apply mb-lg;
+  @apply text-3xl;
+  font-family: var(--font-heading);
+  @apply font-bold;
+  @apply leading-tight;
+}
 
-  .c-h2 {
-    @apply mb-base;
-    @apply text-2xl;
-    font-family: var(--font-heading);
-    @apply font-bold;
-    @apply leading-tight;
-  }
+@utility c-h2 {
+  @apply mb-base;
+  @apply text-2xl;
+  font-family: var(--font-heading);
+  @apply font-bold;
+  @apply leading-tight;
+}
 
-  .c-h3 {
-    @apply mb-sm;
-    @apply text-lg;
-    font-family: var(--font-heading);
-    @apply font-bold;
-    @apply leading-tight;
-  }
+@utility c-h3 {
+  @apply mb-sm;
+  @apply text-lg;
+  font-family: var(--font-heading);
+  @apply font-bold;
+  @apply leading-tight;
+}
 
-  .c-h4 {
-    @apply mb-sm;
-    @apply text-base;
-    font-family: var(--font-heading);
-    @apply font-bold;
-    @apply leading-tight;
-  }
+@utility c-h4 {
+  @apply mb-sm;
+  @apply text-base;
+  font-family: var(--font-heading);
+  @apply font-bold;
+  @apply leading-tight;
+}
 
-  .c-link {
-    @apply text-primary-base;
-    @apply underline;
+@utility c-link {
+  @apply text-primary-base;
+  @apply underline;
 
-    &:hover {
-      @apply text-primary-dark;
-    }
+  &:hover {
+    @apply text-primary-dark;
+  }
 
-    &:focus {
-      @apply bg-warning-base;
-      @apply shadow-outline-focus;
-      @apply outline-hidden;
-      @apply text-black;
-    }
+  &:focus {
+    @apply bg-warning-base;
+    @apply shadow-outline-focus;
+    @apply outline-hidden;
+    @apply text-black;
   }
+}
 
-  .c-link--alert {
-    @apply text-alert-base;
-    @apply underline;
-    @apply font-semibold;
+@utility c-link--alert {
+  @apply text-alert-base;
+  @apply underline;
+  @apply font-semibold;
 
-    &:hover {
-      @apply text-alert-dark;
-    }
+  &:hover {
+    @apply text-alert-dark;
   }
+}
 
-  .c-link--neutral {
-    @apply text-neutral-dark;
-    @apply underline;
+@utility c-link--neutral {
+  @apply text-neutral-dark;
+  @apply underline;
 
-    &:hover {
-      @apply text-black;
-    }
+  &:hover {
+    @apply text-black;
   }
+}
 
-  .c-link--full {
-    &::after {
-      content: '';
-      @apply absolute;
-      @apply inset-0;
-    }
+@utility c-link--full {
+  &::after {
+    content: "";
+    @apply absolute;
+    @apply inset-0;
   }
+}
 
-  .c-link--no-underline {
-    @apply no-underline;
+@utility c-link--no-underline {
+  @apply no-underline;
 
-    &:hover {
-      @apply underline;
-    }
+  &:hover {
+    @apply underline;
   }
+}
 
-  .c-paragraph-lg {
-    @apply mb-lg;
-    @apply text-lg;
-  }
+@utility c-paragraph-lg {
+  @apply mb-lg;
+  @apply text-lg;
+}
 
-  .c-paragraph-base {
-    @apply mb-base;
-    @apply text-base;
-  }
+@utility c-paragraph-base {
+  @apply mb-base;
+  @apply text-base;
+}
 
-  .c-paragraph-sm {
-    @apply mb-sm;
-    @apply text-sm;
-  }
+@utility c-paragraph-sm {
+  @apply mb-sm;
+  @apply text-sm;
+}
+
+@utility c-ul {
+  @apply mb-base;
+  @apply list-none;
 
-  .c-ul {
+  li {
+    @apply relative;
     @apply mb-base;
-    @apply list-none;
-
-    li {
-      @apply relative;
-      @apply mb-base;
-      @apply pl-8;
-
-      &::before {
-        content: '';
-        @apply absolute;
-        top: 0.625rem;
-        left: 0.25rem;
-        @apply w-1.5;
-        @apply h-1.5;
-        @apply bg-black;
-        @apply rounded-full;
-      }
-
-      &:last-of-type {
-        @apply mb-0;
-      }
+    @apply pl-8;
+
+    &::before {
+      content: "";
+      @apply absolute;
+      top: 0.625rem;
+      left: 0.25rem;
+      @apply w-1.5;
+      @apply h-1.5;
+      @apply bg-black;
+      @apply rounded-full;
+    }
+
+    &:last-of-type {
+      @apply mb-0;
     }
   }
+}
 
-  .c-ul--no-bullets {
-    li {
-      @apply pl-0;
+@utility c-ul--no-bullets {
+  li {
+    @apply pl-0;
 
-      &::before {
-        @apply hidden;
-      }
+    &::before {
+      @apply hidden;
     }
   }
+}
 
-  .c-ol {
+@utility c-ol {
+  @apply mb-base;
+  counter-reset: list-counter;
+
+  li {
+    @apply relative;
     @apply mb-base;
-    counter-reset: list-counter;
-
-    li {
-      @apply relative;
-      @apply mb-base;
-      @apply pl-8;
-
-      &::before {
-        counter-increment: list-counter;
-        content: counter(list-counter) '.';
-        @apply absolute;
-        left: 0.25rem;
-        @apply text-black;
-      }
-
-      &:last-of-type {
-        @apply mb-0;
-      }
+    @apply pl-8;
+
+    &::before {
+      counter-increment: list-counter;
+      content: counter(list-counter) ".";
+      @apply absolute;
+      left: 0.25rem;
+      @apply text-black;
+    }
+
+    &:last-of-type {
+      @apply mb-0;
     }
   }
 }

package/src/css/styles.css

@@ -4,8 +4,6 @@
 @import "tailwindcss";
 /* Custom base */
 @import './base.css';
-/* Branding variables for runtime customization */
-@import './branding-variables.css';
 
 /* Custom components */
 @import './component.text.css';

package/src/templates/components/header/params.header.yaml

@@ -3,6 +3,21 @@ params:
   type: component
   required: false
   description: The skipLink component parameters
+- name: logoExpanded
+  type: string
+  required: false
+  default: branding.logos.organization.expanded
+  description: URL del logo expandido (con texto). Por defecto usa branding.logos.organization.expanded
+- name: logoCompact
+  type: string
+  required: false
+  default: branding.logos.organization.compact
+  description: URL del logo compacto (solo icono). Por defecto usa branding.logos.organization.compact
+- name: logoAlt
+  type: string
+  required: false
+  default: branding.logos.organization.alt
+  description: Texto alternativo del logo. Por defecto usa branding.logos.organization.alt
 - name: homepageUrl
   type: string
   required: false
@@ -43,7 +58,7 @@ params:
   type: object
   required: false
   description: Options for the subnav at right.
-   params:
+  params:
   - name: text
     type: string
     required: true
@@ -74,7 +89,7 @@ params:
     description: HTML attributes (for example data attributes) to add to the dropdown element.
   - name: contentHtml
     type: string
-    required: true
+    required: false
     description: Html content inside the subnav once opened.
   - name: items
     type: array
@@ -125,7 +140,7 @@ params:
   type: object
   required: false
   description: Options for the dropdown at right.
-   params:
+  params:
   - name: text
     type: string
     required: true
@@ -156,7 +171,7 @@ params:
     description: HTML attributes (for example data attributes) to add to the dropdown element.
   - name: contentHtml
     type: string
-    required: true
+    required: false
     description: Html content inside the dropdown once opened.
   - name: items
     type: array
@@ -207,7 +222,7 @@ params:
   type: object
   required: false
   description: Options for the navigation main menu.
-   params:
+  params:
   - name: classes
     type: string
     required: false
@@ -249,7 +264,7 @@ params:
   type: object
   required: false
   description: Options for the offcanvas menu.
-   params:
+  params:
   - name: text
     type: string
     required: true

package/src/templates/components/header-advanced/params.header-advanced.yaml

@@ -11,10 +11,12 @@ params:
   type: object
   required: false
   description: This is an area over the title
+  params:
   - name: logo
     type: object
     required: false
     description: options for the logo element
+    params:
     - name: url
       type: string
       required: true
@@ -143,7 +145,7 @@ params:
   type: object
   required: false
   description: Options for the dropdown at right.
-   params:
+  params:
   - name: text
     type: string
     required: true
@@ -174,7 +176,7 @@ params:
     description: HTML attributes (for example data attributes) to add to the dropdown element.
   - name: contentHtml
     type: string
-    required: true
+    required: false
     description: Html content inside the dropdown once opened.
   - name: items
     type: array
@@ -225,7 +227,7 @@ params:
   type: object
   required: false
   description: Options for the navigation main menu.
-   params:
+  params:
   - name: classes
     type: string
     required: false
@@ -266,7 +268,7 @@ params:
 - name: sub
   type: object
   required: false
-  description: This is an area over the title
+  description: This is an area under the title
   - name: logo
     type: object
     required: false
@@ -294,7 +296,7 @@ params:
   - name: backgroundFullColor
     type: string
     required: true
-    description: The css color used in the background image that fills all the super area.
+    description: The css color used in the background image that fills all the sub area.
   - name: backgroundFullUrl
     type: string
     required: false
@@ -315,7 +317,11 @@ params:
   type: object
   required: false
   description: Options for the offcanvas menu.
-   params:
+  params:
+  - name: labelledId
+    type: string
+    required: false
+    description: ID para conectar con aria-labelledby del offcanvas. Útil para accesibilidad.
   - name: text
     type: string
     required: true

package/src/templates/components/header-mini/params.header-mini.yaml

@@ -1,4 +1,14 @@
 params:
+- name: logoSrc
+  type: string
+  required: false
+  default: branding.logos.organization.mini
+  description: URL del logo de la organización. Por defecto usa el valor de branding.logos.organization.mini
+- name: logoAlt
+  type: string
+  required: false
+  default: branding.logos.organization.alt
+  description: Texto alternativo del logo. Por defecto usa el valor de branding.logos.organization.alt
 - name: homepageUrl
   type: string
   required: false

package/src/templates/pages/_page.head.njk

@@ -5,7 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ title if title else "Project title" }}</title>
   <link rel="stylesheet" href="/src/css/styles.css">
-  <link rel="icon" type="image/x-icon" href="https://aplicaciones.aragon.es/favicon.ico">
+  {% if branding and branding.favicon %}
+    <link rel="icon" href="{{ branding.favicon.svg }}" type="image/svg+xml">
+    <link rel="icon" href="{{ branding.favicon.ico }}" sizes="32x32">
+    <link rel="apple-touch-icon" href="{{ branding.favicon.appleTouch }}">
+  {% else %}
+    <link rel="icon" type="image/x-icon" href="https://aplicaciones.aragon.es/favicon.ico">
+  {% endif %}
   {% if branding and branding.typography and branding.typography.fontUrl %}
     {% if 'fonts.googleapis.com' in branding.typography.fontUrl %}
       <link rel="preconnect" href="https://fonts.googleapis.com">

package/vite.config.js

@@ -18,6 +18,28 @@ const brandingConfig = await loadBrandingConfig(
   'branding'
 );
 
+// Helper para servir archivos con el MIME type correcto
+function serveFileWithMimeType(filePath, res) {
+  if (!fs.existsSync(filePath)) return false;
+  
+  const ext = path.extname(filePath).toLowerCase();
+  const mimeTypes = {
+    '.svg': 'image/svg+xml',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.webp': 'image/webp',
+    '.ico': 'image/x-icon',
+    '.js': 'application/javascript',
+    '.css': 'text/css',
+    '.html': 'text/html'
+  };
+  
+  res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
+  res.end(fs.readFileSync(filePath));
+  return true;
+}
+
 // Helper functions
 function kebabCaseToPascalCase(value) {
   return value
@@ -588,32 +610,76 @@ async function rewriteHtmlImagePaths() {
 
   const htmlFiles = await glob('**/*.html', { cwd: distDir, nodir: true });
 
+  // Configuración centralizada de rewrites
+  const rewriteRules = [
+    // Imágenes en /images/
+    { pattern: /src="(\/images\/)/g, replacement: 'src="./images/' },
+    { pattern: /srcset="(\/images\/)/g, replacement: 'srcset="./images/' },
+    // Imágenes en /branding/logos/
+    { pattern: /src="(\/branding\/logos\/)/g, replacement: 'src="./images/' },
+    { pattern: /srcset="(\/branding\/logos\/)/g, replacement: 'srcset="./images/' },
+    // Imágenes en /branding/images/
+    { pattern: /src="(\/branding\/images\/)/g, replacement: 'src="./images/' },
+    { pattern: /srcset="(\/branding\/images\/)/g, replacement: 'srcset="./images/' },
+  ];
+
   for (const htmlFile of htmlFiles) {
     const filePath = path.join(distDir, htmlFile);
     let content = await fs.promises.readFile(filePath, 'utf8');
 
-    // Replace src="/images/ with src="./images/
-    let modified = content.replace(/src="(\/images\/)/g, 'src="./images/');
-
-    // Replace srcset="/images/ with srcset="./images/
-    modified = modified.replace(/srcset="(\/images\/)/g, 'srcset="./images/');
+    // Aplicar todas las reglas
+    let modified = content;
+    for (const rule of rewriteRules) {
+      modified = modified.replace(rule.pattern, rule.replacement);
+    }
 
-    // Replace src="/branding/logos/ with src="./images/
-    modified = modified.replace(/src="(\/branding\/logos\/)/g, 'src="./images/');
+    if (modified !== content) {
+      await fs.promises.writeFile(filePath, modified);
+    }
+  }
+}
 
-    // Replace srcset="/branding/logos/ with srcset="./images/
-    modified = modified.replace(/srcset="(\/branding\/logos\/)/g, 'srcset="./images/');
+// Rewrite favicon hrefs from /branding/logos/ to ./images/ (after HTML files are generated)
+async function rewriteFaviconPaths() {
+  const distDir = path.resolve(process.cwd(), 'dist');
+  const imagesDir = path.resolve(process.cwd(), 'dist/images');
+  if (!fs.existsSync(distDir)) return;
 
-    // Replace src="/branding/images/ with src="./images/
-    modified = modified.replace(/src="(\/branding\/images\/)/g, 'src="./images/');
+  const htmlFiles = await glob('**/*.html', { cwd: distDir, nodir: true });
+  
+  // Favicon files to rewrite
+  const faviconFiles = [
+    'favicon.svg',
+    'favicon.ico',
+    'apple-touch-icon.png'
+  ];
 
-    // Replace srcset="/branding/images/ with srcset="./images/
-    modified = modified.replace(/srcset="(\/branding\/images\/)/g, 'srcset="./images/');
+  for (const htmlFile of htmlFiles) {
+    const filePath = path.join(distDir, htmlFile);
+    let content = await fs.promises.readFile(filePath, 'utf8');
+    let modified = content;
+
+    for (const faviconFile of faviconFiles) {
+      const sourcePath = `/branding/logos/${faviconFile}`;
+      const destPath = `./images/${faviconFile}`;
+      
+      // Only rewrite if the destination file exists in imagesDir
+      const destFilePath = path.join(imagesDir, faviconFile);
+      if (fs.existsSync(destFilePath)) {
+        const oldHref = `href="${sourcePath}"`;
+        const newHref = `href="${destPath}"`;
+        modified = modified.replaceAll(oldHref, newHref);
+      }
+    }
 
     if (modified !== content) {
       await fs.promises.writeFile(filePath, modified);
     }
   }
+  
+  if (htmlFiles.length > 0) {
+    console.log(`✓ Rewrote favicon paths in ${htmlFiles.length} HTML file(s)`);
+  }
 }
 
 // Custom Nunjucks plugin
@@ -643,18 +709,7 @@ function customNunjucksPlugin() {
       middlewares.use(async (req, res, next) => {
         if (req.url.startsWith('/branding/')) {
           const filePath = path.join(process.cwd(), req.url);
-          if (fs.existsSync(filePath)) {
-            const ext = path.extname(filePath).toLowerCase();
-            const mimeTypes = {
-              '.svg': 'image/svg+xml',
-              '.png': 'image/png',
-              '.jpg': 'image/jpeg',
-              '.jpeg': 'image/jpeg',
-              '.webp': 'image/webp'
-            };
-            res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
-            return res.end(fs.readFileSync(filePath));
-          }
+          if (serveFileWithMimeType(filePath, res)) return;
         }
         next();
       });
@@ -700,16 +755,7 @@ function customNunjucksPlugin() {
           }
 
           if (fs.existsSync(filePath)) {
-            const ext = path.extname(filePath).toLowerCase();
-            const mimeTypes = {
-              '.svg': 'image/svg+xml',
-              '.png': 'image/png',
-              '.jpg': 'image/jpeg',
-              '.jpeg': 'image/jpeg',
-              '.webp': 'image/webp'
-            };
-            res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
-            return res.end(fs.readFileSync(filePath));
+            if (serveFileWithMimeType(filePath, res)) return;
           }
         }
         next();
@@ -722,18 +768,7 @@ function customNunjucksPlugin() {
           const brandingLogosPath = path.join(process.cwd(), 'branding/logos');
           const filePath = findFileRecursive(brandingLogosPath, fileName);
 
-          if (filePath && fs.existsSync(filePath)) {
-            const ext = path.extname(filePath).toLowerCase();
-            const mimeTypes = {
-              '.svg': 'image/svg+xml',
-              '.png': 'image/png',
-              '.jpg': 'image/jpeg',
-              '.jpeg': 'image/jpeg',
-              '.webp': 'image/webp'
-            };
-            res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
-            return res.end(fs.readFileSync(filePath));
-          }
+          if (serveFileWithMimeType(filePath, res)) return;
         }
         next();
       });
@@ -745,18 +780,7 @@ function customNunjucksPlugin() {
           const brandingImagesPath = path.join(process.cwd(), 'branding/images');
           const filePath = findFileRecursive(brandingImagesPath, fileName);
 
-          if (filePath && fs.existsSync(filePath)) {
-            const ext = path.extname(filePath).toLowerCase();
-            const mimeTypes = {
-              '.svg': 'image/svg+xml',
-              '.png': 'image/png',
-              '.jpg': 'image/jpeg',
-              '.jpeg': 'image/jpeg',
-              '.webp': 'image/webp'
-            };
-            res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
-            return res.end(fs.readFileSync(filePath));
-          }
+          if (serveFileWithMimeType(filePath, res)) return;
         }
         next();
       });
@@ -878,6 +902,9 @@ function customNunjucksPlugin() {
       // Step 4b: Correct HTML image paths for production (after HTML files are generated)
       await rewriteHtmlImagePaths();
 
+      // Step 4c: Rewrite favicon paths from /branding/logos/ to ./images/
+      await rewriteFaviconPaths();
+
       // Step 5: Final validation to find and fix common errors
       await validateBuild();
 

package/public/images/logo-educa-aragon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="169" height="30.7" viewBox="0 0 169 30.7"><g fill="#ffffff" fill-rule="evenodd"><path d="M13.3 23.8a18.279 18.279 0 0 1-5.1.9 7.762 7.762 0 0 1-5.9-2.4A8.869 8.869 0 0 1 0 16a9.324 9.324 0 0 1 2-6.1 6.45 6.45 0 0 1 5.2-2.4 5.477 5.477 0 0 1 4.6 2.1c1.1 1.4 1.6 3.4 1.6 6v.9H3c.4 3.9 2.3 5.9 5.7 5.9a13.2 13.2 0 0 0 4.6-1ZM3.2 14.3h7.3c0-3.1-1.1-4.6-3.4-4.6-2.4 0-3.7 1.6-3.9 4.6Z"/><path data-name="Trazado 1" d="M28 24.3v-3.1a5.863 5.863 0 0 1-5.5 3.5 5.605 5.605 0 0 1-4.7-2.2 9.008 9.008 0 0 1-1.7-5.9A10.548 10.548 0 0 1 18 10a6.076 6.076 0 0 1 5.1-2.5 5.925 5.925 0 0 1 4.8 2.2V.4h3v23.9Zm0-12.5a6.482 6.482 0 0 0-4.4-2c-2.9 0-4.3 2.2-4.3 6.6 0 3.8 1.3 5.8 3.8 5.8 1.7 0 3.3-.9 4.9-2.7v-7.7Z"/><path d="M46.1 24.3v-3.1c-1.6 2.3-3.5 3.5-5.8 3.5a4.441 4.441 0 0 1-3.4-1.4 5.353 5.353 0 0 1-1.3-3.7V7.9h3v10.8a5.385 5.385 0 0 0 .5 2.6 2.067 2.067 0 0 0 1.8.8q2.7 0 5.1-3.6V7.9h3v16.4Z"/><path data-name="Trazado 2" d="M60.4 24.7a6.828 6.828 0 0 1-5.5-2.5 8.723 8.723 0 0 1-2.2-6.2 8.494 8.494 0 0 1 2.2-6.3 7.781 7.781 0 0 1 6-2.2 23.692 23.692 0 0 1 4.3.5v2.5a15.149 15.149 0 0 0-4.1-.7 4.8 4.8 0 0 0-3.7 1.7 7.209 7.209 0 0 0-1.4 4.6 7.314 7.314 0 0 0 1.4 4.5 4.655 4.655 0 0 0 3.7 1.7 9.245 9.245 0 0 0 4.2-1v2.6a19.135 19.135 0 0 1-4.9.8Z"/><path data-name="Trazado 3" d="M76.7 22.5a7.087 7.087 0 0 1-4.8 2.2 4.6 4.6 0 0 1-3.5-1.3 4.665 4.665 0 0 1-1.4-3.5 4.617 4.617 0 0 1 2.2-4.2 12.192 12.192 0 0 1 6.3-1.5h1.2v-1.5c0-1.7-1-2.6-3-2.6a10.966 10.966 0 0 0-5.3 1.5V8.5a16.05 16.05 0 0 1 6-1.2c4.3 0 6.5 1.7 6.5 5.2v7.4c0 1.3.4 2 1.3 2a1.486 1.486 0 0 0 .6-.1l.1 2.5a8.082 8.082 0 0 1-2.5.4c-1.8 0-3-.7-3.5-2.2h-.2Zm0-2.4v-3.4h-1.1c-2.9 0-4.3.9-4.3 2.7a2.452 2.452 0 0 0 .6 1.6 1.8 1.8 0 0 0 1.6.6 4.932 4.932 0 0 0 3.2-1.5Z"/><path data-name="Trazado 4" d="M85.7 24.3V7.7h4.5v3.1c1.2-2.3 2.9-3.5 5.3-3.5a1.949 1.949 0 0 1 .8.1v4a5.663 5.663 0 0 0-1.8-.3 5.137 5.137 0 0 0-4.4 2.7v10.5Z"/><path data-name="Trazado 5" d="M106.9 22.5a7.087 7.087 0 0 1-4.8 2.2 4.6 4.6 0 0 1-3.5-1.3 4.665 4.665 0 0 1-1.4-3.5 4.617 4.617 0 0 1 2.2-4.2 12.192 12.192 0 0 1 6.3-1.5h1.2v-1.5c0-1.7-1-2.6-3-2.6a10.966 10.966 0 0 0-5.3 1.5V8.5a16.05 16.05 0 0 1 6-1.2c4.3 0 6.5 1.7 6.5 5.2v7.4c0 1.3.4 2 1.3 2a1.486 1.486 0 0 0 .6-.1l.1 2.5a8.082 8.082 0 0 1-2.5.4c-1.8 0-3-.7-3.5-2.2h-.2Zm0-2.4v-3.4h-1.1c-2.9 0-4.3.9-4.3 2.7a2.452 2.452 0 0 0 .6 1.6 1.8 1.8 0 0 0 1.6.6 4.932 4.932 0 0 0 3.2-1.5Z"/><path data-name="Trazado 6" d="m116 29.5.4-3.3a13.3 13.3 0 0 0 5.3 1.3 4.99 4.99 0 0 0 3.6-1.1 4.78 4.78 0 0 0 1.1-3.4v-2.3a5.962 5.962 0 0 1-10.1 1.4 9.3 9.3 0 0 1-1.7-6 9.8 9.8 0 0 1 2-6.4 6.316 6.316 0 0 1 5.2-2.4 6.559 6.559 0 0 1 4.7 2.1l.5-1.7h4v12.7a23.154 23.154 0 0 1-.5 5.5 5.938 5.938 0 0 1-1.8 2.9 9.3 9.3 0 0 1-6.3 1.9 26.488 26.488 0 0 1-6.4-1.2Zm10.4-11.4V12a4.628 4.628 0 0 0-3.4-1.8 3.174 3.174 0 0 0-2.7 1.5 7.121 7.121 0 0 0-1 4.1c0 3.2 1 4.9 3.1 4.9 1.4 0 2.8-.9 4-2.6Z"/><path data-name="Trazado 7" d="M142.3 24.7a8.135 8.135 0 0 1-6.2-2.4 8.869 8.869 0 0 1-2.3-6.3 8.951 8.951 0 0 1 2.3-6.4c1.5-1.6 3.6-2.3 6.3-2.3a8.541 8.541 0 0 1 6.3 2.3 8.7 8.7 0 0 1 2.3 6.3 8.787 8.787 0 0 1-2.3 6.4 8.6 8.6 0 0 1-6.4 2.4Zm0-2.8c2.6 0 3.9-2 3.9-5.9a7.83 7.83 0 0 0-1-4.3 3.25 3.25 0 0 0-5.6 0 7.83 7.83 0 0 0-1 4.3 7.83 7.83 0 0 0 1 4.3 3.152 3.152 0 0 0 2.7 1.6Z"/><path data-name="Trazado 8" d="m139.5 4.9 3.6-4.9h4.1l-4.8 4.9Z"/><path data-name="Trazado 9" d="M154 24.3V7.7h4.5v3.1c1.5-2.3 3.4-3.5 5.7-3.5a4.513 4.513 0 0 1 3.5 1.4 5.167 5.167 0 0 1 1.3 3.8v11.8h-4.5V13.7c0-1.9-.6-2.8-1.9-2.8-1.4 0-2.8 1-4.1 3v10.4Z"/></g></svg>

package/src/css/branding-variables.css

@@ -1,37 +0,0 @@
-/**
- * Branding Variables
- *
- * CSS custom properties for runtime branding customization.
- * These variables can be overridden at runtime via JavaScript
- * to customize the appearance without rebuilding.
- *
- * Los colores se configuran en src/css/styles.css
- * Edita las variables: --color-primary-base, --color-primary-light, --color-primary-dark
- *
- * LOGO SYSTEM
- * ===========
- * The system uses three logo variants for different contexts:
- *
- * --branding-logo-expanded: Full logo with text. Shown in the main header
- *   on desktop when there is enough space.
- *   Used by: header component (desktop version)
- *
- * --branding-logo-mini: Standard size logo.
- *   Shown in header-mini and header-advanced.
- *   Used by: header-mini, header-advanced components
- *
- * --branding-logo-compact: Compact logo, typically just the symbol/coat of arms.
- *   Shown in reduced spaces or on mobile.
- *   Used by: header component (mobile/responsive version)
- */
-
-:root {
-  /* Expanded logo - Main header on desktop (full logo with text) */
-  --branding-logo-expanded: url('/images/aragon-expanded.svg');
-
-  /* Mini logo - Header-mini and header-advanced (standard size) */
-  --branding-logo-mini: url('/images/aragon-mini.svg');
-
-  /* Compact logo - Main header on mobile (symbol/coat of arms only) */
-  --branding-logo-compact: url('/images/aragon-compact.svg');
-}