desy-html 16.0.4 → 17.0.1

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

@@ -1,433 +1,433 @@
-{% set exampleComponent = "modal" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "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"
-        }
-      ],
-      "isDismissible": true
-    },
-    "visualDescription": "Modal centrado con fondo blanco, bordes redondeados sutiles y sombra perimetral gris. Encabezado \"Aviso\" en texto negro negrita, seguido de tres líneas de texto gris oscuro en peso normal. Botón rectangular en la parte inferior con fondo azul petróleo y texto blanco \"De acuerdo, continuar\". Ícono de cierre (X) negro en la esquina superior derecha del modal.",
-    "_generated": {
-      "hash": "018d5f87e3b6dde9451cef768fb840e0",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:53.106Z"
-    }
-  },
-  {
-    "name": "Con Button Loader",
-    "description": "Si quieres que las acciones muestren un Button loader en vez de un botón normal, utiliza el parámetro <code>'isButtonLoader': true</code>.",
-    "data": {
-      "id": "button-loader-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",
-          "isButtonLoader": true,
-          "state": "is-loading",
-          "classes": "c-button-loader--primary c-button-loader--is-loading"
-        }
-      ],
-      "isDismissible": true
-    },
-    "visualDescription": "Modal centrado con fondo blanco, bordes redondeados sutiles y sombra perimetral gris. Encabezado \"Aviso\" en texto negro negrita, seguido de tres líneas de texto gris oscuro en peso normal. Botón rectangular en la parte inferior con fondo azul petróleo mostrando indicador de carga (letra \"C\" blanca). Ícono de cierre (X) negro en la esquina superior derecha del modal.",
-    "_generated": {
-      "hash": "3dfe5525bf5786fdd38c9199b780747f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:53.106Z"
-    }
-  },
-  {
-    "name": "Con encabezado de nivel 3",
-    "description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
-    "data": {
-      "id": "headinglevel-example",
-      "title": {
-        "text": "Esto es un h3"
-      },
-      "headingLevel": 3,
-      "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"
-        }
-      ],
-      "isDismissible": true
-    },
-    "visualDescription": "Modal centrado con fondo blanco, bordes redondeados sutiles y sombra perimetral gris. Encabezado \"Esto es un h3\" en texto negro negrita, seguido de tres líneas de texto gris oscuro en peso normal. Botón rectangular en la parte inferior con fondo azul petróleo y texto blanco \"De acuerdo, continuar\". Ícono de cierre (X) negro en la esquina superior derecha del modal.",
-    "_generated": {
-      "hash": "da4cd8a099d05fa9c5d196c38d601566",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:53.106Z"
-    }
-  },
-  {
-    "name": "Con acción secundaria",
-    "description": "Las acciones primarias deberán ser botones primarios y aparecer a la izquierda. Las acciones secundarias deberán ser botones por defecto y aparecer a la derecha. Si la acción es destructiva, entonces se invierte el orden y la acción principal destructiva aparece a la derecha con el modificador de Botón alerta.",
-    "data": {
-      "id": "secondary-action-example",
-      "title": {
-        "text": "Editar servicio publicado"
-      },
-      "description": {
-        "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
-      },
-      "itemsPrimary": [
-        {
-          "text": "Editar servicio",
-          "classes": "c-button--primary"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
-        }
-      ],
-      "isDismissible": true
-    },
-    "visualDescription": "Modal con fondo blanco, esquinas redondeadas y sombra sutil. Encabezado con título en negrita negro y botón X para cerrar en esquina superior derecha. Cuerpo con dos líneas de texto gris oscuro centrado. Pie con dos botones: botón primario \"Editar servicio\" en azul petróleo con texto blanco, y botón secundario \"Cancelar\" con borde azul petróleo y texto azul petróleo sobre fondo blanco.",
-    "_generated": {
-      "hash": "ff469a301be2910f389039a597baa1c4",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:04.315Z"
-    }
-  },
-  {
-    "name": "con caller",
-    "description": 'Entre <code>{% call %}</code> y <code>{% endcall %}</code> puedes insertar el contenido anidado que desees. Útil para anidar mucho contenido dentro del componente.',
-    "data": {
-      "id": "caller-example",
-      "title": {
-        "text": "Editar servicio publicado"
-      },
-      "description": {
-        "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
-      },
-      "itemsPrimary": [
-        {
-          "text": "Editar servicio",
-          "classes": "c-button--primary"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
-        }
-      ],
-      "isDismissible": true,
-      "caller": "<div class='prose max-w-auto mx-auto'><p class='text-center text-sm'>Para más información, ir a la <a href='#'>Página de ayuda</a></p></div>"
-    },
-    "visualDescription": "Modal con fondo blanco, esquinas redondeadas y sombra sutil. Encabezado con título en negrita negro y botón X para cerrar en esquina superior derecha. Cuerpo con tres líneas de texto gris oscuro centrado, seguido de una línea adicional con enlace azul subrayado. Pie con dos botones: botón primario \"Editar servicio\" en azul petróleo con texto blanco, y botón secundario \"Cancelar\" con borde azul petróleo y texto azul petróleo sobre fondo blanco.",
-    "_generated": {
-      "hash": "9bb080cae298c74d7481e34469eefc2d",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:04.315Z"
-    }
-  },
-  {
-    "name": "con muchas acciones",
-    "description": 'No es muy común, pero si lo necesitas, puedes usar varios botones en la zona de acciones primarias (a la izquierda) y de secundarias (a la derecha). Usando las clases modificadores de botones podrás darles la apariencia que desees.',
-    "data": {
-      "id": "many-actions-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": "Guardar cambios y publicar",
-          "classes": "c-button--primary"
-        },
-        {
-          "text": "Guardar cambios"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "text": "Más información",
-          "classes": "c-button--transparent"
-        },
-        {
-          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
-        }
-      ],
-      "isDismissible": true,
-      "classes": "max-w-4xl"
-    },
-    "visualDescription": "Modal con fondo blanco, esquinas redondeadas y sombra sutil. Encabezado con título \"Aviso\" en negrita negro y botón X para cerrar en esquina superior derecha. Cuerpo con tres líneas de texto gris oscuro centrado. Pie con cuatro elementos: dos botones primarios (\"Guardar cambios y publicar\" y \"Guardar cambios\") en azul petróleo con texto blanco, enlace \"Más información\" en azul subrayado, y botón \"Cancelar\" con borde gris y texto gris sobre fondo blanco.",
-    "_generated": {
-      "hash": "2160a78a91aea81f363bbd6806728a04",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:04.315Z"
-    }
-  },
-  {
-    "name": "con muchas acciones y botón loader",
-    "data": {
-      "id": "many-actions-is-button-loader-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": "Guardar cambios y publicar",
-          "isButtonLoader": true,
-          "state": "is-success",
-          "classes": "c-button-loader--primary c-button-loader--is-success"
-        },
-        {
-          "text": "Guardar cambios",
-          "isButtonLoader": true
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "text": "Más información",
-          "isButtonLoader": true,
-          "state": "is-loading",
-          "classes": "c-button-loader--transparent c-button-loader--is-loading"
-        },
-        {
-          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>",
-          "isButtonLoader": true,
-          "state": "is-success",
-          "classes": "c-button-loader--is-success"
-        }
-      ],
-      "isDismissible": true,
-      "classes": "max-w-4xl"
-    },
-    "visualDescription": "Modal centrado con fondo blanco, título negro en negrita, texto descriptivo gris oscuro en tres líneas, y botón de cierre X negro en esquina superior derecha. Incluye botón primario verde azulado con checkmark blanco, botón secundario blanco con borde azul y texto azul, y spinner de carga circular azul oscuro. Bordes redondeados con sombra sutil de elevación.",
-    "_generated": {
-      "hash": "7773b438c50d559ceb9e86f70b93c987",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:15.406Z"
-    }
-  },
-  {
-    "name": "con icono de tipo borrar/eliminar",
-    "description": 'Si la acción es destructiva, entonces se invierte el orden y la acción principal destructiva aparece a la derecha con el modificador de Botón alerta.',
-    "data": {
-      "id": "icon-type-A-example",
-      "title": {
-        "text": "Borrar servicio"
-      },
-      "description": {
-        "text": "Esta acción no se puede deshacer ¿Estás seguro?"
-      },
-      "itemsPrimary": [
-        {
-          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "text": "Si, borrar servicio",
-          "classes": "c-button--alert"
-        }
-      ],
-      "isDismissible": true,
-      "icon": {
-        "type": "delete"
-      }
-    },
-    "visualDescription": "Modal centrado con fondo blanco, icono de bote de basura rosa pálido en la parte superior, título negro en negrita, y pregunta de confirmación en gris oscuro. Contiene dos botones alineados horizontalmente: botón izquierdo blanco con borde azul y texto azul, botón derecho rojo sólido con texto blanco. Bordes redondeados con sombra de elevación, X negra para cerrar en esquina superior derecha.",
-    "_generated": {
-      "hash": "a8d8918d3f30b54cefe77da62844dbae",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:15.406Z"
-    }
-  },
-  {
-    "name": "con icono de tipo descartar",
-    "data": {
-      "id": "icon-type-B-example",
-      "title": {
-        "text": "Descartar cambios"
-      },
-      "description": {
-        "text": "Si descartas los cambios, perderás el trabajo realizado en este servicio. ¿Estás seguro?"
-      },
-      "itemsPrimary": [
-        {
-          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "text": "Si, descartar cambios",
-          "classes": "c-button--alert"
-        }
-      ],
-      "isDismissible": true,
-      "icon": {
-        "type": "discard"
-      }
-    },
-    "visualDescription": "Modal centrado con fondo blanco, icono circular con diagonal tachada en rosa pálido, título negro en negrita, y mensaje de advertencia en gris oscuro ocupando dos líneas. Presenta dos botones horizontales: izquierdo blanco con borde azul y texto azul, derecho rojo sólido con texto blanco. Bordes redondeados con sombra de elevación, botón X negro en esquina superior derecha.",
-    "_generated": {
-      "hash": "fffcce522fc671bd89cc7b9ced1dae34",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:15.406Z"
-    }
-  },
-  {
-    "name": "con icono de tipo cambios",
-    "data": {
-      "id": "icon-type-C-example",
-      "title": {
-        "text": "Hay cambios sin guardar"
-      },
-      "description": {
-        "text": "Si sales de la pantalla de edición sin guardar, perderás los cambios realizados."
-      },
-      "itemsPrimary": [
-        {
-          "text": "Guardar y salir",
-          "classes": "c-button--primary"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "text": "Descartar cambios y salir"
-        }
-      ],
-      "isDismissible": true,
-      "icon": {
-        "type": "changes"
-      }
-    },
-    "visualDescription": "Modal centrado con fondo blanco, título negro en negrita, icono circular gris claro arriba del título. Texto descriptivo gris debajo del título en tamaño mediano. Dos botones en la parte inferior: izquierdo con fondo azul petróleo y texto blanco, derecho con fondo blanco, borde gris y texto negro.",
-    "_generated": {
-      "hash": "f4f08fe45441efb4aeeb83c6658548ea",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:24.339Z"
-    }
-  },
-  {
-    "name": "con icono de tipo editar",
-    "data": {
-      "id": "icon-type-D-example",
-      "title": {
-        "text": "Editar servicio publicado"
-      },
-      "description": {
-        "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
-      },
-      "itemsPrimary": [
-        {
-          "text": "Lo sé, quiero editarlo",
-          "classes": "c-button--primary"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
-        }
-      ],
-      "isDismissible": true,
-      "icon": {
-        "type": "edit"
-      }
-    },
-    "visualDescription": "Modal centrado con fondo blanco, título negro en negrita, icono cuadrado azul claro arriba del título. Bloque de texto descriptivo gris en tamaño pequeño debajo del título, centrado. Dos botones en la parte inferior: izquierdo con fondo azul petróleo y texto blanco, derecho con fondo blanco, borde gris y texto negro.",
-    "_generated": {
-      "hash": "497cffddb33ae14133917f6d17ca6f87",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:24.339Z"
-    }
-  },
-  {
-    "name": "con icono de tipo publicar",
-    "data": {
-      "id": "icon-type-E-example",
-      "title": {
-        "text": "Publicar"
-      },
-      "description": {
-        "text": "Se van a publicar todos los elementos de este servicio que están pendientes de publicación."
-      },
-      "itemsPrimary": [
-        {
-          "text": "Publicar",
-          "classes": "c-button--primary"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
-        }
-      ],
-      "isDismissible": true,
-      "icon": {
-        "type": "publish"
-      }
-    },
-    "visualDescription": "Modal centrado con fondo blanco, título negro en negrita, icono triangular azul claro arriba del título. Texto descriptivo gris centrado debajo del título en tamaño mediano. Dos botones en la parte inferior: izquierdo con fondo azul petróleo y texto blanco, derecho con fondo blanco, borde gris y texto negro.",
-    "_generated": {
-      "hash": "7d62ad79715e62cf72693bcffcfb317a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:24.339Z"
-    }
-  },
-  {
-    "name": "con icono personalizado",
-    "description": 'Utiliza el parámetro <code>"icon"</code> y su parámetro <code>"html"</code> para añadir código HTML de un icono SVG inline. Utiliza los atributos de la etiqueta <code>&lt;svg&gt;</code> de este ejemplo, incluido el <code>aria-label</code>.',
-    "data": {
-      "id": "custom-icon-example",
-      "title": {
-        "text": "¿Estás seguro de querer cambiar de estado a múltiples archivos?",
-        "classes": "c-h2 mt-base focus:outline-hidden focus:underline"
-      },
-      "description": {
-        "html": "<p class='c-paragraph-base'>Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.</p><p class='c-paragraph-base'>Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso <strong>no cierres la ventana del navegador ni naveges a otra página</strong> en esta pestaña.</p><p>¿Estás seguro de iniciar el proceso ahora?</p>",
-        "classes": "mb-lg text-left"
-      },
-      "itemsPrimary": [
-        {
-          "text": "Si, comenzar proceso",
-          "classes": "c-button--primary"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
-        }
-      ],
-      "isDismissible": true,
-      "icon": {
-        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' class='block w-16 h-16 text-primary-light' aria-label='Pregunta' focusable='false'><path d='M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.92,1,1,0,0,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.25a1,1,0,0,1-2,0,4,4,0,1,1,5.6,3.67Z' fill='currentColor'></path></svg>"
-      }
-    },
-    "visualDescription": "Diálogo modal centrado con fondo blanco, bordes redondeados y sombra suave. Icono circular azul claro con símbolo de interrogación en la parte superior, título en negrita negro, tres párrafos de texto gris oscuro con diferentes niveles de información, pregunta final en cursiva gris oscuro, botón primario teal con texto blanco \"Sí, comenzar proceso\" y botón secundario con borde teal y texto teal \"Cancelar\" alineados horizontalmente en la parte inferior. Botón de cierre (×) en la esquina superior derecha del modal.",
-    "_generated": {
-      "hash": "89dd951667eb8e973544b1c234051cd5",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:32.548Z"
-    }
-  }
+{% set exampleComponent = "modal" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "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"
+        }
+      ],
+      "isDismissible": true
+    },
+    "visualDescription": "Modal centrado con fondo blanco, bordes redondeados sutiles y sombra perimetral gris. Encabezado en texto negro negrita, seguido de tres líneas de texto gris oscuro en peso normal. Botón rectangular en la parte inferior con fondo azul petróleo y texto blanco. Ícono de cierre (X) negro en la esquina superior derecha del modal.",
+    "_generated": {
+      "hash": "018d5f87e3b6dde9451cef768fb840e0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:53.106Z"
+    }
+  },
+  {
+    "name": "Con Button Loader",
+    "description": "Si quieres que las acciones muestren un Button loader en vez de un botón normal, utiliza el parámetro <code>'isButtonLoader': true</code>.",
+    "data": {
+      "id": "button-loader-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",
+          "isButtonLoader": true,
+          "state": "is-loading",
+          "classes": "c-button-loader--primary c-button-loader--is-loading"
+        }
+      ],
+      "isDismissible": true
+    },
+    "visualDescription": "Modal centrado con fondo blanco, bordes redondeados sutiles y sombra perimetral gris. Encabezado en texto negro negrita, seguido de tres líneas de texto gris oscuro en peso normal. Botón rectangular en la parte inferior con fondo azul petróleo mostrando indicador de carga. Ícono de cierre (X) negro en la esquina superior derecha del modal.",
+    "_generated": {
+      "hash": "3dfe5525bf5786fdd38c9199b780747f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:53.106Z"
+    }
+  },
+  {
+    "name": "Con encabezado de nivel 3",
+    "description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
+    "data": {
+      "id": "headinglevel-example",
+      "title": {
+        "text": "Esto es un h3"
+      },
+      "headingLevel": 3,
+      "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"
+        }
+      ],
+      "isDismissible": true
+    },
+    "visualDescription": "Modal centrado con fondo blanco, bordes redondeados sutiles y sombra perimetral gris. Encabezado en texto negro negrita, seguido de tres líneas de texto gris oscuro en peso normal. Botón rectangular en la parte inferior con fondo azul petróleo y texto blanco. Ícono de cierre (X) negro en la esquina superior derecha del modal.",
+    "_generated": {
+      "hash": "da4cd8a099d05fa9c5d196c38d601566",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:53.106Z"
+    }
+  },
+  {
+    "name": "Con acción secundaria",
+    "description": "Las acciones primarias deberán ser botones primarios y aparecer a la izquierda. Las acciones secundarias deberán ser botones por defecto y aparecer a la derecha. Si la acción es destructiva, entonces se invierte el orden y la acción principal destructiva aparece a la derecha con el modificador de Botón alerta.",
+    "data": {
+      "id": "secondary-action-example",
+      "title": {
+        "text": "Editar servicio publicado"
+      },
+      "description": {
+        "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
+      },
+      "itemsPrimary": [
+        {
+          "text": "Editar servicio",
+          "classes": "c-button--primary"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
+        }
+      ],
+      "isDismissible": true
+    },
+    "visualDescription": "Modal con fondo blanco, esquinas redondeadas y sombra sutil. Encabezado con título en negrita negro y botón X para cerrar en esquina superior derecha. Cuerpo con dos líneas de texto gris oscuro centrado. Pie con dos botones: botón primario en azul petróleo con texto blanco, y botón secundario con borde azul petróleo y texto azul petróleo sobre fondo blanco.",
+    "_generated": {
+      "hash": "ff469a301be2910f389039a597baa1c4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:04.315Z"
+    }
+  },
+  {
+    "name": "con caller",
+    "description": 'Entre <code>{% call %}</code> y <code>{% endcall %}</code> puedes insertar el contenido anidado que desees. Útil para anidar mucho contenido dentro del componente.',
+    "data": {
+      "id": "caller-example",
+      "title": {
+        "text": "Editar servicio publicado"
+      },
+      "description": {
+        "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
+      },
+      "itemsPrimary": [
+        {
+          "text": "Editar servicio",
+          "classes": "c-button--primary"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
+        }
+      ],
+      "isDismissible": true,
+      "caller": "<div class='prose max-w-auto mx-auto'><p class='text-center text-sm'>Para más información, ir a la <a href='#'>Página de ayuda</a></p></div>"
+    },
+    "visualDescription": "Modal con fondo blanco, esquinas redondeadas y sombra sutil. Encabezado con título en negrita negro y botón X para cerrar en esquina superior derecha. Cuerpo con tres líneas de texto gris oscuro centrado, seguido de una línea adicional con enlace azul subrayado. Pie con dos botones: botón primario en azul petróleo con texto blanco, y botón secundario con borde azul petróleo y texto azul petróleo sobre fondo blanco.",
+    "_generated": {
+      "hash": "9bb080cae298c74d7481e34469eefc2d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:04.315Z"
+    }
+  },
+  {
+    "name": "con muchas acciones",
+    "description": 'No es muy común, pero si lo necesitas, puedes usar varios botones en la zona de acciones primarias (a la izquierda) y de secundarias (a la derecha). Usando las clases modificadores de botones podrás darles la apariencia que desees.',
+    "data": {
+      "id": "many-actions-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": "Guardar cambios y publicar",
+          "classes": "c-button--primary"
+        },
+        {
+          "text": "Guardar cambios"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "text": "Más información",
+          "classes": "c-button--transparent"
+        },
+        {
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
+        }
+      ],
+      "isDismissible": true,
+      "classes": "max-w-4xl"
+    },
+    "visualDescription": "Modal con fondo blanco, esquinas redondeadas y sombra sutil. Encabezado en negrita negro y botón X para cerrar en esquina superior derecha. Cuerpo con tres líneas de texto gris oscuro centrado. Pie con cuatro elementos: dos botones primarios en azul petróleo con texto blanco, enlace en azul subrayado, y botón secundario con borde gris y texto gris sobre fondo blanco.",
+    "_generated": {
+      "hash": "2160a78a91aea81f363bbd6806728a04",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:04.315Z"
+    }
+  },
+  {
+    "name": "con muchas acciones y botón loader",
+    "data": {
+      "id": "many-actions-is-button-loader-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": "Guardar cambios y publicar",
+          "isButtonLoader": true,
+          "state": "is-success",
+          "classes": "c-button-loader--primary c-button-loader--is-success"
+        },
+        {
+          "text": "Guardar cambios",
+          "isButtonLoader": true
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "text": "Más información",
+          "isButtonLoader": true,
+          "state": "is-loading",
+          "classes": "c-button-loader--transparent c-button-loader--is-loading"
+        },
+        {
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>",
+          "isButtonLoader": true,
+          "state": "is-success",
+          "classes": "c-button-loader--is-success"
+        }
+      ],
+      "isDismissible": true,
+      "classes": "max-w-4xl"
+    },
+    "visualDescription": "Modal centrado con fondo blanco, título negro en negrita, texto descriptivo gris oscuro en tres líneas, y botón de cierre X negro en esquina superior derecha. Incluye botón primario verde azulado con checkmark blanco, botón secundario blanco con borde azul y texto azul, y spinner de carga circular azul oscuro. Bordes redondeados con sombra sutil de elevación.",
+    "_generated": {
+      "hash": "7773b438c50d559ceb9e86f70b93c987",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:15.406Z"
+    }
+  },
+  {
+    "name": "con icono de tipo borrar/eliminar",
+    "description": 'Si la acción es destructiva, entonces se invierte el orden y la acción principal destructiva aparece a la derecha con el modificador de Botón alerta.',
+    "data": {
+      "id": "icon-type-A-example",
+      "title": {
+        "text": "Borrar servicio"
+      },
+      "description": {
+        "text": "Esta acción no se puede deshacer ¿Estás seguro?"
+      },
+      "itemsPrimary": [
+        {
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "text": "Si, borrar servicio",
+          "classes": "c-button--alert"
+        }
+      ],
+      "isDismissible": true,
+      "icon": {
+        "type": "delete"
+      }
+    },
+    "visualDescription": "Modal centrado con fondo blanco, icono de bote de basura rosa pálido en la parte superior, título negro en negrita, y pregunta de confirmación en gris oscuro. Contiene dos botones alineados horizontalmente: botón izquierdo blanco con borde azul y texto azul, botón derecho rojo sólido con texto blanco. Bordes redondeados con sombra de elevación, X negra para cerrar en esquina superior derecha.",
+    "_generated": {
+      "hash": "a8d8918d3f30b54cefe77da62844dbae",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:15.406Z"
+    }
+  },
+  {
+    "name": "con icono de tipo descartar",
+    "data": {
+      "id": "icon-type-B-example",
+      "title": {
+        "text": "Descartar cambios"
+      },
+      "description": {
+        "text": "Si descartas los cambios, perderás el trabajo realizado en este servicio. ¿Estás seguro?"
+      },
+      "itemsPrimary": [
+        {
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "text": "Si, descartar cambios",
+          "classes": "c-button--alert"
+        }
+      ],
+      "isDismissible": true,
+      "icon": {
+        "type": "discard"
+      }
+    },
+    "visualDescription": "Modal centrado con fondo blanco, icono circular con diagonal tachada en rosa pálido, título negro en negrita, y mensaje de advertencia en gris oscuro ocupando dos líneas. Presenta dos botones horizontales: izquierdo blanco con borde azul y texto azul, derecho rojo sólido con texto blanco. Bordes redondeados con sombra de elevación, botón X negro en esquina superior derecha.",
+    "_generated": {
+      "hash": "fffcce522fc671bd89cc7b9ced1dae34",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:15.406Z"
+    }
+  },
+  {
+    "name": "con icono de tipo cambios",
+    "data": {
+      "id": "icon-type-C-example",
+      "title": {
+        "text": "Hay cambios sin guardar"
+      },
+      "description": {
+        "text": "Si sales de la pantalla de edición sin guardar, perderás los cambios realizados."
+      },
+      "itemsPrimary": [
+        {
+          "text": "Guardar y salir",
+          "classes": "c-button--primary"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "text": "Descartar cambios y salir"
+        }
+      ],
+      "isDismissible": true,
+      "icon": {
+        "type": "changes"
+      }
+    },
+    "visualDescription": "Modal centrado con fondo blanco, título negro en negrita, icono circular gris claro arriba del título. Texto descriptivo gris debajo del título en tamaño mediano. Dos botones en la parte inferior: izquierdo con fondo azul petróleo y texto blanco, derecho con fondo blanco, borde gris y texto negro.",
+    "_generated": {
+      "hash": "f4f08fe45441efb4aeeb83c6658548ea",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:24.339Z"
+    }
+  },
+  {
+    "name": "con icono de tipo editar",
+    "data": {
+      "id": "icon-type-D-example",
+      "title": {
+        "text": "Editar servicio publicado"
+      },
+      "description": {
+        "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
+      },
+      "itemsPrimary": [
+        {
+          "text": "Lo sé, quiero editarlo",
+          "classes": "c-button--primary"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
+        }
+      ],
+      "isDismissible": true,
+      "icon": {
+        "type": "edit"
+      }
+    },
+    "visualDescription": "Modal centrado con fondo blanco, título negro en negrita, icono cuadrado azul claro arriba del título. Bloque de texto descriptivo gris en tamaño pequeño debajo del título, centrado. Dos botones en la parte inferior: izquierdo con fondo azul petróleo y texto blanco, derecho con fondo blanco, borde gris y texto negro.",
+    "_generated": {
+      "hash": "497cffddb33ae14133917f6d17ca6f87",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:24.339Z"
+    }
+  },
+  {
+    "name": "con icono de tipo publicar",
+    "data": {
+      "id": "icon-type-E-example",
+      "title": {
+        "text": "Publicar"
+      },
+      "description": {
+        "text": "Se van a publicar todos los elementos de este servicio que están pendientes de publicación."
+      },
+      "itemsPrimary": [
+        {
+          "text": "Publicar",
+          "classes": "c-button--primary"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
+        }
+      ],
+      "isDismissible": true,
+      "icon": {
+        "type": "publish"
+      }
+    },
+    "visualDescription": "Modal centrado con fondo blanco, título negro en negrita, icono triangular azul claro arriba del título. Texto descriptivo gris centrado debajo del título en tamaño mediano. Dos botones en la parte inferior: izquierdo con fondo azul petróleo y texto blanco, derecho con fondo blanco, borde gris y texto negro.",
+    "_generated": {
+      "hash": "7d62ad79715e62cf72693bcffcfb317a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:24.339Z"
+    }
+  },
+  {
+    "name": "con icono personalizado",
+    "description": 'Utiliza el parámetro <code>"icon"</code> y su parámetro <code>"html"</code> para añadir código HTML de un icono SVG inline. Utiliza los atributos de la etiqueta <code>&lt;svg&gt;</code> de este ejemplo, incluido el <code>aria-label</code>.',
+    "data": {
+      "id": "custom-icon-example",
+      "title": {
+        "text": "¿Estás seguro de querer cambiar de estado a múltiples archivos?",
+        "classes": "c-h2 mt-base focus:outline-hidden focus:underline"
+      },
+      "description": {
+        "html": "<p class='c-paragraph-base'>Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.</p><p class='c-paragraph-base'>Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso <strong>no cierres la ventana del navegador ni naveges a otra página</strong> en esta pestaña.</p><p>¿Estás seguro de iniciar el proceso ahora?</p>",
+        "classes": "mb-lg text-left"
+      },
+      "itemsPrimary": [
+        {
+          "text": "Si, comenzar proceso",
+          "classes": "c-button--primary"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
+        }
+      ],
+      "isDismissible": true,
+      "icon": {
+        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' class='block w-16 h-16 text-primary-light' aria-label='Pregunta' focusable='false'><path d='M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.92,1,1,0,0,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.25a1,1,0,0,1-2,0,4,4,0,1,1,5.6,3.67Z' fill='currentColor'></path></svg>"
+      }
+    },
+    "visualDescription": "Diálogo modal centrado con fondo blanco, bordes redondeados y sombra suave. Icono circular azul claro con símbolo de interrogación en la parte superior, título en negrita negro, tres párrafos de texto gris oscuro con diferentes niveles de información, pregunta final en cursiva gris oscuro, botón primario teal con texto blanco y botón secundario con borde teal y texto teal alineados horizontalmente en la parte inferior. Botón de cierre (×) en la esquina superior derecha del modal.",
+    "_generated": {
+      "hash": "89dd951667eb8e973544b1c234051cd5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:32.548Z"
+    }
+  }
 ] %}