desy-html 16.0.4 → 17.0.0

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

@@ -1,148 +1,148 @@
-{% set exampleComponent = "searchbar" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "id": "searchbar-1",
-      "label": {
-        "text": "Buscar",
-        "classes": "not-sr-only mb-sm"
-      }
-    },
-    "visualDescription": "Campo de búsqueda rectangular con borde gris claro de 1px y fondo blanco. Incluye label \"Buscar\" en texto negro pequeño arriba del campo. Botón de búsqueda con icono de lupa en azul oscuro alineado a la derecha dentro del campo.",
-    "_generated": {
-      "hash": "67ef7af46754cba1bdb0e54b1a75230a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:12:51.704Z"
-    }
-  },
-  {
-    "name": "con placeholder",
-    "data": {
-      "id": "searchbar-2",
-      "label": {
-        "text": "Buscar"
-      },
-      "placeholder": "Buscar en este sitio"
-    },
-    "visualDescription": "Campo de búsqueda rectangular con borde gris claro de 1px y fondo blanco. Texto placeholder \"Buscar en este sitio\" en gris claro visible dentro del campo. Botón de búsqueda con icono de lupa en azul oscuro alineado a la derecha dentro del campo.",
-    "_generated": {
-      "hash": "27f4114b571c7f91493a1e0174a01321",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:12:51.704Z"
-    }
-  },
-  {
-    "name": "deshabilitado",
-    "data": {
-      "id": "searchbar-3",
-      "label": {
-        "text": "Buscar"
-      },
-      "disabled": true
-    },
-    "visualDescription": "Campo de búsqueda rectangular con borde gris muy claro de 1px y fondo gris claro(#f5f5f5) . El campo aparece sin texto ni placeholder visible. Botón de búsqueda con icono de lupa en azul oscuro alineado a la derecha dentro del campo.",
-    "_generated": {
-      "hash": "a126fc4548da4dad1efa4b75e86c7821",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:12:51.704Z"
-    }
-  },
-  {
-    "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": {
-      "id": "searchbar-4",
-      "label": {
-        "text": "Buscar"
-      },
-      "errorMessage": {
-        "text": "Esto es un mensaje de error",
-        "classes": "mt-xs"
-      }
-    },
-    "visualDescription": "Barra de búsqueda con input de texto rectangular con borde rojo de 2px, fondo blanco, y botón de búsqueda(ícono de lupa) alineado a la derecha dentro del campo. Debajo del input aparece un mensaje de error en texto rojo pequeño. Encima del campo hay un título descriptivo en texto negro normal.",
-    "_generated": {
-      "hash": "dbefd6e80e153cafaa30f878cc5e913c",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:01.121Z"
-    }
-  },
-  {
-    "name": "Con label visible",
-    "data": {
-      "id": "searchbar-label-visible",
-      "label": {
-        "text": "Buscar items recientes",
-        "classes": "not-sr-only mb-sm"
-      }
-    },
-    "visualDescription": "Barra de búsqueda con input de texto rectangular con borde gris de 1px, fondo blanco, y botón de búsqueda(ícono de lupa) alineado a la derecha dentro del campo. Encima del input hay un label descriptivo en texto negro pequeño. El campo tiene altura estándar con espaciado interno generoso.",
-    "_generated": {
-      "hash": "331f38b63a508e19bf4751f9297a955c",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:01.121Z"
-    }
-  },
-  {
-    "name": "peque",
-    "data": {
-      "id": "searchbar-5",
-      "label": {
-        "text": "Buscar"
-      },
-      "classes": "c-input--sm",
-      "buttonClasses": "m-xs p-0.5 text-xs"
-    },
-    "visualDescription": "Barra de búsqueda con input de texto rectangular de altura reducida, borde gris claro de 1px, fondo blanco, y botón de búsqueda(ícono de lupa) alineado a la derecha dentro del campo. No presenta label superior ni mensajes auxiliares. Las dimensiones verticales son compactas con espaciado interno mínimo.",
-    "_generated": {
-      "hash": "0fd48b62c89e4225e20a86ef100a8c83",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:01.121Z"
-    }
-  },
-  {
-    "name": "Botón personalizado",
-    "description": "Añade parámetros del componente Botón para sustituir el icono de la lupa con un botón junto al input.",
-    "data": {
-      "id": "searchbar-6",
-      "label": {
-        "text": "Buscar en esta página"
-      },
-      "button": {
-        "text": "Buscar",
-        "type": "submit",
-        "classes": "c-button--primary"
-      },
-      "classes": "flex-1"
-    },
-    "visualDescription": "Campo de búsqueda con input de texto rectangular con borde gris de 1px y fondo blanco. Botón \"Buscar\" de fondo azul petróleo con texto blanco en mayúsculas está alineado a la derecha del input. El campo ocupa todo el ancho disponible con altura estándar.",
-    "_generated": {
-      "hash": "7937ddc1545f6aa3dc955c19058f4287",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:08.801Z"
-    }
-  },
-  {
-    "name": "Botón personalizado pequeño",
-    "description": "Usamos los parámetros del componente Botón para personalizarlo, en este ejemplo botón peque.",
-    "data": {
-      "id": "searchbar-7",
-      "label": {
-        "text": "Buscar en esta página"
-      },
-      "button": {
-        "text": "Buscar",
-        "type": "submit",
-        "classes": "c-button--sm"
-      },
-      "classes": "flex-1 c-input--sm"
-    },
-    "visualDescription": "Campo de búsqueda con input de texto rectangular con borde gris de 1px y fondo blanco. Botón \"Buscar\" compacto con borde azul petróleo y texto azul petróleo está posicionado a la derecha del input. El campo ocupa todo el ancho disponible con altura reducida.",
-    "_generated": {
-      "hash": "f2879e4a8dc9ef14f15280c181dc27bf",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:08.801Z"
-    }
-  }
+{% set exampleComponent = "searchbar" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "id": "searchbar-1",
+      "label": {
+        "text": "Buscar",
+        "classes": "not-sr-only mb-sm"
+      }
+    },
+    "visualDescription": "Campo de búsqueda rectangular con borde gris claro de 1px y fondo blanco. Incluye label en texto negro pequeño arriba del campo. Botón de búsqueda con icono de lupa en azul oscuro alineado a la derecha dentro del campo.",
+    "_generated": {
+      "hash": "67ef7af46754cba1bdb0e54b1a75230a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:51.704Z"
+    }
+  },
+  {
+    "name": "con placeholder",
+    "data": {
+      "id": "searchbar-2",
+      "label": {
+        "text": "Buscar"
+      },
+      "placeholder": "Buscar en este sitio"
+    },
+    "visualDescription": "Campo de búsqueda rectangular con borde gris claro de 1px y fondo blanco. Texto placeholder en gris claro visible dentro del campo. Botón de búsqueda con icono de lupa en azul oscuro alineado a la derecha dentro del campo.",
+    "_generated": {
+      "hash": "27f4114b571c7f91493a1e0174a01321",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:51.704Z"
+    }
+  },
+  {
+    "name": "deshabilitado",
+    "data": {
+      "id": "searchbar-3",
+      "label": {
+        "text": "Buscar"
+      },
+      "disabled": true
+    },
+    "visualDescription": "Campo de búsqueda rectangular con borde gris muy claro de 1px y fondo gris claro. El campo aparece sin texto ni placeholder visible. Botón de búsqueda con icono de lupa en azul oscuro alineado a la derecha dentro del campo.",
+    "_generated": {
+      "hash": "a126fc4548da4dad1efa4b75e86c7821",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:51.704Z"
+    }
+  },
+  {
+    "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": {
+      "id": "searchbar-4",
+      "label": {
+        "text": "Buscar"
+      },
+      "errorMessage": {
+        "text": "Esto es un mensaje de error",
+        "classes": "mt-xs"
+      }
+    },
+    "visualDescription": "Barra de búsqueda con input de texto rectangular con borde rojo de 2px, fondo blanco, y botón de búsqueda con icono de lupa alineado a la derecha dentro del campo. Debajo del input aparece un mensaje de error en texto rojo pequeño. Encima del campo hay un título descriptivo en texto negro normal.",
+    "_generated": {
+      "hash": "dbefd6e80e153cafaa30f878cc5e913c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:01.121Z"
+    }
+  },
+  {
+    "name": "Con label visible",
+    "data": {
+      "id": "searchbar-label-visible",
+      "label": {
+        "text": "Buscar items recientes",
+        "classes": "not-sr-only mb-sm"
+      }
+    },
+    "visualDescription": "Barra de búsqueda con input de texto rectangular con borde gris de 1px, fondo blanco, y botón de búsqueda con icono de lupa alineado a la derecha dentro del campo. Encima del input hay un label descriptivo en texto negro pequeño. El campo tiene altura estándar con espaciado interno generoso.",
+    "_generated": {
+      "hash": "331f38b63a508e19bf4751f9297a955c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:01.121Z"
+    }
+  },
+  {
+    "name": "peque",
+    "data": {
+      "id": "searchbar-5",
+      "label": {
+        "text": "Buscar"
+      },
+      "classes": "c-input--sm",
+      "buttonClasses": "m-xs p-0.5 text-xs"
+    },
+    "visualDescription": "Barra de búsqueda con input de texto rectangular de altura reducida, borde gris claro de 1px, fondo blanco, y botón de búsqueda con icono de lupa alineado a la derecha dentro del campo. No presenta label superior ni mensajes auxiliares. Las dimensiones verticales son compactas con espaciado interno mínimo.",
+    "_generated": {
+      "hash": "0fd48b62c89e4225e20a86ef100a8c83",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:01.121Z"
+    }
+  },
+  {
+    "name": "Botón personalizado",
+    "description": "Añade parámetros del componente Botón para sustituir el icono de la lupa con un botón junto al input.",
+    "data": {
+      "id": "searchbar-6",
+      "label": {
+        "text": "Buscar en esta página"
+      },
+      "button": {
+        "text": "Buscar",
+        "type": "submit",
+        "classes": "c-button--primary"
+      },
+      "classes": "flex-1"
+    },
+    "visualDescription": "Campo de búsqueda con input de texto rectangular con borde gris de 1px y fondo blanco. Botón personalizado de fondo azul petróleo con texto blanco en mayúsculas está alineado a la derecha del input. El campo ocupa todo el ancho disponible con altura estándar.",
+    "_generated": {
+      "hash": "7937ddc1545f6aa3dc955c19058f4287",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:08.801Z"
+    }
+  },
+  {
+    "name": "Botón personalizado pequeño",
+    "description": "Usamos los parámetros del componente Botón para personalizarlo, en este ejemplo botón peque.",
+    "data": {
+      "id": "searchbar-7",
+      "label": {
+        "text": "Buscar en esta página"
+      },
+      "button": {
+        "text": "Buscar",
+        "type": "submit",
+        "classes": "c-button--sm"
+      },
+      "classes": "flex-1 c-input--sm"
+    },
+    "visualDescription": "Campo de búsqueda con input de texto rectangular con borde gris de 1px y fondo blanco. Botón personalizado compacto con borde azul petróleo y texto azul petróleo está posicionado a la derecha del input. El campo ocupa todo el ancho disponible con altura reducida.",
+    "_generated": {
+      "hash": "f2879e4a8dc9ef14f15280c181dc27bf",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:08.801Z"
+    }
+  }
 ] %}

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

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

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

