desy-html 16.0.4 → 17.0.0

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

@@ -1,27 +1,27 @@
-<!-- toggle -->
-<div data-module="c-toggle" class="relative c-toggle">
-  <!-- Button -->
-  <button
-    {% if params.isSwitch and params.pressed == null %}
-      role = "switch"
-      aria-checked="false"
-    {% elseif params.isSwitch and params.pressed == true %}
-      role = "switch"
-      aria-checked="true"
-    {% elseif params.isExpandible == false %}
-      aria-pressed="false"
-    {% elseif params.pressed == true %}
-      aria-pressed="true"
-    {% else %}
-      aria-expanded="false"
-    {% endif %}
-    type="button"
-    class="c-toggle__button {{ params.classes if params.classes else '' }}"
-    id="{{ params.id }}"
-    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
-  >
-    <span class="c-button--is-not-pressed pointer-events-none">{{ params.offState.html | filterquotes | safe if params.offState.html else params.offState.text }}</span>
-    <span class="c-button--is-pressed hidden pointer-events-none">{{ params.onState.html | filterquotes | safe if params.onState.html else params.onState.text }}</span>
-  </button>
-</div>
-<!-- /toggle -->
+<!-- toggle -->
+<div data-module="c-toggle" class="relative c-toggle">
+  <!-- Button -->
+  <button
+    {% if params.isSwitch and params.pressed == null %}
+      role = "switch"
+      aria-checked="false"
+    {% elseif params.isSwitch and params.pressed == true %}
+      role = "switch"
+      aria-checked="true"
+    {% elseif params.isExpandible == false %}
+      aria-pressed="false"
+    {% elseif params.pressed == true %}
+      aria-pressed="true"
+    {% else %}
+      aria-expanded="false"
+    {% endif %}
+    type="button"
+    class="c-toggle__button {{ params.classes if params.classes else '' }}"
+    id="{{ params.id }}"
+    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+  >
+    <span class="c-button--is-not-pressed pointer-events-none">{{ params.offState.html | filterquotes | safe if params.offState.html else params.offState.text }}</span>
+    <span class="c-button--is-pressed hidden pointer-events-none">{{ params.onState.html | filterquotes | safe if params.onState.html else params.onState.text }}</span>
+  </button>
+</div>
+<!-- /toggle -->

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

@@ -1,69 +1,69 @@
-params:
-- name: id
-  type: string
-  required: true
-  description: Required id attribute to add to the button for activation.
-- name: isExpandible
-  type: boolean
-  required: false
-  description: Defaults to `true`. If `true` the button has `aria-expanded` instead of `aria-pressed`.
-- name: isSwitch
-  type: boolean
-  required: false
-  description: Defaults to `false`. If `true` the button has role `switch` and has `aria-checked` instead of `aria-pressed`.
-- name: pressed
-  type: boolean
-  required: false
-  description: Defaults to `false`. If `true` the button informs the screenreader that the button is pressed.
-- name: onState
-  type: object
-  required: true
-  description: On state elements
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the state. 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 state. If `html` is provided, the `text` argument will be ignored.
-  - name: id
-    type: string
-    required: false
-    description: Id to add to the toggle element. Not required, but recommended to improve the accessibility.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the state span tag.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the state span tag.
-- name: offState
-  type: object
-  required: true
-  description: Off state elements
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the state. 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 state. If `html` is provided, the `text` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the state span tag.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the state span tag.
-- name: classes
-    type: string
-    required: false
-    description: Classes to add to the test component span tag.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the test component span tag.
+params:
+- name: id
+  type: string
+  required: true
+  description: Required id attribute to add to the button for activation.
+- name: isExpandible
+  type: boolean
+  required: false
+  description: Defaults to `true`. If `true` the button has `aria-expanded` instead of `aria-pressed`.
+- name: isSwitch
+  type: boolean
+  required: false
+  description: Defaults to `false`. If `true` the button has role `switch` and has `aria-checked` instead of `aria-pressed`.
+- name: pressed
+  type: boolean
+  required: false
+  description: Defaults to `false`. If `true` the button informs the screenreader that the button is pressed.
+- name: onState
+  type: object
+  required: true
+  description: On state elements
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the state. 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 state. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Id to add to the toggle element. Not required, but recommended to improve the accessibility.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the state span tag.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the state span tag.
+- name: offState
+  type: object
+  required: true
+  description: Off state elements
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the state. 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 state. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the state span tag.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the state span tag.
+- name: classes
+    type: string
+    required: false
+    description: Classes to add to the test component span tag.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the test component span tag.

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

