desy-html 6.1.0 → 6.3.0

package/src/templates/components/header-mini/_template.header-mini.njk

@@ -1,10 +1,10 @@
 <!-- header-mini -->
 <div {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div  {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
-    <div class="bg-neutral-lighter border-b border-neutral-base">
+    <div class="bg-white border-b border-neutral-base">
       <div class="flex items-center px-base {% if params.hasContainer != false %}container mx-auto{% endif %}">
-        <a href="{{ params.homepageUrl | default('https://www.aragon.es/') }}" class="inline-block pt-2.5 pb-2 text-black focus:outline-none focus:shadow-outline-black" title="Ir a aragon.es">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="117" height="26" class="inline-block fill-current" aria-label="Gobierno de Aragón" role="img"><title>Ir a aragon.es</title><defs><clipPath id="b-logo-expanded"><path fill="gold" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="gold" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
+        <a href="{{ params.homepageUrl | default('https://www.aragon.es/') }}" class="inline-block pt-2.5 pb-2 text-black focus:outline-none focus:shadow-outline-black">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="117" height="26" class="inline-block fill-current" aria-label="Gobierno de Aragón. Ir a aragon.es" role="img"><defs><clipPath id="b-logo-expanded"><path fill="gold" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="gold" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
         </a>
         {{ params.customNavigationHtml | safe if params.customNavigationHtml }}
       </div>

package/src/templates/components/input/_styles.input.css

@@ -3,6 +3,13 @@
    ========================================================================== */
 
 @layer components {
+  .c-input--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
   .c-input--sm {
     @apply pl-2;
     @apply py-1;

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

@@ -184,6 +184,31 @@
       "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-6a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-6a t6">Eliminar</button></li><li><button id="b-6b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-6b t6">Editar</button></li></ul>'
     }
   },
+  {
+    "name": "with icon type document vertical aligned on top",
+    "description": "icon.containerClasses = self-start h-full mr-base",
+    "data": {
+      "title": {
+        "text": "Resolución de años anteriores",
+        "attributes": {
+          "id": "t3"
+        }
+      },
+      "content":{
+        "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+        proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      },
+      "icon": {
+        "type": "document",
+        "containerClasses": "self-start h-full mr-base"
+      },
+      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-3a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-3a t3">Eliminar</button></li><li><button id="b-3b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-3b t3">Editar</button></li></ul>'
+    }
+  },
   {
     "name": "draggable and with icon type document",
     "data": {

package/src/templates/components/item/_template.item.njk

@@ -12,7 +12,7 @@
   </div>
   {% endif %}
   {% if params.icon %}
-  <div class="self-center h-full mr-base">
+  <div class="{% if params.icon.containerClasses %}{{ params.icon.containerClasses }}{% else %}self-center h-full mr-base{% endif %}">
     {% if params.icon.html %}
     {{ params.icon.html | safe }}
     {% elseif params.icon.type == 'document' %}

package/src/templates/components/item/params.item.yaml

@@ -75,6 +75,10 @@ params:
     type: string
     required: false
     description: Predefined icon types are `document`, `link`, `clipboard`
+  - name: containerClasses
+    type: string
+    required: false
+    description: Classes applied to the parent div of icon. Useful to vertical align the icon.
 - name: isDraggable
   type: boolean
   required: false

package/src/templates/components/listbox/_styles.listbox.css

@@ -94,6 +94,13 @@
   }
 
 
+  .c-listbox--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
   .c-listbox--sm {
     @apply px-2;
     @apply py-1;
@@ -183,20 +190,21 @@
 
 
   .c-listbox--header {
-    @apply bg-black;
+    @apply bg-transparent;
     @apply border-none;
     @apply rounded-none;
     @apply shadow-none;
     @apply font-normal;
     @apply text-sm;
-    @apply text-white;
+    @apply text-black;
 
     &:hover:not(disabled),
     &.ds-hover:not(disabled) {
-      @apply bg-black;
+      @apply bg-transparent;
       @apply border-none;
       @apply shadow-none;
-      @apply text-white;
+      @apply text-black;
+      @apply underline;
     }
 
     &[disabled],

package/src/templates/components/menu-navigation/_styles.menu-navigation.css

@@ -95,6 +95,13 @@
   }
 
 
+  .c-menu-navigation__button--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
   .c-menu-navigation__button--sm {
     @apply px-2;
     @apply py-1;

package/src/templates/components/menu-navigation/_template.menu-navigation.njk

@@ -1,5 +1,5 @@
 {#- If an id 'prefix' is not passed, fall back to using the name attribute
-   instead. We need this for error messages and hints as well -#}
+   instead. -#}
 {% set idPrefix = params.idPrefix if params.idPrefix else "menu-nav-item" %}
 
 {#- fieldset is false by default -#}
@@ -31,13 +31,13 @@
         {% set subId = "sub-" + id %}
     <li class="relative">
       {% if item.href %}
-        <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-navigation__button {%- if item.disabled %} c-menu-navigation__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--primary{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-navigation__button {%- if item.disabled %} c-menu-navigation__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--primary{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} role="link" aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
           <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | safe if item.html else item.text }}</span>
         </a>
       {% else %}
         <button {%- if item.sub %} aria-expanded="true" aria-controls="{{ id }}-sub-list"{% endif %}
           {%- if id %} id="{{ id }}"{% endif %} class="c-menu-navigation__button {%- if item.disabled %} c-menu-navigation__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--primary{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-          <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | safe if item.html else item.text }}</span>
+          {% if item.active %}<span class="sr-only">Item activo: </span>{% endif %}<span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | safe if item.html else item.text }}</span>
           {# Indentation is intentional to output HTML nicely #}
           {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
         </button>

package/src/templates/components/menu-navigation/params.menu-navigation.yaml

@@ -28,11 +28,6 @@ params:
     type: string
     required: false
     description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
-  - name: hint
-    type: object
-    required: false
-    description: Provide hint to each nav item.
-    isComponent: true
   - name: expanded
     type: boolean
     required: false

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

@@ -1074,7 +1074,7 @@
           "href": "#"
         }
       ],
-      "classes": "bg-black"
+      "classes": "bg-neutral-lighter"
     }
   },
   {

package/src/templates/components/menubar/_styles.menubar.css

@@ -129,6 +129,13 @@
   }
 
 
+  .c-menubar__button--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
   .c-menubar__button--sm {
     @apply px-2;
     @apply py-1;
@@ -218,20 +225,21 @@
 
 
   .c-menubar__button--header {
-    @apply bg-black;
+    @apply bg-transparent;
     @apply border-none;
     @apply rounded-none;
     @apply shadow-none;
     @apply font-normal;
     @apply text-sm;
-    @apply text-white;
+    @apply text-black;
 
     &:hover:not(disabled),
     &.ds-hover:not(disabled) {
-      @apply bg-black;
+      @apply bg-transparent;
       @apply border-none;
       @apply shadow-none;
-      @apply text-white;
+      @apply text-black;
+      @apply underline;
     }
 
     &[disabled],

package/src/templates/components/notification/_template.notification.njk

@@ -1,13 +1,5 @@
 <!-- notification -->
-<div  x-data="{isOpen: true}"
-      x-show="isOpen"
-      x-transition:enter="transition ease-out duration-100 transform"
-      x-transition:enter-start="opacity-0 scale-y-95"
-      x-transition:enter-end="opacity-100 scale-y-100"
-      x-transition:leave="transition ease-in duration-75 transform"
-      x-transition:leave-start="opacity-100 scale-y-100"
-      x-transition:leave-end="opacity-0 scale-y-95"
-      id="{{ params.id }}" class="c-notification {%- if params.classes %} {{ params.classes }}{% elseif params.type=="success" %} c-notification--success{% elseif params.type=="alert" %} c-notification--alert{% elseif params.type=="info" %} c-notification--primary{% else %} c-notification--primary{% endif %}"
+<div id="{{ params.id }}" class="c-notification {%- if params.classes %} {{ params.classes }}{% elseif params.type=="success" %} c-notification--success{% elseif params.type=="alert" %} c-notification--alert{% elseif params.type=="info" %} c-notification--primary{% else %} c-notification--primary{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {% if params.icon or params.type %}
   <div class="h-full mr-base">
@@ -66,11 +58,11 @@
     </div>
     {% if params.isDismissible %}
       <div class="absolute top-0 right-0 p-sm">
-        <button @click="isOpen = false" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
+        <button class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
         </button>
       </div>
     {% endif %}
   </div>
 </div>
-<!-- /notification -->
+<!-- /notification -->

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

@@ -160,5 +160,65 @@
         "aria-label": "Paginación"
       }
     }
+  },
+  {
+    "name": "with itemsListbox",
+    "data": {
+      "id": "with-items-listbox",
+      "idPrefix": "with-items-listbox",
+      "totalItems": "64",
+      "itemsPerPage": "10",
+      "hasSelect": true,
+      "itemsListbox": {
+        "items": [
+          {
+            "text": "10",
+            "active": true
+          },
+          {
+            "text": "25"
+          },
+          {
+            "text": "50"
+          },
+          {
+            "text": "75"
+          },
+          {
+            "text": "100"
+          }
+        ]
+      },
+      "items": [
+        {
+          "href": "#",
+          "text": 1
+        },
+        {
+          "href": "#",
+          "text": 2,
+          "active": true
+        },
+        {
+          "href": "#",
+          "text": 3
+        },
+        {
+          "href": "#",
+          "text": 4
+        },
+        {
+          "href": "#",
+          "text": 5
+        },
+        {
+          "href": "#",
+          "text": 6
+        }
+      ],
+      "attributes": {
+        "aria-label": "Paginación"
+      }
+    }
   }
 ] %}

