hr-design-system-handlebars 1.11.11 → 1.12.0

package/dist/views/components/base/image/icon.hbs

@@ -40,7 +40,7 @@ Erklärung / Hinweise / Best Practices für "Accessible SVG":
 
 --}}
 {{#if _icon}}
-<svg class="sb-icon {{~#if _addClass }} {{_addClass}}{{/if}} {{#if _webview}} -webview{{/if}}" role="presentation" aria-hidden="{{defaultIfEmpty _ariaHidden true}}"
+<svg class="sb-icon {{~#if _addClass }} {{_addClass}}{{/if}} {{#if _webview}} -webview{{/if}} {{#>css}}{{/css}}" role="presentation" aria-hidden="{{defaultIfEmpty _ariaHidden true}}"
 {{# if brand}} data-brand="{{brand}}"{{/if}}
         {{~#if _iconTitle }} {{changeRandom~}}
             aria-labelledby="iconTitle--{{getRandom}}"

package/dist/views/components/base/link.hbs

@@ -1,3 +1,13 @@
-{{> components/base/link_open _clickLabelPrefix1=_clickLabelPrefix1 _clickLabelPrefix2=_clickLabelPrefix2 _clickLabelType=_clickLabelType _css=_css _doNavigationTracking=_doNavigationTracking _isAriaHidden=_isAriaHidden _isSelected=_isSelected _selectedCssClass=_selectedCssClass}}
+<a {{#with this.link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.link.url}}{{#if this.hasComments}}#commentList{{/if}}"
+    class="sb-link ds-link js-load{{#if _css}} {{_css}}{{/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 this.isFileDownload}}
+        {{#with this.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.link.secondLevelId}}","clickLabel": "{{this.link.pageName}}"}]}'{{/with}}
+    {{/if}}
+    {{#if this.link.isTargetBlank}} target="_blank"  rel="noopener{{#if this.link.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
+    {{#if _isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
+>
     {{~ decorator_body ~}}   
 </a>

package/dist/views/components/base/link_open.hbs

@@ -1,13 +1,12 @@
-{{#with this.link}}
-    <a {{#with this.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.url}}{{#if ../this.hasComments}}#commentList{{/if}}"
-        class="sb-link js-load{{#if ../_css}} {{../_css}}{{/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 ../this.isFileDownload}}
-            {{#with ../this.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}'{{/with}}
-        {{/if}}
-        {{#if this.isTargetBlank}} target="_blank"  rel="noopener{{#if this.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
-        {{#if ../_isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
-    >
-{{/with}}  
+<a {{#with this.link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.link.url}}{{#if this.hasComments}}#commentList{{/if}}"
+    class="sb-link ds-link js-load {{#if _isSelected}} {{defaultIfEmpty _selectedCssClass "-current"}}{{/if}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}"
+    {{#if _doNavigationTracking}}
+    data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{_clickLabelType}}{{#if _clickLabelPrefix1}}::{{_clickLabelPrefix1}}{{/if}}::{{_clickLabelPrefix2}}-Link geklickt"}]}'
+    {{/if}}
+    {{#if this.isFileDownload}}
+        {{#with this.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.link.secondLevelId}}","clickLabel": "{{this.link.pageName}}"}]}'{{/with}}
+    {{/if}}
+    {{#if this.link.isTargetBlank}} target="_blank"  rel="noopener{{#if this.link.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
+    {{#if _isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
+>
+ 

package/dist/views/components/base/link_v2.hbs

@@ -0,0 +1,14 @@
+<a {{#with this.link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.link.url}}{{#if this.hasComments}}#commentList{{/if}}"
+    class="sb-link ds-link js-load {{#if _isSelected}} {{defaultIfEmpty _selectedCssClass "-current"}}{{/if}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}"
+    {{#if _doNavigationTracking}}
+    data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{_clickLabelType}}{{#if _clickLabelPrefix1}}::{{_clickLabelPrefix1}}{{/if}}::{{_clickLabelPrefix2}}-Link geklickt"}]}'
+    {{/if}}
+    {{#if this.isFileDownload}}
+        {{#with this.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.link.secondLevelId}}","clickLabel": "{{this.link.pageName}}"}]}'{{/with}}
+    {{/if}}
+    {{#if this.link.isTargetBlank}} target="_blank"  rel="noopener{{#if this.link.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
+    {{#if _isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
+>
+ 
+    {{> @partial-block }}
+</a>

package/dist/views/components/button/button.hbs

@@ -1,30 +1,15 @@
-<button 
-    {{~#if _aria}} aria-label="{{_aria}}"{{/if}} 
-    {{~#if _isButton}} type="button"{{else}} type="submit"{{/if~}} 
+<button
+    {{#if _id}} id="{{_id}}"{{/if}} 
+    class="ds-button {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=_variant _onBackground=_onBackground _disableButtonPress=_disableButtonPress}} {{> components/button/utilities/button_dimension_classes _size=_size}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}{{#if _openModal}} js-modalButton{{/if}}"
+    {{#if _openModal}} aria-haspopup="true"{{/if}}
+    {{~#if _ariaLabel}} aria-label="{{_ariaLabel}}"{{/if}}
+    type="{{defaultIfEmpty _type "submit"}}"
     {{~#if _name}} name="{{_name}}"{{/if}} 
-    {{~#if _title}} title="{{_title}}"{{/if}} 
-    class="{{_addClass}}{{#if _addClass2}} {{_addClass2}}{{/if}}{{#if _buttonColor}} {{_buttonColor}}{{/if}}{{#if _buttonSpace}} {{> components/button/button_round_classes _teaserSize=_teaserSize _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}{{/if}}{{#if _webview}} -webview{{/if}}"
+    {{~#if _title}} title="{{_title}}"{{/if}}
     {{~#if _value}} value="{{_value}}"{{/if}} 
     {{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}} 
     {{~#if _x-show}} x-show="{{_x-show}}"{{/if}} 
     {{~#if _noFocus}} tabindex="-1"{{/if}}
->
-    {{~#if _showIcon~}}
-        {{> components/base/image/icon
-                _icon=_icon
-                _iconmap=_iconmap
-                _addClass=_addIconClass
-                _webview=_webview
-                _ariaHidden=false
-                _iconTitle=false
-                _iconDesc=false
-                _iconText=false
-                _overlayIcon=false
-        }}
-    {{/if~}}
-    {{~#if _label~}}
-        <span {{#if _srOnly}}class="sr-only"{{/if}}>
-            {{~_label~}}
-        </span>
-    {{/if~}}
+    {{#> html_properties}}{{/html_properties}}>
+    {{> @partial-block }}
 </button>

package/dist/views/components/button/components/button_icon.hbs

@@ -1 +1,2 @@
-{{> components/base/image/icon _addClass=(appendToDefault _css "w-4 h-4 fill-inherit") _icon=_icon _iconmap=_iconmap}}
+{{> components/base/image/icon _addClass=(appendToDefault _css "ds-button-icon w-4 h-4 fill-current") _icon=_icon _iconmap=_iconmap}}
+{{#*inline "css"}}{{/inline}}

package/dist/views/components/button/components/button_label.hbs

@@ -1 +1 @@
-<span class="{{#if _css}} {{_css}}{{/if}}">{{_label}}</span>
+<span class='ds-button-label {{defaultIfEmpty _css "hallo"}}'>{{_label}}</span>

package/dist/views/components/button/link_button.hbs

@@ -0,0 +1,6 @@
+{{#> components/base/link_v2 _css=_css _isAriaHidden=_isAriaHidden}}
+    {{> @partial-block }}
+{{/components/base/link_v2}}
+{{#*inline "css"~}}
+    {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=../../_variant _onBackground=../../_onBackground}} {{> components/button/utilities/button_dimension_classes _size=../../_size~}}
+{{~/inline}}

package/dist/views/components/button/utilities/button_base_classes.hbs

@@ -0,0 +1 @@
+inline-flex items-center font-heading

package/dist/views/components/button/utilities/button_dimension_classes.hbs

@@ -0,0 +1 @@
+{{~inline-switch _size '["sm","md","lg"]' '[" px-2 py-0.5"," p-2"," px-4 py-2.5",""]'~}}

package/dist/views/components/button/utilities/button_on_image_classes.hbs

@@ -0,0 +1,39 @@
+absolute bottom-0 right-0
+{{~#switch _teaserType~}}
+    {{~#case 'standard'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-2 md:m-3"," m-2 md:m-4"]'~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-4 md:m-3"," m-4"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'alternative'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _teaserSize
+                '["hero","100","50"]'
+                '[" m-2 md:m-4"," m-2 md:m-3"," m-2"]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["hero","100","50"]' '[" m-4"," m-2 md:m-3"," m-2"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'tabbox-standard'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-2 md:m-3"," m-2 md:m-4 "]'~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-4 md:m-3"," m-4"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'tabbox-alternative'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _teaserSize
+                '["hero","100","50"]'
+                '[" m-2 md:m-4"," m-2 md:m-3"," m-2"]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["hero","100","50"]' '[" m-4"," m-2 md:m-3"," m-2"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+{{~/switch~}}

package/dist/views/components/button/utilities/button_variation_classes.hbs

@@ -0,0 +1,14 @@
+{{#if _onBackground~}}
+    {{inline-switch
+        _variant
+        '["primary","secondary","tertiary"]'
+        '[" border text-button-primary bg-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark active:bg-button-primary--inverted-dark"," border text-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark hover:text-button-primary active:text-button-primary active:bg-button-primary--inverted-dark"," bg-transparent border-transparent text-button-inverted hover:bg-button-primary--inverted-dark hover:text-button-primary hover:border-button-primary--inverted-dark active:text-button-primary active:bg-button-primary--inverted-dark"," border text-button-primary bg-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark active:bg-button-primary--inverted-dark"]'
+    ~}}
+{{else}}
+    {{~inline-switch
+        _variant
+        '["primary","secondary","tertiary"]'
+        '[" border text-button-primary--inverted bg-button-primary border-button-primary hover:bg-button-primary--dark hover:border-button-primary--dark active:bg-button-primary--dark"," border text-button-secondary border-button-primary hover:bg-button-primary--inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button-primary hover:bg-button-primary--inverted hover:border-button-primary active:bg-button-primary--inverted"," border text-button-primary--inverted bg-button-primary border-button-primary hover:bg-button-primary--dark  hover:border-button-primary--dark active:bg-button-primary--dark"]'
+    ~}}
+{{/if}}
+{{~#unless _disableButtonPress}} active:scale-95{{/unless}}

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

@@ -6,7 +6,7 @@
     {{#if this.isAutosuggest}}
         <div class="flex mx-0 w-full h-10 border-blue-congress align-center{{#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-grey-alabaster text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
+                   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"
                    placeholder="Eintrag filtern"/>
         </div>

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

@@ -10,7 +10,7 @@
         _doNavigationTracking="true" 
         _clickLabelType="Contentnavigation" 
         _clickLabelPrefix1=this.title 
-        _css="flex ds-link-inset items-center pt-2.5 px-2 whitespace-nowrap overflow-hidden" 
+        _css="flex items-center pt-2.5 px-2 whitespace-nowrap overflow-hidden" 
         _isSelected=this.isSelected
         _selectedCssClass="is-selected"
     }}

package/dist/views/components/event/calendar/event_calendar_footer.hbs

@@ -1,7 +1,7 @@
 <footer class='bg-event-calendar-primary text-center'>
     {{#decorator
         'components/base/link'
-        _css='block p-2 text-white text-sm font-serif hover:underline underline-offset-3 ds-link'
+        _css='block p-2 text-white text-sm font-serif hover:underline underline-offset-3'
     }}
         {{loca 'event_calendar_monthly_overview_link'}}
     {{/decorator}}

package/dist/views/components/event/event_ticket_button.hbs

@@ -1,8 +1,8 @@
 <div class="static pl-4 pt-1 pb-3 sm:absolute sm:pl-0 sm:pt-0 sm:pb-0 sm:right-4 sm:bottom-4">
-    {{#> components/button/button_v2 _id=(nextRandom) _type="inverted"}}
+    {{#> components/button/button _id=(nextRandom) _size="lg"}}
         {{> components/button/components/button_icon _icon="ticket" _iconmap="icons" _css="mr-2"}}
         {{>components/button/components/button_label _label="Tickets"}}
-    {{/components/button/button_v2}}
+    {{/components/button/button}}
     {{#> components/modal/modal _trigger=(getRandom)}}
         {{#> components/teaser/components/teaser_headline}}
             {{> components/teaser/components/teaser_title _text=(loca 'ticket_modal_headline') _css="text-2xl"}}
@@ -10,8 +10,12 @@
         <p class="text-base font-copy mt-2">{{loca "ticket_modal_text"}}</p>
 
         <div class="flex flex-wrap mt-4">
-            {{> components/button/button_pseudo _linkCss="js-ticket-ok-button mr-4 mt-4 ds-button js-modal-close" _buttonText="Zum Ticketshop" _withLink="true"}}
-            <button class="mt-4 ds-button" value="cancel">Abbrechen</button>
+            {{#> components/button/link_button _size="lg" _css="js-ticket-ok-button js-modal-close mr-4 mt-4"}}
+                {{>components/button/components/button_label _label="Zum Ticketshop" _css=""}}
+            {{/components/button/link_button}}
+            {{#> components/button/button _size="lg" _variant="tertiary" _value="cancel" _css="mt-4"}}
+                {{>components/button/components/button_label _label="Abbrechen" _css=""}}
+            {{/components/button/button}}
         </div>
     {{/components/modal/modal}}
     <noscript>
@@ -20,11 +24,9 @@
                 display:none;
             }
         </style>
-        {{#> components/button/components/button_pseudo_link}}
-            {{#> components/button/button_pseudo_v2 _type="inverted"}}
-                {{> components/button/components/button_icon _icon="ticket" _iconmap="icons" _css="mr-2"}}
+            {{#> components/button/link_button _size="lg"}}
+                {{> components/button/components/button_icon _icon="ticket" _iconmap="icons"}}
                 {{>components/button/components/button_label _label="Tickets"}}
-            {{/components/button/button_pseudo_v2}}
-        {{/components/button/components/button_pseudo_link}}
+            {{/components/button/link_button}}
     </noscript>
 </div>

package/dist/views/components/grid/grid_group_highlight.hbs

@@ -1,5 +1,5 @@
 </div>
-<div class="grid col-full grid-page my-6{{inline-switch _backgroundColor '["1","2"]' '[" bg-grey-concrete"," bg-orange-bridesmaid"]'}}">
+<div class="grid col-full grid-page my-6{{inline-switch _backgroundColor '["1","2"]' '[" bg-gray-concrete"," bg-orange-bridesmaid"]'}}">
     <section class="grid grid-cols-12 py-6 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-9">
         <div class="grid content-start grid-cols-12 col-span-12 gap-x-6 gap-y-6">
             {{> @partial-block }}

package/dist/views/components/label/label_old.hbs

@@ -10,7 +10,7 @@
 
 </span>
 {{~#with this.byline~}}
-    <span class='ml-2 text-xs font-headingSerif {{#if ../_bylineCss}}{{../_bylineCss}}{{else}}text-grey-scorpion{{/if}}'>
+    <span class='ml-2 text-xs font-headingSerif {{#if ../_bylineCss}}{{../_bylineCss}}{{else}}text-gray-scorpion{{/if}}'>
         {{~#if this.bylineSsi~}}
             {{> components/base/loadSSI _context=this.context _templatePath=this.bylineSsi}}
         {{~else~}}

package/dist/views/components/mediaplayer/media_player.hbs

@@ -10,27 +10,9 @@
         {{#with _teaser}}
             {{~> 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=this.dontLazyload ~}}                             
         {{/with}}
-        {{> components/button/button_round 
-            _isButton="true" 
-            _addClass='absolute bottom-0 right-0 fill-white hover:text-white ds-focus rounded-full js-mediaplayer__button cy-mediaplayer-trigger'
-            _buttonColor=(if _isLivestream ' text-orange-spicyCarrot hover:fill-orange-spicyCarrot' ' text-media-button hover:fill-media-button')
-            _teaserType=_teaserType
-            _teaserSize=_teaserSize
-            _isMobile1to1=_isMobile1to1
-            _showIcon=true
-            _icon=_mediaButtonIcon 
-            _label=_mediaButtonLabel 
-            _srOnly="true" 
-            _alpineClick="avStart = !avStart; $dispatch('player_start')"
-            _aria=""
-            _title=""
-            _name=""
-            _value=""
-            _iconmap="icons"
-            _addIconClass=""
-            _webview=""
-            _x-show=""
-            _noFocus=""
-        }}    
+
+        {{#with this}}
+            {{> components/mediaplayer/mediaplayer_button _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=_teaserSize _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}   
+        {{/with}} 
     </div>
 {{/if}}

package/dist/views/components/mediaplayer/mediaplayer_button.hbs

@@ -0,0 +1,9 @@
+{{#with this}}
+    {{#> components/button/button _variant="tertiary" _type="button" _css=_css _alpineClick="avStart = !avStart; $dispatch('player_start')"}}
+        {{#> components/base/image/icon _addClass=(appendToDefault (if ../../_isLivestream "text-orange-spicyCarrot group-hover:fill-orange-spicyCarrot" "text-media-button group-hover:fill-media-button") "w-10 h-10  fill-white group-hover:text-white inline") _icon=../../_icon}}
+            {{#*inline "css"}}{{/inline}}
+        {{/components/base/image/icon}}
+        {{>components/button/components/button_label _css="sr-only" _label=../../_label}}
+    {{/components/button/button}}
+    {{#*inline "css"}}js-mediaplayer__button cy-mediaplayer-trigger group rounded-full {{> components/button/utilities/button_on_image_classes _teaserSize=../../_teaserSize _teaserType=../../_teaserType _isMobile1to1=../../_isMobile1to1}}{{/inline}}
+{{/with}}

package/dist/views/components/modal/modal.hbs

@@ -1,5 +1,5 @@
-<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "\" {{this.link.cmsDocument.title}} \" Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
-    <dialog class='js-modal p-0 backdrop:bg-grey-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
+<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "\\" {{this.link.cmsDocument.title}} \\" Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
+    <dialog class='js-modal p-0 backdrop:bg-gray-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
         <form method="dialog" class="js-dialog-content p-4">
             {{> @partial-block }}
         </form>

package/dist/views/components/page/page_pagination.hbs

@@ -54,7 +54,7 @@
             </main>
             
             <div class="flex flex-wrap justify-center w-full max-w-full">
-                {{> components/pagination/pagination }} 
+                {{> components/pagination/pagination this }} 
             </div>
         </div>
     </body>

package/dist/views/components/pagination/pagination.hbs

@@ -1,18 +1,19 @@
-{{~#if this.isCurrentPageValid ~}}
+{{~#if currentPageValid ~}}
     {{> components/pagination/pagination_current_page_valid 
-    _moreThanOnePage=this.isMoreThanOnePage
-    _firstPage=this.isFirstPage
-    _secondPage=this.isSecondPage 
-    _notLastPage=this.isNotLastPage   
-    _onlyTwoPages=this.isOnlyTwoPages 
-    _onlyThreePages=this.isOnlyThreePages 
-    _totalPages=this.totalPages 
-    _currentPage=this.currentPage}}
+    _moreThanOnePage=moreThanOnePage
+    _firstPage=firstPage
+    _secondPage=secondPage 
+    _notLastPage=notLastPage 
+    _notLastButOnePage=notLastButOnePage  
+    _onlyTwoPages=onlyTwoPages 
+    _onlyThreePages=onlyThreePages 
+    _totalPages=totalPages 
+    _currentPage=currentPage}}
 {{else}}
     {{> components/pagination/pagination_current_page_invalid 
-    _moreThanOnePage=this.isMoreThanOnePage 
-    _onlyTwoPages=this.isOnlyTwoPages 
-    _onlyThreePages=this.isOnlyThreePages 
-    _totalPages=this.totalPages 
-    _currentPage=this.currentPages}}
+    _moreThanOnePage=moreThanOnePage 
+    _onlyTwoPages=onlyTwoPages 
+    _onlyThreePages=onlyThreePages 
+    _totalPages=totalPages 
+    _currentPage=currentPages}}
 {{~/if~}}

package/dist/views/components/pagination/pagination_current_page_invalid.hbs

@@ -1,4 +1,4 @@
-<nav class="flex content-center py-10" role="navigation" aria-label="Paginierung">
+<nav class="flex content-center justify-center py-10" role="navigation" aria-label="Paginierung">
         {{> components/pagination/pagination_button_left }} 
         <div class="px-20 py-10">
             <a href="{{firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>

package/dist/views/components/pagination/pagination_current_page_valid.hbs

@@ -1,5 +1,5 @@
 {{~#if _moreThanOnePage~}}
-    <nav class="flex content-center py-10" role="navigation" aria-label="Paginierung">
+    <nav class="flex content-center justify-center py-10" role="navigation" aria-label="Paginierung">
         {{~#if _onlyTwoPages~}}
              {{> components/pagination/pagination_only_two_pages
              _firstPage=_firstPage 
@@ -17,6 +17,7 @@
                  _firstPage=_firstPage
                  _secondPage=_secondPage   
                  _notLastPage=_notLastPage 
+                 _notLastButOnePage=_notLastButOnePage 
                  _totalPages=_totalPages 
                  _currentPage=_currentPage}}
             {{~/if~}}   

package/dist/views/components/pagination/pagination_more_than_three_pages.hbs

@@ -11,7 +11,7 @@
         {{> components/pagination/pagination_button_left_linked }}    
         <div class="px-20 py-10">   
             <a href="{{this.firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
-            <span class="font-title">2</span>   
+            <span class="pl-5 font-title">2</span>   
             <span class="px-5 py-10 font-title">&hellip;</span>   
             <a href="{{this.lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>{{_totalPages}}</a>   
         </div>   
@@ -23,8 +23,8 @@
             <span class="py-10 pl-5 font-title">&hellip;</span>   
             <span class="px-5 py-10 font-bold font-title">{{_currentPage}}</span>   
             {{~#if _notLastPage~}}   
-                {{~#if notLastButOnePage~}}   
-                    <span class="font-title">&hellip;</span>   
+                {{~#if _notLastButOnePage~}}   
+                    <span class="py-10 pr-5 font-title">&hellip;</span>   
                 {{~/if~}}   
                 <a href="{{this.lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>{{_totalPages}}</a>   
             {{~/if~}}   

package/dist/views/components/pagination/pagination_only_three_pages.hbs

@@ -1,26 +1,26 @@
 {{~#if _firstPage~}}   
     {{> components/pagination/pagination_button_left }}  
     <div class="px-20 py-10">   
-        <span class="font-title">1</span>   
-        <a href="{{nextItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a>   
-        <a href="{{lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>3</a>   
+        <span class="py-10 pr-5 font-title">1</span>   
+        <a href="{{nextItemUrl}}" class="py-10 pr-5 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a>   
+        <a href="{{lastPageItemUrl}}" class="py-10 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>3</a>   
     </div>   
     {{> components/pagination/pagination_button_right_linked }}  
 {{else}}
     {{~#if _secondPage~}}   
         {{> components/pagination/pagination_button_left_linked }}   
         <div class="px-20 py-10">   
-            <a href="{{firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
-            <span class="font-title">2</span>   
+            <a href="{{firstPageItemUrl}}" class="py-10 pr-5 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
+            <span class="py-10 pr-5 font-title">2</span>   
             <a href="{{lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>3</a>   
         </div>   
         {{> components/pagination/pagination_button_right_linked }}    
     {{else}}   
         {{> components/pagination/pagination_button_left_linked }}   
             <div class="px-20 py-10">   
-            <a href="{{firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
+            <a href="{{firstPageItemUrl}}" class="py-10 pr-5 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
             <a href="{{lastButOnePageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a>   
-            <span class="font-bold font-title">3</span>   
+            <span class="py-10 pl-5 font-bold font-title">3</span>   
         </div>   
         {{> components/pagination/pagination_button_right }}  
     {{~/if~}}     

package/dist/views/components/pagination/pagination_only_two_pages.hbs

@@ -1,7 +1,7 @@
 {{~#if _firstPage~}}
     {{> components/pagination/pagination_button_left }}
     <div class="px-20 py-10"> 
-    <span class="font-title">1</span> 
+    <span class="py-10 pr-5 font-title">1</span> 
     <a href="{{lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a> 
     </div> 
     {{> components/pagination/pagination_button_right_linked }}
@@ -9,7 +9,7 @@
      {{> components/pagination/pagination_button_left_linked }} 
     <div class="px-20 py-10">   
         <a href="{{firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
-        <span class="font-title">2</span>   
+        <span class="py-10 pl-5 font-title">2</span>   
     </div>   
     {{> components/pagination/pagination_button_right }}     
 {{~/if~}}

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

@@ -3,7 +3,7 @@
         @resize.window="checkIfScrollable($refs.container)"
         class="sb-brand-navigation lg:container w-full md:px-5 lg:px-10 px-3.5 h-10 lg:h-8">
 
-    <div class="flex justify-center text-xs list-none text-grey-scorpion ">
+    <div class="flex justify-center text-xs list-none text-gray-scorpion ">
 
         <template x-if="isScrollable">
             <div>

package/dist/views/components/teaser/cluster/teaser_cluster.hbs

@@ -16,7 +16,10 @@
         {{~#with this.overviewLink}}
             {{~#if this.link~}}
                 <div class="flex mx-5 pb-9 pt-6 min-w-0 {{~inline-switch ../this.realTeaserSize '["100"]' '[" justify-center md:justify-end"," justify-center"]'}}">
-                    {{~> components/button/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink=true _buttonText=this.title _buttonCss="truncate" _linkCss="flex min-w-0"~}}
+                    {{~#> components/button/link_button _variant="secondary" _size="lg" _css="overflow-hidden"}}
+                        {{>components/button/components/button_label _label=this.title _css="flex-1 truncate"}}
+                        {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons" _css=""}}
+                    {{/components/button/link_button}}
                 </div>
             {{~/if~}}
         {{/with~}}

package/dist/views/components/teaser/cluster/teaser_cluster_byline.hbs

@@ -2,7 +2,7 @@
 {{#with this.teaserInfo}}
     {{!--Teaser-Info--}}
         {{#if this.showTeaserInfo~}}
-         <p class="mt-1 text-xs text-grey-scorpion font-headingSerif {{#if ../_ordered}} pl-8 {{/if}}">
+         <p class="mt-1 text-xs text-gray-scorpion font-headingSerif {{#if ../_ordered}} pl-8 {{/if}}">
             {{~#if this.showTeaserInfoSection}}
                <span>
                   {{../this.documentSection~}}

package/dist/views/components/teaser/cluster/teaser_cluster_item.hbs

@@ -1,4 +1,4 @@
-{{#decorator 'components/base/link' _css=(appendToDefault (if _firstItem "ds-teaser-focus" "ds-link-clusterTeaser") "group") }} 
+{{#decorator 'components/base/link' _css=(appendToDefault (if _firstItem "ds-teaser-focus") "block group") }} 
     {{#with this.label}}
         {{#> components/label/label_group _css=(if ../_ordered "pl-8")}}
             {{> components/label/label _type=this.type _text=(loca this.loca) _css=""}}

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

@@ -1,20 +1,6 @@
-{{> components/button/button_transparent 
-    _showIcon="true" 
-    _title="Mediaplayer schließen" 
-    _icon="arrow-up"
-    _iconmap="icons"
-    _addIconClass="w-3 h-3 fill-current" 
-    _addClass="md:hidden absolute top-full right-0 z-20" 
-    _x-show="avStart" 
-    _alpineClick=(loca "close_button_alpine_click" _playerId)
-
-    _isButton="true"   
-    _buttonColor=""
-    _label=""
-    _srOnly=true
-    _aria=""
-    _name=""
-    _value=""
-    _webview=""
-    _noFocus=""
-}}
+{{#with this}}
+    {{#> components/button/button _css="absolute top-full right-0 py-3.5 px-3.5 text-blue-700 font-semibold z-20 md:hidden hover:bg-slate-300" _title="Mediaplayer schließen" _variant="tertiary" _x-show="avStart" _alpineClick=(loca "close_button_alpine_click" _playerId)}}
+        {{> components/base/image/icon _icon="arrow-up"  _addClass="w-3 h-3 fill-current"}}
+    {{/components/button/button}} 
+    {{#*inline "css"}}{{/inline}}
+{{/with}}

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

@@ -1,5 +1,5 @@
 {{#if this.hasByline}}
-    <p class="mt-2 text-xs text-grey-scorpion font-headingSerif empty:hidden overflow-anywhere hyphens-auto">
+    <p class="mt-2 text-xs text-gray-scorpion font-headingSerif empty:hidden overflow-anywhere hyphens-auto">
         {{!--Teaser-Info--}}
         {{~#with this.teaserInfo~}}
             {{~#if this.showTeaserInfo~}}

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

@@ -6,20 +6,12 @@
 {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg="" ~}}
 {{#if this.isProgram}}
     {{#if this.showMediatheksLink}}
-        {{#decorator 'components/base/link' _isAriaHidden=true}}
-            {{> components/button/button_round 
-        _isButton="true" 
-        _addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
-        _buttonColor='text-media-button hover:fill-media-button'
-        _buttonSpace=(inline-switch this.teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]')
-        _showIcon=true 
-        _icon='play_button' 
-        _label='Sendung' 
-        _srOnly="true" 
-        _alpineClick=""
-         _noFocus="true"
-        }}    
-        {{/decorator}}
+        {{#with this}}
+            {{> components/base/image/icon _icon="play_button" _addClass="text-media-button fill-white hover:fill-media-button w-10 h-10 inline"}}
+            {{#*inline "css"~}}
+                {{~> components/button/utilities/button_on_image_classes _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=../../_isMobile1to1}}
+            {{/inline}}
+        {{/with}}
     {{/if}}
 {{/if}}