hr-design-system-handlebars 1.108.1 → 1.109.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/assets/index.css +11 -6
  3. package/dist/views/components/content_nav/content_nav_container.hbs +1 -1
  4. package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs +2 -2
  5. package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +2 -2
  6. package/dist/views/components/site_header/brand_navigation/brand_navigation.hbs +1 -1
  7. package/dist/views/components/site_header/section_navigation/section_navigation.hbs +1 -1
  8. package/dist/views_static/components/content_nav/content_nav_container.hbs +1 -1
  9. package/dist/views_static/components/horizontal_scroll_container/horizontal_scroll_container.hbs +2 -2
  10. package/dist/views_static/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +2 -2
  11. package/dist/views_static/components/site_header/brand_navigation/brand_navigation.hbs +1 -1
  12. package/dist/views_static/components/site_header/section_navigation/section_navigation.hbs +1 -1
  13. package/package.json +1 -1
  14. package/src/stories/views/components/content_nav/content_nav_container.hbs +1 -1
  15. package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs +2 -2
  16. package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +2 -2
  17. package/src/stories/views/components/site_header/brand_navigation/brand_navigation.hbs +1 -1
  18. package/src/stories/views/components/site_header/section_navigation/section_navigation.hbs +1 -1
  19. package/tailwind.config.js +1 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v1.109.0 (Fri Oct 11 2024)