package/src/templates/components/pagination/_template.pagination.njk

@@ -1,6 +1,7 @@
 {% from "../button/_macro.button.njk" import componentButton %}
 {% from "components/listbox/_macro.listbox.njk" import componentListbox %}
 
+
 {#- If an id 'prefix' is not passed, fall back to using a default one
    instead -#}
 {% set idPrefix = params.idPrefix if params.idPrefix else "pagination-item" %}
@@ -75,7 +76,7 @@
 {% set nextSuffix %}
   {% if (((activePosition + 2) | int + 1)  * params.itemsPerPage | int) < ( params.totalItems | int ) %}<span class="sr-only">:&nbsp;Página {{ activePosition + 2 }} con los resultados del {{ (activePosition + 1) | int * params.itemsPerPage | int }} al {% if (((activePosition + 1) | int + 1)  * params.itemsPerPage | int) > ( params.totalItems | int ) %}{{ params.totalItems }}{% else %}{{ ((activePosition + 1) | int + 1)  * params.itemsPerPage | int }}{% endif %}</span>{% endif %}
 {% endset %}
-<div id="{{ params.id }}" class="lg:flex lg:flex-wrap lg:align-center{%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
+<div id="{{ params.id }}" class="lg:flex lg:flex-wrap lg:items-center lg:gap-base{%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
   {% if params.hasSelect %}
   <p class="w-full mb-xs text-sm text-neutral-dark">
     Selecciona una página para cargar datos
@@ -120,7 +121,20 @@
     </ul>
   </nav>
   {% endif %}
-  <p class="block lg:ml-auto text-sm text-neutral-dark">
+  {% if params.itemsListbox %}
+    <div class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
+      {{ componentListbox({
+        "id": "items-listbox-" + idPrefix,
+        "text": params.itemsPerPage,
+        "label": params.itemsListbox.label if params.itemsListbox.label else { "text": "Items por página: ", "classes": "inline-block align-middle mb-0" },
+        "doesChangeButtonText": true,
+        "classesContainer": "flex flex-wrap items-center gap-xs",
+        "classes": "c-listbox--sm c-listbox--transparent",
+        "items": params.itemsListbox.items
+      })  }}
+    </div>
+  {% endif %}
+  <p class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
      <span class="sr-only">Posición de paginación: </span>{{ activePosition | int * params.itemsPerPage | int }} - {{ (activePosition | int + 1)  * params.itemsPerPage | int }} de {{ params.totalItems }}
   </p>
 </div>

package/src/templates/components/pagination/params.pagination.yaml

@@ -39,6 +39,55 @@ params:
   type: string
   required: false
   description: Text for the previous button. Defaults to "Siguiente".
+- name: itemsListbox
+  type: object
+  required: false
+  description: Options for a listbox component to choose number of items per page.
+  - name: label
+    type: object
+    required: true
+    description: Label text or HTML by specifying value for either text or html keys.
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text for the button. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: If `text` is set, this is not required. HTML for the button. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the element that acts as label.
+  - name: items
+    type: array
+    required: true
+    description: Array of items objects.
+    params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use within each item. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: If `text` is set, this is not required. HTML to use within each item. If `html` is provided, the `text` argument will be ignored.
+    - name: id
+      type: string
+      required: false
+      description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
+    - name: active
+      type: boolean
+      required: false
+      description: If true, item will be active.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the item.
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the item.
 - name: items
   type: array
   required: true

package/src/templates/components/radios/_styles.radios.css

@@ -3,6 +3,13 @@
    ========================================================================== */
 
 @layer components {
+  .c-radios--base {
+    input[type="radio"] {
+      @apply w-6;
+      @apply h-6;
+    }
+  }
+
   .c-radios--sm {
     input[type="radio"] {
       @apply w-base !important;

package/src/templates/components/radios/_template.radios.njk

@@ -43,7 +43,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <div x-data="{ isChecked: {{ conditionalValue | dump }} }" class="c-radios {%- if params.classes %} {{ params.classes }}{% endif %}"
+  <div class="c-radios {%- if params.classes %} {{ params.classes }}{% endif %}"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
     {% for item in params.items %}
       {% if item %}
@@ -68,7 +68,7 @@
           <div>
             <div class="relative flex items-start py-base">
               <div class="flex items-center mx-sm">
-                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
+                <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
                 {{-" checked" if item.checked }}
                 {{-" disabled" if item.disabled }}
                 {%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
@@ -97,11 +97,7 @@
             </div>
           </div>
           {% if item.conditional.html %}
-          <div  x-show="isChecked.toString() == '{{ item.value }}'"
-                x-transition:enter="transition ease-out duration-100 transform"
-                x-transition:enter-start="opacity-0 scale-95"
-                x-transition:enter-end="opacity-100 scale-100"
-                class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="{{ conditionalId }}">
+          <div class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="{{ conditionalId }}">
             {{ item.conditional.html | safe }}
           </div>
           {% endif %}
@@ -129,4 +125,4 @@
   {{ innerHtml | trim | safe }}
 {% endif %}
 </div>
-<!-- /radios -->
+<!-- /radios -->

package/src/templates/components/select/_styles.select.css

@@ -31,6 +31,14 @@
   }
 
 
+  .c-select--base {
+    @apply pr-10;
+    @apply pl-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
   .c-select--sm {
     @apply pl-2;
     @apply py-1;

package/src/templates/components/table-advanced/_template.table-advanced.njk

@@ -84,10 +84,11 @@
                   "items": item.select.items,
                   "describedBy": idHeader,
                   "disabled": item.select.disabled,
-                  "classes": item.select.classes if item.select.classes else "c-select--sm w-full",
+                  "classes": item.select.classes if item.select.classes else "c-select--sm w-full mt-0",
                   "attributes": item.select.attributes
                 })  }}
               {% endif %}
+              {% if item.select and item.hasFilter %}<div class="pb-sm"></div>{% endif %}
               {% if item.hasFilter %}
                 {{ componentSearchbar({
                   "formGroup": {
@@ -114,14 +115,14 @@
       {% for row in params.rows %}
         {%- set idCheckbox = idPrefix + "-checkbox-" + loop.index0 -%}
         {% if row %}
-          <tr {%- if params.hasCheckboxes %} x-data="{ isChecked: false }" :class="{ 'bg-neutral-light': isChecked === true }"{% endif %} class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
+          <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
             {% if params.hasCheckboxes %}
               <td class="px-base py-sm {%- if params.checkboxesClasses %} {{ params.checkboxesClasses }}{% endif %}" tabindex="-1">
                 <div class="c-checkboxes c-checkboxes--sm">
                   <div>
                     <div class="relative flex items-start">
                       <div class="flex items-center mx-sm">
-                        <input x-model="isChecked" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="{{ idCheckbox }}" name="{{ idCheckbox }}" type="checkbox" value="table-checkbox">
+                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="{{ idCheckbox }}" name="{{ idCheckbox }}" type="checkbox" value="table-checkbox">
                       </div>
                       <div class="pt-0.5 leading-5">
                         <label class="sr-only block text-sm -mt-1" for="{{ idCheckbox }}">Selecciona fila {{ loop.index + 1 }}</label>
@@ -161,4 +162,4 @@
 {% else %}
   {{ innerHtml | trim | safe }}
 {% endif %}
-<!-- /table-advanced -->
+<!-- /table-advanced -->

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

@@ -135,6 +135,40 @@
       ]
     }
   },
+  {
+    "name": "with active item",
+    "data": {
+      "tablistAriaLabel": "Tab example",
+      "idPrefix": "tab-example-active",
+      "items": [
+        {
+          "text": "Tab 1",
+          "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>"
+          }
+        },
+        {
+          "text": "Tab 2",
+          "active": true,
+          "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>"
+          }
+        },
+        {
+          "text": "Tab 3",
+          "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>"
+          }
+        },
+        {
+          "text": "Tab 4",
+          "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>"
+          }
+        }
+      ]
+    }
+  },
   {
     "name": "with classes applied",
     "description": "Show code to display the classes applied in html",
@@ -233,4 +267,4 @@
       ]
     }
   }
