desy-html 13.0.2 → 15.0.0-beta.1

package/.node-version

@@ -0,0 +1 @@
+22.21.1

package/.nvmrc

@@ -0,0 +1 @@
+22.21.1

package/README.md

@@ -1,6 +1,6 @@
 # README #
 
-desy-html is the NPM library you need to start building a user interface for Gobierno de Aragón webapps. It uses Gulp, Postcss, Tailwindcss and Nunjucks to render html+css+js components. It's useful to create lightweight webapps or html mockups.
+desy-html is the NPM library you need to start building a user interface for Gobierno de Aragón webapps. It uses Vite, Tailwindcss and Nunjucks to render html+css+js components. It's useful to create lightweight webapps or html mockups.
 
 If you need a more powerful library based on this, use it's Angular port instead: [desy-angular](https://bitbucket.org/sdaragon/desy-angular)
 
@@ -9,9 +9,9 @@ See live examples of desy-html components: [https://desy.aragon.es/](https://des
 ### How to set up? ###
 
 * Run `npm install` first.
-* Use `npm run dev` to generate CSS from `src/styles.css` to `/dist/styles.css`,  listen to changes in njk, css and html, and browser-sync reload.
-* Use `npm run prod` to generate CSS, Purge it and Minify it.
-* Dependencies: Node.js v20.14.0, Tailwind CSS and AutoPrefixer configed in PostCSS
+* Use `npm run dev` to listen to changes in njk, css and html, and browser-sync reload.
+* Use `npm run build` to generate static files.
+* Dependencies: Node.js v22, Tailwind CSS
 
 ### How do I start a project that uses desy-html components? ###
 
@@ -28,9 +28,3 @@ To start a new project that uses desy-html as dependency, don't use this repo, u
 ### Software license ###
 Unless stated otherwise, the codebase is released under the [EUPL-1.2 License](https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12). This covers both the codebase and any sample code in the documentation.
 
-### Thanks ###
-
-This project started initially forked from: [https://github.com/saadeghi/tailwindcss-postcss-browsersync-boilerplate](https://github.com/saadeghi/tailwindcss-postcss-browsersync-boilerplate)
-
-This project is built upon the GOV.UK Frontend project: [https://github.com/alphagov/govuk-frontend](https://github.com/alphagov/govuk-frontend) 
-We would like to thank the Government Digital Service team for their fabulous work and for making it opensource for the community.

package/docs/_global.foot.njk

@@ -6,9 +6,6 @@
   "classes": "lg:mt-48"
 })  }}
 
-<script type="module" src="js/cally.js"></script>
-<script src="js/popper.min.js"></script>
-<script src="js/tippy-bundle.umd.min.js"></script>
 <script type="module" src="js/index.js"></script>
 </body>
 </html>

package/docs/_include.template-header.njk

@@ -358,6 +358,11 @@
     href: "examples-tree.html",
     text: "Tree",
     id: "page-examples-tree"
+  },
+  {
+    href: "examples-treegrid.html",
+    text: "Treegrid",
+    id: "page-examples-treegrid"
   }],
   attributes: {
     "id": "navegacion-ejemplos-offcanvas",

package/docs/_macro.example-render.njk

@@ -108,6 +108,8 @@ import componentToggle %}
 import componentTooltip %}
 {% from "components/tree/_macro.tree.njk"
 import componentTree %}
+{% from "components/treegrid/_macro.treegrid.njk"
+import componentTreegrid %}
 
 
 {% macro exampleRender(data) %}
@@ -118,13 +120,6 @@ import componentTree %}
   <div>
     <h1 class="c-h1">{{ exampleComponent | capitalize }}</h1>
     {% from "_macro.load-component-params.njk" import loadComponentParams %}
