desy-html 15.0.3 → 16.0.0

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

@@ -82,6 +82,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Contenedor con borde gris claro de 1px y fondo blanco. Título \"por defecto\" en negro arriba, seguido de \"Selecciona organismo\" en negro tamaño mediano. Tres ítems con radio buttons circulares vacíos a la izquierda y labels \"Item 1\", \"Item 2\", \"Item 3\" en negro tamaño estándar.",
+    "_generated": {
+      "hash": "5c162bbd7341725bee348edad8c6a452",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:04.056Z"
     }
   },
   {
@@ -167,6 +173,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Contenedor con borde gris claro de 1px y fondo blanco. Título \"tipo checkbox\" en negro arriba, seguido de \"Selecciona organismo\" en negro tamaño mediano. Tres ítems con checkboxes cuadrados vacíos a la izquierda y labels \"Item 1\", \"Item 2\", \"Item 3\" en negro tamaño estándar.",
+    "_generated": {
+      "hash": "6ecc292f748ed9c29e5bfdc2f1500618",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:04.056Z"
     }
   },
   {
@@ -267,6 +279,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Contenedor con borde gris claro de 1px y fondo blanco. Título \"tree navigation\" en negro arriba. Tres ítems de texto \"Item 1\", \"Item 2\", \"Item 3\" en negro tamaño estándar, cada uno precedido por un símbolo \"+\" gris, alineados verticalmente con espaciado uniforme.",
+    "_generated": {
+      "hash": "7297e0068253aeb3f0abaa36a7daa9b3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:04.056Z"
     }
   },
   {
@@ -374,6 +392,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Lista de tres enlaces apilados verticalmente sobre fondo beige claro con borde gris. El primer enlace \"Item 1\" tiene texto verde azulado con subrayado, el segundo \"Item 2 deshabilitado a sin href\" tiene texto negro sin decoración, y el tercer \"Item 3\" tiene texto verde azulado con subrayado. Los enlaces tienen viñetas de lista con signo más (+) en verde azulado.",
+    "_generated": {
+      "hash": "c4b53546743743c28a64d12a2a8bf1c5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:14.078Z"
     }
   },
   {
@@ -490,6 +514,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Lista de tres enlaces apilados verticalmente sobre fondo blanco con borde gris fino. Cada enlace muestra texto verde azulado con subrayado (\"Item 1\", \"Item 2\", \"Item 3\"). Los enlaces están precedidos por viñetas de lista con signo más (+) en verde azulado. El espaciado entre elementos es uniforme y compacto.",
+    "_generated": {
+      "hash": "c3b877b0ad0206d7c6089adbe97847c7",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:14.078Z"
     }
   },
   {
@@ -591,6 +621,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Lista de tres elementos apilados verticalmente sobre fondo blanco con borde gris fino. Contiene texto negro sin subrayado para \"Item 1\", \"Item 2\", \"Item 3\". Los elementos están precedidos por viñetas de lista negras en forma de cuadrados pequeños. El espaciado vertical entre elementos es uniforme y compacto.",
+    "_generated": {
+      "hash": "cde2849267ff08af24d93d56a6fdbd1c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:14.078Z"
     }
   },
   {
@@ -682,6 +718,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Caja con borde gris claro conteniendo un título en negrita negro, seguido de dos líneas de texto descriptivo en gris oscuro. La segunda línea de texto aparece en color rojo indicando error. Lista de tres radio buttons deshabilitados en gris claro con labels en negro.",
+    "_generated": {
+      "hash": "6dfb102037f9d1a331d9fb3304d8ea2b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:27.107Z"
     }
   },
   {
@@ -771,6 +813,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Caja con borde gris claro conteniendo un título en negrita negro y texto descriptivo en gris oscuro debajo. Lista de tres radio buttons deshabilitados en gris claro con labels en gris atenuado, precedidos por iconos de expansión tipo plus en gris.",
+    "_generated": {
+      "hash": "540736e9eb0f7f21c24fc673286a0d25",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:27.107Z"
     }
   },
   {
@@ -859,6 +907,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Caja con borde gris claro conteniendo un título en negrita negro y texto descriptivo en gris oscuro. Lista de tres radio buttons blancos con labels en negro, el segundo radio button está seleccionado con relleno negro. Cada item precedido por iconos de expansión tipo plus en gris.",
+    "_generated": {
+      "hash": "4122490b8457124caebc9046913ce5e3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:27.107Z"
     }
   },
   {
@@ -979,6 +1033,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Fieldset con borde gris de 1px y fondo blanco. Encabezado en negrita negro seguido de tres radio buttons con labels en negro y subtexto gris claro debajo de cada label. Radio buttons alineados verticalmente con espaciado uniforme.",
+    "_generated": {
+      "hash": "5b0ebcdcc1358bc1c7b1b53bb00ab70a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:34.949Z"
     }
   },
   {
@@ -1065,6 +1125,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Fieldset con borde gris de 1px y fondo blanco. Encabezado en negrita negro posicionado sobre el borde superior izquierdo. Tres radio buttons con labels en negro, alineados verticalmente con espaciado uniforme.",
+    "_generated": {
+      "hash": "da61803c9a7603363d2f3fb4e696b265",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:34.949Z"
     }
   },
   {
@@ -1143,6 +1209,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Grupo de radio buttons sin borde contenedor ni fondo visible. Tres radio buttons con labels en negro, alineados verticalmente con espaciado uniforme. Estructura visual minimalista sin elementos decorativos.",
+    "_generated": {
+      "hash": "155ce1098a01153cd02af42796347700",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:34.949Z"
     }
   },
   {
@@ -1232,6 +1304,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Estructura jerárquica con radio buttons circulares de borde gris. \"Ítem 2\" expandido muestra tres subitems anidados con mayor indentación izquierda. Texto negro en fuente sans-serif, fondo blanco, líneas verticales grises conectan elementos padre-hijo.",
+    "_generated": {
+      "hash": "b3b0e161a4303da9217248c9463d91fe",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:44.721Z"
     }
   },
   {
@@ -1417,6 +1495,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Árbol de cuatro niveles de profundidad con radio buttons circulares sin relleno. \"Ítem 3\" expandido muestra cascada de subitems con indentación progresiva hacia la derecha. Texto negro regular, líneas verticales grises indican jerarquía, fondo blanco contenedor con borde gris sutil.",
+    "_generated": {
+      "hash": "81513665868d80ba3f52cc3323ef5fca",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:44.721Z"
     }
   },
   {
@@ -1513,6 +1597,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Lista con checkboxes cuadrados de borde gris oscuro. \"Subitem 2\" bajo \"Ítem 2\" muestra checkbox azul con marca de verificación blanca (estado seleccionado). Texto negro peso normal, indentación consistente, fondo blanco, borde gris claro en contenedor exterior.",
+    "_generated": {
+      "hash": "905e513cff93237c2cec54d04338439c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:44.721Z"
     }
   },
   {
@@ -1603,6 +1693,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Campo de búsqueda con borde gris claro de 1px, fondo blanco, placeholder gris, e icono de lupa azul a la derecha. Debajo hay lista de tres ítems con bullets azules circulares, texto negro normal. Label superior en negro negrita, altura total aproximada 150px.",
+    "_generated": {
+      "hash": "0b1dab313dfae3c333e5442975345425",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:54.390Z"
     }
   },
   {
@@ -1697,6 +1793,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Campo de búsqueda con borde rojo de 2px, fondo blanco, placeholder gris, e icono de lupa azul a la derecha. Mensaje de error en rojo debajo del campo. Lista de tres ítems con radio buttons vacíos, texto negro normal. Label superior en negro negrita, altura total aproximada 180px.",
+    "_generated": {
+      "hash": "a6336fa5d901129dfc4aa7175bcb1fc4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:54.390Z"
     }
   },
   {
@@ -1791,6 +1893,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Campo de búsqueda con borde gris claro de 1px, fondo blanco, placeholder gris, e icono de lupa azul a la derecha. Lista desplegable tipo árbol con dos niveles: ítems principales con símbolos menos expandibles, subítems indentados con radio buttons vacíos. Label superior en negro negrita, altura total aproximada 250px, área de contenido desplazable.",
+    "_generated": {
+      "hash": "8d7db5ec55d5b62a8c2518989b9e5cdc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:18:54.390Z"
     }
   },
   {
@@ -1883,6 +1991,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Árbol de navegación con radio buttons circulares no seleccionados en color gris. Texto negro de peso normal para las opciones, organizadas jerárquicamente con indentación visual usando guiones. Fondo blanco con encabezado \"Selecciona organismo\" en negrita negro y subtexto gris claro.",
+    "_generated": {
+      "hash": "d158a1246655833894652039cdf800c9",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:19:03.582Z"
     }
   },
   {
@@ -1922,6 +2036,12 @@
           "value": "option-5"
         }
       ]
