desy-html 4.1.3 → 5.0.1

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

@@ -66,6 +66,7 @@
       @apply bg-white;
       @apply opacity-50;
       @apply cursor-not-allowed;
+      @apply pointer-events-none;
     }
   }
 

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

@@ -28,7 +28,7 @@
         {% set subId = "sub-" + id %}
         <li class="relative" role="none">
           {% if item.sub %}
-            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %}" id="{{ id }}"
+            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--primary{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %} " id="{{ id }}"
               {%- if item.sub.html %} data-aria-controls="{{ subId }}"{% endif %}
               {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
               <span class="inline-flex self-center max-w-xs align-middle truncate">{{ item.html | safe if item.html else item.text }}</span>
@@ -61,7 +61,7 @@
                         {{ subitem.html | safe if subitem.html else subitem.text }}
                       </li>
                       {% elseif subitem.role == 'group' %}
-                        <li>
+                        <li role="none">
                           <ul role="group" id="{{ subId }}" data-option="{{ subId }}" {%- if subitem.ariaLabel %} aria-label="{{ subitem.ariaLabel }}"{% endif %}>
                             {% for subsubitem in subitem.items %}
                               {% if subsubitem %}

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

@@ -56,6 +56,14 @@ params:
     type: text
     required: true
     description: aria-label for parent items. Should be similar as item text or item html text content.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If disabled, the item will be disabled
+  - name: active
+    type: boolean
+    required: false
+    description: If active, the item will be with primary color
   - name: sub
     type: boolean
     required: false