-    <div class="sr-only">
-      <h2 class="mb-sm font-bold">Parámetros Nunjucks del componente<span class="sr-only">: "{{ exampleComponent | capitalize }}". Versión: {{ '' | filterversion }}</span></h2>
-      <p>Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.</p>
-      <pre>
-        <code class="language-yaml hljs text-sm" tabindex="-1">{{ loadComponentParams(exampleComponent) | filterescapeltgt }}</code>
-      </pre>
-    </div>
     <div aria-hidden="true">
       {% call componentDetails({
         "summary": {
@@ -149,40 +144,6 @@ import componentTree %}
       <div class="pt-xl">
         <h3 id="{{ example.name |filterslugify }}" class="c-h3 group">{{ example.name | capitalize }} <a href="#{{ example.name |filterslugify }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h3>
         <p class="c-paragraph-base mb-0">{{ example.description | safe }}</p>
-        <div class="sr-only">
-          <h4>Ejemplo: "{{ example.name | capitalize }}", de código HTML, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
-          <p>Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/</p>
-          <p>Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/</p>
-          <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
-          <pre><code class="language-html hljs text-sm" data-desy-html-version="{{ '' | filterversion }}" tabindex="-1">
-              {{- getHTMLCodeFromExample(exampleComponent, example.data, 'component') -}}
-            </code>
-          </pre>
-        </div>
-        {% if example.data.caller %}
-          {% from "_macro.render-caller.njk" import renderCaller %}
-          {% set callerHtml %}{{ renderCaller(example.data.caller) }}{% endset %}
-          {% set callerNunjucks %}
-            {% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
-          {% raw %}{% {% endraw %}call component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }} {% endset %}
-          <div class="sr-only">
-            <h4>Ejemplo: "{{ example.name | capitalize }}", de código Nunjucks, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
-            <p>Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/</p>
-            <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
-            <pre><code class="language-js hljs text-sm" data-desy-html-version="{{ '' | filterversion }}" tabindex="-1">
-{{ callerNunjucks | safe }}({{ example.data | filtercaller | filterescapeltgt | dump(2) | safe }}){% raw %} %}{% endraw %}
-{{ callerHtml }}
-{% raw %}{%{% endraw %} endcall {% raw %} %}{% endraw %}</code></pre>
-
-          </div>
-        {% else %}
-          <div class="sr-only">
-            <h4>Ejemplo: "{{ example.name | capitalize }}", de código Nunjucks, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
-            <p>Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/</p>
-            <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
-            <pre><code class="language-njk hljs text-sm" data-desy-html-version="{{ '' | filterversion }}" tabindex="-1">{{- getNunjucksCodeFromExample(exampleComponent, example.data, 'component') | filterescapeltgt | safe -}}</code></pre>
-          </div>
-        {% endif %}
       </div>
       <div class="pt-base lg:pt-lg">
         <div class="p-base border border-neutral-base">
@@ -296,6 +257,9 @@ import componentTree %}
           {{ componentTooltip(example.data) }}
           {% elseif exampleComponent == "tree" %}
           {{ componentTree(example.data) }}
+          {% elseif exampleComponent == "treegrid" %}
+          {{ componentTreegrid(example.data) }}
+          {% else %}
 
           {% endif %}
         </div>

package/docs/componentes.html

@@ -176,6 +176,9 @@
     <div>
       <p class="c-paragraph-base"><a href="examples-tree.html" class="c-link">Tree</a></p>
     </div>
+    <div>
+      <p class="c-paragraph-base"><a href="examples-treegrid.html" class="c-link">Treegrid</a></p>
+    </div>
   </div>
   <div class="pb-2xl"></div>
 {% endblock %}

package/docs/ds/_ds.example.card.njk

@@ -94,14 +94,14 @@
 <div class="grid lg:grid-cols-3 gap-xl mb-lg">
   <div>
     {% call componentCard({
-      "containerClasses": "p-base border border-neutral-base rounded"
+      "containerClasses": "p-base border border-neutral-base rounded-sm"
     })  %}
       {{ defaultContent | safe }}
     {% endcall %}
   </div>
   <div>
     {% call componentCard({
-      "containerClasses": "p-base border border-neutral-base rounded"
+      "containerClasses": "p-base border border-neutral-base rounded-sm"
     })  %}
       {{ withIconContent | safe }}
     {% endcall %}

package/docs/ds/_ds.example.checkboxes.njk

@@ -225,7 +225,7 @@
           "value": "opcion-1",
           "text": "Opción 1",
           "conditional": {
-            "html": "<label class=\" block \" for=\"context-email-1\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email-1\" type=\"text\" id=\"context-email-1\">\n"
+            "html": "<label class=\" block \" for=\"context-email-1\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email-1\" type=\"text\" id=\"context-email-1\">\n"
           }
         },
         {
@@ -233,14 +233,14 @@
           "text": "Opción 2",
           "checked": true,
           "conditional": {
-            "html": "<label class=\" block \" for=\"contact-phone\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone-1\">\n"
+            "html": "<label class=\" block \" for=\"contact-phone\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone-1\">\n"
           }
         },
         {
           "value": "opcion-3",
           "text": "Opción 3",
           "conditional": {
-            "html": "<label class=\" block \" for=\"contact-text-message\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message-1\">\n"
+            "html": "<label class=\" block \" for=\"contact-text-message\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message-1\">\n"
           }
         }
       ]
