hr-design-system-handlebars 0.56.5 → 0.56.8

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.56.8 (Thu Sep 01 2022)
+
+#### 🐛 Bug Fix
+
+- Content nav part9 [#313](https://github.com/mumprod/hr-design-system-handlebars/pull/313) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.56.7 (Thu Sep 01 2022)
+
+#### 🐛 Bug Fix
+
+- adds some of mithras designs [#312](https://github.com/mumprod/hr-design-system-handlebars/pull/312) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.56.6 (Wed Aug 31 2022)
+
+#### 🐛 Bug Fix
+
+- adds autosuggest to list and flow, several refactoring [#311](https://github.com/mumprod/hr-design-system-handlebars/pull/311) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.56.5 (Wed Aug 31 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -434,7 +434,7 @@ video {
   --tw-scale-y: 1;
 }
 
-.btn--secondary, .shadow-\[0_13px_27px_-2px_rgba\(50\2c 50\2c 93\2c 0\.25\)\], .shadow-inner, .shadow-xl {
+.btn--secondary, .\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-inner, .shadow-xl {
   --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
   --tw-ring-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow: 0 0 rgba(0,0,0,0);
@@ -636,15 +636,15 @@ video {
 .top-full {
   top: 100%;
 }
-.z-10001 {
-  z-index: 10001;
-}
 .z-10000 {
   z-index: 10000;
 }
 .z-10002 {
   z-index: 10002;
 }
+.z-10001 {
+  z-index: 10001;
+}
 .-z-1000 {
   z-index: -1000;
 }
@@ -689,9 +689,13 @@ video {
 .m-1 {
   margin: 0.25rem;
 }
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.mx-0 {
+  margin-left: 0px;
+  margin-right: 0px;
 }
 .mx-4 {
   margin-left: 1rem;
@@ -713,10 +717,6 @@ video {
   margin-left: 1px;
   margin-right: 1px;
 }
-.mx-0 {
-  margin-left: 0px;
-  margin-right: 0px;
-}
 .mx-1\.5 {
   margin-left: 0.375rem;
   margin-right: 0.375rem;
@@ -731,36 +731,39 @@ video {
 .\!mt-4 {
   margin-top: 1rem !important;
 }
-.mr-2 {
-  margin-right: 0.5rem;
+.mt-2 {
+  margin-top: 0.5rem;
 }
-.mt-1 {
-  margin-top: 0.25rem;
+.mt-0 {
+  margin-top: 0px;
 }
 .ml-2 {
   margin-left: 0.5rem;
 }
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
 .-mt-2 {
   margin-top: -0.5rem;
 }
-.mt-2 {
-  margin-top: 0.5rem;
-}
 .-mt-40 {
   margin-top: -10rem;
 }
 .-mt-10 {
   margin-top: -2.5rem;
 }
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
 .\!mb-0 {
   margin-bottom: 0px !important;
 }
+.ml-0 {
+  margin-left: 0px;
+}
 .\!mr-2 {
   margin-right: 0.5rem !important;
 }
+.mr-2 {
+  margin-right: 0.5rem;
+}
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -773,9 +776,6 @@ video {
 .mt-0\.5 {
   margin-top: 0.125rem;
 }
-.mt-0 {
-  margin-top: 0px;
-}
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -970,6 +970,11 @@ video {
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
+.grow {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}
 .basis-2\/3 {
   -ms-flex-preferred-size: 66.666667%;
       flex-basis: 66.666667%;
@@ -1291,13 +1296,17 @@ video {
 .bg-transparent {
   background-color: transparent;
 }
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
-.bg-gray-200 {
+.bg-blue-accented {
   --tw-bg-opacity: 1;
-  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+  background-color: rgba(216, 233, 246, var(--tw-bg-opacity));
 }
 .bg-gray-500 {
   --tw-bg-opacity: 1;
@@ -1447,14 +1456,14 @@ video {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
-.\!px-0 {
-  padding-left: 0px !important;
-  padding-right: 0px !important;
-}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.\!px-0 {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1507,12 +1516,15 @@ video {
   padding-top: 1px;
   padding-bottom: 1px;
 }
-.pl-4 {
-  padding-left: 1rem;
+.pl-2 {
+  padding-left: 0.5rem;
 }
 .pt-px {
   padding-top: 1px;
 }
+.pl-4 {
+  padding-left: 1rem;
+}
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -1692,10 +1704,6 @@ video {
   --tw-text-opacity: 1;
   color: rgba(0, 82, 147, var(--tw-text-opacity));
 }
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgba(0, 0, 0, var(--tw-text-opacity));
-}
 .text-orange-spicyCarrot {
   --tw-text-opacity: 1;
   color: rgba(211, 70, 0, var(--tw-text-opacity));
@@ -1704,6 +1712,10 @@ video {
   --tw-text-opacity: 1;
   color: rgba(39, 107, 158, var(--tw-text-opacity));
 }
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgba(0, 0, 0, var(--tw-text-opacity));
+}
 .text-blue-science {
   --tw-text-opacity: 1;
   color: rgba(0, 109, 193, var(--tw-text-opacity));
@@ -1765,9 +1777,18 @@ video {
 .opacity-80 {
   opacity: 0.8;
 }
-.shadow-\[0_13px_27px_-2px_rgba\(50\2c 50\2c 93\2c 0\.25\)\] {
-  --tw-shadow: 0 13px 27px -2px rgba(50,50,93,0.25);
-  --tw-shadow-colored: 0 13px 27px -2px var(--tw-shadow-color);
+.\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
+  --tw-shadow: 1px 8px 9px 0px rgba(50,50,93,0.10) !important;
+  --tw-shadow-colored: 1px 8px 9px 0px var(--tw-shadow-color) !important;
+  -webkit-box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
+          box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
+}
+.shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
+  --tw-shadow: 1px 4px 5px 0px rgba(50,50,93,0.10);
+  --tw-shadow-colored: 1px 4px 5px 0px var(--tw-shadow-color);
   -webkit-box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
           box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
@@ -1876,7 +1897,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1661948075085;
+  counter-reset: cnt1662058116451;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2259,7 +2280,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1661948075085 1;
+  counter-increment: cnt1662058116451 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2276,7 +2297,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1661948075085);
+  content: counter(cnt1662058116451);
 }
 /*! purgecss start ignore */
 :root,
@@ -2644,6 +2665,26 @@ video {
     right: 0;
     bottom: 0;
 }
+.placeholder\:text-gray-800::-webkit-input-placeholder {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
+}
+.placeholder\:text-gray-800::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
+}
+.placeholder\:text-gray-800:-ms-input-placeholder {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
+}
+.placeholder\:text-gray-800::-ms-input-placeholder {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
+}
+.placeholder\:text-gray-800::placeholder {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
+}
 .first\:border-t:first-child {
   border-top-width: 1px;
 }
@@ -2653,6 +2694,9 @@ video {
 .first\:font-bold:first-child {
   font-weight: 700;
 }
+.last\:mb-0:last-child {
+  margin-bottom: 0px;
+}
 .last\:border-b-0:last-child {
   border-bottom-width: 0px;
 }
@@ -2688,6 +2732,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
 }
+.hover\:\!bg-white:hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
+}
 .hover\:fill-white:hover {
   fill: #ffffff;
 }
@@ -2697,6 +2745,12 @@ video {
 .hover\:fill-blue-jellyBean:hover {
   fill: #006dc1;
 }
+.hover\:\!fill-congress:hover {
+  fill: #005293 !important;
+}
+.hover\:fill-congress:hover {
+  fill: #005293;
+}
 .hover\:text-toplineColor:hover {
   color: #006dc1;
   color: var(--color-topline);
@@ -2705,10 +2759,22 @@ video {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
+.hover\:text-blue-congress:hover {
+  --tw-text-opacity: 1;
+  color: rgba(0, 82, 147, var(--tw-text-opacity));
+}
+.hover\:\!text-blue-congress:hover {
+  --tw-text-opacity: 1 !important;
+  color: rgba(0, 82, 147, var(--tw-text-opacity)) !important;
+}
 .hover\:underline:hover {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
+.hover\:no-underline:hover {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2852,6 +2918,10 @@ video {
     margin-right: 0px !important;
   }
 
+  .md\:mb-2 {
+    margin-bottom: 0.5rem;
+  }
+
   .md\:mb-16 {
     margin-bottom: 4rem;
   }
@@ -3003,6 +3073,10 @@ video {
     border-width: 1px !important;
   }
 
+  .md\:border {
+    border-width: 1px;
+  }
+
   .md\:border-r {
     border-right-width: 1px;
   }
@@ -3020,6 +3094,11 @@ video {
     border-color: rgba(255, 255, 255, var(--tw-border-opacity));
   }
 
+  .md\:border-blue-congress {
+    --tw-border-opacity: 1;
+    border-color: rgba(0, 82, 147, var(--tw-border-opacity));
+  }
+
   .md\:bg-neutral-200 {
     --tw-bg-opacity: 1;
     background-color: rgba(229, 229, 229, var(--tw-bg-opacity));
@@ -3164,6 +3243,34 @@ video {
     .md\:first-of-type\:pt-0:first-of-type {
     padding-top: 0px;
   }
+
+    .md\:hover\:\!bg-blue-congress:hover {
+    --tw-bg-opacity: 1 !important;
+    background-color: rgba(0, 82, 147, var(--tw-bg-opacity)) !important;
+  }
+
+    .md\:hover\:\!fill-white:hover {
+    fill: #ffffff !important;
+  }
+
+    .md\:hover\:fill-white:hover {
+    fill: #ffffff;
+  }
+
+    .md\:hover\:text-white:hover {
+    --tw-text-opacity: 1;
+    color: rgba(255, 255, 255, var(--tw-text-opacity));
+  }
+
+    .md\:hover\:\!text-white:hover {
+    --tw-text-opacity: 1 !important;
+    color: rgba(255, 255, 255, var(--tw-text-opacity)) !important;
+  }
+
+    .md\:hover\:no-underline:hover {
+    -webkit-text-decoration-line: none;
+            text-decoration-line: none;
+  }
 }
 @media (min-width: 1024px) {
 

package/dist/views/components/content_nav/content_nav.hbs

@@ -1,13 +1,21 @@
 {{#with this.contentNav}} 
-    {{#if this.isList}}
-        <nav class="c-content-nav {{../_modifier}} ">
-            {{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
+    {{#if this.isList}} 
+        <nav class="c-content-nav"> 
+            {{> components/content_nav/content_nav_container 
+                _teasersize=../_teasersize 
+                _maindivclass="flex flex-wrap mt-2 md:mt-0" 
+                _inputcontainerclass="flex w-full h-10 mx-2 md:mx-0 border-blue-congress align-center"
+            }}
         </nav>
     {{else if this.isFlow}}
-        <nav class="c-content-nav {{../_modifier}} ">
-            {{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
+        <nav class="c-content-nav">
+            {{> components/content_nav/content_nav_container 
+                _teasersize=../_teasersize 
+                _maindivclass="flex flex-wrap mt-2 md:mt-0" 
+                _inputcontainerclass="flex w-full h-10 mx-2 md:mx-0 border-blue-congress align-center "
+            }}    
         </nav>
-    {{else}} 
+    {{else}}  
         {{#>components/content_nav/dropdown
                      _componentClass="c-content-nav"
                      _teasersize=../_teasersize
@@ -16,21 +24,11 @@
                      _buttonText=(defaultIfEmpty this.selectedItem.title ../../title)
                      _hiddenNavigationLabel="Unternavigation"
         }} 
-            <div x-on:click.outside ="open = false;" class="flex flex-wrap {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
-                {{#if this.isAutosuggest}}
-                    data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'
-                {{/if}}
-                >
-                {{#if this.isAutosuggest}}
-                    <div class="flex w-full h-10 my-2 c-content-nav__autosuggest border-blue-congress align-center">
-                        <input x-ref="autosuggestInput" class="w-full pl-4 focus:outline-none js-autosuggest-input" type="text"
-                                placeholder="Eintrag filtern"/>
-                    </div>
-                {{/if}}
-                {{> components/content_nav/content_nav_list  _teasersize=_teasersize}}
-
-            </div>
+            {{> components/content_nav/content_nav_container 
+                _teasersize=_teasersize 
+                _maindivclass="flex flex-wrap mt-0" 
+                _inputcontainerclass="flex w-full h-10 mx-0 border-blue-congress align-center "
+            }}
         {{/components/content_nav/dropdown}}
-
-    {{/if}}   
-{{/with}}
+    {{/if}}
+{{/with}} 

package/dist/views/components/content_nav/content_nav_container.hbs

@@ -0,0 +1,14 @@
+<div x-on:click.outside ="$store.contentNavDropdownIsOpen = false;" class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
+    {{#if this.isAutosuggest}}
+        data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'
+    {{/if}}
+    >
+    {{#if this.isAutosuggest}}
+        <div class="{{_inputcontainerclass}} c-content-nav__autosuggest ">
+            <input x-ref="autosuggestInput" class="w-full h-8 pl-2 bg-gray-200 placeholder:text-gray-800 focus:outline-none js-autosuggest-input" type="text"
+                    placeholder="Eintrag filtern"/>
+        </div>
+    {{/if}}
+
+    {{> components/content_nav/content_nav_list _teasersize=_teasersize }}
+</div>

package/dist/views/components/content_nav/content_nav_item.hbs

@@ -1,24 +1,24 @@
 <li x-init="chooseListItemStyles({{_teasersize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})" 
-class="h-8 overflow-hidden text-base font-copy list-none border-blue-congress fill-congress hover:fill-white text-blue-congress hover:text-white hover:underline {{#if this.isSelected}} -current{{/if}} c-content-nav__item">
+class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-blue-congress fill-congress text-blue-congress bg-white hover:bg-blue-congress hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} font-bold -current{{/if}} c-content-nav__item">
      {{#>components/base/link.hbs 
         _doNavigationTracking="true" 
         _clickLabelType="Contentnavigation" 
         _clickLabelPrefix1=this.title 
-        _css="flex items-center py-2 px-4 h-8 bg-white hover:bg-blue-congress whitespace-nowrap overflow-hidden" 
+        _css="flex items-center py-2 px-2 h-10 whitespace-nowrap overflow-hidden" 
         _isSelected=this.isSelected
         _selectedCssClass="is-selected"
      }}
-
-        <span>
-            {{>components/base/image/icon _icon="arrow-right" _addClass=" h-4 w-4 mr-2" }} 
-        </span>
-
-        <span class="mt-1 text-base font-copy js-title">{{this.title}}</span>
+        
+        <span class="flex text-base grow font-copy js-title">{{this.title}}</span>
 
         {{#if this.link.hasIcon}}
-            {{> components/base/image/icon _icon=this.link.iconName _addClass="mt-1 ml-2 h-4 w-4" _iconmap="icons"}}
+            {{> components/base/image/icon _icon=this.link.iconName _addClass="ml-2 h-4 w-4" _iconmap="icons"}}
         {{/if}}
 
+        <span>
+            {{>components/base/image/icon _icon="arrow-right" _addClass="h-4 w-4 ml-2" }} 
+        </span>
+
     {{/components/base/link.hbs}} 
 </li>
 

package/dist/views/components/content_nav/content_nav_list.hbs

@@ -1,5 +1,5 @@
-<ul :class="({{this.isMixed}} && {{_teasersize}} < 66) || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}} ? 'shadow-[0_13px_27px_-2px_rgba(50,50,93,0.25)] !px-0 ' : ''" 
-    class="flex flex-wrap w-full px-2 md:!px-0 last:border-b-0">
+<ul :class="(({{this.isMixed}} && {{_teasersize}} < 50) || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}}) && $store.contentNavDropdownIsOpen === true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] !px-0 mt-0' : ''" 
+    class="flex flex-wrap w-full px-2 z-10000 md:!px-0 last:border-b-0">
     
     {{~#each this.contentNavEntries~}}
           
@@ -7,9 +7,9 @@
         
             {{#if ../isDropdown}}            
                 
-                <li class="w-full h-auto overflow-hidden text-base text-black list-none bg-gray-200 border-b border-blue-congress font-copy fill-congress c-content-nav__group">
-                    <div class="p-2 c-content-nav__group-title">{{this.title}}</div>
-                    <ul class="c-content-nav__group-list">
+                <li class="w-full h-auto overflow-hidden text-base list-none border-b border-gray-400 bg-blue-accented text-blue-congress md:mx-0 font-copy fill-congress c-content-nav__group">
+                    <div class="flex items-center h-10 p-2 c-content-nav__group-title">{{this.title}}</div>
+                    <ul class="c-content-nav__group-list !px-0 mt-0 ">
                         {{~#each this.navigationGroup~}}
                             {{> components/content_nav/content_nav_item _teasersize=../../_teasersize _isdropdown=../../isDropdown _ismixed=../../isMixed _islist=../../isList _isflow=../../isFlow}}
                         {{~/each~}}
@@ -24,4 +24,3 @@
         {{~/if~}}
     {{~/each~}}
 </ul>
-

package/dist/views/components/content_nav/dropdown.hbs

@@ -1,31 +1,37 @@
 <nav  
-    class="w-full px-2 md:px-0 {{_componentClass}} {{_modifier}} " 
+    class="w-full px-2 md:px-0 {{_componentClass}} " 
     id="dropdown--{{nextRandom}}"
     tabindex="0"
     role="navigation"
     aria-labelledby="dropdown__label--{{getRandom}}">
 
-    <span id="o-dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
+    <span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
 
     <div x-show="shouldDropdownBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" 
-        class="flex w-full h-8 overflow-hidden bg-white border border-blue-congress whitespace-nowrap text-blue-congress fill-congress"  >
+        :class="$store.contentNavDropdownIsOpen ? 'shadow-[1px_4px_5px_0px_rgba(50,50,93,0.10)]' : ''"
+        class="relative flex w-full h-10 mb-2 overflow-hidden bg-white border z-10002 border-blue-congress whitespace-nowrap text-blue-congress fill-congress"  >
         
-        <span class="text-base p-2 self-center w-full {{_componentClass}}__button-text">
+        <span class="self-center w-full p-2 text-base">
                 {{_buttonText}}
         </span>
-        <div class="flex self-center w-auto h-full px-2 py-1 border-l border-blue-congress">
-            <span x-on:click="open = ! open;" :class="open ? 'hidden' : ''"  class="flex self-center -open">
-            {{~> components/base/image/icon _icon=(defaultIfEmpty _iconOpen "arrow-down") _addClass="flex justify-end h-4 w-4" _iconmap="icons"~}}
+        <div class="flex self-center w-auto h-full px-3 py-1 border-l border-blue-congress">
+            <span @click="$store.contentNavDropdownIsOpen = !$store.contentNavDropdownIsOpen" 
+                :class="$store.contentNavDropdownIsOpen ? 'hidden' : ''"  
+                class="flex self-center">
+                
+                {{~> components/base/image/icon _icon=(defaultIfEmpty _iconOpen "arrow-down") _addClass="h-4 w-4" _iconmap="icons"~}}
+                
             </span>
-
-            <span x-on:click="open = ! open;  $dispatch('resetinput')" :class="open ? '' : 'hidden'" class="flex self-center -close">
-            {{~> components/base/image/icon _icon=(defaultIfEmpty _iconClose "arrow-up") _addClass="h-4 w-4" _iconmap="icons"~}}
+            <span @click="$store.contentNavDropdownIsOpen = !$store.contentNavDropdownIsOpen; $dispatch('resetinput')" 
+                :class="$store.contentNavDropdownIsOpen ? '' : 'hidden'" 
+                class="flex self-center">
+                {{~> components/base/image/icon _icon=(defaultIfEmpty _iconClose "arrow-up") _addClass="h-4 w-4" _iconmap="icons"~}}
             </span>
         </div>
-
     </div>    
-
-    <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" aria-haspopup="true" class="p-0 m-0 md:relative md:left-0 md:h-auto md:overflow-visible">
+    <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" 
+        aria-haspopup="true" 
+        class="p-0 m-0 z-10000 md:relative md:left-0 md:h-auto md:overflow-visible">
        {{> @partial-block }}
     </div>