desy-html 16.0.4 → 17.0.0

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

@@ -1,175 +1,175 @@
-{% set exampleComponent = "textarea" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "name": "more-detail-a",
-      "id": "more-detail-a",
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista o texto descriptivo."
-      }
-    },
-    "visualDescription": "Textarea rectangular con borde gris de 1px, fondo blanco, esquinas ligeramente redondeadas. Encabezado con label en negro normal, seguido de texto descriptivo gris en tamaño pequeño. Área de texto de altura media con aproximadamente 4-5 líneas visibles.",
-    "_generated": {
-      "hash": "38168af559aee891b34be80c948a1252",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:16:44.046Z"
-    }
-  },
-  {
-    "name": "deshabilitado",
-    "data": {
-      "name": "more-detail-b",
-      "id": "more-detail-b",
-      "disabled": true,
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista o texto descriptivo."
-      }
-    },
-    "visualDescription": "Textarea rectangular con borde gris claro de 1px, fondo gris muy claro (#f5f5f5 aproximadamente), esquinas ligeramente redondeadas. Encabezado con label en gris oscuro, seguido de texto descriptivo gris en tamaño pequeño. Área de texto de altura media con apariencia inactiva, sin cursor de edición visible.",
-    "_generated": {
-      "hash": "d26f4711ceef5469ea804639e94bb0fd",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:16:44.046Z"
-    }
-  },
-  {
-    "name": "con mensaje de error",
-    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
-    "data": {
-      "name": "no-ni-reason",
-      "id": "no-ni-reason",
-      "label": {
-        "text": "Esto es un label"
-      },
-      "errorMessage": {
-        "text": "Esto es un mensaje de error"
-      }
-    },
-    "visualDescription": "Textarea rectangular con borde rojo de 2px, fondo blanco, esquinas ligeramente redondeadas. Encabezado con label en negro normal, seguido de texto de error en rojo en tamaño pequeño. Área de texto de altura media con indicación visual de estado de error mediante el borde rojo prominente.",
-    "_generated": {
-      "hash": "81e20aaf57e82d2a213150357f7ca559",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:16:44.046Z"
-    }
-  },
-  {
-    "name": "con valor por defecto",
-    "data": {
-      "id": "full-address-a",
-      "name": "address-a",
-      "value": "Calle Rosales 25. 2 izda",
-      "label": {
-        "text": "Dirección completa"
-      }
-    },
-    "visualDescription": "Textarea con borde gris de 1px, fondo blanco, altura reducida mostrando 2 líneas de texto. Label en negro normal arriba indicando \"Dirección completa\". Texto predefinido visible dentro del campo en negro estándar.",
-    "_generated": {
-      "hash": "e4b38a55567ea9db190774f8c6d39783",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:16:53.877Z"
-    }
-  },
-  {
-    "name": "con número de filas (rows) personalizada",
-    "data": {
-      "id": "full-address-b",
-      "name": "address-b",
-      "label": {
-        "text": "Dirección completa"
-      },
-      "rows": 8
-    },
-    "visualDescription": "Textarea con borde gris de 1px, fondo blanco, sin texto predefinido visible. Label en negro normal arriba indicando \"Dirección completa\". Campo vacío con altura estándar mostrando múltiples líneas disponibles.",
-    "_generated": {
-      "hash": "f6c842a568fbe3c62368901bd5c65645",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:16:53.877Z"
-    }
-  },
-  {
-    "name": "con clases de form-group opcionales",
-    "data": {
-      "id": "textarea-with-page-heading-b",
-      "name": "address",
-      "label": {
-        "text": "Dirección completa"
-      },
-      "formGroup": {
-        "classes": "p-base bg-primary-light"
-      }
-    },
-    "visualDescription": "Textarea con borde azul oscuro de 2px, fondo blanco, campo vacío de altura estándar. Label en negro normal arriba indicando \"Dirección completa\". Contenedor con fondo azul claro tenue cubriendo toda la sección del formulario.",
-    "_generated": {
-      "hash": "2208484005331311532c1ca1e7a2a07b",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:16:53.877Z"
-    }
-  },
-  {
-    "name": "con valores de autocompletado",
-    "data": {
-      "id": "textarea-with-autocomplete-attribute",
-      "name": "address",
-      "label": {
-        "text": "Dirección completa"
-      },
-      "autocomplete": "street-address"
-    },
-    "visualDescription": "Textarea rectangular con borde gris de 1px, fondo blanco, altura aproximada de 60px y ancho de 105px. Label \"Dirección completa\" en texto negro regular ubicado arriba del campo. Título de sección \"con valores de autocompletado\" en texto negro encima del label.",
-    "_generated": {
-      "hash": "e0df350b5138ec79dbce4d633a637cad",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:03.196Z"
-    }
-  },
-  {
-    "name": "placeholder",
-    "data": {
-      "id": "con-placeholder",
-      "name": "placeholder",
-      "label": {
-        "text": "Valor"
-      },
-      "placeholder": "Esto es un placeholder"
-    },
-    "visualDescription": "Textarea rectangular con borde gris de 1px, fondo blanco, altura aproximada de 60px y ancho de 105px. Contiene texto placeholder gris claro. Label \"Valor\" en texto negro regular posicionado arriba del campo, con título de sección \"placeholder\" en texto negro en la parte superior.",
-    "_generated": {
-      "hash": "a8ab74dd3ffad277bcf324d07ce1e6c6",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:03.196Z"
-    }
-  },
-  {
-    "name": "Con clases de css aplicadas",
-    "description": "Label inline + Textarea flexible y Mensaje de error",
-    "data": {
-      "formGroup": {
-        "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base"
-      },
-      "label": {
-        "text": "Label inline:",
-        "classes": "lg:py-sm lg:mt-sm"
-      },
-      "id": "classes-applied-b",
-      "name": "classes-applied-b",
-      "errorMessage": {
-        "text": "Esto es un mensaje de error",
-        "classes": "order-1 w-full pt-sm"
-      },
-      "classes": "lg:flex-1"
-    },
-    "visualDescription": "Textarea rectangular grande con borde rojo de 2px, fondo blanco, ancho completo del contenedor y altura aproximada de 60px. Label \"Label inline:\" en texto negro regular alineado a la izquierda. Mensaje de error en texto rojo pequeño debajo del campo. Título de sección \"Con clases de css aplicadas\" en texto negro arriba.",
-    "_generated": {
-      "hash": "720d38159c72f7fb83afa6521ad1444e",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:03.196Z"
-    }
-  }
+{% set exampleComponent = "textarea" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "name": "more-detail-a",
+      "id": "more-detail-a",
+      "label": {
+        "text": "Esto es un label"
+      },
+      "hint": {
+        "text": "Esto es una pista o texto descriptivo."
+      }
+    },
+    "visualDescription": "Textarea rectangular con borde gris de 1px, fondo blanco, esquinas ligeramente redondeadas. Encabezado con label del campo en negro normal, seguido de texto de ayuda en tamaño pequeño. Área de texto de altura media con aproximadamente 4-5 líneas visibles.",
+    "_generated": {
+      "hash": "38168af559aee891b34be80c948a1252",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:44.046Z"
+    }
+  },
+  {
+    "name": "deshabilitado",
+    "data": {
+      "name": "more-detail-b",
+      "id": "more-detail-b",
+      "disabled": true,
+      "label": {
+        "text": "Esto es un label"
+      },
+      "hint": {
+        "text": "Esto es una pista o texto descriptivo."
+      }
+    },
+    "visualDescription": "Textarea rectangular con borde gris claro de 1px, fondo gris muy claro, esquinas ligeramente redondeadas. Encabezado con label del campo en gris oscuro, seguido de texto de ayuda en tamaño pequeño. Área de texto de altura media con apariencia inactiva, sin cursor de edición visible.",
+    "_generated": {
+      "hash": "d26f4711ceef5469ea804639e94bb0fd",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:44.046Z"
+    }
+  },
+  {
+    "name": "con mensaje de error",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
+    "data": {
+      "name": "no-ni-reason",
+      "id": "no-ni-reason",
+      "label": {
+        "text": "Esto es un label"
+      },
+      "errorMessage": {
+        "text": "Esto es un mensaje de error"
+      }
+    },
+    "visualDescription": "Textarea rectangular con borde rojo de 2px, fondo blanco, esquinas ligeramente redondeadas. Encabezado con label del campo en negro normal, seguido de mensaje de error en rojo en tamaño pequeño. Área de texto de altura media con indicación visual de estado de error mediante el borde rojo prominente.",
+    "_generated": {
+      "hash": "81e20aaf57e82d2a213150357f7ca559",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:44.046Z"
+    }
+  },
+  {
+    "name": "con valor por defecto",
+    "data": {
+      "id": "full-address-a",
+      "name": "address-a",
+      "value": "Calle Rosales 25. 2 izda",
+      "label": {
+        "text": "Dirección completa"
+      }
+    },
+    "visualDescription": "Textarea con borde gris de 1px, fondo blanco, altura reducida mostrando 2 líneas de texto. Label del campo en negro normal arriba. Texto predefinido visible dentro del campo en negro estándar.",
+    "_generated": {
+      "hash": "e4b38a55567ea9db190774f8c6d39783",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:53.877Z"
+    }
+  },
+  {
+    "name": "con número de filas (rows) personalizada",
+    "data": {
+      "id": "full-address-b",
+      "name": "address-b",
+      "label": {
+        "text": "Dirección completa"
+      },
+      "rows": 8
+    },
+    "visualDescription": "Textarea con borde gris de 1px, fondo blanco, sin texto predefinido visible. Label del campo en negro normal arriba. Campo vacío con altura estándar mostrando múltiples líneas disponibles.",
+    "_generated": {
+      "hash": "f6c842a568fbe3c62368901bd5c65645",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:53.877Z"
+    }
+  },
+  {
+    "name": "con clases de form-group opcionales",
+    "data": {
+      "id": "textarea-with-page-heading-b",
+      "name": "address",
+      "label": {
+        "text": "Dirección completa"
+      },
+      "formGroup": {
+        "classes": "p-base bg-primary-light"
+      }
+    },
+    "visualDescription": "Textarea con borde azul oscuro de 2px, fondo blanco, campo vacío de altura estándar. Label del campo en negro normal arriba. Contenedor con fondo azul claro tenue cubriendo toda la sección del formulario.",
+    "_generated": {
+      "hash": "2208484005331311532c1ca1e7a2a07b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:53.877Z"
+    }
+  },
+  {
+    "name": "con valores de autocompletado",
+    "data": {
+      "id": "textarea-with-autocomplete-attribute",
+      "name": "address",
+      "label": {
+        "text": "Dirección completa"
+      },
+      "autocomplete": "street-address"
+    },
+    "visualDescription": "Textarea rectangular con borde gris de 1px, fondo blanco, altura aproximada de 60px. Label del campo en texto negro regular ubicado arriba del campo. Título de sección en texto negro encima del label.",
+    "_generated": {
+      "hash": "e0df350b5138ec79dbce4d633a637cad",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:03.196Z"
+    }
+  },
+  {
+    "name": "placeholder",
+    "data": {
+      "id": "con-placeholder",
+      "name": "placeholder",
+      "label": {
+        "text": "Valor"
+      },
+      "placeholder": "Esto es un placeholder"
+    },
+    "visualDescription": "Textarea rectangular con borde gris de 1px, fondo blanco, altura aproximada de 60px. Contiene texto de marcador de posición gris claro. Label del campo en texto negro regular posicionado arriba del campo, con título de sección en texto negro en la parte superior.",
+    "_generated": {
+      "hash": "a8ab74dd3ffad277bcf324d07ce1e6c6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:03.196Z"
+    }
+  },
+  {
+    "name": "Con clases de css aplicadas",
+    "description": "Label inline + Textarea flexible y Mensaje de error",
+    "data": {
+      "formGroup": {
+        "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base"
+      },
+      "label": {
+        "text": "Label inline:",
+        "classes": "lg:py-sm lg:mt-sm"
+      },
+      "id": "classes-applied-b",
+      "name": "classes-applied-b",
+      "errorMessage": {
+        "text": "Esto es un mensaje de error",
+        "classes": "order-1 w-full pt-sm"
+      },
+      "classes": "lg:flex-1"
+    },
+    "visualDescription": "Textarea rectangular grande con borde rojo de 2px, fondo blanco, ancho completo del contenedor y altura aproximada de 60px. Label del campo en texto negro regular alineado a la izquierda. Mensaje de error en texto rojo pequeño debajo del campo. Título de sección en texto negro arriba.",
+    "_generated": {
+      "hash": "720d38159c72f7fb83afa6521ad1444e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:03.196Z"
+    }
+  }
 ] %}

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

