desy-html 16.0.3 → 17.0.0

package/src/templates/components/accordion-history/params.accordion-history.yaml

@@ -1,129 +1,129 @@
-params:
-- name: idPrefix
-  type: string
-  required: true
-  description: String to prefix id for each accordion item if no id is specified on each item.
-- name: headingLevel
-  type: number
-  required: false
-  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
-- name: allowToggle
-  type: boolean
-  required: false
-  description: Defaults to `false`. Allow for each toggle to both open and close its section. Makes it possible for all sections to be closed. Assumes only one section may be open.
-- name: allowMultiple
-  type: boolean
-  required: false
-  description: Defaults to `false`. Allow for multiple accordion sections to be expanded at the same time. Assumes data-allow-toggle otherwise the toggle on open sections would be disabled.
-- name: heading
-  type: object
-  required: false
-  description: Options for the heading
-  params:
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the heading. 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 the heading. If `html` is provided, the `text` argument will be ignored.
-  - name: id
-    type: string
-    required: false
-    description: Id to add to the item. Not required, but recommended to improve the accessibility.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the heading.
-- name: showControl
-  type: boolean
-  required: false
-  description: Defaults to `false`. If `true` a Show/Hide all button is displayed on top
-- name: items
-  type: array
-  required: true
-  description: Array of accordion items objects.
-  params:
-  - name: headerText
-    type: string
-    required: true
-    description: If `summmaryHtml` is set, this is not required. Text to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
-  - name: headerHtml
-    type: string
-    required: true
-    description: If `summmaryText` is set, this is not required. HTML to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the disclosed part of the accordion item element. 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 the disclosed part of the accordion item element. If `html` is provided, the `text` argument will be ignored.
-  - name: id
-    type: string
-    required: false
-    description: Id to add to the item. Not required, but recommended to improve the accessibility.
-  - name: open
-    type: boolean
-    required: false
-    description: If true, accordion item will be expanded.
-  - name: disabled
-    type: boolean
-    required: false
-    description: If true, accordion item will be disabled and will not show the show/hide control.
-  - name: status
-    type: string
-    required: false
-    description: Available values: `current`,`past`,`pending`,`muted`, `currentmuted`. Defaults to `past`. If `current`, the item will show with primary border and white background. If `past`, the item will show with primary color. If `pending` the item has neutral color and dashed line. If `muted` the item has neutral color and background. `currentmuted` is like `current` but with `muted` styles.
-  - name: show
-    type: object
-    required: false
-    description: Options to customize the show info
-    params:
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text to use in show info. 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 the show info. If `html` is provided, the `text` argument will be ignored.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the show info.
-  - name: hide
-    type: object
-    required: false
-    description: Options to customize the hide info
-    params:
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text to use in hide info. 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 the hide info. If `html` is provided, the `text` argument will be ignored.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the hide info.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the accordion item element.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the accordion item.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the accordion container.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the accordion container.
+params:
+- name: idPrefix
+  type: string
+  required: true
+  description: String to prefix id for each accordion item if no id is specified on each item.
+- name: headingLevel
+  type: number
+  required: false
+  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
+- name: allowToggle
+  type: boolean
+  required: false
+  description: Defaults to `false`. Allow for each toggle to both open and close its section. Makes it possible for all sections to be closed. Assumes only one section may be open.
+- name: allowMultiple
+  type: boolean
+  required: false
+  description: Defaults to `false`. Allow for multiple accordion sections to be expanded at the same time. Assumes data-allow-toggle otherwise the toggle on open sections would be disabled.
+- name: heading
+  type: object
+  required: false
+  description: Options for the heading
+  params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the heading. 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 the heading. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Id to add to the item. Not required, but recommended to improve the accessibility.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the heading.
+- name: showControl
+  type: boolean
+  required: false
+  description: Defaults to `false`. If `true` a Show/Hide all button is displayed on top
+- name: items
+  type: array
+  required: true
+  description: Array of accordion items objects.
+  params:
+  - name: headerText
+    type: string
+    required: true
+    description: If `summmaryHtml` is set, this is not required. Text to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
+  - name: headerHtml
+    type: string
+    required: true
+    description: If `summmaryText` is set, this is not required. HTML to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the disclosed part of the accordion item element. 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 the disclosed part of the accordion item element. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Id to add to the item. Not required, but recommended to improve the accessibility.
+  - name: open
+    type: boolean
+    required: false
+    description: If true, accordion item will be expanded.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, accordion item will be disabled and will not show the show/hide control.
+  - name: status
+    type: string
+    required: false
+    description: Available values: `current`,`past`,`pending`,`muted`, `currentmuted`. Defaults to `past`. If `current`, the item will show with primary border and white background. If `past`, the item will show with primary color. If `pending` the item has neutral color and dashed line. If `muted` the item has neutral color and background. `currentmuted` is like `current` but with `muted` styles.
+  - name: show
+    type: object
+    required: false
+    description: Options to customize the show info
+    params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use in show info. 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 the show info. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the show info.
+  - name: hide
+    type: object
+    required: false
+    description: Options to customize the hide info
+    params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use in hide info. 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 the hide info. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the hide info.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the accordion item element.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the accordion item.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the accordion container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the accordion container.

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

