desy-html 16.0.4 → 17.0.0

package/src/templates/components/description-list/_macro.description-list.njk

@@ -1,3 +1,3 @@
-{% macro componentDescriptionList(params) %}
-{% include "./_template.description-list.njk" %}
-{% endmacro %}
+{% macro componentDescriptionList(params) %}
+{% include "./_template.description-list.njk" %}
+{% endmacro %}

package/src/templates/components/description-list/_template.description-list.njk

@@ -1,18 +1,18 @@
-<!-- description-list -->
-<dl {%- if params.classes %} class="{{ params.classes }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  {% for item in params.items %}
-  <div {%- if item.classes %} class="{{ item.classes }}"{% endif %}
-  {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-    <dt class="{% if item.term.classes %}{{ item.term.classes }}{% else %}text-sm text-neutral-dark{% endif %}"
-    {%- for attribute, value in item.term.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ item.term.html | filterquotes | safe if item.term.html else item.term.text }}
-    </dt>
-    <dd class="{% if item.definition.classes %}{{ item.definition.classes }}{% else %}text-base text-black{% endif %}"
-    {%- for attribute, value in item.definition.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ item.definition.html | filterquotes | safe if item.definition.html else item.definition.text }}
-    </dd>
-  </div>
-  {% endfor %}
-</dl>
+<!-- description-list -->
+<dl {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {% for item in params.items %}
+  <div {%- if item.classes %} class="{{ item.classes }}"{% endif %}
+  {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+    <dt class="{% if item.term.classes %}{{ item.term.classes }}{% else %}text-sm text-neutral-dark{% endif %}"
+    {%- for attribute, value in item.term.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ item.term.html | filterquotes | safe if item.term.html else item.term.text }}
+    </dt>
+    <dd class="{% if item.definition.classes %}{{ item.definition.classes }}{% else %}text-base text-black{% endif %}"
+    {%- for attribute, value in item.definition.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ item.definition.html | filterquotes | safe if item.definition.html else item.definition.text }}
+    </dd>
+  </div>
+  {% endfor %}
+</dl>
 <!-- /description-list -->

package/src/templates/components/description-list/params.description-list.yaml

@@ -1,62 +1,62 @@
-params:
-- name: items
-  type: array
-  required: true
-  description: Array of term/definition pairs.
-  params:
-  - name: term
-    type: object
-    required: true
-    description: term in dt.
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text to use within each dt item. If `html` is provided, the `text` argument will be ignored.
-    - name: html
-      type: string
-      required: true
-      description: If `text` is set, this is not required. HTML to use within each dt item. If `html` is provided, the `text` argument will be ignored.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the dt.
-    - name: attributes
-      type: object
-      required: false
-      description: HTML attributes (for example data attributes) to add to the dt.
-  - name: definition
-    type: object
-    required: true
-    description: definition in dd.
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text to use within each dd item. If `html` is provided, the `text` argument will be ignored.
-    - name: html
-      type: string
-      required: true
-      description: If `text` is set, this is not required. HTML to use within each dd item. If `html` is provided, the `text` argument will be ignored.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the dd.
-    - name: attributes
-      type: object
-      required: false
-      description: HTML attributes (for example data attributes) to add to the dd.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to a div container that contain the dt/dd pair.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to a div container that contain the dt/dd pair.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the checkboxes container.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: items
+  type: array
+  required: true
+  description: Array of term/definition pairs.
+  params:
+  - name: term
+    type: object
+    required: true
+    description: term in dt.
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use within each dt item. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: If `text` is set, this is not required. HTML to use within each dt item. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the dt.
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the dt.
+  - name: definition
+    type: object
+    required: true
+    description: definition in dd.
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use within each dd item. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: If `text` is set, this is not required. HTML to use within each dd item. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the dd.
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the dd.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to a div container that contain the dt/dd pair.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to a div container that contain the dt/dd pair.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the checkboxes container.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the nav tag.

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