@@ -1,5 +1,5 @@
-<!-- _macro.textarea.njk -->
-
-{% macro componentTextarea(params) %}
-{% include "./_template.textarea.njk" %}
-{% endmacro %}
+<!-- _macro.textarea.njk -->
+
+{% macro componentTextarea(params) %}
+{% include "./_template.textarea.njk" %}
+{% endmacro %}

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

@@ -1,48 +1,48 @@
-{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
-{% from "../hint/_macro.hint.njk" import componentHint %}
-{% from "../label/_macro.label.njk" import componentLabel %}
-
-{#- a record of other elements that we need to associate with the input using
-   aria-describedby – for example hints or error messages -#}
-{% set describedBy = params.describedBy if params.describedBy else "" %}
-<!-- textarea -->
-<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-  {{ componentLabel({
-    html: params.label.html,
-    text: params.label.text,
-    classes: params.label.classes,
-    isPageHeading: params.label.isPageHeading,
-    attributes: params.label.attributes,
-    for: params.id
-  }) | indent(2) | trim }}
-{% if params.hint %}
-  {% set hintId = params.id + '-hint' %}
-  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
-  {{ componentHint({
-    id: hintId,
-    classes: params.hint.classes,
-    attributes: params.hint.attributes,
-    html: params.hint.html,
-    text: params.hint.text
-  }) | indent(2) | trim }}
-{% endif %}
-{% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
-  {{ componentErrorMessage({
-    id: errorId,
-    classes: params.errorMessage.classes,
-    attributes: params.errorMessage.attributes,
-    html: params.errorMessage.html,
-    text: params.errorMessage.text,
-    visuallyHiddenText: params.errorMessage.visuallyHiddenText
-  }) | indent(2) | trim }}
-{% endif %}
-  <textarea class="block mt-sm px-base py-sm {% if params.errorMessage %}border-alert-base ring-2 ring-alert-base{% else %}border-black{% endif %} rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
-  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-  {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}
-  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
-  {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
-  {{-" disabled" if params.disabled }}
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.value }}</textarea>
-</div>
+{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
+{% from "../hint/_macro.hint.njk" import componentHint %}
+{% from "../label/_macro.label.njk" import componentLabel %}
+
+{#- a record of other elements that we need to associate with the input using
+   aria-describedby – for example hints or error messages -#}
+{% set describedBy = params.describedBy if params.describedBy else "" %}
+<!-- textarea -->
+<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+  {{ componentLabel({
+    html: params.label.html,
+    text: params.label.text,
+    classes: params.label.classes,
+    isPageHeading: params.label.isPageHeading,
+    attributes: params.label.attributes,
+    for: params.id
+  }) | indent(2) | trim }}
+{% if params.hint %}
+  {% set hintId = params.id + '-hint' %}
+  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+  {{ componentHint({
+    id: hintId,
+    classes: params.hint.classes,
+    attributes: params.hint.attributes,
+    html: params.hint.html,
+    text: params.hint.text
+  }) | indent(2) | trim }}
+{% endif %}
+{% if params.errorMessage %}
+  {% set errorId = params.id + '-error' %}
+  {{ componentErrorMessage({
+    id: errorId,
+    classes: params.errorMessage.classes,
+    attributes: params.errorMessage.attributes,
+    html: params.errorMessage.html,
+    text: params.errorMessage.text,
+    visuallyHiddenText: params.errorMessage.visuallyHiddenText
+  }) | indent(2) | trim }}
+{% endif %}
+  <textarea class="block mt-sm px-base py-sm {% if params.errorMessage %}border-alert-base ring-2 ring-alert-base{% else %}border-black{% endif %} rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
+  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}
+  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
+  {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
+  {{-" disabled" if params.disabled }}
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.value }}</textarea>
+</div>
 <!-- /textarea -->

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

@@ -1,65 +1,65 @@
-params:
-- name: id
-  type: string
-  required: true
-  description: The id of the textarea.
-- name: name
-  type: string
-  required: true
-  description: The name of the textarea, which is submitted with the form data.
-- name: rows
-  type: string
-  required: false
-  description: Optional number of textarea rows (default is 5 rows).
-- name: value
-  type: string
-  required: false
-  description: Optional initial value of the textarea.
-- name: describedBy
-  type: string
-  required: false
-  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
-- name: label
-  type: object
-  required: true
-  description: Options for the label component.
-  isComponent: true
-- name: hint
-  type: object
-  required: false
-  description: Options for the hint component.
-  isComponent: true
-- name: errorMessage
-  type: object
-  required: false
-  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
-  isComponent: true
-- name: formGroup
-  type: object
-  required: false
-  description: Options for the form-group wrapper
-  params:
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the form group (e.g. to show error state for the whole group)
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the textarea.
-- name: autocomplete
-  type: string
-  required: false
-  description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
-- name: placeholder
-  type: string
-  required: false
-  description: Placeholder text
-- name: disabled
-  type: boolean
-  required: false
-  description: If true, textarea will be disabled.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: id
+  type: string
+  required: true
+  description: The id of the textarea.
+- name: name
+  type: string
+  required: true
+  description: The name of the textarea, which is submitted with the form data.
+- name: rows
+  type: string
+  required: false
+  description: Optional number of textarea rows (default is 5 rows).
+- name: value
+  type: string
+  required: false
+  description: Optional initial value of the textarea.
+- name: describedBy
+  type: string
+  required: false
+  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
+- name: label
+  type: object
+  required: true
+  description: Options for the label component.
+  isComponent: true
+- name: hint
+  type: object
+  required: false
+  description: Options for the hint component.
+  isComponent: true
+- name: errorMessage
+  type: object
+  required: false
+  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
+  isComponent: true
+- name: formGroup
+  type: object
+  required: false
+  description: Options for the form-group wrapper
+  params:
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the form group (e.g. to show error state for the whole group)
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the textarea.
+- name: autocomplete
+  type: string
+  required: false
+  description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
+- name: placeholder
+  type: string
+  required: false
+  description: Placeholder text
+- name: disabled
+  type: boolean
+  required: false
+  description: If true, textarea will be disabled.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the textarea.