desy-html 15.0.3 → 16.0.0

package/docs/examples-table.html

@@ -1,4 +1,4 @@
-{% set title = "Table. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set title = "Table. Componente, parámetros y ejemplos. Documentación de desy-html. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 
 {% set activePage = "page-componentes" %}
 {% set activeComponent = "Table" %}

package/docs/examples-tabs.html

@@ -1,4 +1,4 @@
-{% set title = "Tabs. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set title = "Tabs. Componente, parámetros y ejemplos. Documentación de desy-html. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 
 {% set activePage = "page-componentes" %}
 {% set activeComponent = "Tabs" %}

package/docs/examples-textarea.html

@@ -1,4 +1,4 @@
-{% set title = "Textarea. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set title = "Textarea. Componente, parámetros y ejemplos. Documentación de desy-html. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 
 {% set activePage = "page-componentes" %}
 {% set activeComponent = "Textarea" %}

package/docs/examples-toggle.html

@@ -1,4 +1,4 @@
-{% set title = "Toggle. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set title = "Toggle. Componente, parámetros y ejemplos. Documentación de desy-html. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 
 {% set activePage = "page-componentes" %}
 {% set activeComponent = "Toggle" %}

package/docs/examples-tooltip.html

@@ -1,4 +1,4 @@
-{% set title = "Tooltip. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set title = "Tooltip. Componente, parámetros y ejemplos. Documentación de desy-html. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 
 {% set activePage = "page-componentes" %}
 {% set activeComponent = "Tooltip" %}

package/docs/examples-tree.html

@@ -1,4 +1,4 @@
-{% set title = "Tree. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set title = "Tree. Componente, parámetros y ejemplos. Documentación de desy-html. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 
 {% set activePage = "page-componentes" %}
 {% set activeComponent = "Tree" %}

package/docs/examples-treegrid.html

@@ -1,4 +1,4 @@
-{% set title = "Treegrid. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set title = "Treegrid. Componente, parámetros y ejemplos. Documentación de desy-html. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 
 {% set activePage = "page-componentes" %}
 {% set activeComponent = "Treegrid" %}

package/docs/index.html

@@ -1,4 +1,4 @@
-{% set title = "Desy. Sistema de diseño para aplicaciones web. Gobierno de Aragón" %}
+{% set title = "Desy. Sistema de diseño para aplicaciones web. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% set description = "Documentación y librería desy-html para implementarlo en HTML, CSS y Javascript con un paquete NPM." %}
 {% set activePage = "page-inicio" %}
 {% extends "_template.default.njk" %}
@@ -8,7 +8,7 @@
 <div class="pb-lg"> </div>
   <h1>desy-html</h1>
   <p>Versión: {{ '' | filterversion }}</p>
-  <p>Una librería NPM para construir interfaces de usuario para aplicaciones web del Gobierno de Aragón. Utiliza <a href="https://vite.dev/">Vite</a>, <a href="https://tailwindcss.com/">Tailwind CSS</a> y <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> para renderizar componentes HTML+CSS+JS. Es útil para crear aplicaciones web ligeras o maquetas HTML.</p>
+  <p>Una librería NPM para construir interfaces de usuario para aplicaciones web gubernamentales o que requieran un alto cumplimiento de accesibilidad. Utiliza <a href="https://vite.dev/">Vite</a>, <a href="https://tailwindcss.com/">Tailwind CSS</a> y <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> para renderizar componentes HTML+CSS+JS. Es útil para crear aplicaciones web ligeras o maquetas HTML.</p>
 
   <h2>Descripción general</h2>
   <p><strong>desy-html</strong> es la librería del sistema de diseño principal que proporciona:</p>
@@ -39,7 +39,7 @@
   <h2>Requisitos previos</h2>
   <p>Antes de comenzar, asegúrate de tener instalado lo siguiente:</p>
   <ul>
-    <li><strong>Node.js</strong> >=20.19.2 <23.0.0</li>
+    <li><strong>Node.js</strong> &gt;=20.19.2 &lt;23.0.0</li>
     <li><strong>npm</strong> >=10.0.0</li>
   </ul>
 
@@ -147,6 +147,13 @@ 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.0</h3>
+  <ul class="text-sm">
+    <li>Added branding system to customize header and footer logos and texts.</li>
+    <li>Added visual descriptions for screenreaders in component examples.</li>
+    <li>Documentation improvements.</li>
+    <li>Minor fixes.</li>
+  </ul>
   <h3>v.15.0.3</h3>
   <ul class="text-sm">
     <li>Minor fixes</li>

package/docs/pagina-accesibilidad.html

@@ -1,4 +1,4 @@
-{% set title = "Accesibilidad. Título de app. Gobierno de Aragón" %}
+{% set title = "Accesibilidad. Título de app. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.logged-out.njk" %}
 
 {% block contentBlock %}
@@ -11,7 +11,7 @@
     <p class="text-lg mt-0">
       <a href="https://bitbucket.org/sdaragon/desy-html/src/master/docs/pagina-accesibilidad.html" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta página<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
     </p>
-    <p class="text-lg">El Gobierno de Aragón se ha comprometido a hacer accesible su sitio web, de conformidad con el <a href="#">Real Decreto 1112/2018, de 7 de septiembre, sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público</a>.</p>
+    <p class="text-lg">{{ branding.organization.name if branding else "Esta organización" }} se ha comprometido a hacer accesible su sitio web, de conformidad con el <a href="#">Real Decreto 1112/2018, de 7 de septiembre, sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público</a>.</p>
     <p class="text-lg">La presente declaración de accesibilidad se aplica al <a href="#">sitio web actual aragon.es</a> (los subdominios de este sitio web tendrán sus propias declaraciones de accesibilidad).</p>
   </div>
   <div class="py-xl"></div>
@@ -69,7 +69,7 @@
     <p>El procedimiento de reclamación recogido en el artículo 13 del Real Decreto 1112/2018, de 7 de septiembre, entrará en vigor el 20 de septiembre de 2020.</p>
 
     <h2>Acciones de mejora de la accesibilidad</h2>
-    <p>El Gobierno de Aragón quiere mejorar la accesibilidad del portal más allá del nivel de exigido por el Real Decreto 1112/2018, por ello se han dado los siguientes pasos:</p>
+    <p>{{ branding.organization.name if branding else "Esta organización" }} quiere mejorar la accesibilidad del portal más allá del nivel de exigido por el Real Decreto 1112/2018, por ello se han dado los siguientes pasos:</p>
     <ol>
       <li>
         <h3>Cumplimiento de requisitos de accesibilidad de nivel AAA</h3>
@@ -107,4 +107,4 @@
 
   </div>
 
-{% endblock %}
+{% endblock %}

package/docs/pagina-mapa-web.html

@@ -1,4 +1,4 @@
-{% set title = "Mapa web. Título de app. Gobierno de Aragón" %}
+{% set title = "Mapa web. Título de app. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.logged-out.njk" %}
 
 {% block contentBlock %}
@@ -113,7 +113,7 @@
         <a class="c-link" href="#">Contacto y ayuda técnica</a>
       </li>
       <li class="mb-base">
-        <a class="c-link" href="#">Sobre la Sede Electrónica del Gobierno de Aragón</a>
+        <a class="c-link" href="#">Sobre la Sede Electrónica de {{ branding.organization.name if branding else "la organización" }}</a>
       </li>
     </ul>
   </div>
@@ -134,4 +134,4 @@
     </div>
   </div>
 
-{% endblock %}
+{% endblock %}

package/docs/pagina-prueba.html

@@ -1,4 +1,4 @@
-{% set title = "Página de prueba. Gobierno de Aragón" %}
+{% set title = "Página de prueba. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 
 {# Puedes editar este template o usar uno predefinido como por ejemplo src/templates/pages/_template.logged.njk #}
 {% extends "pages/_template.test.njk" %}
@@ -92,4 +92,4 @@
   {% include "includes/_test-include.njk" %} #}
 
 
-{% endblock %}
+{% endblock %}

package/docs/plantilla-con-header-advanced.html

@@ -1,4 +1,4 @@
-{% set title = "Plantilla con header advanced. Gobierno de Aragón" %}
+{% set title = "Plantilla con header advanced. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.with-header-advanced.njk" %}
 
 {% block contentBlock %}
@@ -11,4 +11,4 @@
   <p class="c-paragraph-base">
     <a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.with-header-advanced.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
   </p>
-{% endblock %}
+{% endblock %}

package/docs/plantilla-editar-con-cabecera-fija-y-sidebar-sticky.html

@@ -1,4 +1,4 @@
-{% set title = "Plantilla editar con sidebar. Gobierno de Aragón" %}
+{% set title = "Plantilla editar con sidebar. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.edit-fixed-with-sticky-sidebar.njk" %}
 
 {% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
@@ -151,4 +151,4 @@
   <p class="c-paragraph-base">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
   </p>
-{% endblock %}
+{% endblock %}

package/docs/plantilla-editar-con-cabecera-fija.html

@@ -1,4 +1,4 @@
-{% set title = "Plantilla editar con cabecera fija. Gobierno de Aragón" %}
+{% set title = "Plantilla editar con cabecera fija. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.edit-fixed.njk" %}
 
 {# Use headerTitleEditBlock and headerActionsEditBlock template blocks to customize the fixed header #}
@@ -14,4 +14,4 @@
   <p class="c-paragraph-base">
     <a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.edit-fixed.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
   </p>
-{% endblock %}
+{% endblock %}

package/docs/plantilla-logueado-con-cabecera-fija-headroom.html

@@ -1,4 +1,4 @@
-{% set title = "Plantilla logueado con cabecera fija con librería headroom.js. Gobierno de Aragón" %}
+{% set title = "Plantilla logueado con cabecera fija con librería headroom.js. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.logged-selector-fixed-headroom.njk" %}
 
 {% block contentBlock %}
@@ -12,4 +12,4 @@
   <p class="c-paragraph-base">
     <a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector-fixed-headroom.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
   </p>
-{% endblock %}
+{% endblock %}

package/docs/plantilla-logueado-con-cabecera-fija.html

@@ -1,4 +1,4 @@
-{% set title = "Plantilla logueado con cabecera fija. Gobierno de Aragón" %}
+{% set title = "Plantilla logueado con cabecera fija. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.logged-selector-fixed.njk" %}
 
 {% block contentBlock %}
@@ -12,4 +12,4 @@
   <p class="c-paragraph-base">
     <a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector-fixed.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
   </p>
-{% endblock %}
+{% endblock %}

package/docs/plantilla-logueado-con-selector-de-app-y-sidebar.html

@@ -1,4 +1,4 @@
-{% set title = "Plantilla logueado con selector de app y sidebar. Gobierno de Aragón" %}
+{% set title = "Plantilla logueado con selector de app y sidebar. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.logged-selector-with-sidebar.njk" %}
 
 {% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
@@ -161,4 +161,4 @@
   <p class="c-paragraph-base">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
   </p>
-{% endblock %}
+{% endblock %}

package/docs/plantilla-logueado-con-selector-de-app-y-subheader.html

@@ -1,4 +1,4 @@
-{% set title = "Plantilla logueado con selector de app y subheader. Gobierno de Aragón" %}
+{% set title = "Plantilla logueado con selector de app y subheader. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.logged-selector-subheader.njk" %}
 
 
@@ -13,4 +13,4 @@
   <p class="c-paragraph-base">
     <a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector-subheader.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
   </p>
-{% endblock %}
+{% endblock %}

package/docs/plantilla-logueado-con-selector-de-app.html

@@ -1,4 +1,4 @@
-{% set title = "Plantilla logueado con selector de app. Gobierno de Aragón" %}
+{% set title = "Plantilla logueado con selector de app. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.logged-selector.njk" %}
 
 {% block contentBlock %}
@@ -11,4 +11,4 @@
   <p class="c-paragraph-base">
     <a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
   </p>
-{% endblock %}
+{% endblock %}

package/docs/plantilla-logueado-con-titulo-de-app.html

@@ -1,4 +1,4 @@
-{% set title = "Plantilla logueado con título de app. Gobierno de Aragón" %}
+{% set title = "Plantilla logueado con título de app. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.logged.njk" %}
 
 {% block contentBlock %}
@@ -11,4 +11,4 @@
   <p class="c-paragraph-base">
     <a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
   </p>
-{% endblock %}
+{% endblock %}

package/docs/plantilla-sin-loguear.html

@@ -1,4 +1,4 @@
-{% set title = "Plantilla sin loguear. Gobierno de Aragón" %}
+{% set title = "Plantilla sin loguear. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.logged-out.njk" %}
 
 {% block contentBlock %}
@@ -11,4 +11,4 @@
   <p class="c-paragraph-base">
     <a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-out.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
   </p>
-{% endblock %}
+{% endblock %}

package/docs/plantillas.html

@@ -1,4 +1,4 @@
-{% set title = "Plantillas para desy-html. Gobierno de Aragón" %}
+{% set title = "Plantillas para desy-html. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% set activePage = "page-plantillas" %}
 {% extends "_template.default.njk" %}
 
@@ -7,7 +7,7 @@
     <div class="pb-lg"></div>
     <h1 class="c-h1">Plantillas</h1>
     <p class="c-paragraph-base">
-      Aqui encontrarás plantillas de página típicas que se utilizan en aplicaciones del Gobierno de Aragón. Los ejemplos que aquí aparecen han pasado revisiones de accesibilidad, por lo que son seguros para ser utilizados en tus proyectos como punto de partida.
+      Aquí encontrarás plantillas de página típicas que se utilizan en aplicaciones gubernamentales. Los ejemplos que aquí aparecen han pasado revisiones de accesibilidad, por lo que son seguros para ser utilizados en tus proyectos como punto de partida.
     </p>
 
     <div class="pb-lg"></div>
@@ -86,4 +86,4 @@
       </li>
     </ul>
   </div>
-{% endblock %}
+{% endblock %}

package/docs/spinner-plantilla-con-header-advanced.html

@@ -1,2 +1,2 @@
-{% set title = "Spinner de contenido en Plantilla con header advanced. Gobierno de Aragón" %}
-{% extends "pages/_template.with-header-advanced.njk" %}
+{% set title = "Spinner de contenido en Plantilla con header advanced. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
+{% extends "pages/_template.with-header-advanced.njk" %}

package/docs/spinner-plantilla-editar-con-cabecera-fija.html

@@ -1,5 +1,4 @@
-{% set title = "Spinner de contenido en Plantilla editar con cabecera fija. Gobierno de Aragón" %}
+{% set title = "Spinner de contenido en Plantilla editar con cabecera fija. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.edit-fixed.njk" %}
 
 {# Use headerTitleEditBlock and headerActionsEditBlock template blocks to customize the fixed header #}
-

package/docs/spinner-plantilla-logueado-con-cabecera-fija.html

@@ -1,2 +1,2 @@
-{% set title = "Spinner de contenido en Plantilla logueado con cabecera fija. Gobierno de Aragón" %}
-{% extends "pages/_template.logged-selector-fixed.njk" %}
+{% set title = "Spinner de contenido en Plantilla logueado con cabecera fija. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
+{% extends "pages/_template.logged-selector-fixed.njk" %}

package/docs/spinner-plantilla-logueado-con-selector-de-app-y-subheader.html

@@ -1,4 +1,2 @@
-{% set title = "Spinner de contenido en Plantilla logueado con selector de app y subheader. Gobierno de Aragón" %}
+{% set title = "Spinner de contenido en Plantilla logueado con selector de app y subheader. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.logged-selector-subheader.njk" %}
-
-

package/docs/spinner-plantilla-logueado-con-titulo-de-app.html

@@ -1,2 +1,2 @@
-{% set title = "Spinner de contenido en Plantilla logueado con título de app. Gobierno de Aragón" %}
-{% extends "pages/_template.logged.njk" %}
+{% set title = "Spinner de contenido en Plantilla logueado con título de app. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
+{% extends "pages/_template.logged.njk" %}

package/docs/spinner-plantilla-sin-loguear.html

@@ -1,4 +1,4 @@
-{% set title = "Spinner de página en Plantilla sin loguear. Gobierno de Aragón" %}
+{% set title = "Spinner de página en Plantilla sin loguear. " + (branding.organization.name if branding else "Gobierno de Aragón") %}
 {% extends "pages/_template.logged-out.njk" %}
 
 {% block pageSpinnerBlock %}
@@ -15,4 +15,4 @@
 {% block footerBlock %}
 {% endblock %}
 {% block modalBlock %}
-{% endblock %}
+{% endblock %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "15.0.3",
+  "version": "16.0.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "type": "module",
   "author": {
@@ -20,12 +20,17 @@
     "url": "https://bitbucket.org/sdaragon/desy-html.git"
   },
   "homepage": "https://desy.aragon.es/",
+  "exports": {
+    "./branding": "./branding/branding.config.js",
+    "./branding/plugin": "./branding/vite-branding-plugin.js"
+  },
   "engines": {
     "node": ">=20.19.2 <23.0.0",
     "npm": ">=10.0.0"
   },
   "scripts": {
     "dev": "vite",
+    "dev:yourorganization": "BRANDING_CONFIG=yourorganization vite",
     "build": "vite build",
     "preview": "vite preview"
   },
@@ -44,8 +49,8 @@
   "devDependencies": {
     "glob": "^11.0.1",
     "highlight.js": "^11.11.1",
-    "js-beautify": "^1.14.11",
     "nunjucks": "^3.2.4",
+    "js-beautify": "^1.14.11",
     "outdent": "^0.8.0",
     "sharp": "^0.34.3",
     "vite": "^7.1.6"

package/replit.md

@@ -71,5 +71,5 @@ Preferred communication style: Simple, everyday language.
 - Angular port available at https://bitbucket.org/sdaragon/desy-angular
 
 ### System Requirements
-- Node.js ^22.0.0
-- npm ^10.0.0
+- Node.js >=20.19.2 <23.0.0
+- npm >=10.0.0

package/src/css/branding-variables.css

@@ -0,0 +1,37 @@
+/**
+ * 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');
+}

package/src/css/component.text.css

@@ -6,6 +6,7 @@
   .c-h0 {
     @apply mb-8;
     font-size: 2.5rem;
+    font-family: var(--font-heading);
     @apply font-bold;
     @apply leading-tight;
   }
@@ -13,6 +14,7 @@
   .c-h1 {
     @apply mb-lg;
     @apply text-3xl;
+    font-family: var(--font-heading);
     @apply font-bold;
     @apply leading-tight;
   }
@@ -20,6 +22,7 @@
   .c-h2 {
     @apply mb-base;
     @apply text-2xl;
+    font-family: var(--font-heading);
     @apply font-bold;
     @apply leading-tight;
   }
@@ -27,6 +30,7 @@
   .c-h3 {
     @apply mb-sm;
     @apply text-lg;
+    font-family: var(--font-heading);
     @apply font-bold;
     @apply leading-tight;
   }
@@ -34,6 +38,7 @@
   .c-h4 {
     @apply mb-sm;
     @apply text-base;
+    font-family: var(--font-heading);
     @apply font-bold;
     @apply leading-tight;
   }

package/src/css/styles.css

@@ -4,6 +4,8 @@
 @import "tailwindcss";
 /* Custom base */
 @import './base.css';
+/* Branding variables for runtime customization */
+@import './branding-variables.css';
 
 /* Custom components */
 @import './component.text.css';
@@ -65,6 +67,8 @@
   --color-neutral-light: #ededec;
   --color-neutral-lighter: #f6f6f5;
 
+  /* Brand primary colors - Customize these values for your organization */
+  /* To change colors, edit these hex values directly */
   --color-primary-base: #00607a;
   --color-primary-light: #d6eaf0;
   --color-primary-dark: #00475c;
@@ -90,6 +94,11 @@
 
   --color-code: #c10007;
 
+  /* Brand colors (mapped directly from primary colors) */
+  --color-brand-primary: var(--color-primary-base);
+  --color-brand-primary-light: var(--color-primary-light);
+  --color-brand-primary-dark: var(--color-primary-dark);
+
   /* Spacing */
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
@@ -99,6 +108,7 @@
   --spacing-2xl: 5rem;
   --spacing-3xl: 10rem;
   --spacing-offcanvas: 83.333333%;
+  --spacing-offcanvas-negative: 16.666667%;
 
   /* Radius */
   --radius-DEFAULT: 0.1875rem;
@@ -120,8 +130,9 @@
   --shadow-outline-focus: inset 0 -2px 0 0 var(--color-black);
   --shadow-outline-focus-input: inset 0 0 0 3px var(--color-black);
 
-  /* Typography */
+  /* Typography - Configurable via branding/branding.config.js */
   --font-sans: "Open Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: var(--font-sans);
 
   /* Fixed widths */
   --width-xs: 20rem;
@@ -156,8 +167,8 @@
   --grid-template-rows-10: repeat(10, minmax(0, 1fr));
 
   /* Background images */
-  --background-image-general-lg: url('/images/general-lg.svg');
-  --background-image-general: url('/images/general.svg');
+  --background-image-general-lg: url('/images/header-background-lg.svg');
+  --background-image-general: url('/images/header-background.svg');
 }
 
 /* Typography plugin customization */
@@ -195,6 +206,7 @@
   }
 
   h1 {
+    font-family: var(--font-heading);
     font-size: 1.875em;
     margin-top: 0;
     margin-bottom: 0.9333333em;
@@ -203,6 +215,7 @@
   }
 
   h2 {
+    font-family: var(--font-heading);
     font-size: 1.5em;
     margin-top: 1.3333333em;
     margin-bottom: 0.6666667em;
@@ -210,6 +223,7 @@
   }
 
   h3 {
+    font-family: var(--font-heading);
     font-size: 1.125em;
     margin-top: 1.3333333em;
     margin-bottom: 0.4444444em;
@@ -218,6 +232,7 @@
   }
 
   h4 {
+    font-family: var(--font-heading);
     margin-top: 1.5em;
     margin-bottom: 0.5em;
     line-height: 1.25;

package/src/js/aria/notification.js

@@ -2,8 +2,8 @@ export function Notification(aria) {
 
   aria.notificationInit = function (domNode) {
     this.rootEl = domNode;
-    /*No todas las notificaciones tienen botón de cerrar
-    así que comprobamos que el componente contiene el botón.*/
+    /*Not all notifications have a close button
+    so we check if the component contains the button.*/
     if(this.rootEl.querySelector('.c-notification-button__close')) {
       window.addEventListener('click', this.closeNotification.bind(this));
     }
@@ -23,9 +23,9 @@ export function Notification(aria) {
 
   aria.closeNotificationEvent = function (element) {
     if(element.classList.contains('c-notification-button__close')) {
-      //Replicamos la transición de alpine con tailwind al cerrar.
+      //Replicate the alpine transition with tailwind when closing.
       element.parentElement.parentElement.parentElement.classList.add('transition-opacity', 'duration-150', 'ease-in-out', 'opacity-0');
-      //Añadimos display: none para que el componente "desaparezca del DOM"
+      //Add display: none so the component "disappears from the DOM"
       setTimeout(() =>{
         element.parentElement.parentElement.parentElement.classList.add('hidden');
       }, 300)
@@ -34,9 +34,9 @@ export function Notification(aria) {
 
   aria.closeNotificationWindow = function (element) {
     if(element.querySelector('.c-notification-button__close')) {
-      //Replicamos la transición de alpine con tailwind al cerrar.
+      //Replicate the alpine transition with tailwind when closing.
       element.classList.add('transition-opacity', 'duration-150', 'ease-in-out', 'opacity-0');
-      //Añadimos display: none para que el componente "desaparezca del DOM"
+      //Add display: none so the component "disappears from the DOM"
       setTimeout(() =>{
         element.classList.add('hidden');
       }, 300)