desy-html 16.0.4 → 17.0.0

package/docs/ds/_ds.section.forms.njk

@@ -1,68 +1,73 @@
-{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-
-<div class="container mx-auto">
-  {{ DSSectionTitle({
-    title: "Elementos de formulario"
-  }) }}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Inputs de texto"
-  }) }}
-  {% include "ds/_ds.example.input.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Textarea y Character count"
-  }) }}
-  {% include "ds/_ds.example.textarea.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Date input"
-  }) }}
-  {% include "ds/_ds.example.date-input.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "File upload"
-  }) }}
-  {% include "ds/_ds.example.file-upload.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Searchbar"
-  }) }}
-  {% include "ds/_ds.example.searchbar.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Select"
-  }) }}
-  {% include "ds/_ds.example.select.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Input group"
-  }) }}
-  {% include "ds/_ds.example.input-group.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Checkboxes"
-  }) }}
-  {% include "ds/_ds.example.checkboxes.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Radios"
-  }) }}
-  {% include "ds/_ds.example.radios.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Tree"
-  }) }}
-  {% include "ds/_ds.example.tree.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Listbox por defecto"
-  }) }}
-  {% include "ds/_ds.example.listbox-default.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Listbox variaciones"
-  }) }}
-  {% include "ds/_ds.example.listbox-variaciones.njk" %}
-</div>
+{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
+{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+
+<div class="container mx-auto">
+  {{ DSSectionTitle({
+    title: "Elementos de formulario"
+  }) }}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Inputs de texto"
+  }) }}
+  {% include "ds/_ds.example.input.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Textarea y Character count"
+  }) }}
+  {% include "ds/_ds.example.textarea.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Date input"
+  }) }}
+  {% include "ds/_ds.example.date-input.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "File upload"
+  }) }}
+  {% include "ds/_ds.example.file-upload.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Searchbar"
+  }) }}
+  {% include "ds/_ds.example.searchbar.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Select"
+  }) }}
+  {% include "ds/_ds.example.select.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Combobox"
+  }) }}
+  {% include "ds/_ds.example.combobox.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Input group"
+  }) }}
+  {% include "ds/_ds.example.input-group.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Checkboxes"
+  }) }}
+  {% include "ds/_ds.example.checkboxes.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Radios"
+  }) }}
+  {% include "ds/_ds.example.radios.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Tree"
+  }) }}
+  {% include "ds/_ds.example.tree.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Listbox por defecto"
+  }) }}
+  {% include "ds/_ds.example.listbox-default.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Listbox variaciones"
+  }) }}
+  {% include "ds/_ds.example.listbox-variaciones.njk" %}
+</div>

package/docs/ds/_ds.section.informacion.njk

