desy-html 10.2.0 → 10.2.2

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

@@ -1,138 +1,138 @@
-{% from "components/modal/_macro.modal.njk" import componentModal %}
-
-{% set defaultExample %}
-  {{ componentModal({
-    "id": "default-example",
-    "title": {
-      "text": "Aviso"
-    },
-    "description": {
-      "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
-    },
-    "itemsPrimary": [
-      {
-        "text": "De acuerdo, continuar",
-        "classes": "c-button--primary",
-        "attributes": {
-          "onclick": "closeDialog(this)"
-        }
-      }
-    ],
-    "isDismissible": true
-  })  }}
-{% endset %}
-
-{% set secondaryExample %}
-  {{ componentModal({
-    "id": "secondary-action-example",
-    "title": {
-      "text": "Editar servicio publicado"
-    },
-    "description": {
-      "html": "Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados"
-    },
-    "itemsPrimary": [
-      {
-        "text": "Editar servicio",
-        "classes": "c-button--primary"
-      }
-    ],
-    "itemsSecondary": [
-      {
-        "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>',
-        "attributes": {
-          "onclick": "closeDialog(this)"
-        }
-      }
-    ],
-    "isDismissible": true
-  })  }}
-{% endset %}
-
-{% set javascriptExample %}
-  {{ componentModal({
-    "id": "javascript-action-example",
-    "title": {
-      "text": "Servicio publicado"
-    },
-    "description": {
-      "html": "Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados"
-    },
-    "itemsSecondary": [
-      {
-        "html": 'Cerrar',
-        "attributes": {
-          "onclick": "closeDialog(this)"
-        }
-      }
-    ],
-    "isDismissible": true
-  })  }}
-{% endset %}
-
-
-{% set exampleComponent = "dialog" %}
-{% set examples =  [
-  {
-    "name": "Modal lanzado con un Dialog",
-    "description": 'Un dialog es un componente que permite mostrar otro componente que se muestra sobre la página, con una capa negra semitransparente por debajo. Se utiliza para mostrar modales o para mostrar el menú móvil de la cabecera. Si haces click en la capa negra de debajo o si pulsas la tecla Esc se cierra el contenido del Dialog. Mira el código para ver cómo usamos la función <code>openDialog</code>, el primer parámetro es el id del contenido a mostrar, el segundo parámetro es el nodo que debe tomar foco al cerrar el dialog, y el tercer elemento es el id del elemento al que se le da el foco al abrir el contenido. En este ejemplo de modal usamos los atributos de accesibilidad: <code>"role":"dialog"</code> y <code>"aria-modal": true</code>',
-    "data": {
-      "button": {
-        "text": "Abrir modal",
-        "attributes": {
-          "onclick": "openDialog('default', this, 'label-default-example')",
-          "id": "button-label-default-example"
-        }
-      },
-      "id": "default",
-      "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
-      "attributes": {
-        "role": "dialog",
-        "aria-labelledby": "label-default-example",
-        "aria-modal": true
-      },
-      "caller": defaultExample
-    }
-  },
-  {
-    "name": "Modal lanzado con un Dialog con acciones secundarias",
-    "data": {
-      "button": {
-        "text": "Abrir modal con acciones secundarias",
-        "attributes": {
-          "onclick": "openDialog('secondary', this, 'label-secondary-action-example')",
-          "id": "button-label-secondary-action-example"
-        }
-      },
-      "id": "secondary",
-      "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
-      "attributes": {
-        "role": "dialog",
-        "aria-labelledby": "secondary-action-example",
-        "aria-modal": true
-      },
-      "caller": secondaryExample
-    }
-  },
-  {
-    "name": "Modal lanzado con un Dialog con JavaScript",
-    "description": 'También puedes usar con javascript la función global <code>openDialog(dialog, focusAfterClosed, focusFirst)</code>,  para abrir la modal usando su id. La función admite tres parámetros <code>dialog</code>, que es el id de la modal que queremos abrir, <code>focusAfterClosed</code>, el elemento que tendrá el foco cuando cerremos la modal, y <code>focusFirst</code>, el elemento que tendra el foco al abrir la modal. Ej: Abre la consola del navegador y escribe <code>openDialog("modal-javascript", "button-javascript-action-example", "label-javascript-action-example")</code> para mostrar la modal.',
-    "data": {
-      "button": {
-        "text": "Abrir modal con JavaScript",
-        "attributes": {
-          "onclick": "openDialog('modal-javascript', this, 'label-javascript-action-example')",
-          "id": "button-javascript-action-example"
-        }
-      },
-      "id": "modal-javascript",
-      "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
-      "attributes": {
-        "role": "dialog",
-        "aria-labelledby": "javascript-action-example",
-        "aria-modal": true
-      },
-      "caller": javascriptExample
-    }
-  }
-] %}
+{% from "components/modal/_macro.modal.njk" import componentModal %}
+
+{% set defaultExample %}
+  {{ componentModal({
+    "id": "default-example",
+    "title": {
+      "text": "Aviso"
+    },
+    "description": {
+      "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
+    },
+    "itemsPrimary": [
+      {
+        "text": "De acuerdo, continuar",
+        "classes": "c-button--primary",
+        "attributes": {
+          "onclick": "closeDialog(this)"
+        }
+      }
+    ],
+    "isDismissible": true
+  })  }}
+{% endset %}
+
+{% set secondaryExample %}
+  {{ componentModal({
+    "id": "secondary-action-example",
+    "title": {
+      "text": "Editar servicio publicado"
+    },
+    "description": {
+      "html": "Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados"
+    },
+    "itemsPrimary": [
+      {
+        "text": "Editar servicio",
+        "classes": "c-button--primary"
+      }
+    ],
+    "itemsSecondary": [
+      {
+        "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>',
+        "attributes": {
+          "onclick": "closeDialog(this)"
+        }
+      }
+    ],
+    "isDismissible": true
+  })  }}
+{% endset %}
+
+{% set javascriptExample %}
+  {{ componentModal({
+    "id": "javascript-action-example",
+    "title": {
+      "text": "Servicio publicado"
+    },
+    "description": {
+      "html": "Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados"
+    },
+    "itemsSecondary": [
+      {
+        "html": 'Cerrar',
+        "attributes": {
+          "onclick": "closeDialog(this)"
+        }
+      }
+    ],
+    "isDismissible": true
+  })  }}
+{% endset %}
+
+
+{% set exampleComponent = "dialog" %}
+{% set examples =  [
+  {
+    "name": "Modal lanzado con un Dialog",
+    "description": 'Un dialog es un componente que permite mostrar otro componente que se muestra sobre la página, con una capa negra semitransparente por debajo. Se utiliza para mostrar modales o para mostrar el menú móvil de la cabecera. Si haces click en la capa negra de debajo o si pulsas la tecla Esc se cierra el contenido del Dialog. Mira el código para ver cómo usamos la función <code>openDialog</code>, el primer parámetro es el id del contenido a mostrar, el segundo parámetro es el nodo que debe tomar foco al cerrar el dialog, y el tercer elemento es el id del elemento al que se le da el foco al abrir el contenido. En este ejemplo de modal usamos los atributos de accesibilidad: <code>"role":"dialog"</code> y <code>"aria-modal": true</code>',
+    "data": {
+      "button": {
+        "text": "Abrir modal",
+        "attributes": {
+          "onclick": "openDialog('default', this, 'label-default-example')",
+          "id": "button-label-default-example"
+        }
+      },
+      "id": "default",
+      "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
+      "attributes": {
+        "role": "dialog",
+        "aria-labelledby": "label-default-example",
+        "aria-modal": true
+      },
+      "caller": defaultExample
+    }
+  },
+  {
+    "name": "Modal lanzado con un Dialog con acciones secundarias",
+    "data": {
+      "button": {
+        "text": "Abrir modal con acciones secundarias",
+        "attributes": {
+          "onclick": "openDialog('secondary', this, 'label-secondary-action-example')",
+          "id": "button-label-secondary-action-example"
+        }
+      },
+      "id": "secondary",
+      "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
+      "attributes": {
+        "role": "dialog",
+        "aria-labelledby": "secondary-action-example",
+        "aria-modal": true
+      },
+      "caller": secondaryExample
+    }
+  },
+  {
+    "name": "Modal lanzado con un Dialog con JavaScript",
+    "description": 'También puedes usar con javascript la función global <code>openDialog(dialog, focusAfterClosed, focusFirst)</code>,  para abrir la modal usando su id. La función admite tres parámetros <code>dialog</code>, que es el id de la modal que queremos abrir, <code>focusAfterClosed</code>, el elemento que tendrá el foco cuando cerremos la modal, y <code>focusFirst</code>, el elemento que tendra el foco al abrir la modal. Ej: Abre la consola del navegador y escribe <code>openDialog("modal-javascript", "button-javascript-action-example", "label-javascript-action-example")</code> para mostrar la modal.',
+    "data": {
+      "button": {
+        "text": "Abrir modal con JavaScript",
+        "attributes": {
+          "onclick": "openDialog('modal-javascript', this, 'label-javascript-action-example')",
+          "id": "button-javascript-action-example"
+        }
+      },
+      "id": "modal-javascript",
+      "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
+      "attributes": {
+        "role": "dialog",
+        "aria-labelledby": "javascript-action-example",
+        "aria-modal": true
+      },
+      "caller": javascriptExample
+    }
+  }
+] %}

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

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

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