+    },
+    "visualDescription": "Lista vertical de radio buttons circulares no seleccionados en color gris con labels en texto negro de peso normal. Cinco opciones numeradas del 1 al 5 alineadas verticalmente sin indentación. Fondo blanco con encabezado \"Selecciona organismo\" en negrita negro y subtexto gris claro debajo.",
+    "_generated": {
+      "hash": "c867d88f60fe4a0056f1c0aa95de21c2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:19:03.582Z"
     }
   },
   {
@@ -2007,6 +2127,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Estructura de lista con bullets cuadrados verdes en lugar de radio buttons circulares. Tres items con labels en texto negro de peso normal alineados verticalmente. Fondo blanco con encabezado \"Selecciona organismo\" en negrita negro sin subtexto adicional.",
+    "_generated": {
+      "hash": "2b3cce36de0a04cfc7e6867c5be15cce",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:19:03.582Z"
     }
   },
   {
@@ -2092,6 +2218,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Componente tree con borde gris claro que contiene un título en texto negro normal, seguido de un subtítulo \"Selecciona organismo\" en texto negro pequeño. Tres radio buttons dispuestos verticalmente con labels \"Item 1\", \"Item 2\", \"Item 3\" en texto negro regular, espaciados uniformemente sobre fondo blanco.",
+    "_generated": {
+      "hash": "bcc95540e4cd9af42563213f437b6ede",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:19:13.643Z"
     }
   },
   {
@@ -2177,6 +2309,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Componente tree con borde gris claro que contiene un título en texto negro normal, seguido de un subtítulo \"Selecciona organismo\" en texto negro pequeño. Tres radio buttons dispuestos verticalmente con labels \"Item 1\", \"Item 2\", \"Item 3\" en texto negro regular, donde el primer radio button aparece sin seleccionar y los otros dos muestran estados visuales distintos sobre fondo blanco.",
+    "_generated": {
+      "hash": "db976bcd40e7395d676551b39157a4c2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:19:13.643Z"
     }
   },
   {
@@ -2363,6 +2501,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Componente tree con borde gris claro que contiene un título en texto negro normal, dos líneas de subtítulo donde la primera dice \"Selecciona organismo\" y la segunda \"Selecciona el organismo al que perteneces.\" en texto gris pequeño. Tres radio buttons dispuestos verticalmente con labels \"Item 1\", \"Item 2\", \"Item 3\" en texto negro regular sobre fondo blanco.",
+    "_generated": {
+      "hash": "6fa34bc9be272591d00f90a407267793",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:19:13.643Z"
     }
   },
   {
@@ -2517,6 +2661,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Fieldset con borde gris de 1px y fondo blanco. Encabezado en negrita negro \"lazy rendering\" en la parte superior izquierda. Sección interna contiene texto descriptivo negro \"Selecciona organismo\" seguido de tres checkboxes sin marcar con labels negros \"Ítem A\", \"Ítem B\" e \"Ítem C\", dispuestos verticalmente con espaciado uniforme entre ellos.",
+    "_generated": {
+      "hash": "f67f424bd40831d5b6a34b96f44c9cb8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:19:20.662Z"
     }
   }
 ] %}

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

