hr-design-system-handlebars 1.52.16 → 1.52.18

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.52.18 (Fri Jan 26 2024)
+
+#### 🐛 Bug Fix
+
+- adjust font-sizes [#820](https://github.com/mumprod/hr-design-system-handlebars/pull/820) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v1.52.17 (Fri Jan 26 2024)
+
+#### 🐛 Bug Fix
+
+- Scrollpfeil bei hauptnavi sichtbar obwohl nicht nötig [#817](https://github.com/mumprod/hr-design-system-handlebars/pull/817) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.52.16 (Fri Jan 26 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1665,9 +1665,6 @@ a.link {
 .w-9 {
   width: 2.25rem;
 }
-.w-\[1600px\] {
-  width: 1600px;
-}
 .w-\[19px\] {
   width: 19px;
 }
@@ -2897,6 +2894,9 @@ a.link {
 .leading-7 {
   line-height: 1.75rem;
 }
+.leading-\[1\.625rem\] {
+  line-height: 1.625rem;
+}
 .leading-\[34px\] {
   line-height: 34px;
 }
@@ -3261,7 +3261,7 @@ a.link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1706271481537;
+  counter-reset: cnt1706285302242;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3563,7 +3563,7 @@ a.link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1706271481537 1;
+  counter-increment: cnt1706285302242 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3579,7 +3579,7 @@ a.link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1706271481537);
+  content: counter(cnt1706285302242);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5472,6 +5472,11 @@ a.link {
     line-height: 1.75rem;
   }
 
+  .sm480\:text-3xl {
+    font-size: 1.625rem;
+    line-height: 2rem;
+  }
+
   .sm480\:text-5xl {
     font-size: 2.125rem;
     line-height: 2.375rem;
@@ -5492,6 +5497,14 @@ a.link {
     line-height: 1.6875rem;
   }
 
+  .sm480\:leading-9 {
+    line-height: 2.25rem;
+  }
+
+  .sm480\:leading-normal {
+    line-height: 1.5;
+  }
+
     .sm480\:ar-16-7 {
         aspect-ratio: 16 / 7;
     }

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

@@ -25,6 +25,24 @@ export default function slider() {
         checkIfScrollable(e){     
             e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;  
             this.arrowsDisplay(e);
+        },
+        throttle(f, delay) {
+            let timer = 0;
+            return function(...args) {
+                clearTimeout(timer);
+                timer = setTimeout(() => f.apply(this, args), delay);
+            }
+        },
+        initialize(e) {
+            this.checkIfScrollable(e);
+
+            const resizeObserver = new ResizeObserver(this.throttle((entries) => {
+                entries.forEach(entry => {
+                    this.checkIfScrollable(e);
+                });
+            }, 100));
+            
+            resizeObserver.observe(e);
         }
     };
 }

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

@@ -2,7 +2,7 @@
     {{> components/base/image/icon _icon="quotation"  _addClass="sm:ml-4 mr-2 mt-px float-left text-gray-scorpion w-6 h-6 sm480:w-8 sm480:h-8 fill-current dark:fill-link-dark"}}
     <span class="sr-only">{{loca "story_cite_intro_sr" }}</span>
     <blockquote>
-        <cite class="block mx-8 text-base not-italic sm480:mx-10 font-headingSerif sm:mx-14 sm480:text-xl dark:text-text-dark">{{{this.text}}}</cite>
+        <cite class="block mx-8 text-lg leading-[1.625rem] not-italic sm480:mx-10 font-headingSerif sm:mx-14 sm480:text-xl sm480:leading-normal dark:text-text-dark">{{{this.text}}}</cite>
         {{#with this.paragraphProperties}}
             {{#with this.[0]}}
                 {{#with this.citeAuthor}}

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

@@ -1,16 +1,8 @@
-<h2 class="clear-both text-lg sm480:text-2xl font-headingSerif mt-11 dark:text-text-dark">{{{this.text}}}</h2>
+<h2 class="clear-both text-2xl sm480:text-3xl font-headingSerif mt-11 dark:text-text-dark">{{{this.text}}}</h2>
 {{#with this.paragraphProperties.[0]}}
     {{#with this.faqAnswer}}
         {{#each this.split}}
-            {{#if this.isText}}
-                <p class="mt-6 text-base sm480:text-xl dark:text-text-dark">{{{this.text}}}</p>
-            {{/if}}
-            {{#if this.isUl}}
-                <ul class="mt-6 ml-5 text-base list-disc sm480:text-xl dark:text-text-dark">{{{this.text}}}</ul>
-            {{/if}}
-            {{#if this.isOl}}
-                <ol class="mt-6 ml-5 text-base list-decimal sm480:text-xl dark:text-text-dark">{{{this.text}}}</ol>
-            {{/if}}
+            {{> components/content/copytext/components/paragraph/paragraph_body }}
         {{/each}}
     {{/with}}
 {{/with}}

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

@@ -1 +1 @@
-<h2 class="clear-both text-lg sm480:text-2xl font-headingSerif mt-11 dark:text-text-dark">{{{this.text}}}</h2>
+<h2 class="clear-both text-2xl sm480:text-3xl sm480:leading-9 font-headingSerif mt-11 dark:text-text-dark">{{{this.text}}}</h2>

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

@@ -1,15 +1,7 @@
 {{#with this.paragraphProperties.[0]}}
     {{#with this.jobDescription}}
         {{#each this.split}}
-            {{#if this.isText}}
-                <p class="mt-6 text-base sm480:text-xl dark:text-text-dark">{{{this.text}}}</p>
-            {{/if}}
-            {{#if this.isUl}}
-                <ul class="mt-6 ml-5 text-base list-disc sm480:text-xl dark:text-text-dark">{{{this.text}}}</ul>
-            {{/if}}
-            {{#if this.isOl}}
-                <ol class="mt-6 ml-5 text-base list-decimal sm480:text-xl dark:text-text-dark">{{{this.text}}}</ol>
-            {{/if}}
+            {{> components/content/copytext/components/paragraph/paragraph_body }}
         {{/each}}
     {{/with}}
 {{/with}}

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

@@ -0,0 +1,3 @@
+{{#each this.text.split}}
+    {{> components/content/copytext/components/paragraph/paragraph_body }}
+{{/each}}

package/dist/views/components/content/copytext/components/paragraph/paragraph_body.hbs

@@ -0,0 +1,9 @@
+{{#if this.isText}}
+    <p class="mt-6 text-lg leading-[1.625rem] sm480:text-xl sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+{{/if}}
+{{#if this.isUl}}
+    <ul class="mt-6 ml-5 text-lg leading-[1.625rem] list-disc sm480:text-xl sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+{{/if}}
+{{#if this.isOl}}
+    <ol class="mt-6 ml-5 text-lg leading-[1.625rem] list-decimal sm480:text-xl sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+{{/if}}

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

@@ -104,7 +104,7 @@
     {{~/with}}
 
     {{#if this.isParagraph}}
-        {{> components/content/copytext/components/paragraph }}
+        {{> components/content/copytext/components/paragraph/paragraph }}
     {{/if}}
 
     {{#if this.isCite}}

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

@@ -1,6 +1,5 @@
 <div x-data="slider()"
-    x-init="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
-    @resize.window="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
+    x-init="initialize($refs.scrollContainer_{{getRandom}})"
     class="relative w-full"
     ax-load 
     x-ignore

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

@@ -1,9 +1,18 @@
 <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"}}
     
-    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-primary">
+    <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>
     </div> 
 
+{{/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"}}
+    
+    <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>
+    </div> 
+
 {{/components/horizontal_scroll_container/horizontal_scroll_container}}
 </div>

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

@@ -2,7 +2,7 @@
     {{> components/base/image/icon _icon="quotation"  _addClass="sm:ml-4 mr-2 mt-px float-left text-gray-scorpion w-6 h-6 sm480:w-8 sm480:h-8 fill-current dark:fill-link-dark"}}
     <span class="sr-only">{{loca "story_cite_intro_sr" }}</span>
     <blockquote>
-        <cite class="block mx-8 text-base not-italic sm480:mx-10 font-headingSerif sm:mx-14 sm480:text-xl dark:text-text-dark">{{{this.text}}}</cite>
+        <cite class="block mx-8 text-lg leading-[1.625rem] not-italic sm480:mx-10 font-headingSerif sm:mx-14 sm480:text-xl sm480:leading-normal dark:text-text-dark">{{{this.text}}}</cite>
         {{#with this.paragraphProperties}}
             {{#with this.[0]}}
                 {{#with this.citeAuthor}}

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

@@ -1,16 +1,8 @@
-<h2 class="clear-both text-lg sm480:text-2xl font-headingSerif mt-11 dark:text-text-dark">{{{this.text}}}</h2>
+<h2 class="clear-both text-2xl sm480:text-3xl font-headingSerif mt-11 dark:text-text-dark">{{{this.text}}}</h2>
 {{#with this.paragraphProperties.[0]}}
     {{#with this.faqAnswer}}
         {{#each this.split}}
-            {{#if this.isText}}
-                <p class="mt-6 text-base sm480:text-xl dark:text-text-dark">{{{this.text}}}</p>
-            {{/if}}
-            {{#if this.isUl}}
-                <ul class="mt-6 ml-5 text-base list-disc sm480:text-xl dark:text-text-dark">{{{this.text}}}</ul>
-            {{/if}}
-            {{#if this.isOl}}
-                <ol class="mt-6 ml-5 text-base list-decimal sm480:text-xl dark:text-text-dark">{{{this.text}}}</ol>
-            {{/if}}
+            {{> components/content/copytext/components/paragraph/paragraph_body }}
         {{/each}}
     {{/with}}
 {{/with}}

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

@@ -1 +1 @@
-<h2 class="clear-both text-lg sm480:text-2xl font-headingSerif mt-11 dark:text-text-dark">{{{this.text}}}</h2>
+<h2 class="clear-both text-2xl sm480:text-3xl sm480:leading-9 font-headingSerif mt-11 dark:text-text-dark">{{{this.text}}}</h2>

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

@@ -1,15 +1,7 @@
 {{#with this.paragraphProperties.[0]}}
     {{#with this.jobDescription}}
         {{#each this.split}}
-            {{#if this.isText}}
-                <p class="mt-6 text-base sm480:text-xl dark:text-text-dark">{{{this.text}}}</p>
-            {{/if}}
-            {{#if this.isUl}}
-                <ul class="mt-6 ml-5 text-base list-disc sm480:text-xl dark:text-text-dark">{{{this.text}}}</ul>
-            {{/if}}
-            {{#if this.isOl}}
-                <ol class="mt-6 ml-5 text-base list-decimal sm480:text-xl dark:text-text-dark">{{{this.text}}}</ol>
-            {{/if}}
+            {{> components/content/copytext/components/paragraph/paragraph_body }}
         {{/each}}
     {{/with}}
 {{/with}}

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

@@ -0,0 +1,3 @@
+{{#each this.text.split}}
+    {{> components/content/copytext/components/paragraph/paragraph_body }}
+{{/each}}

package/dist/views_static/components/content/copytext/components/paragraph/paragraph_body.hbs

@@ -0,0 +1,9 @@
+{{#if this.isText}}
+    <p class="mt-6 text-lg leading-[1.625rem] sm480:text-xl sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+{{/if}}
+{{#if this.isUl}}
+    <ul class="mt-6 ml-5 text-lg leading-[1.625rem] list-disc sm480:text-xl sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+{{/if}}
+{{#if this.isOl}}
+    <ol class="mt-6 ml-5 text-lg leading-[1.625rem] list-decimal sm480:text-xl sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+{{/if}}

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

@@ -104,7 +104,7 @@
     {{~/with}}
 
     {{#if this.isParagraph}}
-        {{> components/content/copytext/components/paragraph }}
+        {{> components/content/copytext/components/paragraph/paragraph }}
     {{/if}}
 
     {{#if this.isCite}}

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

@@ -1,6 +1,5 @@
 <div x-data="slider()"
-    x-init="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
-    @resize.window="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
+    x-init="initialize($refs.scrollContainer_{{getRandom}})"
     class="relative w-full"
     ax-load 
     x-ignore

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

@@ -1,9 +1,18 @@
 <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"}}
     
-    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-primary">
+    <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>
     </div> 
 
+{{/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"}}
+    
+    <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>
+    </div> 
+
 {{/components/horizontal_scroll_container/horizontal_scroll_container}}
 </div>

package/package.json

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

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

@@ -2,7 +2,7 @@
     {{> components/base/image/icon _icon="quotation"  _addClass="sm:ml-4 mr-2 mt-px float-left text-gray-scorpion w-6 h-6 sm480:w-8 sm480:h-8 fill-current dark:fill-link-dark"}}
     <span class="sr-only">{{loca "story_cite_intro_sr" }}</span>
     <blockquote>
-        <cite class="block mx-8 text-base not-italic sm480:mx-10 font-headingSerif sm:mx-14 sm480:text-xl dark:text-text-dark">{{{this.text}}}</cite>
+        <cite class="block mx-8 text-lg leading-[1.625rem] not-italic sm480:mx-10 font-headingSerif sm:mx-14 sm480:text-xl sm480:leading-normal dark:text-text-dark">{{{this.text}}}</cite>
         {{#with this.paragraphProperties}}
             {{#with this.[0]}}
                 {{#with this.citeAuthor}}

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

@@ -1,16 +1,8 @@
-<h2 class="clear-both text-lg sm480:text-2xl font-headingSerif mt-11 dark:text-text-dark">{{{this.text}}}</h2>
+<h2 class="clear-both text-2xl sm480:text-3xl font-headingSerif mt-11 dark:text-text-dark">{{{this.text}}}</h2>
 {{#with this.paragraphProperties.[0]}}
     {{#with this.faqAnswer}}
         {{#each this.split}}
-            {{#if this.isText}}
-                <p class="mt-6 text-base sm480:text-xl dark:text-text-dark">{{{this.text}}}</p>
-            {{/if}}
-            {{#if this.isUl}}
-                <ul class="mt-6 ml-5 text-base list-disc sm480:text-xl dark:text-text-dark">{{{this.text}}}</ul>
-            {{/if}}
-            {{#if this.isOl}}
-                <ol class="mt-6 ml-5 text-base list-decimal sm480:text-xl dark:text-text-dark">{{{this.text}}}</ol>
-            {{/if}}
+            {{> components/content/copytext/components/paragraph/paragraph_body }}
         {{/each}}
     {{/with}}
 {{/with}}

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

@@ -1 +1 @@
-<h2 class="clear-both text-lg sm480:text-2xl font-headingSerif mt-11 dark:text-text-dark">{{{this.text}}}</h2>
+<h2 class="clear-both text-2xl sm480:text-3xl sm480:leading-9 font-headingSerif mt-11 dark:text-text-dark">{{{this.text}}}</h2>

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

@@ -1,15 +1,7 @@
 {{#with this.paragraphProperties.[0]}}
     {{#with this.jobDescription}}
         {{#each this.split}}
-            {{#if this.isText}}
-                <p class="mt-6 text-base sm480:text-xl dark:text-text-dark">{{{this.text}}}</p>
-            {{/if}}
-            {{#if this.isUl}}
-                <ul class="mt-6 ml-5 text-base list-disc sm480:text-xl dark:text-text-dark">{{{this.text}}}</ul>
-            {{/if}}
-            {{#if this.isOl}}
-                <ol class="mt-6 ml-5 text-base list-decimal sm480:text-xl dark:text-text-dark">{{{this.text}}}</ol>
-            {{/if}}
+            {{> components/content/copytext/components/paragraph/paragraph_body }}
         {{/each}}
     {{/with}}
 {{/with}}

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

@@ -0,0 +1,3 @@
+{{#each this.text.split}}
+    {{> components/content/copytext/components/paragraph/paragraph_body }}
+{{/each}}

package/src/stories/views/components/content/copytext/components/paragraph/paragraph_body.hbs

@@ -0,0 +1,9 @@
+{{#if this.isText}}
+    <p class="mt-6 text-lg leading-[1.625rem] sm480:text-xl sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+{{/if}}
+{{#if this.isUl}}
+    <ul class="mt-6 ml-5 text-lg leading-[1.625rem] list-disc sm480:text-xl sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+{{/if}}
+{{#if this.isOl}}
+    <ol class="mt-6 ml-5 text-lg leading-[1.625rem] list-decimal sm480:text-xl sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+{{/if}}

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

@@ -104,7 +104,7 @@
     {{~/with}}
 
     {{#if this.isParagraph}}
-        {{> components/content/copytext/components/paragraph }}
+        {{> components/content/copytext/components/paragraph/paragraph }}
     {{/if}}
 
     {{#if this.isCite}}

package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.alpine.js

@@ -25,6 +25,24 @@ export default function slider() {
         checkIfScrollable(e){     
             e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;  
             this.arrowsDisplay(e);
+        },
+        throttle(f, delay) {
+            let timer = 0;
+            return function(...args) {
+                clearTimeout(timer);
+                timer = setTimeout(() => f.apply(this, args), delay);
+            }
+        },
+        initialize(e) {
+            this.checkIfScrollable(e);
+
+            const resizeObserver = new ResizeObserver(this.throttle((entries) => {
+                entries.forEach(entry => {
+                    this.checkIfScrollable(e);
+                });
+            }, 100));
+            
+            resizeObserver.observe(e);
         }
     };
 }

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

@@ -1,6 +1,5 @@
 <div x-data="slider()"
-    x-init="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
-    @resize.window="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
+    x-init="initialize($refs.scrollContainer_{{getRandom}})"
     class="relative w-full"
     ax-load 
     x-ignore

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

@@ -1,9 +1,18 @@
 <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"}}
     
-    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-primary">
+    <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>
     </div> 
 
+{{/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"}}
+    
+    <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>
+    </div> 
+
 {{/components/horizontal_scroll_container/horizontal_scroll_container}}
 </div>

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

@@ -1,11 +0,0 @@
-{{#each this.text.split}}
-    {{#if this.isText}}
-        <p class="mt-6 text-base sm480:text-xl dark:text-text-dark">{{{this.text}}}</p>
-    {{/if}}
-    {{#if this.isUl}}
-        <ul class="mt-6 ml-5 text-base list-disc sm480:text-xl dark:text-text-dark">{{{this.text}}}</ul>
-    {{/if}}
-    {{#if this.isOl}}
-        <ol class="mt-6 ml-5 text-base list-decimal sm480:text-xl dark:text-text-dark">{{{this.text}}}</ol>
-    {{/if}}
-{{/each}}

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

@@ -1,11 +0,0 @@
-{{#each this.text.split}}
-    {{#if this.isText}}
-        <p class="mt-6 text-base sm480:text-xl dark:text-text-dark">{{{this.text}}}</p>
-    {{/if}}
-    {{#if this.isUl}}
-        <ul class="mt-6 ml-5 text-base list-disc sm480:text-xl dark:text-text-dark">{{{this.text}}}</ul>
-    {{/if}}
-    {{#if this.isOl}}
-        <ol class="mt-6 ml-5 text-base list-decimal sm480:text-xl dark:text-text-dark">{{{this.text}}}</ol>
-    {{/if}}
-{{/each}}

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

@@ -1,11 +0,0 @@
-{{#each this.text.split}}
-    {{#if this.isText}}
-        <p class="mt-6 text-base sm480:text-xl dark:text-text-dark">{{{this.text}}}</p>
-    {{/if}}
-    {{#if this.isUl}}
-        <ul class="mt-6 ml-5 text-base list-disc sm480:text-xl dark:text-text-dark">{{{this.text}}}</ul>
-    {{/if}}
-    {{#if this.isOl}}
-        <ol class="mt-6 ml-5 text-base list-decimal sm480:text-xl dark:text-text-dark">{{{this.text}}}</ol>
-    {{/if}}
-{{/each}}