@@ -1,19 +1,19 @@
-/* ==========================================================================
-   _styles.dialog.css
-   ========================================================================== */
-
-@layer components {
-  body {
-    &.has-dialog {
-      @apply overflow-hidden;
-    }
-  }
-
-  .dialog-backdrop {
-    @apply hidden fixed overflow-y-auto inset-0 bg-black bg-opacity-50 z-50;
-
-    &.active {
-      @apply grid h-screen place-items-center;
-    }
-  }
-}
+/* ==========================================================================
+   _styles.dialog.css
+   ========================================================================== */
+
+@layer components {
+  body {
+    &.has-dialog {
+      @apply overflow-hidden;
+    }
+  }
+
+  .dialog-backdrop {
+    @apply hidden fixed overflow-y-auto inset-0 bg-black bg-opacity-50 z-50;
+
+    &.active {
+      @apply grid h-screen place-items-center;
+    }
+  }
+}

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

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

package/src/templates/components/dialog/params.dialog.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.

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

@@ -1,115 +1,115 @@
-{% set exampleComponent = "dropdown" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "text": "Por defecto",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
-    }
-  },
-  {
-    "name": "con estado activo",
-    "description": 'Simula activar la pseudo-clase de CSS <code>:active</code>. En realidad sólo se usa para documentar estos ejemplos.',
-    "data": {
-      "text": "Activo",
-      "classes": "ds-active",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
-    }
-  },
-  {
-    "name": "con estado hover",
-    "description": 'Simula activar la pseudo-clase de CSS <code>:hover</code>. En realidad sólo se usa para documentar estos ejemplos.',
-    "data": {
-      "text": "Hover",
-      "classes": "ds-hover",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
-    }
-  },
-  {
-    "name": "con estado focus",
-    "description": 'Simula activar la pseudo-clase de CSS <code>:focus</code>. En realidad sólo se usa para documentar estos ejemplos.',
-    "data": {
-      "text": "Focus",
-      "classes": "ds-focus",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
-    }
-  },
-  {
-    "name": "primario",
-    "description": "Para acciones primarias.",
-    "data": {
-      "text": "Primario",
-      "classes": "c-dropdown--primary",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
-    }
-  },
-  {
-    "name": "transparente",
-    "data": {
-      "text": "Transparente",
-      "classes": "c-dropdown--transparent",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
-    }
-  },
-  {
-    "name": "Con estilos de cabecera",
-    "data": {
-      "text": "Header",
-      "classes": "c-dropdown--header",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
-    }
-  },
-  {
-    "name": "peque",
-    "data": {
-      "text": "Botón pequeño con texto muy largo",
-      "classes": "c-dropdown--sm",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
-    }
-  },
-  {
-    "name": "peque tiene selección",
-    "description": "Un botón con una selección aplicada se muestra con color.",
-    "data": {
-      "text": "Botón pequeño con texto muy largo",
-      "classes": "c-dropdown--has-selection c-dropdown--sm",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
-    }
-  },
-  {
-    "name": "deshabilitado",
-    "data": {
-      "text": "Deshabilitado",
-      "disabled": true,
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
-    }
-  },
-  {
-    "name": "Con clases de css aplicadas al container",
-    "description": "Tanto el botón como los elementos del tooltip están rodeados de un div contenedor al que se le pueden aplicar estilos de CSS.",
-    "data": {
-      "text": "Clases en container",
-      "classesContainer": "inline-block p-base bg-primary-light",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
-    }
-  },
-  {
-    "name": "clases aplicadas al contenido del tooltip",
-    "description": "El contenido del tooltip puede tener clases adicionales aplicadas. En este ejemplo se le ha aplicado una altura máxima y scroll vertical si el contenido se desborda.",
-    "data": {
-      "text": "Clases al contenido del tooltip",
-      "classesTooltip": "max-h-64 overflow-y-auto",
-      "caller": "<div class=\" w-64 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-64 \"></div></div>"
-    }
-  },
-  {
-    "name": "Clases aplicadas a varios elementos",
-    "description": "En este ejemplo, usando clases de CSS, la anchura del contenido establece la anchura del tooltip.",
-    "data": {
-      "text": "Dropdown anchura completa",
-      "classes": "w-full justify-between",
-      "classesTooltip": "w-max max-h-64 overflow-y-auto",
-      "caller": "<div class=\" p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-64 \"><div style=\" width:900px \"></div></div></div>"
-    }
-  }
+{% set exampleComponent = "dropdown" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "text": "Por defecto",
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
+  {
+    "name": "con estado activo",
+    "description": 'Simula activar la pseudo-clase de CSS <code>:active</code>. En realidad sólo se usa para documentar estos ejemplos.',
+    "data": {
+      "text": "Activo",
+      "classes": "ds-active",
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
+  {
+    "name": "con estado hover",
+    "description": 'Simula activar la pseudo-clase de CSS <code>:hover</code>. En realidad sólo se usa para documentar estos ejemplos.',
+    "data": {
+      "text": "Hover",
+      "classes": "ds-hover",
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
+  {
+    "name": "con estado focus",
+    "description": 'Simula activar la pseudo-clase de CSS <code>:focus</code>. En realidad sólo se usa para documentar estos ejemplos.',
+    "data": {
+      "text": "Focus",
+      "classes": "ds-focus",
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
+  {
+    "name": "primario",
+    "description": "Para acciones primarias.",
+    "data": {
+      "text": "Primario",
+      "classes": "c-dropdown--primary",
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
+  {
+    "name": "transparente",
+    "data": {
+      "text": "Transparente",
+      "classes": "c-dropdown--transparent",
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
+  {
+    "name": "Con estilos de cabecera",
+    "data": {
+      "text": "Header",
+      "classes": "c-dropdown--header",
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
+  {
+    "name": "peque",
+    "data": {
+      "text": "Botón pequeño con texto muy largo",
+      "classes": "c-dropdown--sm",
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
+  {
+    "name": "peque tiene selección",
+    "description": "Un botón con una selección aplicada se muestra con color.",
+    "data": {
+      "text": "Botón pequeño con texto muy largo",
+      "classes": "c-dropdown--has-selection c-dropdown--sm",
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
+  {
+    "name": "deshabilitado",
+    "data": {
+      "text": "Deshabilitado",
+      "disabled": true,
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
+  {
+    "name": "Con clases de css aplicadas al container",
+    "description": "Tanto el botón como los elementos del tooltip están rodeados de un div contenedor al que se le pueden aplicar estilos de CSS.",
+    "data": {
+      "text": "Clases en container",
+      "classesContainer": "inline-block p-base bg-primary-light",
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
+  {
+    "name": "clases aplicadas al contenido del tooltip",
+    "description": "El contenido del tooltip puede tener clases adicionales aplicadas. En este ejemplo se le ha aplicado una altura máxima y scroll vertical si el contenido se desborda.",
+    "data": {
+      "text": "Clases al contenido del tooltip",
+      "classesTooltip": "max-h-64 overflow-y-auto",
+      "caller": "<div class=\" w-64 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-64 \"></div></div>"
+    }
+  },
+  {
+    "name": "Clases aplicadas a varios elementos",
+    "description": "En este ejemplo, usando clases de CSS, la anchura del contenido establece la anchura del tooltip.",
+    "data": {
+      "text": "Dropdown anchura completa",
+      "classes": "w-full justify-between",
+      "classesTooltip": "w-max max-h-64 overflow-y-auto",
+      "caller": "<div class=\" p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-64 \"><div style=\" width:900px \"></div></div></div>"
+    }
+  }
 ] %}

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

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