desy-html 12.1.0 → 13.0.0

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

@@ -1,3 +1,3 @@
-{% macro componentMenuNavigation(params) %}
-{% include "./_template.menu-navigation.njk" %}
-{% endmacro %}
+{% macro componentMenuNavigation(params) %}
+{% include "./_template.menu-navigation.njk" %}
+{% endmacro %}

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

@@ -1,236 +1,236 @@
-/* ==========================================================================
-   _styles.menu-navigation.css
-   ========================================================================== */
-
-@layer components {
-  .c-menu-navigation--last-right {
-    &>ul li:last-of-type {
-      @apply ml-auto;
-
-      .c-menu-navigation__sub {
-        @apply left-auto;
-        @apply right-0;
-      }
-
-      .c-menu-navigation__tooltip {
-        @apply left-auto;
-        @apply right-0;
-      }
-    }
-  }
-
-
-  .c-menu-navigation__button {
-    @apply inline-flex;
-    @apply items-baseline;
-    @apply px-3;
-    @apply py-2;
-    @apply bg-white;
-    @apply border;
-    @apply border-primary-base;
-    @apply rounded;
-    @apply align-baseline;
-    @apply font-semibold;
-    @apply text-primary-base;
-    @apply transition-all;
-    @apply duration-100;
-    @apply ease-out;
-    @apply whitespace-nowrap;
-    @apply cursor-pointer;
-
-    @apply focus:bg-warning-base;
-    @apply focus:border-warning-base;
-    @apply focus:shadow-outline-black;
-    @apply focus:text-black;
-    @apply focus:outline-none;
-
-    &:hover:not(disabled),
-    &:active:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply bg-neutral-light;
-      @apply border-primary-base;
-      @apply text-primary-base;
-    }
-
-    &:active:not(disabled),
-    &.ds-active:not(disabled) {
-      @apply relative;
-      @apply top-px;
-    }
-
-    &.ds-focus {
-      @apply bg-warning-base;
-      @apply border-warning-base;
-      @apply shadow-outline-black;
-      @apply text-black;
-      @apply outline-none;
-    }
-
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-menu-navigation__button--disabled,
-    &.c-menu-navigation__button--disabled:hover,
-    &.c-menu-navigation__button--disabled:focus {
-      @apply bg-white;
-      @apply opacity-50;
-      @apply cursor-not-allowed;
-      @apply pointer-events-none;
-    }
-
-    &[aria-expanded="true"] + .c-menu-navigation__sub {
-      @apply z-40;
-    }
-  }
-
-
-  .c-menu-navigation__tooltip {
-    @apply hidden;
-    @apply absolute;
-    @apply top-0;
-    @apply left-0;
-
-    &:focus,
-    &.ds-focus {
-      @apply bg-primary-base;
-      @apply text-white;
-      @apply outline-none;
-    }
-  }
-
-
-  .c-menu-navigation__button--base {
-    @apply px-3;
-    @apply py-2;
-    @apply text-base;
-  }
-
-
-  .c-menu-navigation__button--lg {
-    @apply px-4;
-    @apply py-3;
-    @apply text-lg;
-  }
-
-
-  .c-menu-navigation__button--sm {
-    @apply px-2;
-    @apply py-1;
-    @apply text-sm;
-  }
-
-
-  .c-menu-navigation__button--primary {
-    @apply bg-primary-base;
-    @apply text-white;
-    @apply shadow-solid-primary-dark;
-
-    &:hover:not(disabled),
-    &:active:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply bg-primary-dark;
-      @apply border-primary-dark;
-      @apply text-white;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-menu-navigation__button--disabled,
-    &.c-menu-navigation__button--disabled:hover,
-    &.c-menu-navigation__button--disabled:focus {
-      @apply bg-primary-base;
-    }
-  }
-
-
-  .c-menu-navigation__button--has-selection {
-    @apply bg-primary-light;
-    @apply text-primary-dark;
-    @apply border-primary-base;
-    @apply shadow-none;
-    @apply font-bold;
-
-    &:hover:not(disabled),
-    &:active:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply bg-primary-light;
-      @apply text-black;
-      @apply bg-opacity-50;
-    }
-
-    &:active:not(disabled),
-    &.ds-active:not(disabled) {
-      @apply shadow-none;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-menu-navigation__button--disabled,
-    &.c-menu-navigation__button--disabled:hover,
-    &.c-menu-navigation__button--disabled:focus {
-      @apply bg-primary-light;
-    }
-  }
-
-
-  .c-menu-navigation__button--transparent {
-    @apply bg-transparent;
-    @apply border-transparent;
-    @apply shadow-none;
-    @apply underline;
-
-    &:hover:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply text-primary-dark;
-      @apply border-neutral-base;
-      @apply shadow-none;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-menu-navigation__button--disabled,
-    &.c-menu-navigation__button--disabled:hover,
-    &.c-menu-navigation__button--disabled:focus {
-      @apply bg-transparent;
-      @apply border-transparent;
-      @apply no-underline;
-    }
-  }
-
-
-  .c-menu-navigation__button--header {
-    @apply bg-transparent;
-    @apply border-none;
-    @apply rounded-none;
-    @apply shadow-none;
-    @apply font-normal;
-    @apply text-sm;
-    @apply text-black;
-
-    &:hover:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply bg-transparent;
-      @apply border-none;
-      @apply shadow-none;
-      @apply text-black;
-      @apply underline;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-menu-navigation__button--disabled,
-    &.c-menu-navigation__button--disabled:hover,
-    &.c-menu-navigation__button--disabled:focus {
-      @apply bg-transparent;
-    }
-
-    &.c-menu-navigation__button--has-selection {
-      @apply font-bold;
-    }
-  }
+/* ==========================================================================
+   _styles.menu-navigation.css
+   ========================================================================== */
+
+@layer components {
+  .c-menu-navigation--last-right {
+    &>ul li:last-of-type {
+      @apply ml-auto;
+
+      .c-menu-navigation__sub {
+        @apply left-auto;
+        @apply right-0;
+      }
+
+      .c-menu-navigation__tooltip {
+        @apply left-auto;
+        @apply right-0;
+      }
+    }
+  }
+
+
+  .c-menu-navigation__button {
+    @apply inline-flex;
+    @apply items-baseline;
+    @apply px-3;
+    @apply py-2;
+    @apply bg-white;
+    @apply border;
+    @apply border-primary-base;
+    @apply rounded;
+    @apply align-baseline;
+    @apply font-semibold;
+    @apply text-primary-base;
+    @apply transition-all;
+    @apply duration-100;
+    @apply ease-out;
+    @apply whitespace-nowrap;
+    @apply cursor-pointer;
+
+    @apply focus:bg-warning-base;
+    @apply focus:border-warning-base;
+    @apply focus:shadow-outline-black;
+    @apply focus:text-black;
+    @apply focus:outline-none;
+
+    &:hover:not(disabled),
+    &:active:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-neutral-light;
+      @apply border-primary-base;
+      @apply text-primary-base;
+    }
+
+    &:active:not(disabled),
+    &.ds-active:not(disabled) {
+      @apply relative;
+      @apply top-px;
+    }
+
+    &.ds-focus {
+      @apply bg-warning-base;
+      @apply border-warning-base;
+      @apply shadow-outline-black;
+      @apply text-black;
+      @apply outline-none;
+    }
+
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-menu-navigation__button--disabled,
+    &.c-menu-navigation__button--disabled:hover,
+    &.c-menu-navigation__button--disabled:focus {
+      @apply bg-white;
+      @apply opacity-50;
+      @apply cursor-not-allowed;
+      @apply pointer-events-none;
+    }
+
+    &[aria-expanded="true"] + .c-menu-navigation__sub {
+      @apply z-40;
+    }
+  }
+
+
+  .c-menu-navigation__tooltip {
+    @apply hidden;
+    @apply absolute;
+    @apply top-0;
+    @apply left-0;
+
+    &:focus,
+    &.ds-focus {
+      @apply bg-primary-base;
+      @apply text-white;
+      @apply outline-none;
+    }
+  }
+
+
+  .c-menu-navigation__button--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
+  .c-menu-navigation__button--lg {
+    @apply px-4;
+    @apply py-3;
+    @apply text-lg;
+  }
+
+
+  .c-menu-navigation__button--sm {
+    @apply px-2;
+    @apply py-1;
+    @apply text-sm;
+  }
+
+
+  .c-menu-navigation__button--primary {
+    @apply bg-primary-base;
+    @apply text-white;
+    @apply shadow-solid-primary-dark;
+
+    &:hover:not(disabled),
+    &:active:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-primary-dark;
+      @apply border-primary-dark;
+      @apply text-white;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-menu-navigation__button--disabled,
+    &.c-menu-navigation__button--disabled:hover,
+    &.c-menu-navigation__button--disabled:focus {
+      @apply bg-primary-base;
+    }
+  }
+
+
+  .c-menu-navigation__button--has-selection {
+    @apply bg-primary-light;
+    @apply text-primary-dark;
+    @apply border-primary-base;
+    @apply shadow-none;
+    @apply font-bold;
+
+    &:hover:not(disabled),
+    &:active:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-primary-light;
+      @apply text-black;
+      @apply bg-opacity-50;
+    }
+
+    &:active:not(disabled),
+    &.ds-active:not(disabled) {
+      @apply shadow-none;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-menu-navigation__button--disabled,
+    &.c-menu-navigation__button--disabled:hover,
+    &.c-menu-navigation__button--disabled:focus {
+      @apply bg-primary-light;
+    }
+  }
+
+
+  .c-menu-navigation__button--transparent {
+    @apply bg-transparent;
+    @apply border-transparent;
+    @apply shadow-none;
+    @apply underline;
+
+    &:hover:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply text-primary-dark;
+      @apply border-neutral-base;
+      @apply shadow-none;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-menu-navigation__button--disabled,
+    &.c-menu-navigation__button--disabled:hover,
+    &.c-menu-navigation__button--disabled:focus {
+      @apply bg-transparent;
+      @apply border-transparent;
+      @apply no-underline;
+    }
+  }
+
+
+  .c-menu-navigation__button--header {
+    @apply bg-transparent;
+    @apply border-none;
+    @apply rounded-none;
+    @apply shadow-none;
+    @apply font-normal;
+    @apply text-sm;
+    @apply text-black;
+
+    &:hover:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-transparent;
+      @apply border-none;
+      @apply shadow-none;
+      @apply text-black;
+      @apply underline;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-menu-navigation__button--disabled,
+    &.c-menu-navigation__button--disabled:hover,
+    &.c-menu-navigation__button--disabled:focus {
+      @apply bg-transparent;
+    }
+
+    &.c-menu-navigation__button--has-selection {
+      @apply font-bold;
+    }
+  }
 }

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

