hr-design-system-handlebars 1.108.1 → 1.109.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.109.1 (Fri Oct 11 2024)
+
+#### 🐛 Bug Fix
+
+- remove unnecessary css (accordion) [#1102](https://github.com/mumprod/hr-design-system-handlebars/pull/1102) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v1.109.0 (Fri Oct 11 2024)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 2897 [#1099](https://github.com/mumprod/hr-design-system-handlebars/pull/1099) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.108.1 (Fri Oct 11 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -18,7 +18,7 @@
   --tw-scale-y: 1;
 }
 
-.from-\[\{\{_bgcolor\}\}\], .from-black, .from-white, .md\:from-white {
+.from-\[--color-brandnavigation-bg\], .from-\[--color-navigation-bg\], .from-black, .from-white, .md\:from-white {
   --tw-gradient-from-position:  ;
   --tw-gradient-via-position:  ;
   --tw-gradient-to-position:  ;
@@ -2024,6 +2024,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .resize {
   resize: both;
 }
+.scroll-mt-12 {
+  scroll-margin-top: 3rem;
+}
 .list-decimal {
   list-style-type: decimal;
 }
@@ -2662,8 +2665,13 @@ article.indexTextDS .indexTextHighlighted .link {
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
-.from-\[\{\{_bgcolor\}\}\] {
-  --tw-gradient-from: {{ bgcolor}} var(--tw-gradient-from-position);
+.from-\[--color-brandnavigation-bg\] {
+  --tw-gradient-from: var(--color-brandnavigation-bg) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-\[--color-navigation-bg\] {
+  --tw-gradient-from: var(--color-navigation-bg) var(--tw-gradient-from-position);
   --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
@@ -3516,7 +3524,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1728647677353;
+  counter-reset: cnt1728667021406;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -3920,7 +3928,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1728647677353 1;
+  counter-increment: cnt1728667021406 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3936,7 +3944,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1728647677353);
+  content: counter(cnt1728667021406);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -7710,6 +7718,10 @@ input[type='radio']:checked::after {
     flex: 0 1 auto;
   }
 
+  .lg\:scroll-mt-28 {
+    scroll-margin-top: 7rem;
+  }
+
   .lg\:grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }

package/dist/views/components/content/copytext/components/accordion/accordion.hbs

@@ -1,12 +1,12 @@
 {{#if this.title}}
-    <h2 class="clear-both mt-12 mb-5 text-lg font-normal accordion sm480:mt-14 sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h2>
+    <h2 class="clear-both mt-12 mb-5 text-lg font-normal sm480:mt-14 sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h2>
 {{/if}}
 <div x-cloak x-data="{selected:0}" class="print:hidden pb-3{{#unless this.title}} clear-both mt-12 sm480:mt-14{{/unless}}">
     {{#each this.copytextParagraph }}
         {{#if this.isHeadline}}
             {{#unless @first}}</div></div>{{/unless}}
             <button type="button"
-                    class="w-full text-left accordion link-focus"
+                    class="w-full text-left scroll-mt-12 lg:scroll-mt-28 link-focus"
                     @click="selected !== {{nextRandom}} ? (selected = {{getRandom}}, setTimeout(() => {if($el.getBoundingClientRect().top<0){$el.scrollIntoView({ block: 'start' })}}, 700)) : selected = null"
                     x-effect="$el.setAttribute('aria-label', selected  == {{getRandom}} ? 'Abschnitt {{strip this.text html}} schließen' : 'Abschnitt {{strip this.text html}} öffnen');$el.setAttribute('aria-expanded', selected  == {{getRandom}} ? 'true' : 'false')"
                     data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "Akkordeon::{{strip this.text html}}-Link geklickt"}]}'
@@ -29,7 +29,7 @@
                 x-ref="container{{getRandom}}"
                 x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
             >
-                <div class="mb-8 accordionItem">
+                <div class="mb-8">
         {{else}}
             {{#if (isStorybook)}}  
                 {{> components/content/copytext/components/accordion/accordion_item }}   

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

@@ -4,7 +4,7 @@
     {{/if}}
 >
     {{#if this.isAutosuggest}}
-        <div class="flex mx-0 w-full h-10 border-primary {{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
+        <div class="flex mx-0 w-full h-10 border-primary{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
             <input x-ref="autosuggestInput"
                    class="{{#if _inputclass }}{{_inputclass}}{{/if}} w-full h-10 pl-2 border-b-8 border-white bg-gray-alabaster text-gray-dark placeholder:text-gray-dark focus:outline-none js-autosuggest-input"
                    type="text"

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

@@ -9,12 +9,12 @@
             <button style="background-image: linear-gradient(90deg, {{_bgcolor}} 50%, transparent);" class="absolute left-0 z-10 flex items-center justify-start w-10 h-full text-{{_iconcolor}} disabled:hidden" @click="prev($refs.scrollContainer_{{getRandom}})" :disabled="!arrowLeftDisplay" tabindex="-1" aria-hidden="true" >
                 {{> components/base/image/icon _icon="arrow-left"  _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
             </button> 
-            <button style="background-image: linear-gradient(270deg, {{_bgcolor}} 50%, transparent);" class="bg-gradient-to-l from-[{{_bgcolor}}] absolute right-0 z-10 flex items-center justify-end w-10 h-full text-{{_iconcolor}} disabled:hidden group" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" tabindex="-1" aria-hidden="true">
+            <button style="background-image: linear-gradient(270deg, {{_bgcolor}} 50%, transparent);" class="bg-gradient-to-l absolute right-0 z-10 flex items-center justify-end w-10 h-full text-{{_iconcolor}} disabled:hidden group{{_css}}" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" tabindex="-1" aria-hidden="true">
                 {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
             </button>
         </div>
     </template>
-    <div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll transition-all duration-300 ease-in-out cursor-default hide-scroll-bar align-center">
+    <div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll transition-all duration-300 ease-in-out cursor-default hide-scroll-bar">
         {{> @partial-block }} 
     </div> 
 </div>

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

@@ -1,5 +1,5 @@
 <div class="w-full h-auto mb-10">
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     
     <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
         <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>
@@ -8,7 +8,7 @@
 {{/components/horizontal_scroll_container/horizontal_scroll_container}}
 </div>
 <div class="w-full h-auto mb-10">
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     
     <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
         <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann.</p>

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

@@ -1,5 +1,5 @@
 <div class="grid-cols-12 px-5 lg:px-10 col-full sm:col-main">
-    {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
+    {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _css=" from-[--color-brandnavigation-bg]" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
         <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}}

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

@@ -3,7 +3,7 @@
     class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-10 lg:col-main " 
     x-effect="$el.setAttribute('aria-expanded',  $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
 >
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     <div class="flex w-full">
         <span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>
 

package/dist/views_static/components/content/copytext/components/accordion/accordion.hbs

@@ -1,12 +1,12 @@
 {{#if this.title}}
-    <h2 class="clear-both mt-12 mb-5 text-lg font-normal accordion sm480:mt-14 sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h2>
+    <h2 class="clear-both mt-12 mb-5 text-lg font-normal sm480:mt-14 sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h2>
 {{/if}}
 <div x-cloak x-data="{selected:0}" class="print:hidden pb-3{{#unless this.title}} clear-both mt-12 sm480:mt-14{{/unless}}">
     {{#each this.copytextParagraph }}
         {{#if this.isHeadline}}
             {{#unless @first}}</div></div>{{/unless}}
             <button type="button"
-                    class="w-full text-left accordion link-focus"
+                    class="w-full text-left scroll-mt-12 lg:scroll-mt-28 link-focus"
                     @click="selected !== {{nextRandom}} ? (selected = {{getRandom}}, setTimeout(() => {if($el.getBoundingClientRect().top<0){$el.scrollIntoView({ block: 'start' })}}, 700)) : selected = null"
                     x-effect="$el.setAttribute('aria-label', selected  == {{getRandom}} ? 'Abschnitt {{strip this.text html}} schließen' : 'Abschnitt {{strip this.text html}} öffnen');$el.setAttribute('aria-expanded', selected  == {{getRandom}} ? 'true' : 'false')"
                     data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "Akkordeon::{{strip this.text html}}-Link geklickt"}]}'
@@ -29,7 +29,7 @@
                 x-ref="container{{getRandom}}"
                 x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
             >
-                <div class="mb-8 accordionItem">
+                <div class="mb-8">
         {{else}}
             {{#if (isStorybook)}}  
                 {{> components/content/copytext/components/accordion/accordion_item }}   

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

@@ -4,7 +4,7 @@
     {{/if}}
 >
     {{#if this.isAutosuggest}}
-        <div class="flex mx-0 w-full h-10 border-primary {{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
+        <div class="flex mx-0 w-full h-10 border-primary{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
             <input x-ref="autosuggestInput"
                    class="{{#if _inputclass }}{{_inputclass}}{{/if}} w-full h-10 pl-2 border-b-8 border-white bg-gray-alabaster text-gray-dark placeholder:text-gray-dark focus:outline-none js-autosuggest-input"
                    type="text"

package/dist/views_static/components/horizontal_scroll_container/horizontal_scroll_container.hbs

@@ -9,12 +9,12 @@
             <button style="background-image: linear-gradient(90deg, {{_bgcolor}} 50%, transparent);" class="absolute left-0 z-10 flex items-center justify-start w-10 h-full text-{{_iconcolor}} disabled:hidden" @click="prev($refs.scrollContainer_{{getRandom}})" :disabled="!arrowLeftDisplay" tabindex="-1" aria-hidden="true" >
                 {{> components/base/image/icon _icon="arrow-left"  _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
             </button> 
-            <button style="background-image: linear-gradient(270deg, {{_bgcolor}} 50%, transparent);" class="bg-gradient-to-l from-[{{_bgcolor}}] absolute right-0 z-10 flex items-center justify-end w-10 h-full text-{{_iconcolor}} disabled:hidden group" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" tabindex="-1" aria-hidden="true">
+            <button style="background-image: linear-gradient(270deg, {{_bgcolor}} 50%, transparent);" class="bg-gradient-to-l absolute right-0 z-10 flex items-center justify-end w-10 h-full text-{{_iconcolor}} disabled:hidden group{{_css}}" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" tabindex="-1" aria-hidden="true">
                 {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
             </button>
         </div>
     </template>
-    <div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll transition-all duration-300 ease-in-out cursor-default hide-scroll-bar align-center">
+    <div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll transition-all duration-300 ease-in-out cursor-default hide-scroll-bar">
         {{> @partial-block }} 
     </div> 
 </div>

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

@@ -1,5 +1,5 @@
 <div class="w-full h-auto mb-10">
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     
     <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
         <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>
@@ -8,7 +8,7 @@
 {{/components/horizontal_scroll_container/horizontal_scroll_container}}
 </div>
 <div class="w-full h-auto mb-10">
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     
     <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
         <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann.</p>

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

@@ -1,5 +1,5 @@
 <div class="grid-cols-12 px-5 lg:px-10 col-full sm:col-main">
-    {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
+    {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _css=" from-[--color-brandnavigation-bg]" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
         <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}}

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

@@ -3,7 +3,7 @@
     class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-10 lg:col-main " 
     x-effect="$el.setAttribute('aria-expanded',  $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
 >
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     <div class="flex w-full">
         <span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>
 

package/package.json

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

package/src/stories/views/components/content/copytext/components/accordion/accordion.hbs

@@ -1,12 +1,12 @@
 {{#if this.title}}
-    <h2 class="clear-both mt-12 mb-5 text-lg font-normal accordion sm480:mt-14 sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h2>
+    <h2 class="clear-both mt-12 mb-5 text-lg font-normal sm480:mt-14 sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h2>
 {{/if}}
 <div x-cloak x-data="{selected:0}" class="print:hidden pb-3{{#unless this.title}} clear-both mt-12 sm480:mt-14{{/unless}}">
     {{#each this.copytextParagraph }}
         {{#if this.isHeadline}}
             {{#unless @first}}</div></div>{{/unless}}
             <button type="button"
-                    class="w-full text-left accordion link-focus"
+                    class="w-full text-left scroll-mt-12 lg:scroll-mt-28 link-focus"
                     @click="selected !== {{nextRandom}} ? (selected = {{getRandom}}, setTimeout(() => {if($el.getBoundingClientRect().top<0){$el.scrollIntoView({ block: 'start' })}}, 700)) : selected = null"
                     x-effect="$el.setAttribute('aria-label', selected  == {{getRandom}} ? 'Abschnitt {{strip this.text html}} schließen' : 'Abschnitt {{strip this.text html}} öffnen');$el.setAttribute('aria-expanded', selected  == {{getRandom}} ? 'true' : 'false')"
                     data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "Akkordeon::{{strip this.text html}}-Link geklickt"}]}'
@@ -29,7 +29,7 @@
                 x-ref="container{{getRandom}}"
                 x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
             >
-                <div class="mb-8 accordionItem">
+                <div class="mb-8">
         {{else}}
             {{#if (isStorybook)}}  
                 {{> components/content/copytext/components/accordion/accordion_item }}   

package/src/stories/views/components/content_nav/content_nav_container.hbs

@@ -4,7 +4,7 @@
     {{/if}}
 >
     {{#if this.isAutosuggest}}
-        <div class="flex mx-0 w-full h-10 border-primary {{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
+        <div class="flex mx-0 w-full h-10 border-primary{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
             <input x-ref="autosuggestInput"
                    class="{{#if _inputclass }}{{_inputclass}}{{/if}} w-full h-10 pl-2 border-b-8 border-white bg-gray-alabaster text-gray-dark placeholder:text-gray-dark focus:outline-none js-autosuggest-input"
                    type="text"

package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs

@@ -9,12 +9,12 @@
             <button style="background-image: linear-gradient(90deg, {{_bgcolor}} 50%, transparent);" class="absolute left-0 z-10 flex items-center justify-start w-10 h-full text-{{_iconcolor}} disabled:hidden" @click="prev($refs.scrollContainer_{{getRandom}})" :disabled="!arrowLeftDisplay" tabindex="-1" aria-hidden="true" >
                 {{> components/base/image/icon _icon="arrow-left"  _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
             </button> 
-            <button style="background-image: linear-gradient(270deg, {{_bgcolor}} 50%, transparent);" class="bg-gradient-to-l from-[{{_bgcolor}}] absolute right-0 z-10 flex items-center justify-end w-10 h-full text-{{_iconcolor}} disabled:hidden group" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" tabindex="-1" aria-hidden="true">
+            <button style="background-image: linear-gradient(270deg, {{_bgcolor}} 50%, transparent);" class="bg-gradient-to-l absolute right-0 z-10 flex items-center justify-end w-10 h-full text-{{_iconcolor}} disabled:hidden group{{_css}}" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" tabindex="-1" aria-hidden="true">
                 {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
             </button>
         </div>
     </template>
-    <div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll transition-all duration-300 ease-in-out cursor-default hide-scroll-bar align-center">
+    <div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll transition-all duration-300 ease-in-out cursor-default hide-scroll-bar">
         {{> @partial-block }} 
     </div> 
 </div>

package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs

@@ -1,5 +1,5 @@
 <div class="w-full h-auto mb-10">
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     
     <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
         <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>
@@ -8,7 +8,7 @@
 {{/components/horizontal_scroll_container/horizontal_scroll_container}}
 </div>
 <div class="w-full h-auto mb-10">
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     
     <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
         <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann.</p>

package/src/stories/views/components/site_header/brand_navigation/brand_navigation.hbs

@@ -1,5 +1,5 @@
 <div class="grid-cols-12 px-5 lg:px-10 col-full sm:col-main">
-    {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
+    {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _css=" from-[--color-brandnavigation-bg]" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
         <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}}

package/src/stories/views/components/site_header/section_navigation/section_navigation.hbs

@@ -3,7 +3,7 @@
     class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-10 lg:col-main " 
     x-effect="$el.setAttribute('aria-expanded',  $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
 >
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     <div class="flex w-full">
         <span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>
 

package/tailwind.config.js

@@ -130,6 +130,7 @@ module.exports = {
             },
             zIndex: {
                 '0': '0',
+                '11': '11',
                 '40': '40',
                 '50': '50',
                 '100': '100',