@@ -1,13 +1,13 @@
-{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-
-<div class="container mx-auto">
-  {{ DSSectionTitle({
-    title: "Información"
-  }) }}
-  <div class="pb-xl"></div>
-    {{ DSSubsectionTitle({
-      title: "Cards"
-    }) }}
-  {% include "ds/_ds.example.card.njk" %}
+{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
+{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+
+<div class="container mx-auto">
+  {{ DSSectionTitle({
+    title: "Información"
+  }) }}
+  <div class="pb-xl"></div>
+    {{ DSSubsectionTitle({
+      title: "Cards"
+    }) }}
+  {% include "ds/_ds.example.card.njk" %}
 </div>

package/docs/ds/_ds.section.layout.njk

@@ -1,64 +1,64 @@
-{% from "_macro.component-example.njk" import componentExample %}
-{% from "_macro.show-html-from-file.njk" import showHtmlFromFile %}
-
-<!--  _ds.section.layout.njk -->
-
-<div class="container mx-auto">
-  {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-
-  <div class="pb-lg"></div>
-  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  {{ DSSubsectionTitle({
-    title: "Tamaño de pantalla"
-  }) }}
-  <p class="c-paragraph-base">Diseñamos para un tamaño de pantalla mínimo de <code>1024px</code> correspondiente a nuestro breakpoint <code>lg</code> con un contenedor centrado y de anchura máxima <code>1280px</code>, correspondiente a nuestras clases <code>container mx-auto px-base</code>.</p>
-  <p class="c-paragraph-base">Comienza diseñando para dispositivos móviles o pantallas pequeñas, resuelve su navegación con las opciones que te da el componente header y luego reposiciona los elementos para anchuras mayores. Tenemos configurados varios saltos de breakpoint, pero recomendamos usar sólo el breakpoint por defecto y el <code>lg</code>.</p>
-  <p class="c-paragraph-base">Breakpoints:</p>
-  <ul class="c-ul">
-    <li>(Sin prefijo): de <code>0px</code> para arriba (Recomendado)</li>
-    <li><code>sm</code>: <code>640px</code></li>
-    <li><code>md</code>: <code>768px</code></li>
-    <li><code>lg</code>: <code>1024px</code> (Recomendado)</li>
-    <li><code>xl</code>: <code>1280px</code></li>
-  </ul>
-  <p class="c-paragraph-base">Puedes añadir breakpoints extra para aprovechar más la anchura del viewport. Esto es útil para aplicaciones web basadas en tablas donde se necesite más anchura para que quepan más columnas en las tablas. Basta con añadir al archivo tailwind.config.js de tu proyecto alguna de estas líneas de código:</p>
-  <ul class="c-ul">
-    <li><code>2xl: '1536px',</code></li>
-    <li><code>3xl: '1900px',</code></li>
-  </ul>
-  <div class="pb-lg"></div>
-  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  {{ DSSubsectionTitle({
-    title: "Columnas"
-  }) }}
-  <p class="c-paragraph-base">Usamos un sistema basado en 4 columnas, con un espacio de <code>gap-lg</code> - <code>1.75rem</code> - <code>28px / 16px</code>. Utiliza las combinaciones reflejadas a continuación. Evita utilizar el layout a una columna (100%) para textos en pantallas de gran tamaño, afectaría negativamente a la legibilidad.</p>
-  <div class="pb-lg"></div>
-  <h3 class="c-h4">Pantallas grandes. Escritorio</h3>
-  {% call componentExample()  %}
-    {% include "ds/_ds.example.layout-sidebar.njk" %}
-  {% endcall %}
-  {{ showHtmlFromFile("ds/_ds.example.layout-sidebar.njk") }}
-  <div class="pb-xl"></div>
-  {% call componentExample()  %}
-    {% include "ds/_ds.example.layout-escritorio.njk" %}
-  {% endcall %}
-  {{ showHtmlFromFile("ds/_ds.example.layout-escritorio.njk") }}
-  <div class="pb-xl"></div>
-  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  <h3 class="c-h4">Pantallas pequeñas. Móvil</h3>
-  <div class="grid lg:grid-cols-2 gap-xl">
-    {% call componentExample()  %}
-      {% include "ds/_ds.example.layout-movil.njk" %}
-    {% endcall %}
-    <div class="col-span-1">
-      <div class="pb-base"></div>
-      <p>En móviles utilizamos solo 2 combinaciones:</p>
-      <ul>
-        <li>una columna (100%)</li>
-        <li>dos columnas (50% + 50%)</li>
-      </ul>
-      <div class="pb-lg"></div>
-    </div>
-  </div>
-  {{ showHtmlFromFile("ds/_ds.example.layout-movil.njk") }}
+{% from "_macro.component-example.njk" import componentExample %}
+{% from "_macro.show-html-from-file.njk" import showHtmlFromFile %}
+
+<!--  _ds.section.layout.njk -->
+
+<div class="container mx-auto">
+  {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
+
+  <div class="pb-lg"></div>
+  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+  {{ DSSubsectionTitle({
+    title: "Tamaño de pantalla"
+  }) }}
+  <p class="c-paragraph-base">Diseñamos para un tamaño de pantalla mínimo de <code>1024px</code> correspondiente a nuestro breakpoint <code>lg</code> con un contenedor centrado y de anchura máxima <code>1280px</code>, correspondiente a nuestras clases <code>container mx-auto px-base</code>.</p>
+  <p class="c-paragraph-base">Comienza diseñando para dispositivos móviles o pantallas pequeñas, resuelve su navegación con las opciones que te da el componente header y luego reposiciona los elementos para anchuras mayores. Tenemos configurados varios saltos de breakpoint, pero recomendamos usar sólo el breakpoint por defecto y el <code>lg</code>.</p>
+  <p class="c-paragraph-base">Breakpoints:</p>
+  <ul class="c-ul">
+    <li>(Sin prefijo): de <code>0px</code> para arriba (Recomendado)</li>
+    <li><code>sm</code>: <code>640px</code></li>
+    <li><code>md</code>: <code>768px</code></li>
+    <li><code>lg</code>: <code>1024px</code> (Recomendado)</li>
+    <li><code>xl</code>: <code>1280px</code></li>
+  </ul>
+  <p class="c-paragraph-base">Puedes añadir breakpoints extra para aprovechar más la anchura del viewport. Esto es útil para aplicaciones web basadas en tablas donde se necesite más anchura para que quepan más columnas en las tablas. Basta con añadir al archivo tailwind.config.js de tu proyecto alguna de estas líneas de código:</p>
+  <ul class="c-ul">
+    <li><code>2xl: '1536px',</code></li>
+    <li><code>3xl: '1900px',</code></li>
+  </ul>
+  <div class="pb-lg"></div>
+  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+  {{ DSSubsectionTitle({
+    title: "Columnas"
+  }) }}
+  <p class="c-paragraph-base">Usamos un sistema basado en 4 columnas, con un espacio de <code>gap-lg</code> - <code>1.75rem</code> - <code>28px / 16px</code>. Utiliza las combinaciones reflejadas a continuación. Evita utilizar el layout a una columna (100%) para textos en pantallas de gran tamaño, afectaría negativamente a la legibilidad.</p>
+  <div class="pb-lg"></div>
+  <h3 class="c-h4">Pantallas grandes. Escritorio</h3>
+  {% call componentExample()  %}
+    {% include "ds/_ds.example.layout-sidebar.njk" %}
+  {% endcall %}
+  {{ showHtmlFromFile("ds/_ds.example.layout-sidebar.njk") }}
+  <div class="pb-xl"></div>
+  {% call componentExample()  %}
+    {% include "ds/_ds.example.layout-escritorio.njk" %}
+  {% endcall %}
+  {{ showHtmlFromFile("ds/_ds.example.layout-escritorio.njk") }}
+  <div class="pb-xl"></div>
+  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+  <h3 class="c-h4">Pantallas pequeñas. Móvil</h3>
+  <div class="grid lg:grid-cols-2 gap-xl">
+    {% call componentExample()  %}
+      {% include "ds/_ds.example.layout-movil.njk" %}
+    {% endcall %}
+    <div class="col-span-1">
+      <div class="pb-base"></div>
+      <p>En móviles utilizamos solo 2 combinaciones:</p>
+      <ul>
+        <li>una columna (100%)</li>
+        <li>dos columnas (50% + 50%)</li>
+      </ul>
+      <div class="pb-lg"></div>
+    </div>
+  </div>
+  {{ showHtmlFromFile("ds/_ds.example.layout-movil.njk") }}
 </div>

package/docs/ds/_ds.section.menubar.njk

@@ -1,18 +1,18 @@
-{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-
-<div class="container mx-auto">
-  {{ DSSectionTitle({
-    title: "Menubar"
-  }) }}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Menubar variaciones"
-    }) }}
-  {% include "ds/_ds.example.menubar-variaciones.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Menubar en uso"
-    }) }}
-  {% include "ds/_ds.example.menubar-en-uso.njk" %}
-</div>
+{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
+{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+
+<div class="container mx-auto">
+  {{ DSSectionTitle({
+    title: "Menubar"
+  }) }}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Menubar variaciones"
+    }) }}
+  {% include "ds/_ds.example.menubar-variaciones.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Menubar en uso"
+    }) }}
+  {% include "ds/_ds.example.menubar-en-uso.njk" %}
+</div>

