hr-design-system-handlebars 1.12.3 → 1.14.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.14.0 (Fri Apr 28 2023)
+
+#### 🚀 Enhancement
+
+- Dpe 2244 stories & doku [#616](https://github.com/mumprod/hr-design-system-handlebars/pull/616) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v1.13.0 (Tue Apr 25 2023)
+
+#### 🚀 Enhancement
+
+- Dpe 2244 [#611](https://github.com/mumprod/hr-design-system-handlebars/pull/611) ([@vascoeduardo](https://github.com/vascoeduardo) [@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 2
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.12.3 (Mon Apr 24 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1174,6 +1174,9 @@ video {
 .mb-0 {
   margin-bottom: 0px;
 }
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -1351,9 +1354,6 @@ video {
 .max-h-0 {
   max-height: 0px;
 }
-.max-h-10 {
-  max-height: 2.5rem;
-}
 .max-h-6 {
   max-height: 1.5rem;
 }
@@ -1420,6 +1420,9 @@ video {
 .w-9 {
   width: 2.25rem;
 }
+.w-\[1600px\] {
+  width: 1600px;
+}
 .w-auto {
   width: auto;
 }
@@ -1544,6 +1547,9 @@ video {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.cursor-default {
+  cursor: default;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1877,10 +1883,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
 }
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
-}
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
@@ -2173,9 +2175,6 @@ video {
 .pb-0\.5 {
   padding-bottom: 0.125rem;
 }
-.pb-1 {
-  padding-bottom: 0.25rem;
-}
 .pb-10 {
   padding-bottom: 2.5rem;
 }
@@ -2427,9 +2426,9 @@ video {
   --tw-text-opacity: 1;
   color: rgba(29, 78, 216, var(--tw-text-opacity));
 }
-.text-blue-900 {
+.text-blue-astronautBlue {
   --tw-text-opacity: 1;
-  color: rgba(30, 58, 138, var(--tw-text-opacity));
+  color: rgba(0, 55, 93, var(--tw-text-opacity));
 }
 .text-blue-congress {
   --tw-text-opacity: 1;
@@ -2678,7 +2677,7 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 .counter-reset {
-  counter-reset: cnt1682333369427;
+  counter-reset: cnt1682683106873;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -2768,10 +2767,11 @@ video {
   --tw-content: '';
   content: var(--tw-content);
 }
-@media (min-width: 1024px) {
+@media (min-width: 768px) {
 
   .-currentBrand::before {
-    position: absolute;
+    position: relative;
+    right: -50%;
     margin-top: 1.5rem;
     height: 0px;
     width: 0px;
@@ -2825,9 +2825,9 @@ video {
     border-bottom-color: #ffffff;
   }
 }
-.-currentSection::before {
+.-currentSection::after {
   margin-right: 0.5rem;
-  margin-left: -1rem;
+  margin-left: -3.375rem;
   margin-bottom: 0.125rem;
   height: 0px;
   width: 0px;
@@ -2845,8 +2845,13 @@ video {
 }
 @media (min-width: 1024px) {
 
-  .-currentSection::before {
-    position: absolute;
+  .-currentSection {
+    padding-right: 0px !important;
+  }
+
+  .-currentSection::after {
+    position: relative;
+    right: 50%;
     margin-bottom: 0px;
     margin-right: 0px;
     margin-left: 0px;
@@ -2910,7 +2915,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1682333369427 1;
+  counter-increment: cnt1682683106873 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2926,7 +2931,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1682333369427);
+  content: counter(cnt1682683106873);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3826,6 +3831,14 @@ video {
     background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
     transition: transform 150ms ease-in-out 0s;
 }
+.arrow-left-background-blue {
+    background: linear-gradient(to left, rgba(255, 255, 255, 0),#005293 50%);
+    transition: transform 150ms ease-in-out 0s;
+}
+.arrow-right-background-blue {
+    background: linear-gradient(to right, rgba(255, 255, 255, 0), #005293 50%);
+    transition: transform 150ms ease-in-out 0s;
+}
 .c-videoplayer .ardplayer {
     position: absolute;
     top: 0;
@@ -3928,6 +3941,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
 }
+.hover\:bg-blue-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(147, 197, 253, var(--tw-bg-opacity));
+}
 .hover\:bg-blue-congress:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
@@ -4629,16 +4646,16 @@ video {
     padding-right: 0px;
   }
 
+  .md\:px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+
   .md\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
   }
 
-  .md\:px-5 {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-  }
-
   .md\:pl-0 {
     padding-left: 0px;
   }
@@ -4696,6 +4713,10 @@ video {
     line-height: 1rem;
   }
 
+  .md\:leading-8 {
+    line-height: 2rem;
+  }
+
   .md\:decoration-2 {
     text-decoration-thickness: 2px;
   }
@@ -4783,6 +4804,10 @@ video {
 }
 @media (min-width: 1024px) {
 
+  .lg\:fixed {
+    position: fixed;
+  }
+
   .lg\:absolute {
     position: absolute;
   }
@@ -4848,10 +4873,6 @@ video {
     margin-top: -2rem;
   }
 
-  .lg\:mb-1 {
-    margin-bottom: 0.25rem;
-  }
-
   .lg\:ml-0 {
     margin-left: 0px;
   }
@@ -4864,6 +4885,10 @@ video {
     margin-right: 0px;
   }
 
+  .lg\:mr-2 {
+    margin-right: 0.5rem;
+  }
+
   .lg\:mt-1 {
     margin-top: 0.25rem;
   }
@@ -5104,6 +5129,11 @@ video {
     padding-right: 1rem;
   }
 
+  .lg\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
   .lg\:px-9 {
     padding-left: 2.25rem;
     padding-right: 2.25rem;
@@ -5118,6 +5148,10 @@ video {
     padding-bottom: 0px;
   }
 
+  .lg\:pb-1 {
+    padding-bottom: 0.25rem;
+  }
+
   .lg\:pb-3 {
     padding-bottom: 0.75rem;
   }
@@ -5162,10 +5196,6 @@ video {
     line-height: 1.25rem;
   }
 
-  .lg\:leading-8 {
-    line-height: 2rem;
-  }
-
   .lg\:text-blue-congress {
     --tw-text-opacity: 1;
     color: rgba(0, 82, 147, var(--tw-text-opacity));
@@ -5217,6 +5247,9 @@ video {
   }
     .lg\:last\:border-0:last-child {
     border-width: 0px;
+  }
+    .lg\:last\:pr-8:last-child {
+    padding-right: 2rem;
   }
     .lg\:odd\:pr-4:nth-child(odd) {
     padding-right: 1rem;
@@ -5249,8 +5282,8 @@ video {
     right: 0px;
   }
 
-  .tablet\:top-22 {
-    top: 5.5rem;
+  .tablet\:top-20 {
+    top: 5rem;
   }
 
   .tablet\:ml-half-screen {

package/dist/assets/vendor/js/header.alpine.js

@@ -31,7 +31,7 @@ document.addEventListener('alpine:init', () => {
                 }, wait)
             }
         },
-        init() {
+        start() {
             let lastScrollTop = 0
             let height = window.innerHeight
 
@@ -281,7 +281,15 @@ document.addEventListener('alpine:init', () => {
         toggle() {
             this.dropped = !this.dropped
         },
-
+        correctFlyoutPos(){
+            if(this.$screen('lg')){
+                let elementBoundingClientRec = this.$el.getBoundingClientRect()
+                let parentElementBoundingClientRec = this.$el.closest(".relative").getBoundingClientRect()
+                this.$el.parentNode.querySelector('.sb-navigation-flyout').style.left = (elementBoundingClientRec.left - Math.abs(parentElementBoundingClientRec.left))+"px";
+            } else {
+                this.$el.parentNode.querySelector('.sb-navigation-flyout').style.left = "0px";
+            }
+        },
         // toggles visibility of service nav and sets global variables in stores
         toggleServiceNav() {
             this.dropped = !this.dropped

package/dist/assets/vendor/js/horizontal_scroll_container.alpine.js

@@ -0,0 +1,30 @@
+export default function slider() {
+
+    return {     
+        isScrollable:false,
+        arrowLeftDisplay:false,
+        arrowRightDisplay:true,
+
+        arrowsDisplay(e) { 
+            e.scrollLeft > 1 ? this.arrowLeftDisplay=true : this.arrowLeftDisplay=false;
+            e.scrollLeft + e.offsetWidth >= e.scrollWidth ? this.arrowRightDisplay=false : this.arrowRightDisplay=true;
+        },
+
+        prev(e) {
+        e.scrollLeft -= 200;
+        },
+
+        next(e) {
+        e.scrollLeft += 200;
+        },
+
+        updateIndex(e) {
+            this.arrowsDisplay(e);
+        },
+        
+        checkIfScrollable(e){     
+            e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;  
+            this.arrowsDisplay(e);
+        }
+    };
+}

package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs

@@ -0,0 +1,22 @@
+<div x-data="slider()"
+    x-init="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
+    @resize.window="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
+    class="relative w-full"
+    ax-load 
+    x-ignore
+    ax-load-src={{resourceUrl "assets/js/vendor/horizontal_scroll_container.alpine.js" }}
+    >
+    <template x-if="isScrollable && $screen('{{_viewport}}')">
+        <div>
+            <button class="{{#if _onDarkBackground}}arrow-left-background-blue{{else}}arrow-left-background{{/if}} absolute z-10 left-0 flex items-center justify-start w-8 h-full disabled:hidden" @click="prev($refs.scrollContainer_{{getRandom}})" :disabled="!arrowLeftDisplay" aria-label="nach links scrollen">
+                {{> components/base/image/icon _icon="arrow-left"  _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-blue-congress') }}
+            </button> 
+            <button class="{{#if _onDarkBackground}}arrow-right-background-blue{{else}}arrow-right-background{{/if}} absolute z-10 right-0 flex items-center justify-end w-8 h-full group disabled:hidden" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" aria-label="nach rechts scrollen">
+                {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-blue-congress') }}
+            </button>
+        </div>
+    </template>
+    <div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll leading-10 transition-all duration-300 ease-in-out cursor-default hide-scroll-bar align-center">
+        {{> @partial-block }} 
+    </div> 
+</div>

package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs

@@ -0,0 +1,9 @@
+<div class="w-full h-auto mb-10">
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true"}}
+    
+    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-blue-congress">
+        <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist.  </p>
+    </div> 
+
+{{/components/horizontal_scroll_container/horizontal_scroll_container}}
+</div>

package/dist/views/components/site_header/brand_navigation/brand_navigation.hbs

@@ -1,22 +1,6 @@
-<div x-data="slider()"
-        x-init="checkIfScrollable($refs.container)"
-        @resize.window="checkIfScrollable($refs.container)"
-        class="sb-brand-navigation lg:container w-full md:px-5 lg:px-10 px-3.5 h-10 lg:h-8">
-
-    <div class="flex justify-center text-xs list-none text-gray-scorpion ">
-
-        <template x-if="isScrollable">
-            <div>
-                <button class="absolute left-0 w-12 h-full pt-1 arrow-left-background disabled:hidden" @click="prev($refs.container)" :disabled="!arrowLeftDisplay" aria-label="nach links scrollen">
-                    {{> components/base/image/icon _icon="arrow-left" _iconmap="icons"  _addClass="pb-1 mr-4 inline-block w-3.5 h-3.5 text-blue-congress fill-current"}}
-                </button>
-                <button class="absolute right-0 w-12 h-full pt-1 group arrow-right-background disabled:hidden" @click="next($refs.container)" :disabled="!arrowRightDisplay" aria-label="nach rechts scrollen">
-                    {{> components/base/image/icon _icon="arrow-right" _iconmap="icons"  _addClass="pb-1 ml-4 inline-block w-3.5 h-3.5 text-blue-congress fill-current "}}
-                </button>
-            </div>
-        </template>
-
-        <nav x-ref="container" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll leading-10 transition-all duration-300 ease-in-out cursor-pointer hide-scroll-bar max-h-10 align-center">
+<div class="sb-brand-navigation lg:container w-full md:px-1 lg:px-6 px-3.5 h-10 md:h-8">
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" }}
+    <nav class="flex w-full text-xs list-none text-grey-scorpion">
             <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
             {{#with this.brandNavigationItems}}
                 <ul class="flex pl-0.5 pr-3 md:px-0 flex-nowrap lg:mr-0">
@@ -24,45 +8,7 @@
                         {{> components/site_header/brand_navigation/brand_navigation_item }}
                     {{/each}} 
                 </ul>
-            {{/with}}
-        </nav>
-
-    </div>
-    
-</div>
-
-<script type="text/javascript">
-
-function slider() {
-
-  return {
-      
-    isScrollable:false,
-    arrowLeftDisplay:false,
-    arrowRightDisplay:true,
-
-    arrowsDisplay(e) {
-        e.scrollLeft > 1 ? this.arrowLeftDisplay=true : this.arrowLeftDisplay=false;
-        e.scrollLeft + e.offsetWidth == e.scrollWidth ? this.arrowRightDisplay=false : this.arrowRightDisplay=true;
-    },
-
-    prev(e) {
-      e.scrollLeft -= 200;
-    },
-
-    next(e) {
-     e.scrollLeft += 200;
-    },
-
-    updateIndex(e) {
-        this.arrowsDisplay(e);
-    },
-    
-    checkIfScrollable(e){
-        e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;
-        this.arrowsDisplay(e);
-    }
-  };
-}
-
-</script>
+            {{/with}}      
+    </nav>
+{{/components/horizontal_scroll_container/horizontal_scroll_container}}
+</div>

package/dist/views/components/site_header/brand_navigation/brand_navigation_item.hbs

@@ -1,3 +1,3 @@
-<li class="sb-brand-navigation-item{{#if this.selected}} h-10 lg:h-8 font-bold text-blue-congress {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-blue-science">   
-   <a class="link-focus-inset leading-10 lg:leading-8 flex-col px-3 {{#if @first }}pl-0 {{/if}}lg:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
+<li class="sb-brand-navigation-item{{#if this.selected}} h-10 md:h-8 font-bold text-blue-congress {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-blue-science">   
+   <a class="link-focus-inset leading-10 md:leading-8 flex-col px-3 {{#if @first }}pl-0 {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
 </li>

package/dist/views/components/site_header/header.hbs

@@ -1,10 +1,10 @@
-<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">
+<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#unless (isStorybook) }} start() {{/unless}} ">
     <header class="print:hidden relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">   
         <div x-data 
             id="headerWrapper"
             @resize.window="resetNav()" 
             :class="shouldBrandNavBeHidden() ? '-mt-10 lg:-mt-8' : ''  "
-            class="fixed top-0 left-0 flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
+            class="{{#unless (isStorybook) }} fixed top-0 left-0{{/unless}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
             
             <div id="anchorNavWrapper" 
                 class="hidden">
@@ -53,8 +53,8 @@
                 x-ref="sectionnavigation"
                 @toggle-sectionnav.window="toggleSectionNav"
                 :class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"  
-                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-22 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-blue-congress z-10000 print:hidden"
-            >
+                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-blue-congress z-10000 print:hidden"
+            >   
                 {{> components/site_header/section_navigation/section_navigation }}
             </div>
             

package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs

@@ -3,11 +3,11 @@
         x-data="flyoutHandler" 
         x-ref="{{getRandom}}"
         id="flyout-{{getRandom}}" 
-        @resize.window.debounce="setFlyoutAnimationStyle();"
+        @resize.window.debounce=" dropped = false; setFlyoutAnimationStyle();"
         {{#if this.showAsFlyout}} x-show="dropped"  {{else}} {{#if ../this.selected}} x-show="$screen('lg') ? true : dropped" {{else}} x-show="dropped" {{/if}} {{/if}}
         {{#if ../_isSectionNav}} x-init="sectionNavFlyoutWatcher()"  :class ="shouldFlyoutBeHidden() ? 'hidden' : ''" {{/if}}  
         
-        class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md lg:absolute  
+        class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md 
                 {{#if ../_isSectionNav}} relative md:top-auto md:left-auto lg:mt-10 w-full transition-all duration-500 ease-in-out
                     {{#unless this.showAsFlyout}}
                         {{#if ../this.selected}}
@@ -15,7 +15,7 @@
                         {{else}} z-10002 lg:left-auto lg:w-auto {{/if}}
                     {{else}} z-10002 lg:left-auto lg:w-auto {{/unless}}
                 {{else}} z-10002 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 lg:pl-6 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
-                {{#if this.showAsFlyout}} lg:rounded-b lg:pl-4{{/if}}" 
+                {{#if this.showAsFlyout}} lg:rounded-b lg:pl-4 lg:absolute{{else}} lg:fixed{{/if}}" 
 
         aria-labelledby="flyout-{{getRandom}}-1" 
         {{#if this.showAsFlyout}}
@@ -39,7 +39,6 @@
                 </div>
             {{/unless}}
         {{/unless}}
-        
         <div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} w-full lg:px-10 lg:container {{/if}}{{/if}}">
             {{#if this.showAsFlyout}}
                 {{#each this.columns}}

package/dist/views/components/site_header/section_navigation/section_navigation.hbs

@@ -1,27 +1,30 @@
 <div 
     id="sectionNav"
-    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container bg-blue-congress" 
+    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container " 
     x-effect="$el.setAttribute('aria-expanded',  $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
 >
-    <div class="flex content-start mb-0">
-        <div class="flex w-full">
-            <span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>
-            {{#with this.sectionNavigationSSILinks}}
-                <ul class="flex flex-col items-center w-full text-left text-white list-none lg:flex-row lg:h-auto lg:mt-1">
-                    {{#each this}}   
-                        {{#if (isStorybook)}}  
-                            {{> components/site_header/section_navigation/section_navigation_item }}   
-                        {{else}}
-                            {{{this}}}
-                        {{/if}}
-                        {{#if @first}}
-                            {{#with ../../this.topTopicsNavigationSSILinks }}                               
-                                {{> components/site_header/section_navigation/section_navigation_top_topics }}                             
-                            {{/with}}
-                        {{/if}}
-                    {{/each}} 
-                </ul>
-            {{/with}}
-        </div>
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _onDarkBackground="true"}}
+    <div class="flex w-full">
+        <span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>
+
+        {{#with this.sectionNavigationSSILinks}}
+            <ul class="flex flex-col items-center w-full text-left text-white list-none lg:flex-row lg:h-auto lg:mt-1">
+                {{#each this}}   
+                    {{#if (isStorybook)}}  
+                        {{> components/site_header/section_navigation/section_navigation_item }}   
+                    {{else}}
+                        {{{this}}}
+                    {{/if}}
+                    {{#if @first}}
+                        {{#with ../../this.topTopicsNavigation }}                               
+                            {{> components/site_header/section_navigation/section_navigation_top_topics }}                             
+                        {{/with}}
+                    {{/if}}
+                {{/each}} 
+            </ul>
+        {{/with}}
+
     </div>
+{{/components/horizontal_scroll_container/horizontal_scroll_container}}
+
 </div> 

package/dist/views/components/site_header/section_navigation/section_navigation_item.hbs

@@ -3,11 +3,12 @@
         @click.outside="dropped = false" 
         @close-servicemenu.window="dropped = false" 
         :class="dropped ? 'border-b-0 lg:bg-white lg:text-blue-congress h-auto' : 'h-10 lg:hover:underline'" 
-        class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-blue-congress lg:rounded-t">   
+        class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-blue-congress lg:rounded-t">   
         {{#if this.isCluster ~}}
 {{!-- Gilt z.B. für REGIONEN:  --}}        
             <button id="button-{{nextRandom}}-1" 
-                @click.debounce.100ms="toggle()" 
+                @click.debounce.100ms="toggle(); correctFlyoutPos()" 
+                @resize.window="dropped=false; correctFlyoutPos()"
                 :class="dropped ? 'first:font-bold lg:first:font-normal lg:underline' : 'first:font-normal'"
                 class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset-white js-load pl-4 lg:pl-4 lg:pr-4 flex flex-auto w-full justify-between lg:flex-initial h-10 lg:w-full items-center leading-4 {{#if this.selected}} font-bold{{/if}}" 
                 x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"

package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs

@@ -1,9 +1,9 @@
-<li class="order-1 w-full mx-2 lg:w-auto lg:order-2">
-    <ul class="flex flex-row items-center w-full p-4 text-left list-none bg-white lg:p-0 lg:bg-transparent lg:h-10">
+<li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
+    <ul class="flex flex-row items-center w-full p-4 text-left list-none bg-white lg:pb-1 lg:p-0 lg:bg-transparent lg:h-10">
         {{#each this.items}}
-            <li class="{{#unless @last}}mr-3 {{/unless}}bg-gray-300 rounded px-1.5 pt-px inline-block w-auto tracking-wide text-blue-900 text-base leading-5.5 font-heading lg:mb-1 ">
+            <li class="{{#unless @last}}mr-3 {{/unless}}{{#if this.selected}}bg-blue-200 hover:bg-blue-300 text-blue-astronautBlue{{else}}bg-white hover:bg-grey-alto text-blue-congress{{/if}} rounded px-2 pt-px inline-block w-auto tracking-wide text-base leading-5.5 font-heading">
                 {{#decorator 'components/base/link'}}
-                    {{text}}       
+                    {{this.text}}       
                 {{/decorator}} 
             </li>
         {{/each}} 

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.12.3",
+    "version": "1.14.0",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

package/src/assets/css/custom-utilities.css

@@ -104,13 +104,13 @@
     }
 
     .-currentBrand {
-        @apply before:content-[''] lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-white lg:before:border-b-8 lg:before:border-blue-congress lg:before:mt-6;
+        @apply before:content-[''] md:before:relative md:before:-right-1/2 md:before:w-0 md:before:h-0 md:before:border-t-0 md:before:border-r-8 md:before:border-r-transparent md:before:border-l-8 md:before:border-l-white md:before:border-b-8 md:before:border-blue-congress md:before:mt-6;
     }
     .-currentService {
         @apply before:content-[''] before:hidden lg:before:flex before:relative before:w-0 before:h-0 before:mr-4 before:mt-0 before:border-r-0 before:border-t-8 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-8 before:border-b-transparent lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-12;
     }
     .-currentSection {
-        @apply before:content-[''] before:w-0 before:h-0 before:mr-2 before:-ml-4 before:border-r-0 before:border-t-7 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-7 before:border-b-transparent before:mb-0.5 lg:before:absolute lg:before:mb-0  lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:ml-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-8;
+        @apply lg:!pr-0 after:content-[''] after:w-0 after:h-0 after:mr-2 after:-ml-13-2 after:border-r-0 after:border-t-7 after:border-t-transparent after:border-l-8 after:border-l-white after:border-b-7 after:border-b-transparent after:mb-0.5 lg:after:relative lg:after:right-1/2 lg:after:mb-0  lg:after:w-0 lg:after:h-0 lg:after:mr-0 lg:after:ml-0 lg:after:border-t-0 lg:after:border-r-8 lg:after:border-r-transparent lg:after:border-l-8 lg:after:border-l-transparent lg:after:border-b-8 lg:after:border-b-white lg:after:mt-8;
     }
     .-warnung {
         @apply text-red-600 !important;