@@ -263,7 +263,7 @@
           "value": "opcion-1",
           "text": "Opción 1",
           "conditional": {
-            "html": "<label class=\" block \" for=\"context-email-2\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email-2\" type=\"text\" id=\"context-email-2\">\n"
+            "html": "<label class=\" block \" for=\"context-email-2\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email-2\" type=\"text\" id=\"context-email-2\">\n"
           }
         },
         {
@@ -271,14 +271,14 @@
           "text": "Opción 2",
           "checked": true,
           "conditional": {
-            "html": "<label class=\" block \" for=\"contact-phone-2\">Label</label>\n<span id=\"contact-phone-2-error\" class=\" block font-semibold  text-alert-base \">Error: Mensaje de error</span>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  border-alert-base ring-2 ring-alert-base \" name=\"contact-phone-2\" type=\"text\" id=\"contact-phone-2\" aria-describedby=\"contact-phone-error\">\n"
+            "html": "<label class=\" block \" for=\"contact-phone-2\">Label</label>\n<span id=\"contact-phone-2-error\" class=\" block font-semibold  text-alert-base \">Error: Mensaje de error</span>\n<input class=\" mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  border-alert-base ring-2 ring-alert-base \" name=\"contact-phone-2\" type=\"text\" id=\"contact-phone-2\" aria-describedby=\"contact-phone-error\">\n"
           }
         },
         {
           "value": "opcion-3",
           "text": "Opción 3",
           "conditional": {
-            "html": "<label class=\" block \" for=\"contact-text-message-2\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message-2\" type=\"text\" id=\"contact-text-message-2\">\n"
+            "html": "<label class=\" block \" for=\"contact-text-message-2\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message-2\" type=\"text\" id=\"contact-text-message-2\">\n"
           }
         }
       ]

package/docs/ds/_ds.example.color-de-interaccion.njk

@@ -1,17 +1,17 @@
 <div class="grid grid-cols-6 gap-5 mb-sm">
-  <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-primary-base text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p>Primary</p></div></div>
   </div>
   <div class="flex col-span-3 lg:col-span-2">
     <div class="self-center text-sm"><p>Información</p></div>
   </div>
-  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-primary-light text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">primary-light</p><p>#d6eaf0</p></div></div>
   </div>
-  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-primary-base text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">primary-base</p><p>#00607a</p></div></div>
   </div>
-  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-primary-dark font-semibold text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">primary-dark</p><p>#00475C</p></div></div>
   </div>
 </div>

package/docs/ds/_ds.example.colores-cabecera.njk

@@ -1,5 +1,5 @@
 <div class="grid grid-cols-6 lg:grid-cols-8 gap-5 mb-sm">
-  <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-heading-base text-white"><div class="self-center text-center w-full"><p>Heading</p></div></div>
   </div>
   <div class="flex col-span-3 lg:col-span-2">
@@ -7,10 +7,10 @@
       <p>Color de fondo de cabecera</p>
     </div>
   </div>
-  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-heading-base text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">heading-base</p><p>#2d495f</p></div></div>
   </div>