package/docs/ds/_ds.section.mostrar-ocultar.njk

@@ -1,33 +1,33 @@
-{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-
-<div class="container mx-auto">
-  {{ DSSectionTitle({
-    title: "Mostrar y ocultar"
-  }) }}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Acordeones"
-    }) }}
-  {% include "ds/_ds.example.accordion.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Collapsible"
-    }) }}
-  {% include "ds/_ds.example.collapsible.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Details"
-    }) }}
-  {% include "ds/_ds.example.details.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Toggle"
-    }) }}
-  {% include "ds/_ds.example.toggle.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Tabs"
-    }) }}
-  {% include "ds/_ds.example.tabs.njk" %}
-</div>
+{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
+{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+
+<div class="container mx-auto">
+  {{ DSSectionTitle({
+    title: "Mostrar y ocultar"
+  }) }}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Acordeones"
+    }) }}
+  {% include "ds/_ds.example.accordion.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Collapsible"
+    }) }}
+  {% include "ds/_ds.example.collapsible.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Details"
+    }) }}
+  {% include "ds/_ds.example.details.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Toggle"
+    }) }}
+  {% include "ds/_ds.example.toggle.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Tabs"
+    }) }}
+  {% include "ds/_ds.example.tabs.njk" %}
+</div>

package/docs/ds/_ds.section.navigation.njk