@@ -1,135 +1,135 @@
-{% set exampleComponent = "tooltip" %}
-{% set examples =  [
-  {
-    "name": "por defecto (sólo icono)",
-    "data": {
-      "id": "example-default",
-      "icon": {
-        "type": "question"
-      },
-      "caller": "<p class='c-paragraph-base mb-0'>Esto es un tooltip</p>"
-    },
-    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Título \"por defecto (sólo icono)\" en texto negro de peso normal. Icono circular azul con símbolo de información en color blanco centrado.",
-    "_generated": {
-      "hash": "303b04446da33cfd53d35edd79c4a6df",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:40.512Z"
-    }
-  },
-  {
-    "name": "sólo texto",
-    "data": {
-      "id": "example-text",
-      "text": "Sólo texto",
-      "caller": "<p class='c-paragraph-base mb-0'>Esto es un tooltip</p>"
-    },
-    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Título \"sólo texto\" en texto negro de peso normal en la parte superior. Texto \"Sólo texto\" en color negro de tamaño estándar alineado a la izquierda.",
-    "_generated": {
-      "hash": "93322d72d4fbde426a0113a49f0f62ad",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:40.512Z"
-    }
-  },
-  {
-    "name": "con html",
-    "data": {
-      "id": "example-html",
-      "html": "<p class='inline-flex items-center'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs text-primary-base' aria-hidden='true' focusable='false'><path d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z' fill='currentColor'/></svg><span>Sólo <strong>html</strong> con icono custom a la izquierda</span></p>",
-      "caller": "<p class='c-paragraph-base mb-0'>Si este contenido tiene texto extenso o con código, mira el ejemplo 'complex' más abajo.</p>"
-    },
-    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Título \"con html\" en texto negro de peso normal en la parte superior. Fila con icono circular azul con símbolo de información seguido de texto \"Sólo html con icono custom a la izquierda\" en color negro.",
-    "_generated": {
-      "hash": "aa0a431fc8415ee5f5aff8c32ed74469",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:40.512Z"
-    }
-  },
-  {
-    "name": "pregunta",
-    "data": {
-      "id": "example-question",
-      "text": "Pregunta",
-      "icon": {
-        "type": "question"
-      },
-      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
-    },
-    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un título en negro en peso normal arriba, seguido de un texto en azul con ícono de información circular azul a la derecha. Padding interno visible alrededor del contenido.",
-    "_generated": {
-      "hash": "c3b0db65a3d5374c451c0c3a1d92e7b1",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:48.409Z"
-    }
-  },
-  {
-    "name": "info",
-    "data": {
-      "id": "example-info",
-      "text": "Información",
-      "icon": {
-        "type": "info"
-      },
-      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
-    },
-    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un título en negro en peso normal arriba, seguido de un texto en azul con ícono de información circular azul a la derecha. Padding interno visible alrededor del contenido.",
-    "_generated": {
-      "hash": "d4b618c41b037ab9ac00f90ac54e9eba",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:48.409Z"
-    }
-  },
-  {
-    "name": "alerta",
-    "data": {
-      "id": "example-alert",
-      "text": "Alerta",
-      "icon": {
-        "type": "alert"
-      },
-      "classes": "text-alert-base",
-      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
-    },
-    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un título en negro en peso normal arriba, seguido de un texto en rojo con ícono de advertencia triangular rojo a la derecha. Padding interno visible alrededor del contenido.",
-    "_generated": {
-      "hash": "3d404bf07ccf4e91f722b95b02e0e81f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:48.409Z"
-    }
-  },
-  {
-    "name": "icono personalizado",
-    "data": {
-      "id": "example-custom-icon",
-      "text": "Icono personalizado",
-      "icon": {
-        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 text-neutral-dark' role='img' aria-label='Ayuda'><path d='M140 15a15 15 0 00-15-15H15A15 15 0 000 15v110a15 15 0 0015 15h110a15 15 0 0015-15zM70 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z' fill='currentColor'/></svg>"
-      },
-      "classes": "text-neutral-dark",
-      "caller": "<p class='c-paragraph-base mb-0'>1520 - Subvención para actividades de educación de personas adultas</p>"
-    },
-    "visualDescription": "Tooltip rectangular con fondo blanco, borde gris claro de 1px, y sombra sutil. Contiene texto en color negro tamaño pequeño alineado a la izquierda, seguido de un icono cuadrado pequeño con fondo oscuro que muestra una \"X\" en blanco.",
-    "_generated": {
-      "hash": "40643a99ab800bd45b8ad155b1196bca",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:56.137Z"
-    }
-  },
-  {
-    "name": "complejo",
-    "description": "Usa <code>'complex': true</code> para que el contenido del tooltip tenga textos largos o contenido mixto.",
-    "data": {
-      "id": "complex-html",
-      "icon": {
-        "type": "question"
-      },
-      "complex": true,
-      "caller": "<p class='c-paragraph-base mb-0'>El código CVV se encuentra situado en la tarjeta por detrás. <strong>¡Compruébalo!</strong></p>"
-    },
-    "visualDescription": "Tooltip rectangular con fondo blanco, borde gris claro de 1px, y sombra sutil. Presenta un icono circular azul con signo de interrogación en la esquina superior izquierda, sin texto visible adicional. Dimensiones compactas de aproximadamente 30x30 píxeles.",
-    "_generated": {
-      "hash": "e1de9bc537dcbfe843d2a0f6a6504f98",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:56.137Z"
-    }
-  }
+{% set exampleComponent = "tooltip" %}
+{% set examples =  [
+  {
+    "name": "por defecto (sólo icono)",
+    "data": {
+      "id": "example-default",
+      "icon": {
+        "type": "question"
+      },
+      "caller": "<p class='c-paragraph-base mb-0'>Esto es un tooltip</p>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Título en texto negro de peso normal. Icono circular azul con símbolo de información en color blanco centrado.",
+    "_generated": {
+      "hash": "303b04446da33cfd53d35edd79c4a6df",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:40.512Z"
+    }
+  },
+  {
+    "name": "sólo texto",
+    "data": {
+      "id": "example-text",
+      "text": "Sólo texto",
+      "caller": "<p class='c-paragraph-base mb-0'>Esto es un tooltip</p>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Título en texto negro de peso normal en la parte superior. Texto descriptivo en color negro de tamaño estándar alineado a la izquierda.",
+    "_generated": {
+      "hash": "93322d72d4fbde426a0113a49f0f62ad",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:40.512Z"
+    }
+  },
+  {
+    "name": "con html",
+    "data": {
+      "id": "example-html",
+      "html": "<p class='inline-flex items-center'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs text-primary-base' aria-hidden='true' focusable='false'><path d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z' fill='currentColor'/></svg><span>Sólo <strong>html</strong> con icono custom a la izquierda</span></p>",
+      "caller": "<p class='c-paragraph-base mb-0'>Si este contenido tiene texto extenso o con código, mira el ejemplo 'complex' más abajo.</p>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Título en texto negro de peso normal en la parte superior. Fila con icono circular azul con símbolo de información seguido de texto descriptivo en color negro.",
+    "_generated": {
+      "hash": "aa0a431fc8415ee5f5aff8c32ed74469",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:40.512Z"
+    }
+  },
+  {
+    "name": "pregunta",
+    "data": {
+      "id": "example-question",
+      "text": "Pregunta",
+      "icon": {
+        "type": "question"
+      },
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un título en negro en peso normal arriba, seguido de un texto en azul con ícono de información circular azul a la derecha. Padding interno visible alrededor del contenido.",
+    "_generated": {
+      "hash": "c3b0db65a3d5374c451c0c3a1d92e7b1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:48.409Z"
+    }
+  },
+  {
+    "name": "info",
+    "data": {
+      "id": "example-info",
+      "text": "Información",
+      "icon": {
+        "type": "info"
+      },
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un título en negro en peso normal arriba, seguido de un texto en azul con ícono de información circular azul a la derecha. Padding interno visible alrededor del contenido.",
+    "_generated": {
+      "hash": "d4b618c41b037ab9ac00f90ac54e9eba",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:48.409Z"
+    }
+  },
+  {
+    "name": "alerta",
+    "data": {
+      "id": "example-alert",
+      "text": "Alerta",
+      "icon": {
+        "type": "alert"
+      },
+      "classes": "text-alert-base",
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un título en negro en peso normal arriba, seguido de un texto en rojo con ícono de advertencia triangular rojo a la derecha. Padding interno visible alrededor del contenido.",
+    "_generated": {
+      "hash": "3d404bf07ccf4e91f722b95b02e0e81f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:48.409Z"
+    }
+  },
+  {
+    "name": "icono personalizado",
+    "data": {
+      "id": "example-custom-icon",
+      "text": "Icono personalizado",
+      "icon": {
+        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 text-neutral-dark' role='img' aria-label='Ayuda'><path d='M140 15a15 15 0 00-15-15H15A15 15 0 000 15v110a15 15 0 0015 15h110a15 15 0 0015-15zM70 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z' fill='currentColor'/></svg>"
+      },
+      "classes": "text-neutral-dark",
+      "caller": "<p class='c-paragraph-base mb-0'>1520 - Subvención para actividades de educación de personas adultas</p>"
+    },
+    "visualDescription": "Tooltip rectangular con fondo blanco, borde gris claro de 1px, y sombra sutil. Contiene texto en color negro tamaño pequeño alineado a la izquierda, seguido de un icono cuadrado pequeño con fondo oscuro.",
+    "_generated": {
+      "hash": "40643a99ab800bd45b8ad155b1196bca",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:56.137Z"
+    }
+  },
+  {
+    "name": "complejo",
+    "description": "Usa <code>'complex': true</code> para que el contenido del tooltip tenga textos largos o contenido mixto.",
+    "data": {
+      "id": "complex-html",
+      "icon": {
+        "type": "question"
+      },
+      "complex": true,
+      "caller": "<p class='c-paragraph-base mb-0'>El código CVV se encuentra situado en la tarjeta por detrás. <strong>¡Compruébalo!</strong></p>"
+    },
+    "visualDescription": "Tooltip rectangular con fondo blanco, borde gris claro de 1px, y sombra sutil. Presenta un icono circular azul con signo de interrogación en la esquina superior izquierda, sin texto visible adicional. Dimensiones compactas de aproximadamente 30x30 píxeles.",
+    "_generated": {
+      "hash": "e1de9bc537dcbfe843d2a0f6a6504f98",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:56.137Z"
+    }
+  }
 ] %}

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

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

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

@@ -1,9 +1,9 @@
-/* ==========================================================================
-   _styles.tooltip.css
-   ========================================================================== */
-
-@layer components {
-  .c-tooltip__tooltip {
-    @apply hidden;
-  }
-}
+/* ==========================================================================
+   _styles.tooltip.css
+   ========================================================================== */
+
+@layer components {
+  .c-tooltip__tooltip {
+    @apply hidden;
+  }
+}

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

@@ -1,40 +1,40 @@
-<!-- tooltip -->
-{% set idButton = params.id + "-button" %}
-{% set idTooltip = params.id + "-tooltip" %}
-<div id="{{ params.id }}" data-module="c-tooltip" {% if params.classes %}class="{{ params.classes }}"{% endif %} {%- if params.attributes %}{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
-  <div id="{{ idButton }}" data-module="c-tooltip-button" {%- if params.complex %} data-type="c-tooltip-button-complex"{% endif %} class="inline-flex items-center p-xs focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="{{ idButton }} {{ idTooltip }}">
-    {% if params.text or params.html %}
-    {% if params.html %}
-    {{ params.html | filterquotes | safe }}
-    {% else %}
-    <p>
-      {{ params.text }}
-    </p>
-    {% endif %}
-    {% endif %}
-    {% if params.icon and params.text %}
-    <span class="inline-block w-1.5"></span>
-    {% endif %}
-    {% if params.icon %}
-    <span class="inline-block">
-      {% if params.icon.html %}
-      {{ params.icon.html | filterquotes | safe }}
-      {% elseif params.icon.type == 'info' %}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Información"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
-      {% elseif params.icon.type == 'alert' %}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" role="img" aria-label="Alerta"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
-      {% else %}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Ayuda"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg>
-      {% endif %}
-    </span>
-    {% endif %}
-  </div>
-  <div id="{{ idTooltip }}" class="c-tooltip__tooltip min-w-auto! -my-xs p-sm shadow-md bg-black rounded-xs text-white {%- if params.classesTooltip %} {{ params.classesTooltip }}{% endif %}" data-module="c-tooltip-tooltip" >
-    {% if caller %}
-    {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
-    {% elseif params.caller %}
-    {{ params.caller | safe }}
-    {% endif %}
-  </div>
-</div>
-<!-- /tooltip -->
+<!-- tooltip -->
+{% set idButton = params.id + "-button" %}
+{% set idTooltip = params.id + "-tooltip" %}
+<div id="{{ params.id }}" data-module="c-tooltip" {% if params.classes %}class="{{ params.classes }}"{% endif %} {%- if params.attributes %}{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
+  <div id="{{ idButton }}" data-module="c-tooltip-button" {%- if params.complex %} data-type="c-tooltip-button-complex"{% endif %} class="inline-flex items-center p-xs focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="{{ idButton }} {{ idTooltip }}">
+    {% if params.text or params.html %}
+    {% if params.html %}
+    {{ params.html | filterquotes | safe }}
+    {% else %}
+    <p>
+      {{ params.text }}
+    </p>
+    {% endif %}
+    {% endif %}
+    {% if params.icon and params.text %}
+    <span class="inline-block w-1.5"></span>
+    {% endif %}
+    {% if params.icon %}
+    <span class="inline-block">
+      {% if params.icon.html %}
+      {{ params.icon.html | filterquotes | safe }}
+      {% elseif params.icon.type == 'info' %}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Información"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
+      {% elseif params.icon.type == 'alert' %}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" role="img" aria-label="Alerta"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
+      {% else %}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Ayuda"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg>
+      {% endif %}
+    </span>
+    {% endif %}
+  </div>
+  <div id="{{ idTooltip }}" class="c-tooltip__tooltip min-w-auto! -my-xs p-sm shadow-md bg-black rounded-xs text-white {%- if params.classesTooltip %} {{ params.classesTooltip }}{% endif %}" data-module="c-tooltip-tooltip" >
+    {% if caller %}
+    {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+    {% elseif params.caller %}
+    {{ params.caller | safe }}
+    {% endif %}
+  </div>
+</div>
+<!-- /tooltip -->