-  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-heading-dark text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">heading-dark</p><p>#21384b</p></div></div>
   </div>
 </div>

package/docs/ds/_ds.example.colores-de-soporte.njk

@@ -1,5 +1,5 @@
 <div class="grid grid-cols-6 gap-5 mb-lg">
-    <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+    <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
       <div class="absolute flex inset-0 bg-warning-base text-black"><div class="self-center text-center w-full"><p>Warning</p></div></div>
     </div>
     <div class="flex col-span-3 lg:col-span-2">
@@ -9,18 +9,18 @@
         <p>En espera</p>
       </div>
     </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
       <div class="absolute flex inset-0 bg-warning-light text-black"><div class="self-center text-center w-full"><p class="mb-sm">warning-light</p><p>#fef6b2</p></div></div>
     </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
       <div class="absolute flex inset-0 bg-warning-base text-black"><div class="self-center text-center w-full"><p class="mb-sm">warning-base</p><p>#fdcb33</p></div></div>
     </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
       <div class="absolute flex inset-0 bg-warning-dark text-black"><div class="self-center text-center w-full"><p class="mb-sm">warning-dark</p><p>#b88e12</p></div></div>
     </div>
   </div>
   <div class="grid grid-cols-6 gap-5 mb-lg">
-    <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+    <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
       <div class="absolute flex inset-0 bg-success-base text-black"><div class="self-center text-center w-full"><p>Success</p></div></div>
     </div>
     <div class="flex col-span-3 lg:col-span-2">
@@ -30,18 +30,18 @@
         <p>Correcto</p>
       </div>
     </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
       <div class="absolute flex inset-0 bg-success-light text-black"><div class="self-center text-center w-full"><p class="mb-sm">success-light</p><p>#dcf8e2</p></div></div>
     </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
       <div class="absolute flex inset-0 bg-success-base text-black"><div class="self-center text-center w-full"><p class="mb-sm">success-base</p><p>#24d14c</p></div></div>
     </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
       <div class="absolute flex inset-0 bg-success-dark font-semibold text-black"><div class="self-center text-center w-full"><p class="mb-sm">success-dark</p><p>#1aa23a</p></div></div>
     </div>
   </div>
   <div class="grid grid-cols-6 gap-5 mb-lg">
-    <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+    <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
       <div class="absolute flex inset-0 bg-info-base text-black"><div class="self-center text-center w-full"><p>Info</p></div></div>
     </div>
     <div class="flex col-span-3 lg:col-span-2">
@@ -50,18 +50,18 @@
         <p>Información adicional</p>
       </div>
     </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
       <div class="absolute flex inset-0 bg-info-light text-black"><div class="self-center text-center w-full"><p class="mb-sm">info-light</p><p>#feebcc</p></div></div>
     </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
       <div class="absolute flex inset-0 bg-info-base text-black"><div class="self-center text-center w-full"><p class="mb-sm">info-base</p><p>#fa9902</p></div></div>
     </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
       <div class="absolute flex inset-0 bg-info-dark font-semibold text-black"><div class="self-center text-center w-full"><p class="mb-sm">info-dark</p><p>#c97a00</p></div></div>
     </div>
   </div>
 <div class="grid grid-cols-6 gap-5 mb-lg">
-  <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-alert-base text-white"><div class="self-center text-center w-full"><p>Alert</p></div></div>
   </div>
   <div class="flex col-span-3 lg:col-span-2">
@@ -71,13 +71,13 @@
       <p>Peligro</p>
     </div>
   </div>
-  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-alert-light text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">alert-light</p><p>#fbd3ce</p></div></div>
   </div>
-  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-alert-base text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">alert-base</p><p>#d22333</p></div></div>
   </div>
-  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-alert-dark font-semibold text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">alert-dark</p><p>#a40014</p></div></div>
   </div>
 </div>

package/docs/ds/_ds.example.colores-neutros.njk

@@ -1,5 +1,5 @@
 <div class="grid grid-cols-6 lg:grid-cols-8 gap-5 mb-sm">
-  <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-black text-white"><div class="self-center text-center w-full"><p>Black</p></div></div>
   </div>
   <div class="flex col-span-3 lg:col-span-2">