@@ -1,69 +1,69 @@
-{% set exampleComponent = "details" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "summary": {
-        "html": "Más información"
-      },
-      "caller": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid distinctio mollitia itaque placeat voluptatibus, veritatis recusandae odio facere corporis laboriosam quam quia sequi, possimus consequatur enim veniam eius soluta esse.</p>"
-    },
-    "visualDescription": "Caja rectangular con borde gris de 1px y fondo blanco. Contiene un label \"por defecto\" en texto negro regular tamaño estándar en la parte superior, y un enlace \"Más información\" en azul con flecha triangular negra apuntando hacia la derecha.",
-    "_generated": {
-      "hash": "7f6c9ebf1ffd1dcac9a138e4c7e6d1d3",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:56:13.701Z"
-    }
-  },
-  {
-    "name": "expandido",
-    "description": "Usa el parámetro <code>'open': true</code> para mostrar inicialmente abierto un item.",
-    "data": {
-      "id": "mas-informacion",
-      "summary": {
-        "text": "Más información"
-      },
-      "caller": "<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates eum cupiditate quod minima consequuntur, eveniet aspernatur eius, consectetur ad, a enim atque dicta, repellat voluptatum iusto hic perspiciatis laboriosam unde.</p>",
-      "open": true
-    },
-    "visualDescription": "Caja rectangular con borde gris de 1px y fondo blanco. Contiene un label \"expandido\" en texto negro regular tamaño estándar en la parte superior, un enlace \"Más información\" en azul con flecha triangular negra apuntando hacia abajo, y un párrafo de texto Lorem Ipsum en color gris oscuro con fuente regular tamaño estándar que ocupa múltiples líneas.",
-    "_generated": {
-      "hash": "3b3653e91b709cd9e76455a257df3779",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:56:13.701Z"
-    }
-  },
-  {
-    "name": "con HTML",
-    "data": {
-      "summary": {
-        "html": "Más información <em>actualizada</em>"
-      },
-      "caller": "<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>"
-    },
-    "visualDescription": "Caja rectangular con borde gris de 1px y fondo blanco. Contiene un label \"con HTML\" en texto negro regular tamaño estándar en la parte superior, y un enlace \"Más información actualizable\" en azul donde \"actualizable\" aparece subrayado, acompañado de una flecha triangular negra apuntando hacia la derecha.",
-    "_generated": {
-      "hash": "25cd77d19a84bb4d0e2b601b821f2658",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:56:13.701Z"
-    }
-  },
-  {
-    "name": "con clases",
-    "data": {
-      "summary": {
-        "html": "Más información <em>actualizada</em>",
-        "classes": "hover:underline"
-      },
-      "classes": "p-base bg-primary-light text-primary-base",
-      "containerClasses": "p-base",
-      "caller": "<p>Lorem ipsum dolor, sit amet <strong>consectetur</strong>, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>"
-    },
-    "visualDescription": "Elemento details expandible con borde gris claro de 1px, fondo blanco, y esquinas redondeadas. Contiene un título en texto negro regular tamaño pequeño, seguido de un área expandible con fondo celeste claro que muestra un enlace en color azul verdoso con flecha triangular desplegable a la izquierda. El contenedor ocupa el ancho completo disponible.",
-    "_generated": {
-      "hash": "0fbd85e29b5a61a7466220e276a6cb31",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:56:20.971Z"
-    }
-  }
+{% set exampleComponent = "details" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "summary": {
+        "html": "Más información"
+      },
+      "caller": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid distinctio mollitia itaque placeat voluptatibus, veritatis recusandae odio facere corporis laboriosam quam quia sequi, possimus consequatur enim veniam eius soluta esse.</p>"
+    },
+    "visualDescription": "Caja rectangular con borde gris de 1px y fondo blanco. Contiene un label en texto negro regular tamaño estándar en la parte superior, y un enlace en azul con flecha triangular negra apuntando hacia la derecha.",
+    "_generated": {
+      "hash": "7f6c9ebf1ffd1dcac9a138e4c7e6d1d3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:13.701Z"
+    }
+  },
+  {
+    "name": "expandido",
+    "description": "Usa el parámetro <code>'open': true</code> para mostrar inicialmente abierto un item.",
+    "data": {
+      "id": "mas-informacion",
+      "summary": {
+        "text": "Más información"
+      },
+      "caller": "<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates eum cupiditate quod minima consequuntur, eveniet aspernatur eius, consectetur ad, a enim atque dicta, repellat voluptatum iusto hic perspiciatis laboriosam unde.</p>",
+      "open": true
+    },
+    "visualDescription": "Caja rectangular con borde gris de 1px y fondo blanco. Contiene un label en texto negro regular tamaño estándar en la parte superior, un enlace en azul con flecha triangular negra apuntando hacia abajo, y un párrafo de texto en color gris oscuro con fuente regular tamaño estándar que ocupa múltiples líneas.",
+    "_generated": {
+      "hash": "3b3653e91b709cd9e76455a257df3779",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:13.701Z"
+    }
+  },
+  {
+    "name": "con HTML",
+    "data": {
+      "summary": {
+        "html": "Más información <em>actualizada</em>"
+      },
+      "caller": "<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>"
+    },
+    "visualDescription": "Caja rectangular con borde gris de 1px y fondo blanco. Contiene un label en texto negro regular tamaño estándar en la parte superior, y un enlace en azul con texto enfatizado subrayado, acompañado de una flecha triangular negra apuntando hacia la derecha.",
+    "_generated": {
+      "hash": "25cd77d19a84bb4d0e2b601b821f2658",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:13.701Z"
+    }
+  },
+  {
+    "name": "con clases",
+    "data": {
+      "summary": {
+        "html": "Más información <em>actualizada</em>",
+        "classes": "hover:underline"
+      },
+      "classes": "p-base bg-primary-light text-primary-base",
+      "containerClasses": "p-base",
+      "caller": "<p>Lorem ipsum dolor, sit amet <strong>consectetur</strong>, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>"
+    },
+    "visualDescription": "Elemento details expandible con borde gris claro de 1px, fondo blanco, y esquinas redondeadas. Contiene un título en texto negro regular tamaño pequeño, seguido de un área expandible con fondo celeste claro que muestra un enlace en color azul verdoso con flecha triangular desplegable a la izquierda. El contenedor ocupa el ancho completo disponible.",
+    "_generated": {
+      "hash": "0fbd85e29b5a61a7466220e276a6cb31",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:20.971Z"
+    }
+  }
 ] %}