@@ -1,92 +1,92 @@
-{% from "components/notification/_macro.notification.njk" import componentNotification %}
-
-{% set defaultExample %}
-  {{ componentNotification({
-    "title": {
-      "text": "El documento se ha cargado correctamente",
-      "classes": "outline-hidden"
-    },
-    "type": "success",
-    "isDismissible": true,
-    "id": "default-id"
-  })  }}
-{% endset %}
-
-{% set secondaryExample %}
-  {{ componentNotification({
-    "title": {
-      "text": "Problemas encontrados",
-      "classes": "mr-lg"
-    },
-    "items": [
-      {
-        "text": "Campo Nombre de la empresa está vacío",
-        "href": "#empresa"
-      },
-      {
-        "text": "Campo Fecha de inicio de la actividad está vacío",
-        "href": "#actividad"
-      },
-      {
-        "text": "El formato de correo electrónico es incorrecto",
-        "href": "#email"
-      }
-    ],
-    "type": "alert",
-    "isDismissible": true,
-    "id": "secondary-id"
-  })  }}
-{% endset %}
-
-
-{% set exampleComponent = "alert" %}
-{% set examples =  [
-  {
-    "name": "alert mostrando una notificación de éxito",
-    "description": "Utilizamos los atributos <code>'role': 'alert'</code> y  <code>'aria-live': 'assertive'</code> para que no pasen desapercibidas al lector de pantalla si no movemos el foco tras abrir la notificación. Si la notificación fuese de estado, como que la página se ha cargado, entonces se usará <code>'role': 'alert'</code> y  <code>'aria-live': 'polite'</code>. La función <code>openAlert</code> toma como primer argumento el <code>id</code> del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente.",
-    "data": {
-      "button": {
-        "text": "Abrir éxito",
-        "attributes": {
-          "onclick": "openAlert('success-id', this)"
-        }
-      },
-      "id": "success-id",
-      "attributes": {
-        "role": "alert",
-        "aria-live": "assertive"
-      },
-      "caller": defaultExample
-    },
-    "visualDescription": "Contenedor rectangular con fondo blanco, borde gris claro de 1px. Texto descriptivo negro arriba. Botón con texto azul oscuro, borde azul de 1px, fondo blanco, esquinas redondeadas.",
-    "_generated": {
-      "hash": "e9b09dbe7b16e7bac9e8296e52edcfea",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:47:42.215Z"
-    }
-  },
-  {
-    "name": "alert mostrando una notificación de alerta",
-    "description": "La función <code>openAlert</code> toma como primer argumento el <code>id</code> del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente. El tercer argumento es el <code>id</code> del elemento al que queremos que vaya el foco al abrir el elemento emergente, que suele ser el título de una notificación. Debido al uso de este argumento tras abrir este alert movemos el foco al título de la notificación, en este caso no es necesario usar los atributos <code>'role': 'alert'</code> y  <code>'aria-live': 'assertive'</code>.",
-    "data": {
-      "button": {
-        "text": "Abrir alerta",
-        "attributes": {
-          "onclick": "openAlert('alert-id', this, 'secondary-id-title');"
-        }
-      },
-      "id": "alert-id",
-      "attributes": {
-        "role": "alert",
-        "aria-live": "assertive"
-      },
-      "caller": secondaryExample
-    },
-    "visualDescription": "Contenedor rectangular con fondo blanco, borde gris claro de 1px. Texto descriptivo negro arriba. Botón con texto azul oscuro, borde azul de 1px, fondo blanco, esquinas redondeadas.",
-    "_generated": {
-      "hash": "1cf721fb2ee44ed7cc947463a6f51cf6",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:47:42.215Z"
-    }
-  }
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+
+{% set defaultExample %}
+  {{ componentNotification({
+    "title": {
+      "text": "El documento se ha cargado correctamente",
+      "classes": "outline-hidden"
+    },
+    "type": "success",
+    "isDismissible": true,
+    "id": "default-id"
+  })  }}
+{% endset %}
+
+{% set secondaryExample %}
+  {{ componentNotification({
+    "title": {
+      "text": "Problemas encontrados",
+      "classes": "mr-lg"
+    },
+    "items": [
+      {
+        "text": "Campo Nombre de la empresa está vacío",
+        "href": "#empresa"
+      },
+      {
+        "text": "Campo Fecha de inicio de la actividad está vacío",
+        "href": "#actividad"
+      },
+      {
+        "text": "El formato de correo electrónico es incorrecto",
+        "href": "#email"
+      }
+    ],
+    "type": "alert",
+    "isDismissible": true,
+    "id": "secondary-id"
+  })  }}
+{% endset %}
+
+
+{% set exampleComponent = "alert" %}
+{% set examples =  [
+  {
+    "name": "alert mostrando una notificación de éxito",
+    "description": "Utilizamos los atributos <code>'role': 'alert'</code> y  <code>'aria-live': 'assertive'</code> para que no pasen desapercibidas al lector de pantalla si no movemos el foco tras abrir la notificación. Si la notificación fuese de estado, como que la página se ha cargado, entonces se usará <code>'role': 'alert'</code> y  <code>'aria-live': 'polite'</code>. La función <code>openAlert</code> toma como primer argumento el <code>id</code> del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente.",
+    "data": {
+      "button": {
+        "text": "Abrir éxito",
+        "attributes": {
+          "onclick": "openAlert('success-id', this)"
+        }
+      },
+      "id": "success-id",
+      "attributes": {
+        "role": "alert",
+        "aria-live": "assertive"
+      },
+      "caller": defaultExample
+    },
+    "visualDescription": "Título de notificación en negro arriba, icono de éxito visible. Botón con texto azul oscuro, borde azul de 1px, fondo blanco, esquinas redondeadas.",
+    "_generated": {
+      "hash": "e9b09dbe7b16e7bac9e8296e52edcfea",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:42.215Z"
+    }
+  },
+  {
+    "name": "alert mostrando una notificación de alerta",
+    "description": "La función <code>openAlert</code> toma como primer argumento el <code>id</code> del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente. El tercer argumento es el <code>id</code> del elemento al que queremos que vaya el foco al abrir el elemento emergente, que suele ser el título de una notificación. Debido al uso de este argumento tras abrir este alert movemos el foco al título de la notificación, en este caso no es necesario usar los atributos <code>'role': 'alert'</code> y  <code>'aria-live': 'assertive'</code>.",
+    "data": {
+      "button": {
+        "text": "Abrir alerta",
+        "attributes": {
+          "onclick": "openAlert('alert-id', this, 'secondary-id-title');"
+        }
+      },
+      "id": "alert-id",
+      "attributes": {
+        "role": "alert",
+        "aria-live": "assertive"
+      },
+      "caller": secondaryExample
+    },
+    "visualDescription": "Título de notificación en negro, icono de alerta visible. Lista de elementos de error en texto negro con enlaces a campos específicos. Botón con texto azul oscuro, borde azul de 1px, fondo blanco, esquinas redondeadas.",
+    "_generated": {
+      "hash": "1cf721fb2ee44ed7cc947463a6f51cf6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:42.215Z"
+    }
+  }
 ] %}

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

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

package/src/templates/components/alert/_styles.alert.css

@@ -1,9 +1,9 @@
-/* ==========================================================================
-   _styles.alert.css
-   ========================================================================== */
-
-@layer components {
-  [role="alert"]:empty {
-    @apply hidden;
-  }
-}
+/* ==========================================================================
+   _styles.alert.css
+   ========================================================================== */
+
+@layer components {
+  [role="alert"]:empty {
+    @apply hidden;
+  }
+}

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

@@ -1,16 +1,16 @@
-{% from "components/button/_macro.button.njk" import componentButton %}
-
-<!-- alert -->
-<div>
-  {{ componentButton(params.button) | indent(2)  }}
-  <div id="{{ params.id }}" {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  </div>
-  <div class="hidden" id="{{ 'template-' + params.id }}">
-  {% if caller %}
-  {{ caller() | indent(6) }} {#- if statement allows usage of `call` to be optional -#}
-  {% elseif params.caller %}
-  {{ params.caller | safe | indent(6) }}
-  {% endif %}
-  </div>
-</div>
-<!-- /alert -->
+{% from "components/button/_macro.button.njk" import componentButton %}
+
+<!-- alert -->
+<div>
+  {{ componentButton(params.button) | indent(2)  }}
+  <div id="{{ params.id }}" {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  </div>
+  <div class="hidden" id="{{ 'template-' + params.id }}">
+  {% if caller %}
+  {{ caller() | indent(6) }} {#- if statement allows usage of `call` to be optional -#}
+  {% elseif params.caller %}
+  {{ params.caller | safe | indent(6) }}
+  {% endif %}
+  </div>
+</div>
+<!-- /alert -->

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

@@ -1,25 +1,25 @@
-params:
-- name: button
-  type: component
-  required: true
-  description: Button component to intereact with the dialog.
-- name: labelledId
-  type: string
-  required: true
-  description: Required id attribute to reference with aria-labelledby in the div container tag.
-- name: id
-  type: string
-  required: true
-  description: Required id attribute to add to the div container tag.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the div container tag.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the div container tag.
-- name: caller
-  type: nunjucks-block
-  required: true
-  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 item component in a `call` block.
+params:
+- name: button
+  type: component
+  required: true
+  description: Button component to intereact with the dialog.
+- name: labelledId
+  type: string
+  required: true
+  description: Required id attribute to reference with aria-labelledby in the div container tag.
+- name: id
+  type: string
+  required: true
+  description: Required id attribute to add to the div container tag.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the div container tag.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the div container tag.
+- name: caller
+  type: nunjucks-block
+  required: true
+  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 item component in a `call` block.