@@ -208,6 +208,12 @@
         "id": "treegrid",
         "aria-describedby": "treegrid-desc"
       }
+    },
+    "visualDescription": "Tabla jerárquica con encabezados \"Documento\", \"Importe\", \"Fecha\" y \"Acciones\" en texto negro sobre fondo blanco. Filas expandibles con iconos triangulares negros, montos numéricos alineados a la derecha, fechas formato DD/MM/YYYY, y enlaces azules \"Ver\" en la columna de acciones. Estructura de árbol con hasta 3 niveles de indentación visual, bordes grises claros separando filas, identificadores alfanuméricos en negro (A0001, A0001-1, etc.).",
+    "_generated": {
+      "hash": "6273ec85df85e1ec1954c0795ed5785c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:19:31.950Z"
     }
   },
   {
@@ -434,6 +440,12 @@
         "id": "treegrid-B",
         "aria-describedby": "treegrid-B-desc"
       }
+    },
+    "visualDescription": "Tabla jerárquica con encabezados \"Documento\", \"Importe\", \"Fecha\" y \"Acciones\" en texto negro sobre fondo blanco. Filas expandibles con iconos triangulares negros, montos numéricos alineados a la derecha, fechas formato DD/MM/YYYY, y enlaces azules \"Ver\" en la columna de acciones. Fila inferior con fondo blanco mostrando texto \"SUMA\" en negro y valor total \"10.045€\", estructura de árbol con hasta 3 niveles de indentación, bordes grises claros entre filas.",
+    "_generated": {
+      "hash": "67e6c567aa13ab087495d82f1e8da668",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:19:31.950Z"
     }
   },
   {
@@ -644,6 +656,12 @@
         "id": "treegrid-B",
         "aria-describedby": "treegrid-B-desc"
       }