2
+
3
+ #### 🚀 Enhancement
4
+
5
+ - Feature/dpe 2897 [#1099](https://github.com/mumprod/hr-design-system-handlebars/pull/1099) ([@szuelch](https://github.com/szuelch))
6
+
7
+ #### Authors: 1
8
+
9
+ - [@szuelch](https://github.com/szuelch)
10
+
11
+ ---
12
+
1
13
  # v1.108.1 (Fri Oct 11 2024)
2
14
 
3
15
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -18,7 +18,7 @@
18
18
  --tw-scale-y: 1;
19
19
  }
20
20
 
21
- .from-\[\{\{_bgcolor\}\}\], .from-black, .from-white, .md\:from-white {
21
+ .from-\[--color-brandnavigation-bg\], .from-\[--color-navigation-bg\], .from-black, .from-white, .md\:from-white {
22
22
  --tw-gradient-from-position: ;
23
23
  --tw-gradient-via-position: ;
24
24
  --tw-gradient-to-position: ;
@@ -2662,8 +2662,13 @@ article.indexTextDS .indexTextHighlighted .link {
2662
2662
  .bg-gradient-to-t {
2663
2663
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
2664
2664
  }
2665
- .from-\[\{\{_bgcolor\}\}\] {
2666
- --tw-gradient-from: {{ bgcolor}} var(--tw-gradient-from-position);
2665
+ .from-\[--color-brandnavigation-bg\] {
2666
+ --tw-gradient-from: var(--color-brandnavigation-bg) var(--tw-gradient-from-position);
2667
+ --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
2668
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
2669
+ }
2670
+ .from-\[--color-navigation-bg\] {
2671
+ --tw-gradient-from: var(--color-navigation-bg) var(--tw-gradient-from-position);
2667
2672
  --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
2668
2673
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
2669
2674
  }
@@ -3516,7 +3521,7 @@ article.indexTextDS .indexTextHighlighted .link {
3516
3521
  border-bottom-color: var(--color-secondary-ds);
3517
3522
  }
3518
3523
  .counter-reset {
3519
- counter-reset: cnt1728647677353;
3524
+ counter-reset: cnt1728649888110;
3520
3525
  }
3521
3526
  .placeholder-text-xs::-webkit-input-placeholder {
3522
3527
  font-size: 0.75rem;
@@ -3920,7 +3925,7 @@ article.indexTextDS .indexTextHighlighted .link {
3920
3925
  --tw-ring-color: rgba(255, 255, 255, 0.5);
3921
3926
  }
3922
3927
  .-ordered {
3923
- counter-increment: cnt1728647677353 1;
3928
+ counter-increment: cnt1728649888110 1;
3924
3929
  }
3925
3930
  .-ordered::before {
3926
3931
  position: absolute;
@@ -3936,7 +3941,7 @@ article.indexTextDS .indexTextHighlighted .link {
3936
3941
  letter-spacing: .0125em;
3937
3942
  --tw-text-opacity: 1;
3938
3943
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3939
- content: counter(cnt1728647677353);
3944
+ content: counter(cnt1728649888110);
3940
3945
  }
3941
3946
  /*! ****************************/
3942
3947
  /*! DataPolicy stuff */
package/dist/views/components/content_nav/content_nav_container.hbs CHANGED
@@ -4,7 +4,7 @@
4
4
  {{/if}}
5
5
  >
6
6
  {{#if this.isAutosuggest}}
7
- <div class="flex mx-0 w-full h-10 border-primary {{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
7
+ <div class="flex mx-0 w-full h-10 border-primary{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
8
8
  <input x-ref="autosuggestInput"
9
9
  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"
10
10
  type="text"
package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs CHANGED
@@ -9,12 +9,12 @@
9
9
  <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" >
10
10
  {{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
11
11
  </button>
12
- <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">
12
+ <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">
13
13
  {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
14
14
  </button>
15
15
  </div>
16
16
  </template>
17
- <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">
17
+ <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">
18
18
  {{> @partial-block }}
19
19
  </div>
20
20
  </div>
package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <div class="w-full h-auto mb-10">
2
- {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
2
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
3
3
 
4
4
  <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
5
5
  <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 @@
8
8
  {{/components/horizontal_scroll_container/horizontal_scroll_container}}
9
9
  </div>
10
10
  <div class="w-full h-auto mb-10">
11
- {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
11
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
12
12
 
13
13
  <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
14
14
  <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 CHANGED
@@ -1,5 +1,5 @@
1
1
  <div class="grid-cols-12 px-5 lg:px-10 col-full sm:col-main">
2
- {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
2
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _css=" from-[--color-brandnavigation-bg]" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
3
3
  <nav class="flex w-full text-xs list-none text-grey-scorpion">
4
4
  <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
5
5
  {{#with this.brandNavigationItems}}
package/dist/views/components/site_header/section_navigation/section_navigation.hbs CHANGED
@@ -3,7 +3,7 @@
3
3
  class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-10 lg:col-main "
4
4
  x-effect="$el.setAttribute('aria-expanded', $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
5
5
  >
6
- {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
6
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
7
7
  <div class="flex w-full">
8
8
  <span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>
9
9
 
package/dist/views_static/components/content_nav/content_nav_container.hbs CHANGED
@@ -4,7 +4,7 @@
4
4
  {{/if}}
5
5
  >
6
6
  {{#if this.isAutosuggest}}
7
- <div class="flex mx-0 w-full h-10 border-primary {{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
7
+ <div class="flex mx-0 w-full h-10 border-primary{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
8
8
  <input x-ref="autosuggestInput"
9
9
  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"
10
10
  type="text"
package/dist/views_static/components/horizontal_scroll_container/horizontal_scroll_container.hbs CHANGED
@@ -9,12 +9,12 @@
9
9
  <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" >
10
10
  {{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
11
11
  </button>
12
- <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">
12
+ <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">
13
13
  {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
14
14
  </button>
15
15
  </div>
16
16
  </template>
17
- <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">
17
+ <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">
18
18
  {{> @partial-block }}
19
19
  </div>
20
20
  </div>
package/dist/views_static/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <div class="w-full h-auto mb-10">
2
- {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
2
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
3
3
 
4
4
  <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
5
5
  <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 @@
8
8
  {{/components/horizontal_scroll_container/horizontal_scroll_container}}
9
9
  </div>
10
10
  <div class="w-full h-auto mb-10">
11
- {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
11
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
12
12
 
13
13
  <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
14
14
  <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 CHANGED
@@ -1,5 +1,5 @@
1
1
  <div class="grid-cols-12 px-5 lg:px-10 col-full sm:col-main">
2
- {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
2
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _css=" from-[--color-brandnavigation-bg]" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
3
3
  <nav class="flex w-full text-xs list-none text-grey-scorpion">
4
4
  <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
5
5
  {{#with this.brandNavigationItems}}
package/dist/views_static/components/site_header/section_navigation/section_navigation.hbs CHANGED
@@ -3,7 +3,7 @@
3
3
  class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-10 lg:col-main "
4
4
  x-effect="$el.setAttribute('aria-expanded', $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
5
5
  >
6
- {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
6
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
7
7
  <div class="flex w-full">
8
8
  <span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>
9
9
 
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",
8
8
  "repository": "https://github.com/szuelch/hr-design-system-handlebars",
9
- "version": "1.108.1",
9
+ "version": "1.109.0",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/stories/views/components/content_nav/content_nav_container.hbs CHANGED
@@ -4,7 +4,7 @@
4
4
  {{/if}}
5
5
  >
6
6
  {{#if this.isAutosuggest}}
7
- <div class="flex mx-0 w-full h-10 border-primary {{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
7
+ <div class="flex mx-0 w-full h-10 border-primary{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
8
8
  <input x-ref="autosuggestInput"
9
9
  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"
10
10
  type="text"
package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs CHANGED
@@ -9,12 +9,12 @@
9
9
  <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" >
10
10
  {{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
11
11
  </button>
12
- <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">
12
+ <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">
13
13
  {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
14
14
  </button>
15
15
  </div>
16
16
  </template>
17
- <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">
17
+ <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">
18
18
  {{> @partial-block }}
19
19
  </div>
20
20
  </div>
package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <div class="w-full h-auto mb-10">
2
- {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
2
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
3
3
 
4
4
  <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
5
5
  <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 @@
8
8
  {{/components/horizontal_scroll_container/horizontal_scroll_container}}
9
9
  </div>
10
10
  <div class="w-full h-auto mb-10">
11
- {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
11
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
12
12
 
13
13
  <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
14
14
  <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 CHANGED
@@ -1,5 +1,5 @@
1
1
  <div class="grid-cols-12 px-5 lg:px-10 col-full sm:col-main">
2
- {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
2
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _css=" from-[--color-brandnavigation-bg]" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
3
3
  <nav class="flex w-full text-xs list-none text-grey-scorpion">
4
4
  <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
5
5
  {{#with this.brandNavigationItems}}
package/src/stories/views/components/site_header/section_navigation/section_navigation.hbs CHANGED
@@ -3,7 +3,7 @@
3
3
  class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-10 lg:col-main "
4
4
  x-effect="$el.setAttribute('aria-expanded', $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
5
5
  >
6
- {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
6
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
7
7
  <div class="flex w-full">
8
8
  <span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>
9
9
 
package/tailwind.config.js CHANGED
@@ -130,6 +130,7 @@ module.exports = {
130
130
  },
131
131
  zIndex: {
132
132
  '0': '0',
133
+ '11': '11',
133
134
  '40': '40',
134
135
  '50': '50',
135
136
  '100': '100',