package/src/templates/components/details/_macro.details.njk

@@ -1,3 +1,3 @@
-{% macro componentDetails(params) %}
-{% include "./_template.details.njk" %}
-{% endmacro %}
+{% macro componentDetails(params) %}
+{% include "./_template.details.njk" %}
+{% endmacro %}

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

@@ -1,18 +1,18 @@
-<!-- details -->
-<details {%- if params.id %} id="{{params.id}}"{% endif %} class="{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
-  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black">
-    <span class="{% if params.summary.classes %}{{ params.summary.classes }}{% else %}c-link{% endif %}">
-      {{ params.summary.html | filterquotes | safe if params.summary.html else params.summary.text }}
-    </span>
-  </summary>
-  <div class="py-sm">
-    <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
-      {% if caller %}
-      {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
-      {% elseif params.caller %}
-      {{ params.caller | safe }}
-      {% endif %}
-    </div>
-  </div>
-</details>
+<!-- details -->
+<details {%- if params.id %} id="{{params.id}}"{% endif %} class="{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
+  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black">
+    <span class="{% if params.summary.classes %}{{ params.summary.classes }}{% else %}c-link{% endif %}">
+      {{ params.summary.html | filterquotes | safe if params.summary.html else params.summary.text }}
+    </span>
+  </summary>
+  <div class="py-sm">
+    <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
+      {% if caller %}
+      {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+      {% elseif params.caller %}
+      {{ params.caller | safe }}
+      {% endif %}
+    </div>
+  </div>
+</details>
 <!-- /details -->

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

@@ -1,41 +1,41 @@
-params:
-- name: summary
-  type: object
-  required: true
-  description: Summary that opens the content
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored.
-  - name: html
-    type: string
-    required: true
-    description: If `text` is set, this is not required. HTML to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the inner `span` container inside the `<summary>` element. If not privided, it uses .c-link class.
-- name: containerClasses
-  type: string
-  required: false
-  description: Classes that can be added to the inner container.
-- name: id
-  type: string
-  required: false
-  description: Id to add to the details element.
-- name: open
-  type: boolean
-  required: false
-  description: If true, details element will be expanded.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the `<details>` element.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the `<details>` element.
-- name: caller
-  type: nunjucks-block
-  required: false
+params:
+- name: summary
+  type: object
+  required: true
+  description: Summary that opens the content
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the inner `span` container inside the `<summary>` element. If not privided, it uses .c-link class.
+- name: containerClasses
+  type: string
+  required: false
+  description: Classes that can be added to the inner container.
+- name: id
+  type: string
+  required: false
+  description: Id to add to the details element.
+- name: open
+  type: boolean
+  required: false
+  description: If true, details element will be expanded.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the `<details>` element.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the `<details>` element.
+- name: caller
+  type: nunjucks-block
+  required: false
   description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire dropdown component in a `call` block.