+    },
+    "visualDescription": "Tabla jerárquica con título \"Documentos contables\" en negro arriba, seguido de encabezados \"Importe\", \"Fecha\" y \"Acciones\" en texto negro sobre fondo blanco. Filas expandibles con iconos triangulares negros, montos numéricos alineados a la derecha, fechas formato DD/MM/YYYY, y enlaces azules \"Ver\" en la columna de acciones. Estructura de árbol con hasta 3 niveles de indentación visual, identificadores alfanuméricos C0001 en negro, bordes grises claros separando filas.",
+    "_generated": {
+      "hash": "248d9013d6a33db248d989d427812a72",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:19:31.950Z"
     }
   },
   {
@@ -855,6 +873,12 @@
         "id": "treegrid",
         "aria-describedby": "treegrid-desc"
       }
+    },
+    "visualDescription": "Tabla con estructura jerárquica expandible mediante triángulos negros a la izquierda de cada fila padre. Filas con identificadores de documento en texto negro con sangría progresiva (E0001, E0001-1, E0001-2-1), columnas de \"Importe\" en negro, \"Fecha\" en negro, y \"Acciones\" con enlaces \"Ver\" en azul. Fondo blanco con bordes grises horizontales separando filas, cabecera en texto negro sobre fondo gris claro.",
+    "_generated": {
+      "hash": "203c81ba698f852771ba8a0b66972335",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:19:43.393Z"
     }
   },
   {
@@ -1235,6 +1259,12 @@
         "id": "treegrid-9",
         "aria-describedby": "treegrid-9-desc"
       }
+    },
+    "visualDescription": "Tabla jerárquica con 15 niveles de anidación visible mediante sangría incremental de izquierda a derecha. Identificadores de documento (F0001, F0001-1, F0001-1-1, hasta F0001-1-1-1-1-1-1-1-1-1-1-1) en texto negro con triángulos de expansión, columnas de importes en negro con símbolo €, fechas en formato DD/MM/AAAA, y enlaces \"Ver\" en azul en columna de acciones. Fondo blanco con líneas divisorias grises horizontales entre filas, cabecera con texto negro sobre fondo gris claro.",
+    "_generated": {
+      "hash": "e7371d23c17bf64d2e669467492dfa52",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:19:43.393Z"
     }
   }
 ] %}

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

@@ -53,7 +53,7 @@
             {{- commonAttributes | safe -}}
           >
                 {% if row.expanded is defined and loop.first %}
-                  <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" role="presentation">
+                  <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
                     <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
                       <rect width="24" height="24" fill="none"/>
                       <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor"/>

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

@@ -6,8 +6,16 @@
   <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">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <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">
+  {% 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">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    {% endif %}
+    <link href="{{ branding.typography.fontUrl }}" rel="stylesheet">
+  {% elif not branding %}
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <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 %}
 </head>
 <!-- /page.head -->