@@ -1,89 +1,87 @@
-{#- If an id 'prefix' is not passed, fall back to using the name attribute
-   instead. -#}
-{% set idPrefix = params.idPrefix if params.idPrefix else "menu-nav-item" %}
-
-{#- fieldset is false by default -#}
-{% set hasFieldset = true if params.fieldset else false %}
-
-{% set iconHtml %}
-  {#- The SVG needs `focusable="false"` so that Internet Explorer does not
-  treat it as an interactive element - without this it will be
-  'focusable' when using the keyboard to navigate. #}
-  <svg class="inline-block -mr-2  align-middle -my-px pointer-events-none" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
-{% endset %}
-
-{#- Capture the HTML so we can optionally nest it in a fieldset -#}
-{% set innerHtml %}
-  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
-    {% for item in params.items %}
-      {% if item %}
-        {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
-        {%- if item.id -%}
-          {%- set id = item.id -%}
-        {%- else -%}
-          {%- set id = idPrefix + "-" + loop.index -%}
-        {%- endif -%}
-        {% 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 %} 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 | filterquotes | safe if item.html else item.text }}</span>
-      </a>
-      {% else %}
-      <button {%- if item.sub %} aria-expanded="true" aria-haspopup="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 -%}>{% 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 | filterquotes | safe if item.html else item.text }}</span>
-        {# Indentation is intentional to output HTML nicely #}
-        {{- iconHtml | safe | trim if iconHtml -}}
-      </button>
-      {% endif %}
-      {% if item.sub.items %}
-      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
-        <ul id="{{ id }}-sub-list" class="c-menu-navigation__sub--list {% if item.sub.classes %}{{ item.sub.classes }}{% else-%} c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm{% endif %}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        {% for subitem in item.sub.items %}
-          {% if subitem %}
-            {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
-            {%- if subitem.id -%}
-              {%- set subId = subitem.id -%}
-            {%- else -%}
-              {%- set subId = "sub-" + id + "-" + loop.index -%}
-            {%- endif %}
-            {% set commonSubItemAttributes %}{% if subId %} id="{{ subId }}"{% else %} id="subitem-{{ loop.index }}"{% endif %} {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
-          <li>
-            <a {%- if subitem.active %} aria-current="page"{% endif %} href="{{ subitem.href }}" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if subitem.classes %} {{ subitem.classes }}{% endif -%} {%- if subitem.disabled %} pointer-events-none{% endif -%}" {%- if subitem.disabled %} tabindex="-1"{% endif -%} {%- if subitem.target %} target="{{ subitem.target }}"{% endif %} {{- commonSubItemAttributes | safe }}>
-              {{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}
-              {% if subitem.disabled %}
-              <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle flex-initial ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
-              {% endif %}
-            </a>
-          </li>
-          {% if subitem.divider %}
-          <li class="my-sm border-b border-neutral-base">
-            <div class="sr-only">Separador</div>
-          </li>
-          {% endif %}
-          {% endif %}
-          {% endfor %}
-        </ul>
-      </div>
-      {% endif %}
-    </li>
-    {% if item.divider %}
-    <li {%- if item.divider.classes %} class="{{ item.divider.classes }}"{% endif %} role="presentation" aria-hidden="true">
-      {% if item.divider.html %}
-      {{ item.divider.html | filterquotes | safe }}
-      {% else %}
-      {{ item.divider.text }}
-      {% endif %}
-    </li>
-    {% endif %}
-    {% endif %}
-    {% endfor %}
-  </ul>
-{% endset -%}
-
-<!-- menu-navigation -->
-<nav data-module="c-menu-navigation" {%- if params.classes %} class="{{ params.classes }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-  {{ innerHtml | trim | safe }}
-</nav>
-<!-- /menu-navigation -->
+{#- If an id 'prefix' is not passed, fall back to using the name attribute
+   instead. -#}
+{% set idPrefix = params.idPrefix if params.idPrefix else "menu-nav-item" %}
+
+{#- fieldset is false by default -#}
+{% set hasFieldset = true if params.fieldset else false %}
+
+{% set iconHtml %}
+  {#- The SVG needs `focusable="false"` so that Internet Explorer does not
+  treat it as an interactive element - without this it will be
+  'focusable' when using the keyboard to navigate. #}
+  <svg class="inline-block -mr-2  align-middle -my-px pointer-events-none" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
+{% endset %}
+
+{#- Capture the HTML so we can optionally nest it in a fieldset -#}
+{% set innerHtml %}
+  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
+    {% for item in params.items %}
+      {% if item %}
+        {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+        {%- if item.id -%}
+          {%- set id = item.id -%}
+        {%- else -%}
+          {%- set id = idPrefix + "-" + loop.index -%}
+        {%- endif -%}
+        {% 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 %} 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 align-middle pointer-events-none">{{ item.html | filterquotes | safe if item.html else item.text }}</span>
+      </a>
+      {% else %}
+      <button {%- if item.sub %} aria-expanded="true" aria-haspopup="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 -%}>{% if item.active %}<span class="sr-only">Item activo: </span>{% endif %}<span class="inline-flex self-center align-middle pointer-events-none">{{ item.html | filterquotes | safe if item.html else item.text }}</span>
+        {# Indentation is intentional to output HTML nicely #}
+        {{- iconHtml | safe | trim if iconHtml -}}
+      </button>
+      {% endif %}
+      {% if item.sub.items %}
+      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
+        <ul id="{{ id }}-sub-list" class="c-menu-navigation__sub--list {% if item.sub.classes %}{{ item.sub.classes }}{% else-%} c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm{% endif %}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        {% for subitem in item.sub.items %}
+          {% if subitem %}
+            {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+            {%- if subitem.id -%}
+              {%- set subId = subitem.id -%}
+            {%- else -%}
+              {%- set subId = "sub-" + id + "-" + loop.index -%}
+            {%- endif %}
+            {% set commonSubItemAttributes %}{% if subId %} id="{{ subId }}"{% else %} id="subitem-{{ loop.index }}"{% endif %} {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
+          <li>
+            <a {%- if subitem.active %} aria-current="page"{% endif %} href="{{ subitem.href }}" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if subitem.classes %} {{ subitem.classes }}{% endif -%} {%- if subitem.disabled %} pointer-events-none{% endif -%}" {%- if subitem.disabled %} tabindex="-1"{% endif -%} {%- if subitem.target %} target="{{ subitem.target }}"{% endif %} {{- commonSubItemAttributes | safe }}>
+              {{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}
+              {% if subitem.disabled %}
+              <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle flex-initial ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
+              {% endif %}
+            </a>
+          </li>
+          {% if subitem.divider %}
+          <li role="presentation" aria-hidden="true" class="my-sm border-b border-neutral-base"></li>
+          {% endif %}
+          {% endif %}
+          {% endfor %}
+        </ul>
+      </div>
+      {% endif %}
+    </li>
+    {% if item.divider %}
+    <li {%- if item.divider.classes %} class="{{ item.divider.classes }}"{% endif %} role="presentation" aria-hidden="true">
+      {% if item.divider.html %}
+      {{ item.divider.html | filterquotes | safe }}
+      {% else %}
+      {{ item.divider.text }}
+      {% endif %}
+    </li>
+    {% endif %}
+    {% endif %}
+    {% endfor %}
+  </ul>
+{% endset -%}
+
+<!-- menu-navigation -->
+<nav data-module="c-menu-navigation" {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {{ innerHtml | trim | safe }}
+</nav>
+<!-- /menu-navigation -->