desy-html 7.1.2 → 7.2.0

package/docs/_global.foot.njk

@@ -6,13 +6,13 @@
   "classes": "lg:mt-48"
 })  }}
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-yaml.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-twig.min.js"></script>
+<script src="js/prism/prism.min.js"></script>
+<script src="js/prism/prism-toolbar.min.js"></script>
+<script src="js/prism/clipboard.min.js"></script>
+<script src="js/prism/prism-copy-to-clipboard.min.js"></script>
+<script src="js/prism/prism-normalize-whitespace.min.js"></script>
+<script src="js/prism/prism-yaml.min.js"></script>
+<script src="js/prism/prism-twig.min.js"></script>
 <script>
   // Optional
   Prism.plugins.NormalizeWhitespace.setDefaults({
@@ -29,8 +29,8 @@
 </script>
 
 
-<script src="https://unpkg.com/@popperjs/core@2.4.4/dist/umd/popper.min.js"></script>
-<script src="https://unpkg.com/tippy.js@6.2.6/dist/tippy-bundle.umd.min.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/_global.head.njk

@@ -263,7 +263,7 @@
       padding: 1.5rem;
       border-left: 0;
       border-radius: 4px;
-      background: #f3f5f6;
+      background: #f6f6f5;
       -webkit-box-shadow: 0 0 0 1px #dfdfdf;
       box-shadow: 0 0 0 1px #dfdfdf; }
 

package/docs/_macro.example-render.njk

@@ -1,3 +1,4 @@
+{% from "_macro.load-component-template.njk" import loadComponentTemplate %}
 
 {% from "components/accordion/_macro.accordion.njk"
 import componentAccordion %}
@@ -112,159 +113,188 @@ import componentTree %}
   {% set exampleComponent = data.data.exampleComponent %}
   {% set examples = data.data.examples %}
   {% set exampleParams = data.data.params %}
+
   <div>
-    <h1 class="c-h1 inline-block">{{ exampleComponent | capitalize }} examples</h1>
-    <button class="inline-block ml-sm text-sm text-primary-base font-normal hover:text-primary-dark underline cursor-pointer c-code-snippet__button mt-xl py-base">
-      <span class="c-code-snippet__show pointer-events-none">Mostrar</span><span class="c-code-snippet__hide pointer-events-none hidden">Ocultar</span> params
-    </button>
-    <div class="c-markup hidden">
-      <div class="py-base">
-        <h4 class="mb-sm font-bold">Params</h4>
-        {% from "_macro.load-component-params.njk" import loadComponentParams %}
-        {% set componentYaml %}{{ loadComponentParams(exampleComponent) }}{% endset %}
-        <pre><code class="language-yaml">{{ componentYaml | e }}</code></pre>
+    <h1 class="c-h1">{{ exampleComponent | capitalize }}</h1>
+    {% call componentDetails({
+      "summary": {
+        "html": "Mostrar parámetros",
+        "classes": "c-link text-sm"
+      }
+    })  %}
+      <div class="c-markup">
+        <div class="py-base">
+          <h2 class="mb-sm font-bold">Parámetros del componente</h2>
+          {% from "_macro.load-component-params.njk" import loadComponentParams %}
+          {% set componentYaml %}{{ loadComponentParams(exampleComponent) }}{% endset %}
+          <pre><code class="language-yaml text-sm">{{ componentYaml | e }}</code></pre>
+        </div>
       </div>
-    </div>
+    {% endcall %}
   </div>
   {% for example in examples %}
-    <h4 id="example-{{ exampleComponent }}-{{ loop.index }}" class="mt-base text-sm text-neutral-dark uppercase group">
-      <a href="#example-{{ exampleComponent }}-{{ loop.index }}" class="hover:text-primary-base" title="permalink">{{ example.name }}</a>
-    </h4>
-    <p class="mb-base text-sm text-neutral-dark">{{ example.description }}</p>
-    <div class="mt-xl  py-lg border-b border-neutral-base">
-      {% if exampleComponent == "accordion" %}
-      {{ componentAccordion(example.data) }}
-      {% elseif exampleComponent == "accordion-history" %}
-      {{ componentAccordionHistory(example.data) }}
-      {% elseif exampleComponent == "alert" %}
-      {% call componentAlert(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-      {% elseif exampleComponent == "breadcrumbs" %}
-      {{ componentBreadcrumbs(example.data) }}
-      {% elseif exampleComponent == "button" %}
-      {{ componentButton(example.data) }}
-      {% elseif exampleComponent == "button-loader" %}
-      {{ componentButtonLoader(example.data) }}
-      {% elseif exampleComponent == "card" %}
-      {% call componentCard(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-      {% elseif exampleComponent == "character-count" %}
-      {{ componentCharacterCount(example.data) }}
-      {% elseif exampleComponent == "checkboxes" %}
-      {{ componentCheckboxes(example.data) }}
-      {% elseif exampleComponent == "collapsible" %}
-      {{ componentCollapsible(example.data) }}
-      {% elseif exampleComponent == "dialog" %}
-      {% call componentDialog(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-      {% elseif exampleComponent == "date-input" %}
-      {{ componentDateInput(example.data) }}
-      {% elseif exampleComponent == "description-list" %}
-      {{ componentDescriptionList(example.data) }}
-      {% elseif exampleComponent == "details" %}
-      {% call componentDetails(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-      {% elseif exampleComponent == "dropdown" %}
-      {% call componentDropdown(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-      {% elseif exampleComponent == "error-message" %}
-      {{ componentErrorMessage(example.data) }}
-      {% elseif exampleComponent == "error-summary" %}
-      {{ componentErrorSummary(example.data) }}
-      {% elseif exampleComponent == "fieldset" %}
-      {% call componentFieldset(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-      {% elseif exampleComponent == "file-upload" %}
-      {{ componentFileUpload(example.data) }}
-      {% elseif exampleComponent == "footer" %}
-      {{ componentFooter(example.data) }}
-      {% elseif exampleComponent == "header" %}
-      {% call componentHeader(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-      {% elseif exampleComponent == "header-mini" %}
-      {{ componentHeaderMini(example.data) }}
-      {% elseif exampleComponent == "header-advanced" %}
-      {% call componentHeaderAdvanced(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-      {% elseif exampleComponent == "hint" %}
-      {{ componentHint(example.data) }}
-      {% elseif exampleComponent == "input" %}
-      {{ componentInput(example.data) }}
-      {% elseif exampleComponent == "input-group" %}
-      {{ componentInputGroup(example.data) }}
-      {% elseif exampleComponent == "item" %}
-      {% call componentItem(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-      {% elseif exampleComponent == "label" %}
-      {{ componentLabel(example.data) }}
-      {% elseif exampleComponent == "links-list" %}
-      {{ componentLinksList(example.data) }}
-      {% elseif exampleComponent == "listbox" %}
-      {% call componentListbox(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-      {% elseif exampleComponent == "media-object" %}
-      {% call componentMediaObject(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-      {% elseif exampleComponent == "menu-horizontal" %}
-      {{ componentMenuHorizontal(example.data) }}
-      {% elseif exampleComponent == "menu-navigation" %}
-      {{ componentMenuNavigation(example.data) }}
-      {% elseif exampleComponent == "menu-vertical" %}
-      {{ componentMenuVertical(example.data) }}
-      {% elseif exampleComponent == "menubar" %}
-      {{ componentMenubar(example.data) }}
-      {% elseif exampleComponent == "modal" %}
-      {% call componentModal(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-      {% elseif exampleComponent == "nav" %}
-      {{ componentNav(example.data) }}
-      {% elseif exampleComponent == "pagination" %}
-      {{ componentPagination(example.data) }}
-      {% elseif exampleComponent == "pill" %}
-      {{ componentPill(example.data) }}
-      {% elseif exampleComponent == "notification" %}
-      {{ componentNotification(example.data) }}
-      {% elseif exampleComponent == "radios" %}
-      {{ componentRadios(example.data) }}
-      {% elseif exampleComponent == "searchbar" %}
-      {{ componentSearchbar(example.data) }}
-      {% elseif exampleComponent == "select" %}
-      {{ componentSelect(example.data) }}
-      {% elseif exampleComponent == "spinner" %}
-      {{ componentSpinner(example.data) }}
-      {% elseif exampleComponent == "status" %}
-      {{ componentStatus(example.data) }}
-      {% elseif exampleComponent == "status-item" %}
-      {% call componentStatusItem(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-      {% elseif exampleComponent == "skip-link" %}
-      {{ componentSkipLink(example.data) }}
-      {% elseif exampleComponent == "table" %}
-      {{ componentTable(example.data) }}
-      {% elseif exampleComponent == "table-advanced" %}
-      {{ componentTableAdvanced(example.data) }}
-      {% elseif exampleComponent == "tabs" %}
-      {{ componentTabs(example.data) }}
-      {% elseif exampleComponent == "textarea" %}
-      {{ componentTextarea(example.data) }}
-      {% elseif exampleComponent == "toggle" %}
-      {{ componentToggle(example.data) }}
-      {% elseif exampleComponent == "tooltip" %}
-      {{ componentTooltip(example.data) }}
-      {% elseif exampleComponent == "tree" %}
-      {{ componentTree(example.data) }}
-      {% endif %}
-      <button class="block text-base text-primary-base font-normal hover:text-primary-dark underline cursor-pointer c-code-snippet__button mt-xl py-base">
-        <span class="c-code-snippet__show pointer-events-none">Mostrar</span><span class="c-code-snippet__hide pointer-events-none hidden">Ocultar</span> código
-      </button>
-      <div class="c-markup hidden">
-        <div class="py-base">
-          <h4 class="mb-sm font-bold">Macro</h4>
-          {% if example.data.caller %}
-            {% from "_macro.render-caller.njk" import renderCaller %}
-            {% set callerHtml %}{{ renderCaller(example.data.caller | safe) }}{% endset %}
-            <pre><code class="language-twig">{% raw %}{# {% endraw %}Remove the "caller" json parameter and use just the code between "call" and "endcall" instead{% raw %} #} {% endraw %}
-              {% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
-            {% raw %}{% {% endraw %}call component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}({{ example.data | dump(2) }}) {% raw %} %}{% endraw %}
-  {{ callerHtml | e }}{% raw %}{% {% endraw %}endcall{% raw %} %}{% endraw %}</code></pre>
-          {% else %}
-            <pre><code class="language-twig">{% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
-            {% raw %}{{ {% endraw %}component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}({{ example.data | dump(2) }}) {% raw %} }}{% endraw %}</code></pre>
+    <div class="grid grid-cols-1 gap-x-xl mt-xl">
+      <div class="pt-xl">
+        <h3 id="example-title-{{ loop.index }}" class="c-h3 group">{{ example.name | capitalize }} <a href="#{{ example.name | capitalize | urlencode }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h3>
+        <p class="c-paragraph-base mb-0">{{ example.description }}</p>
+      </div>
+      <div class="pt-base lg:pt-lg">
+        <div class="p-base border border-neutral-base">
+          {% if exampleComponent == "accordion" %}
+          {{ componentAccordion(example.data) }}
+          {% elseif exampleComponent == "accordion-history" %}
+          {{ componentAccordionHistory(example.data) }}
+          {% elseif exampleComponent == "alert" %}
+          {% call componentAlert(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "breadcrumbs" %}
+          {{ componentBreadcrumbs(example.data) }}
+          {% elseif exampleComponent == "button" %}
+          {{ componentButton(example.data) }}
+          {% elseif exampleComponent == "button-loader" %}
+          {{ componentButtonLoader(example.data) }}
+          {% elseif exampleComponent == "card" %}
+          {% call componentCard(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "character-count" %}
+          {{ componentCharacterCount(example.data) }}
+          {% elseif exampleComponent == "checkboxes" %}
+          {{ componentCheckboxes(example.data) }}
+          {% elseif exampleComponent == "collapsible" %}
+          {{ componentCollapsible(example.data) }}
+          {% elseif exampleComponent == "dialog" %}
+          {% call componentDialog(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "date-input" %}
+          {{ componentDateInput(example.data) }}
+          {% elseif exampleComponent == "description-list" %}
+          {{ componentDescriptionList(example.data) }}
+          {% elseif exampleComponent == "details" %}
+          {% call componentDetails(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "dropdown" %}
+          {% call componentDropdown(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "error-message" %}
+          {{ componentErrorMessage(example.data) }}
+          {% elseif exampleComponent == "error-summary" %}
+          {{ componentErrorSummary(example.data) }}
+          {% elseif exampleComponent == "fieldset" %}
+          {% call componentFieldset(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "file-upload" %}
+          {{ componentFileUpload(example.data) }}
+          {% elseif exampleComponent == "footer" %}
+          {{ componentFooter(example.data) }}
+          {% elseif exampleComponent == "header" %}
+          {% call componentHeader(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "header-mini" %}
+          {{ componentHeaderMini(example.data) }}
+          {% elseif exampleComponent == "header-advanced" %}
+          {% call componentHeaderAdvanced(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "hint" %}
+          {{ componentHint(example.data) }}
+          {% elseif exampleComponent == "input" %}
+          {{ componentInput(example.data) }}
+          {% elseif exampleComponent == "input-group" %}
+          {{ componentInputGroup(example.data) }}
+          {% elseif exampleComponent == "item" %}
+          {% call componentItem(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "label" %}
+          {{ componentLabel(example.data) }}
+          {% elseif exampleComponent == "links-list" %}
+          {{ componentLinksList(example.data) }}
+          {% elseif exampleComponent == "listbox" %}
+          {% call componentListbox(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "media-object" %}
+          {% call componentMediaObject(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "menu-horizontal" %}
+          {{ componentMenuHorizontal(example.data) }}
+          {% elseif exampleComponent == "menu-navigation" %}
+          {{ componentMenuNavigation(example.data) }}
+          {% elseif exampleComponent == "menu-vertical" %}
+          {{ componentMenuVertical(example.data) }}
+          {% elseif exampleComponent == "menubar" %}
+          {{ componentMenubar(example.data) }}
+          {% elseif exampleComponent == "modal" %}
+          {% call componentModal(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "nav" %}
+          {{ componentNav(example.data) }}
+          {% elseif exampleComponent == "pagination" %}
+          {{ componentPagination(example.data) }}
+          {% elseif exampleComponent == "pill" %}
+          {{ componentPill(example.data) }}
+          {% elseif exampleComponent == "notification" %}
+          {{ componentNotification(example.data) }}
+          {% elseif exampleComponent == "radios" %}
+          {{ componentRadios(example.data) }}
+          {% elseif exampleComponent == "searchbar" %}
+          {{ componentSearchbar(example.data) }}
+          {% elseif exampleComponent == "select" %}
+          {{ componentSelect(example.data) }}
+          {% elseif exampleComponent == "spinner" %}
+          {{ componentSpinner(example.data) }}
+          {% elseif exampleComponent == "status" %}
+          {{ componentStatus(example.data) }}
+          {% elseif exampleComponent == "status-item" %}
+          {% call componentStatusItem(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "skip-link" %}
+          {{ componentSkipLink(example.data) }}
+          {% elseif exampleComponent == "table" %}
+          {{ componentTable(example.data) }}
+          {% elseif exampleComponent == "table-advanced" %}
+          {{ componentTableAdvanced(example.data) }}
+          {% elseif exampleComponent == "tabs" %}
+          {{ componentTabs(example.data) }}
+          {% elseif exampleComponent == "textarea" %}
+          {{ componentTextarea(example.data) }}
+          {% elseif exampleComponent == "toggle" %}
+          {{ componentToggle(example.data) }}
+          {% elseif exampleComponent == "tooltip" %}
+          {{ componentTooltip(example.data) }}
+          {% elseif exampleComponent == "tree" %}
+          {{ componentTree(example.data) }}
           {% endif %}
         </div>
-        <div class="py-base">
-          <h4 class="mb-sm font-bold">Markup</h4>
-          {% from "_macro.load-component-template.njk" import loadComponentTemplate %}
-          {% set componentHtml %}{{ loadComponentTemplate(exampleComponent, example.data) }}{% endset %}
-          <pre><code class="language-html">{{ componentHtml | e }}</code></pre>
-        </div>
+      </div>
+      <div class="pt-base lg:pt-lg mb-base">
+          {% set nunjucksContent %}
+            {% if example.data.caller %}
+              {% from "_macro.render-caller.njk" import renderCaller %}
+              {% set callerHtml %}{{ renderCaller(example.data.caller | safe) }}{% endset %}
+              <pre><code class="language-twig text-sm">{% raw %}{# {% endraw %}Borra el parámetro "caller" y la coma de la línea precedente y usa sólamente el código entre el "call" y el "endcall"{% raw %} #} {% endraw %}
+                {% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
+              {% raw %}{% {% endraw %}call component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}({{ example.data | dump(2) }}) {% raw %} %}{% endraw %}
+{{ callerHtml | e }}{% raw %}{% {% endraw %}endcall{% raw %} %}{% endraw %}</code></pre>
+              {% else %}
+                <pre><code class="language-twig text-sm">{% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
+                {% raw %}{{ {% endraw %}component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}({{ example.data | dump(2) }}) {% raw %} }}{% endraw %}</code></pre>
+              {% endif %}
+          {% endset %}
+          {% set htmlContent %}
+            {% set componentHtml %}{{ loadComponentTemplate(exampleComponent, example.data) }}{% endset %}
+            <pre><code class="language-markup text-sm">{{ componentHtml | e }}</code></pre>
+          {% endset %}
+        {% call componentDetails({
+          "summary": {
+            "html": 'Mostrar código<span class="sr-only">del ejemplo: ' + example.name | capitalize + '</span>',
+            "classes": "c-link text-sm"
+          }
+        })  %}
+            {{ componentTabs({
+              "tablistAriaLabel": "Tab example",
+              "idPrefix": "tab-" + loop.index,
+              "classes": "c-tabs--scroll",
+              "items": [
+                {
+                  "text": "Nunjucks macro",
+                  "panel": {
+                    "html": nunjucksContent | trim | safe
+                  }
+                },
+                {
+                  "text": "HTML",
+                  "panel": {
+                    "html": htmlContent | trim | safe
+                  }
+                }
+              ]
+            })  }}
+        {% endcall %}
       </div>
     </div>
   {% endfor %}

package/docs/_macro.render-caller.njk

@@ -1,3 +1,3 @@
 {% macro renderCaller(params) %}
-  {{ params | safe }}
+  {{ params | safe | indent(4) }}
 {% endmacro %}

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

@@ -1,4 +1,4 @@
-<div class="grid grid-cols-4 gap-5 mb-sm">
+<div class="grid grid-cols-2 lg:grid-cols-4 gap-5 mb-sm">
   <div class="border-l border-black px-4">
     <p>black 1px</p>
     <p class="text-neutral-dark text-sm">Bordes de campos de texto <br>

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="absolute flex inset-0 bg-primary-base text-white"><div class="self-center text-center w-full">Primary</div></div>
+    <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">Información</div>
+    <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="absolute flex inset-0 bg-primary-light text-black"><div class="self-center text-center w-full">primary-light <br><br>#d6eaf0</div></div>
+    <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="absolute flex inset-0 bg-primary-base text-white"><div class="self-center text-center w-full">primary-base <br><br>#00607a</div></div>
+    <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="absolute flex inset-0 bg-primary-dark font-semibold text-white"><div class="self-center text-center w-full">primary-dark <br><br>#00475C</div></div>
+    <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,16 +1,16 @@
-<div class="grid grid-cols-8 gap-5 mb-sm">
-  <div class="col-span-4 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-    <div class="absolute flex inset-0 bg-heading-base text-white"><div class="self-center text-center w-full">Heading</div></div>
+<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="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-4 lg:col-span-2">
+  <div class="flex col-span-3 lg:col-span-2">
     <div class="self-center text-sm">
-      Color de fondo de cabecera
+      <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="absolute flex inset-0 bg-heading-base text-white"><div class="self-center text-center w-full">heading-base <br><br>#2d495f</div></div>
+    <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="absolute flex inset-0 bg-heading-dark text-white"><div class="self-center text-center w-full">heading-dark <br><br>#21384b</div></div>
+    <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,16 +1,83 @@
-<div class="grid grid-cols-6 gap-5 mb-sm">
+<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="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">
+      <div class="self-center text-sm">
+        <p>Focus</p>
+        <p>Aviso de precaución</p>
+        <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="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="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="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="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">
+      <div class="self-center text-sm">
+        <p>Confirmación</p>
+        <p>Publicado</p>
+        <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="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="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="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="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">
+      <div class="self-center text-sm">
+        <p>Aviso informativo</p>
+        <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="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="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="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="absolute flex inset-0 bg-alert-base text-white"><div class="self-center text-center w-full">Alert</div></div>
+    <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">
+    <div class="self-center text-sm">
+      <p>Alerta</p>
+      <p>Aviso de acción destructiva</p>
+      <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="absolute flex inset-0 bg-alert-light text-black"><div class="self-center text-center w-full">alert-light <br><br>#fbd3ce</div></div>
+    <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="absolute flex inset-0 bg-alert-base text-white"><div class="self-center text-center w-full">alert-base <br><br>#d22333</div></div>
+    <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="absolute flex inset-0 bg-alert-dark font-semibold text-white"><div class="self-center text-center w-full">alert-dark <br><br>#a40014</div></div>
+    <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,27 +1,27 @@
-<div class="grid grid-cols-8 gap-5 mb-sm">
-  <div class="col-span-4 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-    <div class="absolute flex inset-0 bg-black text-white"><div class="self-center text-center w-full">Black</div></div>
+<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="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-4 lg:col-span-2">
+  <div class="flex col-span-3 lg:col-span-2">
     <div class="self-center text-sm">
-      Focus <br>
-      Aviso de precaución <br>
-      En espera
+      <p>Focus</p>
+      <p>Aviso de precaución</p>
+      <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="absolute flex inset-0 bg-neutral-lighter text-black"><div class="self-center text-center w-full">neutral-lighter <br><br>#f6f6f5</div></div>
+    <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="absolute flex inset-0 bg-neutral-light text-black"><div class="self-center text-center w-full">neutral-light <br><br>#ededec</div></div>
+    <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="absolute flex inset-0 bg-neutral-base text-black"><div class="self-center text-center w-full">neutral-base <br><br>#92949B</div></div>
+    <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="absolute flex inset-0 bg-neutral-dark text-white"><div class="self-center text-center w-full">neutral-dark <br><br>#5e616b</div></div>
+    <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="absolute flex inset-0 bg-black text-white"><div class="self-center text-center w-full">black <br><br>#1f2331</div></div>
+    <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.layout.njk

@@ -2,8 +2,8 @@
     <div class="col-span-2 lg:col-span-4 bg-neutral-light h-12 flex items-center justify-center">100%</div>
     <div class="col-span-2 lg:col-span-2 bg-neutral-light h-12 flex items-center justify-center">50%</div>
     <div class="col-span-2 lg:col-span-2 bg-neutral-light h-12 flex items-center justify-center">50%</div>
-    <div class="col-span-2 lg:col-span-3 bg-blue-100 h-12 flex items-center justify-center">75%</div>
-    <div class="col-span-2 lg:col-span-1 bg-blue-100 h-12 flex items-center justify-center">25%</div>
+    <div class="col-span-2 lg:col-span-3 bg-primary-light h-12 flex items-center justify-center">75%</div>
+    <div class="col-span-2 lg:col-span-1 bg-primary-light h-12 flex items-center justify-center">25%</div>
     <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
     <div class="col-span-2 lg:col-span-3 bg-neutral-light h-12 flex items-center justify-center">75%</div>
     <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>