desy-html 7.3.0 → 7.4.0

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

@@ -1,12 +1,12 @@
 {% set exampleComponent = "listbox" %}
 {% set examples =  [
     {
-      "name": "default",
+      "name": "por defecto",
       "data": {
         "id": "default",
-        "text": "Default",
+        "text": "Por defecto",
         "label": {
-          "text": "Label text goes here"
+          "text": "Esto es un label"
         },
         "items": [
           {
@@ -15,405 +15,405 @@
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "with active state",
-      "description": "Simulate triggering the :active CSS pseudo-class, not available in the production build.",
+      "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": {
         "id": "with-active-state",
-        "text": "Active",
+        "text": "Activo",
         "label": {
-          "text": "Label text goes here"
+          "text": "Esto es un label"
         },
         "classes": "ds-active",
         "items": [
           {
             "href": "#",
-            "text": "Option 1"
+            "text": "Opción 1"
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "with hover state",
-      "description": "Simulate triggering the :hover CSS pseudo-class, not available in the production build.",
+      "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": {
         "id": "with-hover-state",
-        "text": "Hovered",
+        "text": "Hover",
         "label": {
-          "text": "Label text goes here"
+          "text": "Esto es un label"
         },
         "classes": "ds-hover",
         "items": [
           {
             "href": "#",
-            "text": "Option 1"
+            "text": "Opción 1"
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "with focus state",
-      "description": "Simulate triggering the :focus CSS pseudo-class, not available in the production build.",
+      "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": {
         "id": "with-focus-state",
-        "text": "Focussed",
+        "text": "Focus",
         "label": {
-          "text": "Label text goes here"
+          "text": "Esto es un label"
         },
         "classes": "ds-focus",
         "items": [
           {
             "href": "#",
-            "text": "Option 1"
+            "text": "Opción 1"
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "Primary",
-      "description": "A button for primary actions",
+      "name": "primario",
+      "description": "Para acciones primarias.",
       "data": {
         "id": "primary",
-        "text": "Primary button",
+        "text": "Primario",
         "label": {
-          "text": "Label text goes here"
+          "text": "Esto es un label"
         },
         "classes": "c-listbox--primary",
         "items": [
           {
             "href": "#",
-            "text": "Option 1"
+            "text": "Opción 1"
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "Transparent",
+      "name": "transparente",
       "data": {
         "id": "transparent",
-        "text": "Transparent",
+        "text": "Transparente",
         "label": {
-          "text": "Label text goes here"
+          "text": "Esto es un label"
         },
         "classes": "c-listbox--transparent",
         "items": [
           {
             "href": "#",
-            "text": "Option 1"
+            "text": "Opción 1"
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "Header",
+      "name": "Con estilos de cabecera",
       "data": {
         "id": "header",
         "text": "Header",
         "label": {
-          "text": "Label text goes here",
+          "text": "Esto es un label",
           "classes": "sr-only"
         },
         "classes": "c-listbox--header",
         "items": [
           {
             "href": "#",
-            "text": "Option 1"
+            "text": "Opción 1"
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "Small",
-      "description": "Small button. Label only shown for screen readers.",
+      "name": "peque",
+      "description": "Label solo visible para lectores de pantalla.",
       "data": {
         "id": "small",
-        "text": "Small button with a very long text",
+        "text": "Peque con texto muy largo",
         "label": {
-          "text": "Label text goes here",
+          "text": "Esto es un label",
           "classes": "sr-only"
         },
         "classes": "c-listbox--sm",
         "items": [
           {
             "href": "#",
-            "text": "Option 1"
+            "text": "Opción 1"
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "Small has selection",
-      "description": "A button with selection applied. Label only shown for screen readers.",
+      "name": "peque tiene selección",
+      "description": "Un botón con una selección aplicada se muestra con color. Label solo visible para lectores de pantalla.",
       "data": {
         "id": "small-has-selection",
-        "text": "Small button with a very long text",
+        "text": "Peque con texto muy largo",
         "label": {
-          "text": "Label text goes here",
+          "text": "Esto es un label",
           "classes": "sr-only"
         },
         "classes": "c-listbox--has-selection c-listbox--sm",
         "items": [
           {
             "href": "#",
-            "text": "Option 1"
+            "text": "Opción 1"
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "Disabled",
+      "name": "deshabilitado",
       "data": {
         "id": "disabled",
-        "text": "Disabled button",
+        "text": "Deshabilitado",
         "label": {
-          "text": "Label text goes here"
+          "text": "Esto es un label"
         },
         "disabled": true,
         "items": [
           {
             "href": "#",
-            "text": "Option 1"
+            "text": "Opción 1"
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "Classes applied to container element",
-      "description": "Both button and tooltip elements are wrapped in an outer container 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": {
         "id": "classes-applied-to-container-element",
-        "text": "Classes in container",
+        "text": "Clases en container",
         "label": {
-          "text": "Label text goes here"
+          "text": "Esto es un label"
         },
-        "classesContainer": "inline-block p-base bg-warning-light",
+        "classesContainer": "inline-block p-base bg-primary-light",
         "items": [
           {
             "href": "#",
-            "text": "Option 1"
+            "text": "Opción 1"
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "Classes applied to tooltip content",
-      "description": "Tooltip content can have additional classes applied",
+      "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": {
         "id": "classes-applied-to-tooltip-content",
-        "text": "Classes in tooltip content",
+        "text": "Clases al contenido del tooltip",
         "label": {
-          "text": "Label text goes here"
+          "text": "Esto es un label"
         },
         "classesTooltip": "max-h-24 overflow-y-auto",
         "items": [
           {
             "href": "#",
-            "text": "Option 1"
+            "text": "Opción 1"
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "Classes applied to various elements",
-      "description": "The content width generates the tooltip width in this example",
+      "name": "Clases aplicadas a varios elementos",
+      "description": "En este ejemplo, usando clases de CSS, la anchura del contenido establece la anchura del tooltip.",
       "data": {
         "id": "classes-applied-to-various-elements",
-        "text": "Dropdown full width",
+        "text": "Listbox de anchura completa",
         "label": {
-          "text": "Label text goes here",
+          "text": "Esto es un label",
           "classes": "font-semibold text-sm"
         },
         "classes": "w-full justify-between",
@@ -421,102 +421,102 @@
         "items": [
           {
             "href": "#",
-            "text": "Option 1"
+            "text": "Opción 1"
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "with active item",
+      "name": "con item activo",
       "data": {
         "id": "with-active-item",
-        "text": "With active item",
+        "text": "con item activo",
         "label": {
-          "text": "Label text goes here"
+          "text": "Esto es un label"
         },
         "items": [
           {
             "href": "#",
-            "text": "Option 1"
+            "text": "Opción 1"
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Active Option 4",
+            "text": "Opción 4 activa",
             "active": true
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "Allow multiple selections",
-      "description": "isMultiselectable = true",
+      "name": "Permite selecciones múltiples",
+      "description": 'Usa el parámetro <code>"isMultiselectable": true</code>.',
       "data": {
         "id": "is-multiselectable",
         "isMultiselectable": true,
-        "text": "Is multiselectable",
+        "text": "Selecciones múltiples",
         "label": {
-          "text": "Label text goes here"
+          "text": "Esto es un label"
         },
         "items": [
           {
             "href": "#",
-            "text": "Option 1"
+            "text": "Opción 1"
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "Does change button text",
-      "description": "doesChangeButtonText=true, Updates the button text with the selected option text. If isMultiselectable, then has no effect.",
+      "name": "Cambia el texto del botón",
+      "description": 'Usa el parámetro <code>"doesChangeButtonText": true</code> para hacer que el texto del botón se actualice al seleccionar un item. Si <code>"doesChangeButtonText": true</code>, entonces no tiene efecto',
       "data": {
         "id": "does-change-button-text",
-        "text": "Option 1",
+        "text": "Opción 1",
         "label": {
-          "text": "Label text goes here"
+          "text": "Esto es un label"
         },
         "doesChangeButtonText": true,
         "items": [
@@ -526,54 +526,54 @@
           },
           {
             "href": "#",
-            "text": "Option 2"
+            "text": "Opción 2"
           },
           {
             "href": "#",
-            "text": "Option 3"
+            "text": "Opción 3"
           },
           {
             "href": "#",
-            "text": "Option 4"
+            "text": "Opción 4"
           },
           {
             "href": "#",
-            "text": "Option 5"
+            "text": "Opción 5"
           }
         ]
       }
     },
     {
-      "name": "With icons in items",
+      "name": "Con iconos en items",
       "data": {
         "id": "icons",
-        "text": "Icons in items",
+        "text": "Iconos en items",
         "label": {
-          "text": "Label text goes here"
+          "text": "Esto es un label"
         },
         "items": [
           {
             "href": "#",
-            "html": 'Option 1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Archivo" focusable="false" role="img"><path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor"/><path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor"/></svg>'
+            "html": 'Opción 1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Archivo" focusable="false" role="img"><path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor"/><path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor"/></svg>'
           },
           {
             "href": "#",
-            "html": 'Option 2 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Link" focusable="false" role="img"><path d="M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z" fill="currentColor"/><path d="M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z" fill="currentColor"/><path d="M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z" fill="currentColor"/></svg>'
+            "html": 'Opción 2 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Link" focusable="false" role="img"><path d="M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z" fill="currentColor"/><path d="M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z" fill="currentColor"/><path d="M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z" fill="currentColor"/></svg>'
           },
           {
             "href": "#",
-            "html": 'Option 3 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Solicitud" focusable="false" role="img"><path d="M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z" fill="currentColor"/><path d="M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z" fill="currentColor"/><path d="M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z" fill="currentColor"/></svg>'
+            "html": 'Opción 3 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Solicitud" focusable="false" role="img"><path d="M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z" fill="currentColor"/><path d="M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z" fill="currentColor"/><path d="M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z" fill="currentColor"/></svg>'
           }
         ]
       }
     },
     {
-      "name": "With paragraphs in items",
+      "name": "con párrafos en items",
       "data": {
         "id": "paragraphs",
-        "text": "Paragraphs in items",
+        "text": "Párrafos en items",
         "label": {
-          "text": "Label text goes here"
+          "text": "Esto es un label"
         },
         "items": [
           {