-] %}
+] %}

package/src/templates/components/tabs/_styles.tabs.css

@@ -7,21 +7,4 @@
     @apply -mb-0.5;
   }
 
-
-  .c-tabs__link {
-    &[aria-selected="true"] {
-      @apply lg:bg-white;
-      @apply lg:border-neutral-base;
-      @apply lg:border-b-0;
-      @apply lg:rounded-t;
-      @apply no-underline;
-    }
-
-    &:focus span{
-      @apply bg-warning-base;
-      @apply shadow-outline-focus;
-      @apply text-black;
-      @apply outline-none;
-    }
-  }
 }

package/src/templates/components/tabs/_template.tabs.njk

@@ -23,12 +23,12 @@
       {% if item %}
         {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
         {% set tabPanelId = "tab-" + id %}
-          <button class="c-tabs__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
-          {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%}"
+          <button class="c-tabs__link group relative flex items-center py-sm lg:px-lg lg:py-base border text-black hover:text-primary-base underline truncate focus:outline-none border-transparent
+          {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%} {%- if item.active %} c-tabs__link--is-active{% endif %}"
             role="tab" aria-selected="{% if loop.index == 1 %}true{% else %}false{% endif %}" aria-controls="{{ tabPanelId }}" id="{{ id }}" {%- if loop.index > 1 or item.disabled %} tabindex="-1"{% endif %}
             {%- if item.disabled %} disabled="disabled" aria-disabled="true"{% endif -%}
             {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-            <span class="flex items-center pointer-events-none">
+            <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
               {{ item.html | safe if item.html else item.text }}
             </span>
           </button>
@@ -65,4 +65,4 @@
     {% endif %}
   {% endfor %}
 </div>
-<!-- /tabs -->
+<!-- /tabs -->