@@ -1,57 +1,57 @@
-{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-
-<div class="container mx-auto">
-  {{ DSSectionTitle({
-    title: "Navegación"
-  }) }}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Cabecera de página para sitios web o portales"
-  }) }}
-  {% include "ds/_ds.example.header-advanced.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Cabecera de página para apps"
-  }) }}
-  {% include "ds/_ds.example.header.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Migas de pan"
-  }) }}
-  {% include "ds/_ds.example.breadcrumbs.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Nav"
-  }) }}
-  {% include "ds/_ds.example.nav.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Menu horizontal"
-  }) }}
-  {% include "ds/_ds.example.menu-horizontal.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Menu de navegación"
-  }) }}
-  {% include "ds/_ds.example.menu-navigation.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Menu vertical"
-  }) }}
-  {% include "ds/_ds.example.menu-vertical.njk" %}
-   {{ DSSubsectionTitle({
-    title: "Links list"
-  }) }}
-  {% include "ds/_ds.example.links-list.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Paginación"
-  }) }}
-  {% include "ds/_ds.example.pagination.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Pie de página"
-  }) }}
-  {% include "ds/_ds.example.footer.njk" %}
-</div>
+{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
+{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+
+<div class="container mx-auto">
+  {{ DSSectionTitle({
+    title: "Navegación"
+  }) }}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Cabecera de página para sitios web o portales"
+  }) }}
+  {% include "ds/_ds.example.header-advanced.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Cabecera de página para apps"
+  }) }}
+  {% include "ds/_ds.example.header.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Migas de pan"
+  }) }}
+  {% include "ds/_ds.example.breadcrumbs.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Nav"
+  }) }}
+  {% include "ds/_ds.example.nav.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Menu horizontal"
+  }) }}
+  {% include "ds/_ds.example.menu-horizontal.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Menu de navegación"
+  }) }}
+  {% include "ds/_ds.example.menu-navigation.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Menu vertical"
+  }) }}
+  {% include "ds/_ds.example.menu-vertical.njk" %}
+   {{ DSSubsectionTitle({
+    title: "Links list"
+  }) }}
+  {% include "ds/_ds.example.links-list.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Paginación"
+  }) }}
+  {% include "ds/_ds.example.pagination.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Pie de página"
+  }) }}
+  {% include "ds/_ds.example.footer.njk" %}
+</div>