@@ -9,19 +9,19 @@
       <p>En espera</p>
     </div>
   </div>
-  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-neutral-lighter text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-lighter</p><p>#f6f6f5</p></div></div>
   </div>
-  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-neutral-light text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-light</p><p>#ededec</p></div></div>
   </div>
-  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-neutral-base text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-base</p><p>#92949B</p></div></div>
   </div>
-  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-neutral-dark text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-dark</p><p>#5e616b</p></div></div>
   </div>
-  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+  <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded-sm overflow-hidden">
     <div class="absolute flex inset-0 bg-black text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">black</p><p>#1f2331</p></div></div>
   </div>
 </div>

package/docs/ds/_ds.example.header-advanced.njk

@@ -47,17 +47,17 @@
             </span>
           </li>
           <li>
-            <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-2">
+            <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-2">
               Navigation item 2
             </a>
           </li>
           <li>
-            <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-3">
+            <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-3">
               Navigation item 3
             </a>
           </li>
           <li>
-            <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-3">
+            <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-3">
               Navigation item 4
             </a>
           </li>

package/docs/ds/_ds.example.header.njk

@@ -74,22 +74,22 @@
         <nav class=" text-sm " aria-label=" Mobile menu ">
           <ul>
             <li>
-              <a id="nav-item" href="/" class=" flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-warning focus:text-black ">
+              <a id="nav-item" href="/" class=" flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-warning focus:text-black ">
                 Navigation item 1
               </a>
             </li>
             <li>
-              <a id="nav-item-2" href="/" class=" flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-warning focus:text-black ">
+              <a id="nav-item-2" href="/" class=" flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-warning focus:text-black ">
                 Navigation item 2
               </a>
             </li>
             <li>
-              <a id="nav-item-3" href="/" class=" flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-warning focus:text-black ">
+              <a id="nav-item-3" href="/" class=" flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-warning focus:text-black ">
                 Navigation item 3
               </a>
             </li>
             <li>
-              <a id="nav-item-4" href="#" class=" flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-warning focus:text-black ">
+              <a id="nav-item-4" href="#" class=" flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-warning focus:text-black ">
                 Navigation item 4
               </a>
             </li>

package/docs/ds/_ds.example.links-list.njk

@@ -69,7 +69,7 @@
         {
           "href": "#",
           "text": "Item 2",
-          "containerClasses": "my-base px-base border border-neutral-base rounded",
+          "containerClasses": "my-base px-base border border-neutral-base rounded-sm",
           "icon": {
             "html": '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>'
           }

package/docs/ds/_ds.example.menu-vertical.njk

@@ -118,7 +118,7 @@
           "href": "#",
           "text": "Item 3",
           "sub": {
-            "html": "<p><a href=\"#\" class=\"hover:text-primary-base hover:underline focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none truncate \">Enlace externo</a></p>"
+            "html": "<p><a href=\"#\" class=\"hover:text-primary-base hover:underline focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-hidden truncate \">Enlace externo</a></p>"
           }
         }
       ],

package/docs/ds/_ds.example.menubar-en-uso.njk

