hr-design-system-handlebars 0.52.2 → 0.53.2

package/dist/views/components/teaser/teaser_poster.hbs

@@ -1,14 +1,14 @@
-<article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+<article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
     <figure class="ar-1-1" aria-hidden="true">
-        {{~> components/base/image/responsive_image this.teaserImage type=this.teaserType variant=this.content.imageVariant noDelay=../_noDelay addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}
+        {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}
     </figure> 
     <div class="absolute flex justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-3xl rounded-br-3xl" aria-hidden="true">
         <div class="self-center block mx-8 text-center text-white">
-            {{> components/teaser/components/teaser_heading headlineTag="h2" size=teaserSize font=(inline-switch isSerifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') }}   
+            {{> components/teaser/components/teaser_heading _headlineTag="h2" _label=this.label _readMore=this.link.readMoreText.readMoreScreenreader _size=this.teaserSize _title=this.title _topline=this.topline _teaserType=this.teaserType _font=(inline-switch isSerifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') }}   
         </div>
     </div>
-    {{#>components/base/link css="absolute flex w-full h-full justify-center" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
-        <div class="self-end {{inline-switch teaserSize '["33","50"]' '["mb-8 px-2","mb-8 md:mb-16 px-4 py-2.5"]'}} text-white border border-white font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor">{{this.link.readMoreText.readMoreLong}}</div>
+    {{#>components/base/link _css="absolute flex w-full h-full justify-center" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="mediaLink" }}
+        <div class="self-end {{inline-switch this.teaserSize '["33","50"]' '["mb-8 px-2","mb-8 md:mb-16 px-4 py-2.5"]'}} text-white border border-white font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor">{{this.link.readMoreText.readMoreLong}}</div>
     {{/components/base/link}} 
     <span class="sr-only">{{this.link.readMoreText.readMoreLong}}: {{this.title}}</span> 
 </article>

package/dist/views/components/teaser/teaser_standard.hbs

@@ -13,21 +13,21 @@
     </figure>
     <div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}">
         <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
-            {{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }} 
+            {{#>components/base/link _css="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="headlineLink" }} 
                 {{> components/teaser/components/teaser_heading 
-                fontVariant=this.headingFontVariant
-                headlineTag=this.headlineTag 
-                label=this.label 
-                readMore=this.link.readMoreText.readMoreScreenreader 
-                size=this.teaserSize 
-                title=this.title 
-                topline=this.topline 
-                teaserType=this.teaserType
+                _fontVariant=this.headingFontVariant
+                _headlineTag=this.headlineTag 
+                _label=this.label 
+                _readMore=this.link.readMoreText.readMoreScreenreader 
+                _size=this.teaserSize 
+                _title=this.title 
+                _topline=this.topline 
+                _teaserType=this.teaserType
                 _isMobile1to1=this.isMobile1to1}}            
             {{/components/base/link}}   
         </header>
         <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
-            {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
+            {{> components/teaser/components/teaser_text _text=this.shorttext _size=this.teaserSize }}
             {{> components/teaser/components/teaser_byline}} 
         </section>
     </div>

package/dist/views/components/video/livestream/video_livestream.hbs

@@ -22,12 +22,12 @@
                 "xl": "{{_posterImage.url.16to9_retina}}"
             }
     {{else}}
-        {{#if teaseritem ~}}
+        {{#if this.teaseritem ~}}
             ,"previewImageUrl":{
-                "s": "{{if teaseritem.[0] teaseritem.[0].url.16to9 teaseritem.url.16to9 }}",
-                "m": "{{if teaseritem.[0] teaseritem.[0].url.16to9 teaseritem.url.16to9 }}",
-                "l": "{{if teaseritem.[0] teaseritem.[0].url.16to9 teaseritem.url.16to9 }}",
-                "xl": "{{if teaseritem.[0] teaseritem.[0].url.16to9_retina teaseritem.url.16to9_retina }}"
+                "s": "{{if this.teaseritem.[0] this.teaseritem.[0].url.16to9 this.teaseritem.url.16to9 }}",
+                "m": "{{if this.teaseritem.[0] this.teaseritem.[0].url.16to9 this.teaseritem.url.16to9 }}",
+                "l": "{{if this.teaseritem.[0] this.teaseritem.[0].url.16to9 this.teaseritem.url.16to9 }}",
+                "xl": "{{if this.teaseritem.[0] this.teaseritem.[0].url.16to9_retina this.teaseritem.url.16to9_retina }}"
             }
         {{else}}
            ,"previewImageUrl" : "{{resourceUrl 'assets/base/video/dummy.jpg'}}"

package/dist/views/components/video/video_element.hbs

@@ -66,12 +66,12 @@
         {{#with _teaser}}
             
                 {{~#if ../_isCopyText~}}
-                    {{~> components/base/image/responsive_image this.teaserImage type=(if this.teaserType this.teaserType 'story') variant=(if this.content.imageVariant this.content.imageVariant '100-copytext')  _addClassImg="ar__content" _noDelay=../_noDelay ~}}
+                    {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.content.imageVariant this.content.imageVariant '100-copytext')  _addClassImg="ar__content" _noDelay=../_noDelay ~}}
                 {{else}}
                     {{#>components/base/link _cssClasses="c-teaser__mediaLink" _isAriaHidden=true
                                 _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
                                 _clickLabelPrefix2="mediaLink" }}                       
-                        {{~> components/base/image/responsive_image this.teaserImage type=(if this.teaserType this.teaserType 'story') variant=(if this.content.imageVariant this.content.imageVariant '100-copytext')  _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../../_noDelay ~}}
+                        {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.content.imageVariant this.content.imageVariant '100-copytext')  _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../../_noDelay ~}}
                     {{/components/base/link }}
                 {{/if}}
                 

package/package.json

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

package/src/stories/views/components/audio/audio_element.hbs

@@ -32,12 +32,12 @@
                 >               
                 {{#with _teaser}}
                     {{~#if _isCopyText~}}
-                        {{> components/base/image/responsive_image this.teaserImage _type=(if this.teasertype this.teasertype 'story') _variant=(if this.imageVariant this.imageVariant '100-copytext')  _addClassImg="ar__content" _addClass=_addClass _noDelay=../_noDelay}}
+                        {{> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.imageVariant this.imageVariant '100-copytext')  _addClassImg="ar__content" _addClass=../_addClass _noDelay=../_noDelay}}
                     {{else}}
                         {{#>components/base/link _cssClasses="c-teaser__mediaLink" _isAriaHidden=true
                                     _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
                                     _clickLabelPrefix2="mediaLink" }}
-                            {{> components/base/image/responsive_image this.teaserImage _type=(if this.teasertype this.teasertype 'story') _variant=(if this.imageVariant this.imageVariant '100-copytext')  _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _addClass=_addClass _noDelay=../../_noDelay}}
+                            {{> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.imageVariant this.imageVariant '100-copytext')  _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _addClass=../_addClass _noDelay=../../_noDelay}}
                         {{/components/base/link}} 
                     {{~/if~}}
                 {{~/with~}}

package/src/stories/views/components/base/image/responsive_image.hbs

@@ -10,12 +10,12 @@
 '_disableNoScript' don't add no script fallback
 
 --}}
-{{#withParam this.responsiveImage type variant }}
+{{#withParam this.responsiveImage _type _variant }}
     {{#if this.asPicture}}
-        <picture class="{{~#if ../addClass}} {{../addClass}}{{/if}}">
+        <picture class="{{~#if ../_addClass}} {{../_addClass}}{{/if}}">
             {{#unless _disableNoScript}}
                 <noscript>
-                    <img class="{{~#if ../addClassImg}} {{../addClassImg}}{{/if}}" src="{{this.fallback}}" alt="{{#if ../alttext}}{{../alttext}}{{else}}{{../this.alttext}}{{/if}}">
+                    <img class="{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" src="{{this.fallback}}" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}">
                 </noscript>
             {{/unless}}
             {{#with this.sources}}
@@ -25,24 +25,24 @@
                            {{#with this.srcset}} srcset="{{this}}"{{/with}}>
                 {{/each}}
             {{/with}}
-                <img class="{{~#if ../addClassImg}} {{../addClassImg}}{{/if}}" loading="{{#if ../noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../alttext}}{{../alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../errorHandler }} onerror="this.onerror=null; {{../errorHandler}}"{{/if}}>
+                <img class="{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
         </picture>
     {{/if}}
 
     {{#if this.asImage}}
         {{#with this.sources.[0]}}
-            {{~#with ../../addClass }}<div class="{{this}}">{{/with}}
-            {{#unless ../../disableNoScript}}
+            {{~#with ../../_addClass }}<div class="{{this}}">{{/with}}
+            {{#unless ../../_disableNoScript}}
                 <noscript>
-                    <img class="{{~#if ../../addClassImg}} {{../../addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../alttext}}{{../../alttext}}{{else}}{{../../this.alttext}}{{/if}}">
+                    <img class="{{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">
                 </noscript>
             {{/unless}}
             <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
-                    loading="{{#if ../../noDelay}}auto{{else}}lazy{{/if}}"
-                 {{#with this.srcset}} {{#if ../../../noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
+                    loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
+                 {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
-                alt="{{#if ../../alttext}}{{../../alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="{{~#with ../../addClassImg }} {{this}}{{/with}}" {{~#if ../../errorHandler}} onerror="this.onerror=null; {{../../errorHandler}}" {{~/if}}>
-            {{~#with ../../addClass }}</div>{{/with}}
+                alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="{{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
+            {{~#with ../../_addClass }}</div>{{/with}}
         {{/with}}
 
     {{/if}}

package/src/stories/views/components/base/link.hbs

@@ -1,18 +1,18 @@
 {{#with this.link}}
     <a {{#with this.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.url}}" {{#with this.webviewUrl}}{{/with}} 
-        class="sb-link{{#if ../css}} {{../css}}{{/if}}{{#if ../doTracking}} js-load{{else}}{{#if ../this.content.isFileDownload}} js-loadScript{{/if}}{{/if}}{{#if ../isSelected}} {{defaultIfEmpty ../selectedCssClass "-current"}}{{/if}}"
-        {{#if ../doNavigationTracking}}
-        data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../clickLabelType}}{{#if ../clickLabelPrefix1}}::{{../clickLabelPrefix1}}{{/if}}::{{../clickLabelPrefix2}}-Link geklickt"}]}'
+        class="sb-link{{#if ../_css}} {{../_css}}{{/if}}{{#if ../_doTracking}} js-load{{else}}{{#if ../this.content.isFileDownload}} js-loadScript{{/if}}{{/if}}{{#if ../_isSelected}} {{defaultIfEmpty ../_selectedCssClass "-current"}}{{/if}}"
+        {{#if ../_doNavigationTracking}}
+        data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../_clickLabelType}}{{#if ../_clickLabelPrefix1}}::{{../_clickLabelPrefix1}}{{/if}}::{{../_clickLabelPrefix2}}-Link geklickt"}]}'
         {{/if}}
-        {{#if ../doTracking}}
-            {{#with this.content.trackingData}}data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{#if ../this.content.isFileDownload}}{{this.pageName}}{{else}}mediabuttonclick::{{../../clickLabelPrefix1}}::{{../../clickLabelPrefix2}}{{/if}}"}]}'{{/with}}
+        {{#if ../_doTracking}}
+            {{#with this.content.trackingData}}data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{#if ../this.content.isFileDownload}}{{this.pageName}}{{else}}mediabuttonclick::{{../../_clickLabelPrefix1}}::{{../../_clickLabelPrefix2}}{{/if}}"}]}'{{/with}}
         {{else}}
             {{#if ../this.content.isFileDownload}}
                 {{#with this.content.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}'{{/with}}
             {{/if}}
         {{/if}}
         {{#if this.isTargetBlank}} target="_blank"  rel="noopener{{#if this.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
-        {{#if ../isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
+        {{#if ../_isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
     >
 {{/with}}  
         {{> @partial-block }}     

package/src/stories/views/components/base/loadSSI.hbs

@@ -1,5 +1,5 @@
 {{#if (isStorybook)}}  
-    {{> components/base/load_dynamic templatePath=templatePath}} 
+    {{> components/base/load_dynamic _templatePath=_templatePath}} 
 {{else}}
     {{{this}}}
 {{/if}}        

package/src/stories/views/components/base/load_dynamic.hbs

@@ -1,4 +1,4 @@
-{{#switch templatePath}}
+{{#switch _templatePath}}
     {{#case "components/site_header/service_navigation/service_navigation_item"}}
         {{> components/site_header/service_navigation/service_navigation_item}}
     {{/case}}

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

@@ -1,9 +1,9 @@
 
 <div class="grid grid-page">
   <div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
-    {{#>components/grid/grid_group size="100"}}
+    {{#>components/grid/grid_group _size="100"}}
       <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
-      {{#>components/grid/grid_item size="12"}}
+      {{#>components/grid/grid_item _size="12"}}
         <a href="#">
           <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
             12/12 = 100%    
@@ -13,43 +13,43 @@
     {{/components/grid/grid_group}} 
     {{#>components/grid/grid_group_highlight  }}    
       <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% mit blauen Hintergrung bis Rand</h2>
-      {{#>components/grid/grid_item size="6"}}
+      {{#>components/grid/grid_item _size="6"}}
         <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
           6/12 = 50%    
         </div>
       {{/components/grid/grid_item}}  
-      {{#>components/grid/grid_item size="6"}}
+      {{#>components/grid/grid_item _size="6"}}
         <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
           6/12 = 50%    
         </div>
       {{/components/grid/grid_item}} 
     {{/components/grid/grid_group_highlight}} 
 
-    {{#>components/grid/grid_group size="100"}}
+    {{#>components/grid/grid_group _size="100"}}
 
       <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
-      {{#>components/grid/grid_item size="6"}}
+      {{#>components/grid/grid_item _size="6"}}
       <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
         6/12 = 50%    
       </div>
       {{/components/grid/grid_item}}  
-      {{#>components/grid/grid_item size="6"}}
+      {{#>components/grid/grid_item _size="6"}}
       <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
         6/12 = 50%    
       </div>
       {{/components/grid/grid_item}} 
 
-      {{#>components/grid/grid_item size="4"}}
+      {{#>components/grid/grid_item _size="4"}}
       <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
         4/12 = 33%    
       </div>
       {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item size="4"}}
+      {{#>components/grid/grid_item _size="4"}}
       <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
         4/12 = 33%    
       </div>  
       {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item size="4"}}
+      {{#>components/grid/grid_item _size="4"}}
       <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
         4/12 = 33%    
       </div>   
@@ -57,25 +57,25 @@
     {{/components/grid/grid_group}}
     {{#>components/grid/grid_group_tabbed }}
         <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% Tabbed</h2>
-        {{#>components/grid/grid_item size="3"}}
+        {{#>components/grid/grid_item _size="3"}}
         <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
           3/12 = 25%    
         </div> 
         {{/components/grid/grid_item}}
         
-        {{#>components/grid/grid_item size="3"}}
+        {{#>components/grid/grid_item _size="3"}}
         <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
           3/12 = 25%    
         </div> 
         {{/components/grid/grid_item}}
 
-        {{#>components/grid/grid_item size="3"}}
+        {{#>components/grid/grid_item _size="3"}}
         <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
           3/12 = 25%    
         </div>   
         {{/components/grid/grid_item}}
 
-        {{#>components/grid/grid_item size="3"}}
+        {{#>components/grid/grid_item _size="3"}}
         <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
           3/12 = 25%    
         </div>    
@@ -84,69 +84,69 @@
     {{/components/grid/grid_group_tabbed}} 
     {{#>components/grid/grid_group}} 
       <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
-      {{#>components/grid/grid_item size="4"}}
+      {{#>components/grid/grid_item _size="4"}}
       <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
         4/12 = 33%    
       </div>
       {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item size="4"}}
+      {{#>components/grid/grid_item _size="4"}}
       <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
         4/12 = 33%    
       </div>  
       {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item size="4"}}
+      {{#>components/grid/grid_item _size="4"}}
       <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
         4/12 = 33%    
       </div>   
       {{/components/grid/grid_item}}  
     {{/components/grid/grid_group}} 
-    {{#>components/grid/grid_group size="50"}}
+    {{#>components/grid/grid_group _size="50"}}
       <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>
-      {{#>components/grid/grid_item size="12"}}
+      {{#>components/grid/grid_item _size="12"}}
         <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
           6/12 = 50%    
         </div>
       {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item size="12"}}
+      {{#>components/grid/grid_item _size="12"}}
         <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
           6/12 = 50%    
         </div>  
       {{/components/grid/grid_item}} 
     {{/components/grid/grid_group}} 
-    {{#>components/grid/grid_group size="50"}}
+    {{#>components/grid/grid_group _size="50"}}
       <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>
-      {{#>components/grid/grid_item size="6"}}
+      {{#>components/grid/grid_item _size="6"}}
         <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
           6/12 = 50%    
         </div>
       {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item size="6"}}
+      {{#>components/grid/grid_item _size="6"}}
         <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
           6/12 = 50%    
         </div>  
       {{/components/grid/grid_item}} 
     {{/components/grid/grid_group}} 
-    {{#>components/grid/grid_group size="66"}}
+    {{#>components/grid/grid_group _size="66"}}
       <h2 class="text-4xl headline--barrier col-span-full">Gruppen 66%</h2>
-      {{#>components/grid/grid_item size="12"}}
+      {{#>components/grid/grid_item _size="12"}}
         <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
           8/12 = 66%    
         </div>
       {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item size="12"}}
+      {{#>components/grid/grid_item _size="12"}}
         <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
           8/12 = 66%    
         </div>  
       {{/components/grid/grid_item}} 
     {{/components/grid/grid_group}} 
-    {{#>components/grid/grid_group size="33"}}
+    {{#>components/grid/grid_group _size="33"}}
       <h2 class="text-4xl headline--barrier col-span-full">Gruppen 33%</h2>
-      {{#>components/grid/grid_item size="12"}}
+      {{#>components/grid/grid_item _size="12"}}
         <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
           4/12 = 33%    
         </div>
       {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item size="12"}}
+      {{#>components/grid/grid_item _size="12"}}
         <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
           4/12 = 33%    
         </div>  

package/src/stories/views/components/grid/grid_group.hbs

@@ -1,3 +1,3 @@
-<section class="grid grid-cols-12 bg-white content-start gap-x-6 gap-y-6 col-span-12 {{inline-switch size '["100","66","50","33","25"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}">
+<section class="grid grid-cols-12 items-start bg-white content-start gap-x-6 gap-y-6 col-span-12 {{inline-switch _size '["100","66","50","33","25"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}">
     {{> @partial-block }}
 </section>

package/src/stories/views/components/grid/grid_item.hbs

@@ -1,3 +1,3 @@
-<article class="col-span-12 {{inline-switch size '["12","8","6","4","3"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}" >
+<article class="col-span-12 {{inline-switch _size '["12","8","6","4","3"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}" >
     {{> @partial-block }}    
 </article>

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

@@ -1,12 +1,19 @@
-<span class="sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">
-    {{text}}
+<span
+    class='sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading
+        {{inline-switch
+            _type
+            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]'
+            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'
+        }}'
+>
+    {{_text}}
 </span>
-{{~#with this.byline ~}}
-    <span class="ml-2 text-xs text-grey-scorpion font-headingSerif ">
-        {{~#if this.bylineSsi ~}}
+{{~#with this.byline~}}
+    <span class='ml-2 text-xs text-grey-scorpion font-headingSerif'>
+        {{~#if this.bylineSsi~}}
             {{{this.bylineSsi}}}
-        {{~else ~}}
+        {{~else~}}
             {{this.bylineText}}
-        {{~/if ~}}
+        {{~/if~}}
     </span>
 {{~/with~}}

package/src/stories/views/components/label/label.stories.mdx

@@ -13,7 +13,7 @@ import label from './label.hbs'
 <Meta
     title="Komponenten/Label"
     argTypes={{
-        type: {
+        _type: {
             control: {
                 type: 'select',
                 labels: {
@@ -71,17 +71,17 @@ import label from './label.hbs'
                 },
             },
         },
-        text: {
+        _text: {
             control: 'text',
             description: 'Beschriftung des Labels',
         },
     }}
 />
 
-export const Template = ({ type, ...args }) => {
+export const Template = ({ _type, ...args }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
-    return label({ type, ...args })
+    return label({ _type, ...args })
 }
 
 # Label
@@ -93,8 +93,8 @@ Folgende Ausprägungen von Labels stehen hierfür zur Verfügung:
     <Story
         name="Download"
         args={{
-            type: 'download',
-            text: 'Download',
+            _type: 'download',
+            _text: 'Download',
         }}
     >
         {Template.bind({})}
@@ -102,8 +102,8 @@ Folgende Ausprägungen von Labels stehen hierfür zur Verfügung:
     <Story
         name="Eilmeldung"
         args={{
-            type: 'breakingnews',
-            text: 'Eilmeldung',
+            _type: 'breakingnews',
+            _text: 'Eilmeldung',
         }}
     >
         {Template.bind({})}
@@ -111,8 +111,8 @@ Folgende Ausprägungen von Labels stehen hierfür zur Verfügung:
     <Story
         name="Event"
         args={{
-            type: 'event',
-            text: 'Event',
+            _type: 'event',
+            _text: 'Event',
         }}
     >
         {Template.bind({})}
@@ -120,8 +120,8 @@ Folgende Ausprägungen von Labels stehen hierfür zur Verfügung:
     <Story
         name="Infografik"
         args={{
-            type: 'infografik',
-            text: 'Infografik',
+            _type: 'infografik',
+            _text: 'Infografik',
         }}
     >
         {Template.bind({})}
@@ -129,8 +129,8 @@ Folgende Ausprägungen von Labels stehen hierfür zur Verfügung:
     <Story
         name="Kommentar"
         args={{
-            type: 'comment',
-            text: 'Kommentar',
+            _type: 'comment',
+            _text: 'Kommentar',
         }}
     >
         {Template.bind({})}
@@ -138,8 +138,8 @@ Folgende Ausprägungen von Labels stehen hierfür zur Verfügung:
     <Story
         name="Liveticker"
         args={{
-            type: 'liveticker',
-            text: 'Liveticker',
+            _type: 'liveticker',
+            _text: 'Liveticker',
         }}
     >
         {Template.bind({})}
@@ -147,8 +147,8 @@ Folgende Ausprägungen von Labels stehen hierfür zur Verfügung:
     <Story
         name="Media"
         args={{
-            type: 'media',
-            text: 'Media',
+            _type: 'media',
+            _text: 'Media',
         }}
     >
         {Template.bind({})}
@@ -156,8 +156,8 @@ Folgende Ausprägungen von Labels stehen hierfür zur Verfügung:
     <Story
         name="Pressemitteilung"
         args={{
-            type: 'pm',
-            text: 'Pressemitteilung',
+            _type: 'pm',
+            _text: 'Pressemitteilung',
         }}
     >
         {Template.bind({})}
@@ -165,8 +165,8 @@ Folgende Ausprägungen von Labels stehen hierfür zur Verfügung:
     <Story
         name="Sendung"
         args={{
-            type: 'program',
-            text: 'Sendung',
+            _type: 'program',
+            _text: 'Sendung',
         }}
     >
         {Template.bind({})}
@@ -183,7 +183,7 @@ Die Komponente wird in Form eines Handlebar Partials eingebunden.
 
 Mit folgenden Parametern kann die Komponente konfiguriert werden.
 
-| Parameter | Typ      | Mögliche Werte                                                                                                                                                                                                                                                     | Erläuterung                                      |
-| :-------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------- |
-| **text**  | `String` | Beliebiger Text                                                                                                                                                                                                                                                    | Die Beschriftung des Labels.                     |
-| **type**  | `String` | `analysis`, `blog`, `bulitiker`, `der-tag-in-hessen`, `download`, `brealingnews`, `event`, `fragen-und-antworten`, `glosse`,`infografik`, `interaktiv`, `comment`, `live`, `livechat`, `livestream`, `liveticker`, `media`, `pm`, `program`, `social-tv`, `ticker` | Hiermit wird das Aussehen des Labels festgelegt. |
+| Parameter  | Typ      | Mögliche Werte                                                                                                                                                                                                                                                     | Erläuterung                                      |
+| :--------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------- |
+| **\_text** | `String` | Beliebiger Text                                                                                                                                                                                                                                                    | Die Beschriftung des Labels.                     |
+| **\_type** | `String` | `analysis`, `blog`, `bulitiker`, `der-tag-in-hessen`, `download`, `brealingnews`, `event`, `fragen-und-antworten`, `glosse`,`infografik`, `interaktiv`, `comment`, `live`, `livechat`, `livestream`, `liveticker`, `media`, `pm`, `program`, `social-tv`, `ticker` | Hiermit wird das Aussehen des Labels festgelegt. |

package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs

@@ -1,6 +1,6 @@
 <li :class="dropped ? 'h-auto' : 'h-10'"  
     class="sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 lg:border-0 text-blue-congress justify-start hover:underline">
-    {{#>components/base/link css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') doNavigationTracking="true" clickLabelType=_fromNav clickLabelPrefix1=_parent clickLabelPrefix2=this.link.content.text }}
+    {{#>components/base/link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') _doNavigationTracking="true" _clickLabelType=_fromNav _clickLabelPrefix1=_parent clickLabelPrefix2=this.link.content.text }}
         {{this.text}}      
         {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}
     {{/components/base/link}}  

package/src/stories/views/components/site_header/service_navigation/service_list.hbs

@@ -8,7 +8,7 @@
     {{#with this.serviceNavigationSSILinks}}
         <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
             {{#each this}}        
-                {{> components/base/loadSSI templatePath='components/site_header/service_navigation/service_navigation_item' }}               
+                {{> components/base/loadSSI _templatePath='components/site_header/service_navigation/service_navigation_item' }}               
             {{/each}} 
         </ul>
     {{/with}}