hr-design-system-handlebars 0.76.0 → 0.77.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.77.0 (Thu Nov 03 2022)
+
+#### 🚀 Enhancement
+
+- ... [#369](https://github.com/mumprod/hr-design-system-handlebars/pull/369) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.76.0 (Thu Nov 03 2022)
 
 #### 🚀 Enhancement

package/build/handlebars/partials/handlebar-partials.js

@@ -7,9 +7,9 @@ module.exports['components/button/button.hbs'] = '<button \n    {{~#if _aria}} a
 module.exports['components/button/button_pseudo.hbs'] = '{{#decorator \'components/base/link\'}}\n    <span\n        class=\'px-4 py-2.5 border\n            {{inline-switch\n                _color\n                \'["white","grey","blue"]\'\n                \'["text-white border-white","text-grey-scorpion border-grey-scorpion","text-white bg-blue-congress","text-toplineColor border-toplineColor"]\'\n            }}\n            font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor\'\n    >\n        {{_linkTitle}}\n    </span>\n{{/decorator}}'
 module.exports['components/button/button_round.hbs'] = '{{> components/button/button \n    _aria=_aria\n    _isButton=_isButton\n    _title=_title\n    _name=_name\n    _label=_label\n    _value=_value\n    _showIcon="true"\n    _icon=_icon\n    _iconmap=_iconmap\n    _addIconClass="w-10 h-10 inline"\n    _addClass="fill-white hover:text-white"\n    _addClass2=_addClass\n    _webview=_webview\n    _x-show=_x-show\n    _alpineClick=_alpineClick\n    _srOnly=_srOnly\n}}'
 module.exports['components/button/button_transparent.hbs'] = '{{> components/button/button \n    _aria=_aria\n    _isButton=_isButton\n    _title=_title\n    _name=_name\n    _label=_label\n    _value=_value\n    _showIcon="true"\n    _icon=_icon\n    _iconmap=_iconmap\n    _addIconClass=_addIconClass\n    _addClass="bg-transparent hover:bg-slate-300 text-blue-700 font-semibold py-3.5 px-3.5 "\n    _addClass2=_addClass\n    _webview=_webview\n    _x-show=_x-show\n    _alpineClick=_alpineClick\n}}'
-module.exports['components/content_nav/content_nav.hbs'] = '{{#with this.contentNav}} \n    {{#if this.isListOrFlow}}\n        <nav class="w-full c-content-nav">\n            {{> components/content_nav/content_nav_container \n                _teasersize=../_teasersize \n                _maindivclass="flex flex-wrap mt-2 md:mt-0" \n                _inputcontainerclass="flex bg-grey-light w-full h-10 mx-2 md:mx-0 border-blue-congress align-center"\n            }}    \n        </nav>\n    {{else}}  \n        {{#decorator \'components/content_nav/content_nav_dropdown\'\n                     _componentClass="c-content-nav w-full"\n                     _teasersize=../_teasersize\n                     _iconOpen="arrow-down"\n                     _iconClose="arrow-up"\n                     _buttonText=(defaultIfEmpty this.selectedItem.title ../../title)\n                     _hiddenNavigationLabel="Unternavigation"\n        }} \n            {{> components/content_nav/content_nav_container \n                _teasersize=_teasersize \n                _maindivclass="flex flex-col w-full mt-0" \n                _inputcontainerclass="flex bg-grey-light w-full h-10 mx-0 border-blue-congress align-center "\n            }}\n        {{/decorator}}\n    {{/if}}\n{{/with}} '
+module.exports['components/content_nav/content_nav.hbs'] = '{{#with this.contentNav}} \n    {{#if this.isListOrFlow}}\n        <nav class="w-full c-content-nav">\n            {{> components/content_nav/content_nav_container \n                _teasersize=../_teasersize \n                _maindivclass="flex flex-wrap mt-2 md:mt-0" \n                _inputcontainerclass="flex bg-grey-light w-full h-10 mx-2 md:mx-0 border-blue-congress align-center"\n            }}    \n        </nav>\n    {{else}}  \n        {{#decorator \'components/content_nav/content_nav_dropdown\'\n                     _componentClass="c-content-nav h-10  w-full"\n                     _teasersize=../_teasersize\n                     _iconOpen="arrow-down"\n                     _iconClose="arrow-up"\n                     _buttonText=(defaultIfEmpty this.selectedItem.title ../../title)\n                     _hiddenNavigationLabel="Unternavigation"\n        }} \n            {{> components/content_nav/content_nav_container \n                _teasersize=_teasersize \n                _maindivclass="flex flex-col w-full mt-0" \n                _inputcontainerclass="flex bg-grey-light w-full h-10 mx-0 border-blue-congress align-center "\n            }}\n        {{/decorator}}\n    {{/if}}\n{{/with}} '
 module.exports['components/content_nav/content_nav_container.hbs'] = '<div class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"\n    @click.outside ="contentNavDropdownIsOpen = false; console.log(\'clicked outside\')"\n    {{#if this.isAutosuggest}}\n        data-hr-auto-suggest=\'{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}\'\n    {{/if}}\n>\n    {{#if this.isAutosuggest}}\n        <div class="{{_inputcontainerclass}} c-content-nav__autosuggest ">\n            <input x-ref="autosuggestInput" \n                class="w-full h-8 pl-2 bg-gray-200 text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"\n                type="text"\n                placeholder="Eintrag filtern"/>\n        </div>\n    {{/if}}\n\n    {{> components/content_nav/content_nav_list _teasersize=_teasersize }}\n    \n</div>'
-module.exports['components/content_nav/content_nav_dropdown.hbs'] = '<nav  \n    class="w-full px-2 md:px-0  {{_componentClass}} " \n    id="dropdown--{{nextRandom}}"\n    tabindex="0"\n    role="navigation"\n    aria-labelledby="dropdown__label--{{getRandom}}">\n\n    <span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>\n\n    <div x-show="shouldDropdownBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" \n        :class="contentNavDropdownIsOpen ? \'shadow-[1px_4px_5px_0px_rgba(50,50,93,0.10)]\' : \'\'"\n        class="relative flex w-full h-10 mb-2 overflow-hidden bg-white border z-1002 border-blue-congress whitespace-nowrap text-blue-congress fill-congress"\n    >\n        <span class="self-center w-full p-2 text-base">{{_buttonText}}</span>\n        <div class="flex self-center w-auto h-full px-3 py-1 border-l border-blue-congress">\n            <span @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen;  " \n                :class="contentNavDropdownIsOpen ? \'hidden\' : \'\'"  \n                class="flex self-center"\n            >\n                {{~> components/base/image/icon _icon=(defaultIfEmpty _iconOpen "arrow-down") _addClass="h-4 w-4" _iconmap="icons"~}}    \n            </span>\n            <span @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen; $dispatch(\'resetinput\');  " \n                :class="contentNavDropdownIsOpen ? \'\' : \'hidden\'" \n                class="flex self-center"\n            >\n                {{~> components/base/image/icon _icon=(defaultIfEmpty _iconClose "arrow-up") _addClass="h-4 w-4" _iconmap="icons"~}}\n            </span>\n        </div>\n    </div>    \n    <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" \n        aria-haspopup="true"\n        :class="contentNavDropdownIsOpen ? \'z-9999 w-auto absolute\' : \'z-1003\'" \n        class="relative p-0 m-0 md:left-0 md:h-auto md:overflow-visible">\n       {{~decorator_body~}}\n    </div>\n    \n</nav>'
+module.exports['components/content_nav/content_nav_dropdown.hbs'] = '<nav  \n    class="w-full px-2 md:px-0  {{_componentClass}} " \n    id="dropdown--{{nextRandom}}"\n    tabindex="0"\n    role="navigation"\n    aria-labelledby="dropdown__label--{{getRandom}}">\n\n    <span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>\n\n    <div x-show="shouldDropdownBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" \n        :class="contentNavDropdownIsOpen ? \'shadow-[1px_4px_5px_0px_rgba(50,50,93,0.10)]\' : \'\'"\n        class="relative flex w-full h-10 mb-2 overflow-hidden bg-white border z-1002 border-blue-congress whitespace-nowrap text-blue-congress fill-congress"\n    >\n        <span class="self-center w-full p-2 text-base">{{_buttonText}}</span>\n        <div class="flex self-center w-auto h-full px-3 py-1 border-l border-blue-congress">\n            <span @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen;  " \n                :class="contentNavDropdownIsOpen ? \'hidden\' : \'\'"  \n                class="flex self-center"\n            >\n                {{~> components/base/image/icon _icon=(defaultIfEmpty _iconOpen "arrow-down") _addClass="h-4 w-4" _iconmap="icons"~}}    \n            </span>\n            <span @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen; $dispatch(\'resetinput\');  " \n                :class="contentNavDropdownIsOpen ? \'\' : \'hidden\'" \n                class="flex self-center"\n            >\n                {{~> components/base/image/icon _icon=(defaultIfEmpty _iconClose "arrow-up") _addClass="h-4 w-4" _iconmap="icons"~}}\n            </span>\n        </div>\n    </div>    \n    <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" \n        aria-haspopup="true"\n        :class="contentNavDropdownIsOpen ? \'z-9999 w-auto \' : \' z-1003\'" \n        class="p-0 m-0 md:left-0 md:h-auto md:overflow-visible">\n       {{~decorator_body~}}\n    </div>\n    \n</nav>'
 module.exports['components/content_nav/content_nav_item.hbs'] = '<li x-init="chooseListItemStyles({{_teasersize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})" \nclass="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-blue-congress fill-congress text-blue-congress bg-white hover:bg-blue-congress hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} font-bold -current{{/if}} c-content-nav__item">\n     {{#decorator \'components/base/link\' \n        _doNavigationTracking="true" \n        _clickLabelType="Contentnavigation" \n        _clickLabelPrefix1=this.title \n        _css="flex items-center py-2 px-2 h-10 whitespace-nowrap overflow-hidden" \n        _isSelected=this.isSelected\n        _selectedCssClass="is-selected"\n    }}\n        \n        <span class="block text-base grow font-copy js-title truncate ... ">{{this.title}}</span>\n\n        {{#if this.link.hasIcon}}\n            {{> components/base/image/icon _icon=this.link.iconName _addClass="ml-2 h-4 w-4" _iconmap="icons"}}\n        {{/if}}\n\n        <span>\n            {{>components/base/image/icon _icon="arrow-right" _addClass="h-4 w-4 ml-2" }} \n        </span>\n\n    {{/decorator}} \n</li>\n\n\n'
 module.exports['components/content_nav/content_nav_list.hbs'] = '<ul class="flex flex-wrap {{#if this.isList}}  {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }}  {{/if}}" \n    :class="( ({{this.isMixed}} && {{_teasersize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && contentNavDropdownIsOpen == true ? \'!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] mt-0 w-full  mr-2 md:mr-0 \' : \'\'"\n    > \n    \n    {{~#each this.contentNavEntries~}}\n          \n        {{~#if this.isGroup~}}\n        \n            {{#if ../isDropdown}}               \n                <li class="w-full h-auto overflow-hidden text-base list-none border-b border-gray-400 bg-blue-accented text-blue-congress md:mx-0 font-copy fill-congress c-content-nav__group">\n                    <div class="flex items-center h-10 p-2 c-content-nav__group-title">{{this.title}}</div>\n                    <ul class="c-content-nav__group-list !px-0 mt-0">\n                        {{~#each this.navigationGroup~}}\n                            {{> components/content_nav/content_nav_item \n                                _teasersize=../../_teasersize \n                                _isdropdown=../../isDropdown \n                                _ismixed=../../isMixed \n                                _islist=../../isList \n                                _isflow=../../isFlow}}\n                        {{~/each~}}\n                    </ul>\n                </li> \n            {{/if}}\n        {{else}}           \n            {{> components/content_nav/content_nav_item  \n                _teasersize=../_teasersize \n                _isdropdown=../isDropdown \n                _ismixed=../isMixed \n                _islist=../isList \n                _isflow=../isFlow}}\n        {{~/if~}}\n    {{~/each~}}\n</ul>\n'
 module.exports['components/event/instant_dates.hbs'] = '{{#if this.moreThenOneEvent}}\n    {{#with this.firstInstant}}\n        <span class=\'text-2xl font-headingSerif font-bold\'>{{this.startDate.day}}</span>\n        <span class=\'text-sm font-headingSerif\'>{{this.startDate.monthNameShort}}</span>\n    {{/with}}\n    {{#if this.moreThenTwoEvents}}\n        <span class=\'text-sm font-headingSerif\'>|</span>\n    {{else}}\n        <span class=\'text-sm font-headingSerif\'>+</span>\n    {{/if}}\n    {{#with this.lastInstant}}\n        <span class=\'text-2xl font-headingSerif font-bold\'>{{this.startDate.day}}</span>\n        <span class=\'text-sm font-headingSerif\'>{{this.startDate.monthNameShort}}</span>\n    {{/with}}\n{{else}}\n    {{#with this.firstInstant}}\n        <span class=\'text-sm font-headingSerif\'>{{this.startDate.weekdayNameShort}}</span>\n        <span class=\'text-2xl font-headingSerif font-bold\'>{{this.startDate.day}}</span>\n        <span class=\'text-sm font-headingSerif\'>{{this.startDate.monthNameShort}}</span>\n    {{/with}}\n{{/if}}'
@@ -22,10 +22,10 @@ module.exports['components/grid/grid_group_tabbed.hbs'] = '</div>\n<section clas
 module.exports['components/grid/grid_item.hbs'] = '<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"]\'}}" >\n    {{> @partial-block }}    \n</article>'
 module.exports['components/label/label.hbs'] = '<span\n    class=\'sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading\n        {{inline-switch\n            _type\n            \'["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","podcast"]\'\n            \'["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","bg-labelMedia"]\'\n        }}\'\n>\n    {{_text}}\n\n</span>\n{{~#with this.byline~}}\n    <span class=\'ml-2 text-xs font-headingSerif {{#if ../_css}}{{../_css}}{{else}}text-grey-scorpion{{/if}}\'>\n        {{~#if this.bylineSsi~}}\n            {{{this.bylineSsi}}}\n        {{~else~}}\n            {{this.bylineText}}\n        {{~/if~}}\n    </span>\n{{~/with~}}'
 module.exports['components/mediaplayer/media_player.hbs'] = '<div x-show="avStart" id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-auto js-load {{if _cypressHook _cypressHook \'js-media-element\'}} js-video-livestream" data-hr-mediaplayer-loader=\'{{json this.ardPlayerJsonConfig}}\'>\n    {{#unless _hideGeotag}}\n        {{~#with _geotag}}\n            <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>\n        {{/with~}}\n    {{/unless}}\n</div>\n{{#if _isTeaser}}\n    <div class="relative {{_aspectRatio}}" x-show="!avStart" > \n        {{#with _teaser}}\n            {{~#if ../_isCopyText~}}\n                {{~> 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 ~}}                \n            {{else}}          \n                {{#decorator \'components/base/link\' _cssClasses="c-teaser__mediaLink" _isAriaHidden=true\n                        _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.realTeasersize\n                        _clickLabelPrefix2="mediaLink" }}                                      \n                    {{~> 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 ~}}                             \n                {{/decorator }}\n            {{/if}}\n        {{/with}}\n        {{> components/button/button_round _isButton="true" _addClass=(if _isLivestream \'absolute bottom-0 right-0 my-5 mx-5 text-orange-spicyCarrot hover:fill-orange-spicyCarrot js-mediaplayer__button\' \'absolute bottom-0 right-0 my-5 mx-5 text-blue-jellyBean hover:fill-blue-jellyBean js-mediaplayer__button\') _showIcon=true _icon=_mediaButtonIcon _label=_mediaButtonLabel _srOnly="true" _alpineClick="avStart = !avStart; $dispatch(\'player_start\')"}}   \n        {{~#if this.isPodcast~}}\n            <a href="{{this.podcastDownloadUrl}}" class="absolute top-0 right-0 m-5 js-load"{{#with\n                    this.trackingData}}\n            data-hr-click-tracking=\'{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}\'{{/with}}>\n                {{> components/base/image/icon _icon=\'download-button\' _addClass="w-10 h-10"}}\n            </a>\n        {{~/if~}}\n    </div>\n{{/if}}'
+module.exports['components/page/page.hbs'] = '<!DOCTYPE html>\n<html \n    class="no-js no-js-burgerMenu preload noMicroInteraction"\n    data-theme="hessenschau" \n    lang="de"\n>\n    <head>\n\n        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>\n        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>\n        <title>hessenschau.de | Nachrichten aus Hessen</title>\n        <meta name="application-name" content="hessenschau.de" />\n        <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />\n        <meta name="author" content="hessenschau.de, Frankfurt, Germany" />\n        <meta name="publisher" content="hessenschau.de" />\n        <meta name="language" content="Deutsch" />\n\n    </head>\n\n    <body itemscope itemtype="http://schema.org/WebPage">\n        <div class="js-pageSwap">\n                      \n            {{> components/site_header/header }}          \n            \n            <main \n                onclick="void(0)" \n                role="main" \n                id="content"\n                class="flex items-center justify-center"\n            >\n                <div class="grid grid-page">\n                    <div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard }}\n                    </section>\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/content_nav/teaser_content_nav teasersize="100"}}\n                    </section>\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/content_nav/teaser_content_nav teasersize="50"}}\n                        {{> components/teaser/content_nav/teaser_content_nav teasersize="50"}}\n                    </section>\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                    </section>\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                    </section>\n                    <div class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                    </div>               \n                    <div class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                    </div>\n                    <div class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                    </div>\n                    </div>\n                </div>\n            </main>\n\n        </div>\n    </body>\n</html>\n'
 module.exports['components/site_header/burger.hbs'] = '<div x-data="burger()" class="flex items-center justify-center h-full fill-current sb-burger">\n    <nav>\n        <button {{!-- :class="$store.burgeropen ? \'text-blue-congress\' : \'text-white\'" --}}  \n            class="relative w-10 h-10 text-white tablet:w-18 tablet:h-12 focus:outline-none bg-brand"\n            @burger-close.window="burgerClose()"\n            @click="$store.burgeropen = !$store.burgeropen" \n            @click.debounce="burgerClick()" \n            aria-owns="sectionNav" \n            aria-controls="sectionNav"\n            x-effect="$el.setAttribute(\'aria-expanded\', $store.burgeropen);$el.setAttribute(\'aria-label\', $store.burgeropen ? \'Navigation schließen\' : \'Navigation öffnen\')"\n        >\n            <span class="sr-only md:hidden">Open main menu</span>\n            <div class="absolute block w-6 transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">\n                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current " :class="$store.burgeropen ? \'rotate-45\' : \'-mt-2\'"></span>\n                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{\'opacity-0\': $store.burgeropen } "></span>\n                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{\'-rotate-45\': $store.burgeropen, \'mt-2\': ! $store.burgeropen }"></span>\n            </div>\n        </button>\n    </nav>\n</div>\n\n<script>\n    var burger = () => {\n        return {\n            burgerClose(){               \n                this.$store.burgeropen = false\n                this.$dispatch(\'toggle-sectionnav\', false); \n            },\n            burgerClick(){               \n                this.$store.serviceNavIsOpen = false\n                this.$dispatch(\'toggle-sectionnav\',  this.$store.burgeropen);  \n                // Todo: not doing anything! can be removed?\n                // this.percent > 50 ? this.removeYtranslate() : null;\n                this.toggleScrolling(!this.$store.burgeropen)              \n            },\n            removeYtranslate(){\n                // Todo: not doing anything! can be removed?\n                //this.$refs.serviceList.classList.remove(\'-mt-40\'); \n                //this.$refs.sectionnavigation.classList.remove(\'-mt-40\')\n            }\n        }\n    }\n</script>\n'
 module.exports['components/site_header/header.hbs'] = '<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">\n    <header class="print:hidden relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">   \n        <div x-data \n            id="headerWrapper"\n            @resize.window="resetNav()" \n            :class="shouldBrandNavBeHidden() ? \'-mt-10 lg:-mt-8\' : \'\'  "\n            class="fixed top-0 left-0 flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">\n            \n            <div id="anchorNavWrapper" \n                class="hidden">\n                {{> components/site_header/anchor_navigation/anchor_navigation }}\n            </div>\n\n            <div id="brandNavWrapper" \n                class="relative flex items-center justify-center order-1 w-full bg-white z-10000">\n                {{> components/site_header/brand_navigation/brand_navigation }} \n            </div>\n\n            <div id="serviceNavWrapper" \n                :class="shouldServiceNavBeHidden() ? \'-mt-40\' : \'\'"\n                \n                class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out md:border-white lg:border-b bg-blue-congress z-10002">   \n                <div id="serviceNavMainContainer" \n                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">\n\n                    <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>\n\n                    <div id="serviceLogoWrapper" \n                        class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 lg:items-end lg:pb-3 bg-blue-congress md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">\n                        {{> components/site_header/service_logo }}\n                    </div>\n                    \n                    <div id="serviceItemsWrapper"                \n                        class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-blue-congress md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">\n                        {{> components/site_header/service_navigation/service_list }}\n\n                        {{> components/site_header/navigation_search/quick_search_button }}\n\n                        <div class="hidden lg:flex">\n                            {{> components/site_header/navigation_search/quick_search_form }}\n                        </div>\n                    \n                        <div id="burgerWrapper" \n                            class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> \n                            {{> components/site_header/burger }}    \n                        </div>\n                        \n                    </div>\n                </div>\n            </div>\n\n            <div id="sectionNavWrapper"      \n                x-ref="sectionnavigation"\n                @toggle-sectionnav.window="toggleSectionNav"\n                :class="shouldSectionNavBeHidden() ? \'-mt-40 md:-mt-40 lg:-mt-40\' : \'\'"  \n                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-22 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-blue-congress z-10000 print:hidden"\n            >\n                {{> components/site_header/section_navigation/section_navigation }}\n            </div>\n            \n            <div x-cloak :class="shouldServiceNavBeHidden() ? \'hidden -mt-40\' : \'\'"\n                x-effect="$el.setAttribute(\'id\', \'flyout-\' + $store.searchID.current + \'-2\');$el.setAttribute(\'aria-expanded\', $store.searchFieldOpen);$el.setAttribute(\'aria-hidden\', !$store.searchFieldOpen);$el.setAttribute(\'aria-labelledby\', \'flyout-\' + $store.searchID.current + \'-1\')" \n                x-show="$store.searchFieldOpen"\n                class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-10002 lg:hidden print:hidden"\n                @search-close.window="$store.searchFieldOpen = false"\n                @click.outside="$store.searchFieldOpen = false; $dispatch(\'search-mobile-click-outside\'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"\n                x-transition:enter="transition ease-out duration-200" \n                x-transition:enter-start="opacity-0 transform scale-y-90" \n                x-transition:enter-end="opacity-100 transform scale-y-100" \n                x-transition:leave="transition ease-in duration-100" \n                x-transition:leave-start="opacity-100 transform scale-y-100" \n                x-transition:leave-end="opacity-0 transform scale-y-90">\n\n                {{> components/site_header/navigation_search/quick_search_form }}\n\n            </div>\n            \n        </div> \n    </header>\n    <div class="justify-center hidden w-full scale-50 brand-logo_print print:flex">\n        <img loading="lazy" \n            alt="{{loca "header_homepage_link_title"}}" \n            src="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg" _brand=(if this.brand this.brand)}}" \n            />\n    </div>\n    <div x-ref="myOverlay">\n        <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-10000 lg:hidden opacity-70"></div>\n    </div>\n</div>\n'
 module.exports['components/site_header/service_logo.hbs'] = '<a class="relative flex items-center text-white fill-current sb-service-logo lg:items-end link-focus-white print:hidden" \n    href="https://www.hessenschau.de/index.html" \n    title="Startseite hessenschau . d e">\n    <span x-cloak class="absolute transition-opacity duration-500 ease-in-out" :class="`${percent}` < 50 ? \'opacity-0\' : \'delay-200 opacity-100\'" >\n        {{> components/base/image/icon _icon="brandlogo--compact-40x40px" _iconmap="logo" _addClass="logo-compact w-7 h-7 lg:w-10 lg:h-10 items-center "}}\n    </span>\n    <span class="transition-opacity duration-500 ease-in-out" :class="`${percent}` < 50 ? \'opacity-100\' : \'opacity-0\'">\n        {{> components/base/image/icon _icon="brandlogo--desk" _iconmap="logo" _addClass="logo-desk flex items-center fill-white w-40 h-5 md:h-7 md:w-40 lg:h-8 lg:w-52"}}\n    </span> \n</a>\n'
-module.exports['components/page/page.hbs'] = '<!DOCTYPE html>\n<html \n    class="no-js no-js-burgerMenu preload noMicroInteraction"\n    data-theme="hessenschau" \n    lang="de"\n>\n    <head>\n\n        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>\n        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>\n        <title>hessenschau.de | Nachrichten aus Hessen</title>\n        <meta name="application-name" content="hessenschau.de" />\n        <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />\n        <meta name="author" content="hessenschau.de, Frankfurt, Germany" />\n        <meta name="publisher" content="hessenschau.de" />\n        <meta name="language" content="Deutsch" />\n\n    </head>\n\n    <body itemscope itemtype="http://schema.org/WebPage">\n        <div class="js-pageSwap">\n                      \n            {{> components/site_header/header }}          \n            \n            <main \n                onclick="void(0)" \n                role="main" \n                id="content"\n                class="flex items-center justify-center"\n            >\n                <div class="grid grid-page">\n                    <div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard }}\n                    </section>\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/content_nav/teaser_content_nav teasersize="100"}}\n                    </section>\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/content_nav/teaser_content_nav teasersize="50"}}\n                        {{> components/teaser/content_nav/teaser_content_nav teasersize="50"}}\n                    </section>\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                    </section>\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                    </section>\n                    <div class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                    </div>               \n                    <div class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                    </div>\n                    <div class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                    </div>\n                    </div>\n                </div>\n            </main>\n\n        </div>\n    </body>\n</html>\n'
 module.exports['components/teaser/teaser_alternativ.hbs'] = '<article class="col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize \'["hero","100","50"]\' \'[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]\'~}}{{else}} items-start flex-col{{/unless}}"\n    x-data="{ avStart: false }"\n    {{#if this.isMobile1to1}}\n            :class="avStart ? \'flex-col\' : \'flex-row\'"\n    {{/if}} \n    >\n    <figure class="relative {{~inline-switch this.teaserSize \'["hero","100","50"]\' \'[" basis-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/3"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/2"]\'~}}">\n        {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["hero"]\' \'["ar-16-9","ar-1-1 md:ar-16-9"]\') }} \n    </figure>\n    {{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.teaserSize \'["hero","100","50"]\' \'["basis-1/3"," basis-3/5 md:basis-2/3"," basis-3/5 md:basis-1/2"]\') }}\n</article>'
 module.exports['components/teaser/teaser_indextext.hbs'] = '<article class="mx-5 md:mx-0 p-8 md:p-10 relative col-span-12 flex flex-col gap-x-4 \n    {{~inline-switch this.teaserSize \'["50"]\' \'[" md:col-span-6",""]\'}}\n    {{~inline-switch this.teaserType \'["accented-ds","boxed-ds","highlighted-ds"]\' \'[" bg-blue-accented"," bg-white border border-blue-congress"," bg-orange-spicyCarrot"," bg-blue-accented"]\'}} "\n>\n    <h3 class="text-2xl md:text-4xl font-headingSerif {{~inline-switch this.teaserType \'["highlighted-ds"]\' \'[" text-white",""]\'}}">\n        {{this.title}}\n    </h3>\n    <p class="mt-6 text-sm md:text-base font-copy {{~inline-switch this.teaserType \'["highlighted-ds"]\' \'[" text-white",""]\'}}">\n        {{{this.shorttext}}}\n    </p>\n</article>\n'
 module.exports['components/teaser/teaser_poster.hbs'] = '<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"]\'}} ">\n    <figure class="ar-1-1" aria-hidden="true">\n        {{~> 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" ~}}\n    </figure> \n    <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">\n        <div class="self-center block mx-8 text-center text-white">\n            {{> 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"]\') }}   \n        </div>\n    </div>\n    {{#decorator \'components/base/link\' _css="absolute flex w-full h-full justify-center" _isAriaHidden=true _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="mediaLink" }}\n        <div class="self-end px-4 py-2.5 {{inline-switch this.teaserSize \'["33","50"]\' \'["mb-7","mb-7 md:mb-16"]\'}} text-white border border-white font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor">{{this.link.readMoreText.readMoreLong}}</div>\n    {{/decorator}} \n    <span class="sr-only">{{this.link.readMoreText.readMoreLong}}: {{this.title}}</span> \n</article>'
@@ -64,7 +64,7 @@ module.exports['components/teaser/components/teaser_text.hbs'] = '<span class=\'
 module.exports['components/teaser/components/teaser_title.hbs'] = '<span class=\'block mt-0.5 group-hover:underline {{#if _css}}{{_css}}{{/if}}{{#if _titleBlue}} text-blue-congress {{/if}}{{#if _ordered}} pl-8 {{/if}} {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _fontVariant=_fontVariant _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}\'>\n    {{~_text~}}\n</span>'
 module.exports['components/teaser/components/teaser_title_classes.hbs'] = '{{! \nThis handlebars template is responisible to render the needed classnames for Teaser headlines\nAs we use tailwind css no cascade is used to style components. As Teaser Headline Sizes dependent\non 4 parameters the logic was outsourced to this file.\n\nthe 4 parameters are:\n- teaserType\n- size\n- _isMobile1to1\n- fontVariant\n\n}}\n\n{{~#switch _teaserType~}}\n    {{~#case \'standard-ds\'~}}\n        {{~#if _isMobile1to1~}}\n            {{~inline-switch\n                _size\n                \'["hero","100","25"]\'\n                \'["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]\'\n            ~}}\n        {{~else~}}\n            {{~inline-switch\n                _size\n                \'["hero","100","25"]\'\n                \'["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]\'\n            ~}}\n        {{~/if~}}\n    {{~/case~}}\n    {{~#case \'tabbox-standard-ds\'~}}\n        {{~#if _isMobile1to1~}}\n            {{~inline-switch\n                _size\n                \'["hero","100","25"]\'\n                \'["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]\'\n            ~}}\n        {{~else~}}\n            {{~inline-switch\n                _size\n                \'["hero","100","25"]\'\n                \'["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]\'\n            ~}}\n        {{~/if~}}\n    {{~/case~}}\n    {{~#case \'alternative-ds\'~}}\n        {{~inline-switch\n            _size\n            \'["hero","100","50"]\'\n            \'["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]\'\n        ~}}\n    {{~/case~}}\n    {{~#case \'tabbox-alternative-ds\'~}}\n        {{~inline-switch\n            _size\n            \'["hero","100","50"]\'\n            \'["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]\'\n        ~}}\n    {{~/case~}}\n    {{~#case \'poster-ds\'~}}\n        {{~inline-switch _size \'["50","33"]\' \'["text-2xl md:text-4xl","text-2xl"]\'~}}\n    {{~/case~}}\n    {{~#case \'cluster\'~}}\n        {{#if _firstItem}}\n            {{~inline-switch _size \'["100"]\' \'[" text-lg md:text-2xl"," text-lg"]\'}}\n        {{else}}\n            text-lg\n        {{/if}}\n    {{~/case~}}\n    {{~#case \'stage\'~}}\n        {{~inline-switch _size \'["100"]\' \'[" text-2xl md:text-4xl"," text-2xl"]\'}}\n    {{~/case~}}\n{{~/switch~}}\n{{~inline-switch\n    _fontVariant\n    \'["serif", "sans-serif"]\'\n    \'[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]\'\n~}}'
 module.exports['components/teaser/components/teaser_topline.hbs'] = '<span\n    class=\'pt-px block text-base\n        {{inline-switch _teaserType \'["poster-ds"]\' \'["text-white","text-toplineColor"]\'}}{{#if _css}} {{_css}}{{/if}}\n        font-heading\'\n    aria-label=\'{{_readMore}}: {{_text}}\'\n>\n    {{_text}}\n</span>'
-module.exports['components/teaser/content_nav/teaser_content_nav.hbs'] = '<div id="{{nextRandom}}"\n    x-ignore\n    ax-load\n    ax-load-src={{resourceUrl "assets/js/vendor/content_nav.alpine.js"}}\n    x-data="contentNavigationHandler()"\n    class="js-contentNavWrapper h-10 col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize \'["100","66","50","33","25"]\' \'["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]\'}}"\n>\n    {{> components/content_nav/content_nav _teasersize=this.teasersize }}           \n</div>'
+module.exports['components/teaser/content_nav/teaser_content_nav.hbs'] = '<div id="{{nextRandom}}"\n    x-ignore\n    ax-load\n    ax-load-src={{resourceUrl "assets/js/vendor/content_nav.alpine.js"}}\n    x-data="contentNavigationHandler()"\n    class="js-contentNavWrapper col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize \'["100","66","50","33","25"]\' \'["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]\'}}"\n>\n    {{> components/content_nav/content_nav _teasersize=this.teasersize }}           \n</div>'
 module.exports['components/teaser/group_teaser/group_teaser.hbs'] = '{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }} \n        {{~#if this.hasGroupTitle}}\n            <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">\n                {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}\n                    {{this.groupTitle}}\n                {{~#if this.hasLink}}</a>{{/if~}}\n            </h2>\n        {{/if}}  \n        {{~> components/teaser/teaser_logic/teaser_logic ~}}\n{{/components/grid/grid_group}}'
 module.exports['components/teaser/group_teaser/group_teaser_accented.hbs'] = '{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}\n    \n        <div class="h-auto col-span-12 p-8 mx-4 rounded-tr-none rounded-bl-none bg-blue-accented rounded-3xl">\n\n        {{~#if this.hasGroupTitle}}\n            <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">\n                {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}\n                    {{this.groupTitle}}\n                {{~#if this.hasLink}}</a>{{/if~}}\n            </h2>\n        {{/if}}\n\n        </div>\n        <div class="h-24 col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-blue-accented rounded-3xl">\n    \n        {{~> components/teaser/teaser_logic/teaser_logic ~}}\n    \n        </div>\n    \n{{/components/grid/grid_group}}'
 module.exports['components/teaser/podcast/podcast-playlist.hbs'] = '<div class="grid grid-cols-12 pt-5 md:pt-5 bg-[#dce8f0] mx-0 rounded-tl-3xl rounded-br-3xl col-main gap-x-6 gap-y-6" >\n    {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}\n </div>'

package/dist/assets/index.css

@@ -2188,7 +2188,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1667487166137;
+  counter-reset: cnt1667493921763;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2577,7 +2577,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1667487166137 1;
+  counter-increment: cnt1667493921763 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2593,7 +2593,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1667487166137);
+  content: counter(cnt1667493921763);
 }
 .\[-T\:\+Z\] {
   --t: +Z;

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

@@ -9,7 +9,7 @@
         </nav>
     {{else}}  
         {{#decorator 'components/content_nav/content_nav_dropdown'
-                     _componentClass="c-content-nav w-full"
+                     _componentClass="c-content-nav h-10  w-full"
                      _teasersize=../_teasersize
                      _iconOpen="arrow-down"
                      _iconClose="arrow-up"

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

@@ -29,8 +29,8 @@
     </div>    
     <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" 
         aria-haspopup="true"
-        :class="contentNavDropdownIsOpen ? 'z-9999 w-auto absolute' : 'z-1003'" 
-        class="relative p-0 m-0 md:left-0 md:h-auto md:overflow-visible">
+        :class="contentNavDropdownIsOpen ? 'z-9999 w-auto ' : ' z-1003'" 
+        class="p-0 m-0 md:left-0 md:h-auto md:overflow-visible">
        {{~decorator_body~}}
     </div>
     

package/dist/views/components/teaser/content_nav/teaser_content_nav.hbs

@@ -3,7 +3,7 @@
     ax-load
     ax-load-src={{resourceUrl "assets/js/vendor/content_nav.alpine.js"}}
     x-data="contentNavigationHandler()"
-    class="js-contentNavWrapper h-10 col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}"
+    class="js-contentNavWrapper col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}"
 >
     {{> components/content_nav/content_nav _teasersize=this.teasersize }}           
 </div>

package/package.json

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

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

@@ -9,7 +9,7 @@
         </nav>
     {{else}}  
         {{#decorator 'components/content_nav/content_nav_dropdown'
-                     _componentClass="c-content-nav w-full"
+                     _componentClass="c-content-nav h-10  w-full"
                      _teasersize=../_teasersize
                      _iconOpen="arrow-down"
                      _iconClose="arrow-up"

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

@@ -29,8 +29,8 @@
     </div>    
     <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" 
         aria-haspopup="true"
-        :class="contentNavDropdownIsOpen ? 'z-9999 w-auto absolute' : 'z-1003'" 
-        class="relative p-0 m-0 md:left-0 md:h-auto md:overflow-visible">
+        :class="contentNavDropdownIsOpen ? 'z-9999 w-auto ' : ' z-1003'" 
+        class="p-0 m-0 md:left-0 md:h-auto md:overflow-visible">
        {{~decorator_body~}}
     </div>
     

package/src/stories/views/components/teaser/content_nav/teaser_content_nav.hbs

@@ -3,7 +3,7 @@
     ax-load
     ax-load-src={{resourceUrl "assets/js/vendor/content_nav.alpine.js"}}
     x-data="contentNavigationHandler()"
-    class="js-contentNavWrapper h-10 col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}"
+    class="js-contentNavWrapper col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}"
 >
     {{> components/content_nav/content_nav _teasersize=this.teasersize }}           
 </div>