@@ -40,7 +40,7 @@
               },
               {
                 "role": "none",
-                "html": '<span class="inline-block px-base py-sm text-neutral-dark focus:outline-none">Estados</span>'
+                "html": '<span class="inline-block px-base py-sm text-neutral-dark focus:outline-hidden">Estados</span>'
               },
               {
                 "role": "group",
@@ -77,7 +77,7 @@
               },
               {
                 "role": "none",
-                "html": '<span class="inline-block px-base py-sm text-neutral-dark focus:outline-none">Plazos (sólo aplican a convocatorias y procesos)</span>'
+                "html": '<span class="inline-block px-base py-sm text-neutral-dark focus:outline-hidden">Plazos (sólo aplican a convocatorias y procesos)</span>'
               },
               {
                 "role": "group",

package/docs/ds/_ds.example.radios.njk

@@ -267,7 +267,7 @@
           "value": "opcion-1",
           "text": "Opción 1",
           "conditional": {
-            "html": "<label class=\" block \" for=\"context-email\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email-1-radios\">\n"
+            "html": "<label class=\" block \" for=\"context-email\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email-1-radios\">\n"
           }
         },
         {
@@ -275,14 +275,14 @@
           "text": "Opción 2",
           "checked": true,
           "conditional": {
-            "html": "<label class=\" block \" for=\"contact-phone\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone-1-radios\">\n"
+            "html": "<label class=\" block \" for=\"contact-phone\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone-1-radios\">\n"
           }
         },
         {
           "value": "opcion-3",
           "text": "Opción 3",
           "conditional": {
-            "html": "<label class=\" block \" for=\"contact-text-message\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message-1-radios\">\n"
+            "html": "<label class=\" block \" for=\"contact-text-message\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message-1-radios\">\n"
           }
         }
       ]
@@ -305,7 +305,7 @@
           "value": "opcion-1",
           "text": "Opción 1",
           "conditional": {
-            "html": "<label class=\" block \" for=\"context-email\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email-2-radios\">\n"
+            "html": "<label class=\" block \" for=\"context-email\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email-2-radios\">\n"
           }
         },
         {
@@ -313,14 +313,14 @@
           "text": "Opción 2",
           "checked": true,
           "conditional": {
-            "html": "<label class=\" block \" for=\"contact-phone\">Label</label>\n<span id=\"contact-phone-error\" class=\" block font-semibold  text-alert-base \">Error: Mensaje de error</span>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  border-alert-base ring-2 ring-alert-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone-2-radios\" aria-describedby=\"contact-phone-error\">\n"
+            "html": "<label class=\" block \" for=\"contact-phone\">Label</label>\n<span id=\"contact-phone-error\" class=\" block font-semibold  text-alert-base \">Error: Mensaje de error</span>\n<input class=\" mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  border-alert-base ring-2 ring-alert-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone-2-radios\" aria-describedby=\"contact-phone-error\">\n"
           }
         },
         {
           "value": "opcion-3",
           "text": "Opción 3",
           "conditional": {
-            "html": "<label class=\" block \" for=\"contact-text-message\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message-2-radios\">\n"
+            "html": "<label class=\" block \" for=\"contact-text-message\">Label</label>\n<input class=\" mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message-2-radios\">\n"
           }
         }
       ]

package/docs/ds/_ds.example.tabs.njk

@@ -103,28 +103,28 @@
           "html": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 1</div><div class=\"self-center h-full text-primary-base\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"hidden lg:block self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg></div>",
           "panel": {
             "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>",
-            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
           }
         },
         {
           "html": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 2</div><div class=\"self-center h-full text-primary-base\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"hidden lg:block self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg></div>",
           "panel": {
             "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
-            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
           }
         },
         {
           "html": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 3</div><div class=\"self-center h-full text-primary-base\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"hidden lg:block self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg></div>",
           "panel": {
             "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
-            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
           }
         },
         {
           "html": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 4</div><div class=\"self-center h-full text-primary-base\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"hidden lg:block self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg></div>",
           "panel": {
             "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
-            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
           }
         }
       ],

package/docs/ds/_ds.example.textos.njk

@@ -8,7 +8,7 @@
 <p>Esto es un <a href="#" class="c-link c-link--alert">link</a> en una notificación de error</p>
 <p class="text-neutral-dark">Esto es un <a href="#" class="c-link c-link--neutral">enlace</a> en un texto secundario.</p>
 <p>Esto es un <a href="#" class="c-link c-link--no-underline">enlace</a> sin subrayado (sólo en hover).</p>
-<div class="col-span-2 lg:col-span-2 p-base border border-neutral-base rounded relative hover:bg-neutral-light">
+<div class="col-span-2 lg:col-span-2 p-base border border-neutral-base rounded-sm relative hover:bg-neutral-light">
   <p><a href="#" class="c-link c-link--full">Esto es un contenedor con enlace</a></p>
 </div>
 <p class="c-paragraph-lg">Párrafo destacados</p>