@@ -1,46 +1,46 @@
-{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
-{% from "../label/_macro.label.njk" import componentLabel %}
-{% from "../button/_macro.button.njk" import componentButton %}
-
-{% set describedBy = params.describedBy if params.describedBy else "" %}
-{% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
-{% endif %}
-
-<!-- searchbar -->
-{{ componentLabel({
-  html: params.label.html,
-  text: params.label.text,
-  classes: "sr-only " + params.label.classes,
-  isPageHeading: false,
-  attributes: params.label.attributes,
-  for: params.id
-}) }}
-<div class="relative {%- if params.button %} flex flex-wrap items-end gap-sm{% endif %}">
-  <input class="c-input block {% if params.errorMessage %}border-alert-base ring-2 ring-alert-base{% else %}border-black{% endif %} rounded-sm font-semibold 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 not params.button %} pr-12 w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" name="{{ params.id }}" type="search"
-  {%- if params.value %} value="{{ params.value}}"{% endif %}
-  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-  {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}
-  {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
-  {{-" disabled" if params.disabled }}
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-  {% if params.button %}
-    {{ componentButton(params.button) | indent(2) }}
-  {% else %}
-  <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus {%- if params.buttonClasses %} {{ params.buttonClasses }}{% endif %}" {%- if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}>
-    <span class="sr-only">Buscar</span>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true"><path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor"/></svg>
-  </button>
-  {% endif %}
-  {% if params.errorMessage %}
-  {{ 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 %}
-</div>
+{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
+{% from "../label/_macro.label.njk" import componentLabel %}
+{% from "../button/_macro.button.njk" import componentButton %}
+
+{% set describedBy = params.describedBy if params.describedBy else "" %}
+{% if params.errorMessage %}
+  {% set errorId = params.id + '-error' %}
+{% endif %}
+
+<!-- searchbar -->
+{{ componentLabel({
+  html: params.label.html,
+  text: params.label.text,
+  classes: "sr-only " + params.label.classes,
+  isPageHeading: false,
+  attributes: params.label.attributes,
+  for: params.id
+}) }}
+<div class="relative {%- if params.button %} flex flex-wrap items-end gap-sm{% endif %}">
+  <input class="c-input block {% if params.errorMessage %}border-alert-base ring-2 ring-alert-base{% else %}border-black{% endif %} rounded-sm font-semibold 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 not params.button %} pr-12 w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" name="{{ params.id }}" type="search"
+  {%- if params.value %} value="{{ params.value}}"{% endif %}
+  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}
+  {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
+  {{-" disabled" if params.disabled }}
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {% if params.button %}
+    {{ componentButton(params.button) | indent(2) }}
+  {% else %}
+  <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus {%- if params.buttonClasses %} {{ params.buttonClasses }}{% endif %}" {%- if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}>
+    <span class="sr-only">Buscar</span>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true"><path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor"/></svg>
+  </button>
+  {% endif %}
+  {% if params.errorMessage %}
+  {{ 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 %}
+</div>
 <!-- /searchbar -->

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

@@ -1,47 +1,47 @@
-params:
-- name: id
-  type: string
-  required: true
-  description: The id of the input
-- name: value
-  type: string
-  required: false
-  description: Optional initial value of the input.
-- 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: 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: classes
-  type: string
-  required: false
-  description: Classes to add to the input.
-- name: buttonClasses
-  type: string
-  required: false
-  description: Classes to add to the search icon.
-- name: button
-  type: component
-  required: false
-  description: button component parameters. If there are any, the searchbar will show a button after the input instead of the lens icon.
-- name: placeholder
-  type: string
-  required: false
-  description: Placeholder text
-- name: disabled
-  type: boolean
-  required: false
-  description: If true, input will be disabled.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: id
+  type: string
+  required: true
+  description: The id of the input
+- name: value
+  type: string
+  required: false
+  description: Optional initial value of the input.
+- 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: 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: classes
+  type: string
+  required: false
+  description: Classes to add to the input.
+- name: buttonClasses
+  type: string
+  required: false
+  description: Classes to add to the search icon.
+- name: button
+  type: component
+  required: false
+  description: button component parameters. If there are any, the searchbar will show a button after the input instead of the lens icon.
+- name: placeholder
+  type: string
+  required: false
+  description: Placeholder text
+- name: disabled
+  type: boolean
+  required: false
+  description: If true, input will be disabled.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the anchor tag.