desy-html 16.0.1 → 16.0.3

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)
+3. Replace logos in `branding/logos/`
+4. Run `BRANDING_CONFIG={name} npm run build`
 
 ## Common Patterns
 

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,7 @@ 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 (favicon.ico, apple-touch-icon.png)
 
 ### 2.3. Production Paths Verification
 
@@ -75,6 +80,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 (not broken, no 404)
 
 #### Header
 
@@ -351,6 +357,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,18 @@ 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 plugin automatically copies these files to `/dist` during build.
+
 ## CSS Variables
 
 The following CSS variables are available for runtime customization:
@@ -197,6 +214,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 +359,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/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/vite-branding-plugin.js

@@ -121,6 +121,33 @@ export function brandingPlugin(config) {
       }
 
       return hasChanges ? { code: transformed, map: null } : null;
+    },
+
+    closeBundle() {
+      const distDir = path.resolve(process.cwd(), 'dist');
+      const favicon = config?.favicon;
+      
+      if (!favicon) return;
+
+      const faviconFiles = [
+        { key: 'svg', fileName: 'favicon.svg' },
+        { key: 'ico', fileName: 'favicon.ico' },
+        { key: 'appleTouch', fileName: 'apple-touch-icon.png' }
+      ];
+
+      for (const { key, fileName } of faviconFiles) {
+        if (favicon[key]) {
+          const src = path.resolve(process.cwd(), 'branding/logos', fileName);
+          if (fs.existsSync(src)) {
+            try {
+              fs.copyFileSync(src, path.join(distDir, fileName));
+              console.log(`✓ Favicon ${fileName} copied to dist`);
+            } catch (err) {
+              console.warn(`Warning: Could not copy ${fileName}:`, err.message);
+            }
+          }
+        }
+      }
     }
   };
 }

package/docs/_global.head.njk

@@ -18,6 +18,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,15 @@ 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.3</h3>
+  <ul class="text-sm">
+    <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>
+  </ul>
   <h3>v.16.0.1</h3>
   <ul class="text-sm">
     <li>Fixed a bug in header logos urls.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "16.0.1",
+  "version": "16.0.3",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "type": "module",
   "author": {

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
@@ -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
@@ -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

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

@@ -174,7 +174,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
@@ -316,6 +316,10 @@ params:
   required: false
   description: Options for the offcanvas menu.
    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

@@ -577,7 +577,7 @@ async function rewriteCssImagePaths() {
   const stylePath = path.resolve(process.cwd(), 'dist/css/styles.css');
   if (!fs.existsSync(stylePath)) return;
   let content = await fs.promises.readFile(stylePath, 'utf8');
-  content = content.replace(/url\((['"]?)\/images\//g, 'url($1images/');
+  content = content.replace(/url\((['"]?)\/images\//g, 'url($1../images/');
   await fs.promises.writeFile(stylePath, content);
 }
 

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');
-}