hr-design-system-handlebars 0.120.2 → 0.120.4

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.120.4 (Thu Jan 19 2023)
+
+#### 🐛 Bug Fix
+
+- Dpe 2007 fokuszustände definieren [#487](https://github.com/mumprod/hr-design-system-handlebars/pull/487) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.120.3 (Thu Jan 19 2023)
+
+#### 🐛 Bug Fix
+
+- Feature/dpe 2019 b [#488](https://github.com/mumprod/hr-design-system-handlebars/pull/488) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.120.2 (Thu Jan 19 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -423,14 +423,14 @@ video {
   --tw-scale-y: 1;
 }
 
-.btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-teaser-focus::before, span, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow-inner, .shadow-xl, .shadow, .before\:shadow-stage::before {
+.btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-link-inset:not(:focus-visible), .ds-teaser-focus::before, span, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow-inner, .shadow-xl, .shadow, .before\:shadow-stage::before {
   --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
   --tw-ring-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow-colored: 0 0 rgba(0,0,0,0);
 }
 
-.ring, .link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white {
+.ds-link-inset, .ring, .link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white {
   --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
@@ -596,6 +596,91 @@ video {
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
+.ds-button {
+  z-index: 20;
+}
+.ds-button:focus {
+  --tw-shadow: 0 0 0 0.25rem;
+  --tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+  --tw-shadow-color: var(--color-focus-state);
+  --tw-shadow: var(--tw-shadow-colored);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.ds-button:focus:not(:focus-visible) {
+  --tw-shadow: 0 0 rgba(0,0,0,0);
+  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+}
+.ds-button-round {
+  z-index: 20;
+}
+.ds-button-round:focus {
+  border-radius: 9999px;
+  --tw-shadow: 0 0 0 0.365rem;
+  --tw-shadow-colored: 0 0 0 0.365rem var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+  --tw-shadow-color: var(--color-focus-state);
+  --tw-shadow: var(--tw-shadow-colored);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.ds-button-round:focus:not(:focus-visible) {
+  --tw-shadow: 0 0 rgba(0,0,0,0);
+  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+}
+.ds-link {
+  display: block;
+}
+.ds-link:focus {
+  --tw-shadow: 0 0 0 0.25rem;
+  --tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+  --tw-shadow-color: var(--color-focus-state);
+  --tw-shadow: var(--tw-shadow-colored);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.ds-link:focus:not(:focus-visible) {
+  --tw-shadow: 0 0 rgba(0,0,0,0);
+  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+}
+.ds-link-inset {
+  display: block;
+}
+.ds-link-inset:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
+  --tw-ring-inset: inset;
+  --tw-ring-color: currentColor;
+}
+.ds-link-inset:focus:not(:focus-visible) {
+  --tw-shadow: 0 0 rgba(0,0,0,0);
+  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+}
 .ds-teaser-focus::before {
   position: absolute;
   top: 0px;
@@ -645,7 +730,6 @@ video {
 /* ---------------- NAV ITEMS ------------------ */
 .content-nav-item {
   height: 2.5rem;
-  overflow: hidden;
   font-size: 1rem;
   line-height: 1.375rem;
   font-family: DIN, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
@@ -1033,9 +1117,6 @@ video {
 .\!mt-4 {
   margin-top: 1rem !important;
 }
-.mt-2 {
-  margin-top: 0.5rem;
-}
 .mt-0 {
   margin-top: 0px;
 }
@@ -1066,6 +1147,9 @@ video {
 .-mt-2 {
   margin-top: -0.5rem;
 }
+.mt-2 {
+  margin-top: 0.5rem;
+}
 .-mt-40 {
   margin-top: -10rem;
 }
@@ -1857,6 +1941,10 @@ video {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1885,10 +1973,6 @@ video {
   padding-left: 2rem;
   padding-right: 2rem;
 }
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -2400,7 +2484,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1674129127459;
+  counter-reset: cnt1674136258640;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2618,7 +2702,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1674129127459 1;
+  counter-increment: cnt1674136258640 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2634,7 +2718,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1674129127459);
+  content: counter(cnt1674136258640);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3658,16 +3742,16 @@ video {
     width: fit-content;
   }
 
-  .sm\:px-8 {
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-
   .sm\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
   }
 
+  .sm\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .sm\:px-11\.5 {
     padding-left: 2.875rem;
     padding-right: 2.875rem;
@@ -3984,16 +4068,16 @@ video {
     padding: 2.5rem;
   }
 
-  .md\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
   .md\:\!px-0 {
     padding-left: 0px !important;
     padding-right: 0px !important;
   }
 
+  .md\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
   .md\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;

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

@@ -1,9 +1,9 @@
 {{#with this.contentNav}}
     {{#if this.isListOrFlow}}
-        <nav class="w-full px-2 md:px-0 c-content-nav {{inline-switch ../_teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}">
+        <nav class="w-full px-5 sm:px-0 c-content-nav {{inline-switch ../_teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}">
             {{> components/content_nav/content_nav_container
                     _teaserSize=../_teaserSize
-                    _maindivclass="flex relative flex-wrap mt-2 mx-2 md:mx-0 md:mt-0 "
+                    _maindivclass="flex relative flex-wrap"
             }}
         </nav>
     {{else}}

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

@@ -1,13 +1,13 @@
-<nav class="w-full px-2 md:px-0 {{inline-switch _teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}"
+<nav class="w-full px-5 sm:px-0 {{inline-switch _teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}"
      :class="contentNavDropdownIsOpen ? 'h-10' : ''"
      id="dropdown--{{nextRandom}}"
-     tabindex="0"
+    
      role="navigation"
      aria-labelledby="dropdown__label--{{getRandom}}">
 
     <span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
     <button 
-         class="content-nav-dropdown_dropdown{{#if this.isDropdown}} -isDropdown{{/if}}{{#if this.isMixed}} -isMixed{{/if}} relative flex w-full h-10  mb-0 overflow-hidden bg-white border md:mx-0 z-100 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
+         class="content-nav-dropdown_dropdown{{#if this.isDropdown}} -isDropdown{{/if}}{{#if this.isMixed}} -isMixed{{/if}} ds-link-inset relative flex w-full h-10  mb-0 overflow-hidden bg-white border md:mx-0 z-100 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
          @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen;  $dispatch('hr:global:resetinputAutoSuggest');" 
          @click.outside ="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest')"
          {{#if this.isMixed}}

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

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

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

@@ -1,7 +1,8 @@
 
-{{#decorator 'components/base/link' _css="group" }} 
+{{#decorator 'components/base/link' _css="group ds-link" }} 
     {{> components/teaser/components/teaser_heading
         _headlineTag="h1"
+        _headlineCss=""
         _label=this.label
         _size=_size
         _title=this.title

package/dist/views/components/teaser/podcast/podcast_downloadbutton.hbs

@@ -1,3 +1,3 @@
-<a href="{{_url}}" class="h-6 js-load {{#if _addClass}}{{_addClass}}{{/if}}" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}} aria-label="Podcast herunterladen">
+<a href="{{_url}}" class="h-6 js-load ds-link rounded-lg {{#if _addClass}}{{_addClass}}{{/if}}" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}} aria-label="Podcast herunterladen">
     {{> components/base/image/icon _icon='download-neu' _addClass=_iconClass }}
 </a>

package/dist/views/components/teaser/podcast/podcast_item_title.hbs

@@ -1,6 +1,6 @@
 {{#decorator
     'components/base/link'
-    _css='w-full font-heading text-base text-podcast-text line-clamp-4 ...'
+    _css='w-full ds-link font-heading text-base text-podcast-text line-clamp-4 ...'
 }}
     <span
         class='block group-hover:underline text-podcast-text

package/dist/views/components/teaser/podcast/podcast_playbutton.hbs

@@ -1,4 +1,4 @@
-<button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}" aria-label="Podcast starten">           
+<button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group ds-button-round  {{_css}}" aria-label="Podcast starten">           
     <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring">
         {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
     </div>

package/dist/views/components/teaser/podcast/podcast_player.hbs

@@ -13,17 +13,19 @@
             </div> 
           {{/with}}
           
-          {{~#with airdateDate}}
-            <div class="flex grow pt-1.5 text-xs font-headingSerif text-podcast-text">
-              <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
-            </div>
-          {{/with}}
+          
+            <div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text">
+              {{~#with airdateDate}}
+                <time class="flex grow pt-1.5" datetime="{{this.htmlDateTime}}">{{this.date}}</time>
+              {{/with}}
 
-        {{!-- Download --}}
-          {{> components/teaser/podcast/podcast_downloadbutton 
-            _addClass="ml-2 pr-2 md:pr-5 "
-            _iconClass="h-6 w-6 text-podcast-text fill-current"
-            _url=this.podcastDownloadUrl }}
+              {{!-- Download --}}
+              {{> components/teaser/podcast/podcast_downloadbutton 
+                _addClass=""
+                _iconClass="h-6 w-6 text-podcast-text fill-current"
+                _url=this.podcastDownloadUrl }}
+
+            </div>
         </div>
 
         {{!-- Überschrift: --}}
@@ -74,7 +76,7 @@
         <div class="flex justify-end w-full pl-4">
           <div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text">
             <span class="self-end font-bold">Zur Sendung</span>
-            <a class="self-end underline" href="{{this.url}}">{{this.title}}</a>
+            <a class="self-end underline ds-link" href="{{this.url}}">{{this.title}}</a>
           </div>
         </div>
       {{/with}}          

package/dist/views/components/teaser/podcast/podcast_player_ui.hbs

@@ -49,7 +49,7 @@
                         min="0" 
                         max="1000"
                         value="0"
-                        class="h-1 my-4 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" 
+                        class="h-1 my-4 bg-white appearance-none cursor-pointer ds-link grow seek_slider" 
                         aria-label="Schieberegler" >  
                 </div>
 

package/dist/views/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -27,7 +27,7 @@
         :aria-controls="$id('dropdown-button')"
         type="button"
         :class="open ? 'drop-shadow' : ''" 
-        class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-highlight">Abonnieren
+        class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-highlight">Abonnieren
         <div x-cloak x-show="open" class="w-3 h-3">
             {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
         </div>
@@ -50,7 +50,7 @@
         <ul>
             {{~#each this~}}
                 <li class="{{#unless @last}}border-b{{/unless}}"> 
-                    <a class="flex py-2 text-left whitespace-nowrap hover:underline disabled:text-gray-500"
+                    <a class="flex py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500"
                     title="{{this.podcastHosterName}}" 
                     target="_blank"
                     rel="noopener noreferrer"

package/dist/views/components/teaser/podcast/podcast_title.hbs

@@ -1,4 +1,4 @@
-{{#decorator 'components/base/link' _css="group font-title text-base mt-2.5 text-podcast-text line-clamp-4 md:line-clamp-2 ..." }} 
+{{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text line-clamp-4 md:line-clamp-2 ..." }} 
     <span class="block mt-0.5 group-hover:underline {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl","text-base md:text-2xl","text-base md:text-lg"]' ~}}">
         {{~_title~}}
     </span>

package/dist/views/components/teaser/tabbox/group_tabbox.hbs

@@ -21,7 +21,7 @@
     </div>
     {{~#if this.link~}}
         <div class="flex justify-center min-w-0 pt-8 mx-5">
-            {{~> components/button/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink="true" _buttonText=(loca "group_tabbed_more" this.title) _buttonCss="truncate" _linkCss="flex min-w-0" ~}}
+            {{~> components/button/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink="true" _buttonText=(loca "group_tabbed_more" this.title) _buttonCss="truncate" _linkCss="flex min-w-0 ds-link" ~}}
         </div>
     {{~/if~}}
 </section>

package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -4,14 +4,14 @@
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
   class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-3xl md:rounded-br-3xl md:col-main gap-x-6 gap-y-6"
 >
-  <section class="col-span-full" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
+  <section class="px-0 col-span-full sm:px-8 md:px-0" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
     <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">
       {{~#each this.tabbedGroup~}}
         <button  onclick="window.location.href='#tgp{{@index}}';"
                  :class="tab === '{{this.title}}' ? 'text-button-inverted bg-button border-button' : 'bg-button-inverted text-button-hollow border-button-inverted hover:border-button-hollow'" 
                  x-effect="$el.removeAttribute('onclick')"
                  x-on:click.prevent="tab = '{{this.title}}'"  
-                 class="border text-base font-heading py-px px-2 m-1.5" 
+                 class="border ds-button text-base font-heading py-px px-2 m-1.5" 
                  type="button" 
                  role="tab"
         >

package/package.json

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

package/src/assets/css/custom-components.css

@@ -88,14 +88,31 @@
         @apply shadow-none;
     }
 
+    .ds-button-round {
+        @apply z-20;
+        @apply focus:shadow-teaser-focus-big focus:shadow-focus-state focus:outline-none focus:rounded-full;
+    }
+
+    .ds-button-round:focus:not(:focus-visible) {
+        @apply shadow-none;
+    }
+
     .ds-link {
-        @apply focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
+        @apply block focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
     }
 
     .ds-link:focus:not(:focus-visible) {
         @apply shadow-none;
     }
 
+    .ds-link-inset  {
+        @apply block focus:ring-inset focus:ring-4 focus:outline-none focus:ring-current ;    
+    }
+
+    .ds-link-inset:focus:not(:focus-visible) {
+        @apply shadow-none;     
+    }
+
     .ds-teaser-focus {
         @apply before:content-[''] before:absolute before:inset-0 before:z-10;
     }
@@ -129,8 +146,7 @@
 /* ----------------Content NAV------------------ */
 /* ---------------- NAV ITEMS ------------------ */
     .content-nav-item {
-        @apply h-10;
-        @apply overflow-hidden;
+        @apply h-10;    
         @apply text-base;
         @apply font-copy;
         @apply list-none;
@@ -178,7 +194,6 @@
     .content-nav-item.content-nav-item-mixed {
         @apply w-full;
         @apply mb-0;
-
         @apply border-l-0;
         @apply border-r-0;
         @apply border-t-0;
@@ -200,6 +215,7 @@
         @apply hover:text-content-nav;
         @apply hover:!bg-white;
         @apply hover:!fill-content-nav;
+                
     }
 /* ---------------- NAV DROPDOWN - DROPDOWN ------------------ */
     .content-nav-dropdown_dropdown.-isDropdown  {

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

@@ -1,9 +1,9 @@
 {{#with this.contentNav}}
     {{#if this.isListOrFlow}}
-        <nav class="w-full px-2 md:px-0 c-content-nav {{inline-switch ../_teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}">
+        <nav class="w-full px-5 sm:px-0 c-content-nav {{inline-switch ../_teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}">
             {{> components/content_nav/content_nav_container
                     _teaserSize=../_teaserSize
-                    _maindivclass="flex relative flex-wrap mt-2 mx-2 md:mx-0 md:mt-0 "
+                    _maindivclass="flex relative flex-wrap"
             }}
         </nav>
     {{else}}

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

@@ -1,13 +1,13 @@
-<nav class="w-full px-2 md:px-0 {{inline-switch _teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}"
+<nav class="w-full px-5 sm:px-0 {{inline-switch _teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}"
      :class="contentNavDropdownIsOpen ? 'h-10' : ''"
      id="dropdown--{{nextRandom}}"
-     tabindex="0"
+    
      role="navigation"
      aria-labelledby="dropdown__label--{{getRandom}}">
 
     <span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
     <button 
-         class="content-nav-dropdown_dropdown{{#if this.isDropdown}} -isDropdown{{/if}}{{#if this.isMixed}} -isMixed{{/if}} relative flex w-full h-10  mb-0 overflow-hidden bg-white border md:mx-0 z-100 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
+         class="content-nav-dropdown_dropdown{{#if this.isDropdown}} -isDropdown{{/if}}{{#if this.isMixed}} -isMixed{{/if}} ds-link-inset relative flex w-full h-10  mb-0 overflow-hidden bg-white border md:mx-0 z-100 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
          @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen;  $dispatch('hr:global:resetinputAutoSuggest');" 
          @click.outside ="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest')"
          {{#if this.isMixed}}

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

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

package/src/stories/views/components/teaser/cluster/teaser_cluster_item.hbs

@@ -1,7 +1,8 @@
 
-{{#decorator 'components/base/link' _css="group" }} 
+{{#decorator 'components/base/link' _css="group ds-link" }} 
     {{> components/teaser/components/teaser_heading
         _headlineTag="h1"
+        _headlineCss=""
         _label=this.label
         _size=_size
         _title=this.title

package/src/stories/views/components/teaser/podcast/podcast_downloadbutton.hbs

@@ -1,3 +1,3 @@
-<a href="{{_url}}" class="h-6 js-load {{#if _addClass}}{{_addClass}}{{/if}}" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}} aria-label="Podcast herunterladen">
+<a href="{{_url}}" class="h-6 js-load ds-link rounded-lg {{#if _addClass}}{{_addClass}}{{/if}}" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}} aria-label="Podcast herunterladen">
     {{> components/base/image/icon _icon='download-neu' _addClass=_iconClass }}
 </a>

package/src/stories/views/components/teaser/podcast/podcast_item_title.hbs

@@ -1,6 +1,6 @@
 {{#decorator
     'components/base/link'
-    _css='w-full font-heading text-base text-podcast-text line-clamp-4 ...'
+    _css='w-full ds-link font-heading text-base text-podcast-text line-clamp-4 ...'
 }}
     <span
         class='block group-hover:underline text-podcast-text

package/src/stories/views/components/teaser/podcast/podcast_playbutton.hbs

@@ -1,4 +1,4 @@
-<button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}" aria-label="Podcast starten">           
+<button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group ds-button-round  {{_css}}" aria-label="Podcast starten">           
     <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring">
         {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
     </div>

package/src/stories/views/components/teaser/podcast/podcast_player.hbs

@@ -13,17 +13,19 @@
             </div> 
           {{/with}}
           
-          {{~#with airdateDate}}
-            <div class="flex grow pt-1.5 text-xs font-headingSerif text-podcast-text">
-              <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
-            </div>
-          {{/with}}
+          
+            <div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text">
+              {{~#with airdateDate}}
+                <time class="flex grow pt-1.5" datetime="{{this.htmlDateTime}}">{{this.date}}</time>
+              {{/with}}
 
-        {{!-- Download --}}
-          {{> components/teaser/podcast/podcast_downloadbutton 
-            _addClass="ml-2 pr-2 md:pr-5 "
-            _iconClass="h-6 w-6 text-podcast-text fill-current"
-            _url=this.podcastDownloadUrl }}
+              {{!-- Download --}}
+              {{> components/teaser/podcast/podcast_downloadbutton 
+                _addClass=""
+                _iconClass="h-6 w-6 text-podcast-text fill-current"
+                _url=this.podcastDownloadUrl }}
+
+            </div>
         </div>
 
         {{!-- Überschrift: --}}
@@ -74,7 +76,7 @@
         <div class="flex justify-end w-full pl-4">
           <div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text">
             <span class="self-end font-bold">Zur Sendung</span>
-            <a class="self-end underline" href="{{this.url}}">{{this.title}}</a>
+            <a class="self-end underline ds-link" href="{{this.url}}">{{this.title}}</a>
           </div>
         </div>
       {{/with}}          

package/src/stories/views/components/teaser/podcast/podcast_player_ui.hbs

@@ -49,7 +49,7 @@
                         min="0" 
                         max="1000"
                         value="0"
-                        class="h-1 my-4 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" 
+                        class="h-1 my-4 bg-white appearance-none cursor-pointer ds-link grow seek_slider" 
                         aria-label="Schieberegler" >  
                 </div>
 

package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -27,7 +27,7 @@
         :aria-controls="$id('dropdown-button')"
         type="button"
         :class="open ? 'drop-shadow' : ''" 
-        class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-highlight">Abonnieren
+        class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-highlight">Abonnieren
         <div x-cloak x-show="open" class="w-3 h-3">
             {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
         </div>
@@ -50,7 +50,7 @@
         <ul>
             {{~#each this~}}
                 <li class="{{#unless @last}}border-b{{/unless}}"> 
-                    <a class="flex py-2 text-left whitespace-nowrap hover:underline disabled:text-gray-500"
+                    <a class="flex py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500"
                     title="{{this.podcastHosterName}}" 
                     target="_blank"
                     rel="noopener noreferrer"

package/src/stories/views/components/teaser/podcast/podcast_title.hbs

@@ -1,4 +1,4 @@
-{{#decorator 'components/base/link' _css="group font-title text-base mt-2.5 text-podcast-text line-clamp-4 md:line-clamp-2 ..." }} 
+{{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text line-clamp-4 md:line-clamp-2 ..." }} 
     <span class="block mt-0.5 group-hover:underline {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl","text-base md:text-2xl","text-base md:text-lg"]' ~}}">
         {{~_title~}}
     </span>

package/src/stories/views/components/teaser/tabbox/group_tabbox.hbs

@@ -21,7 +21,7 @@
     </div>
     {{~#if this.link~}}
         <div class="flex justify-center min-w-0 pt-8 mx-5">
-            {{~> components/button/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink="true" _buttonText=(loca "group_tabbed_more" this.title) _buttonCss="truncate" _linkCss="flex min-w-0" ~}}
+            {{~> components/button/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink="true" _buttonText=(loca "group_tabbed_more" this.title) _buttonCss="truncate" _linkCss="flex min-w-0 ds-link" ~}}
         </div>
     {{~/if~}}
 </section>

package/src/stories/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -4,14 +4,14 @@
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
   class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-3xl md:rounded-br-3xl md:col-main gap-x-6 gap-y-6"
 >
-  <section class="col-span-full" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
+  <section class="px-0 col-span-full sm:px-8 md:px-0" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
     <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">
       {{~#each this.tabbedGroup~}}
         <button  onclick="window.location.href='#tgp{{@index}}';"
                  :class="tab === '{{this.title}}' ? 'text-button-inverted bg-button border-button' : 'bg-button-inverted text-button-hollow border-button-inverted hover:border-button-hollow'" 
                  x-effect="$el.removeAttribute('onclick')"
                  x-on:click.prevent="tab = '{{this.title}}'"  
-                 class="border text-base font-heading py-px px-2 m-1.5" 
+                 class="border ds-button text-base font-heading py-px px-2 m-1.5" 
                  type="button" 
                  role="tab"
         >

package/tailwind.config.js

@@ -53,6 +53,7 @@ module.exports = {
                 'insetfromtop': 'inset 0px 8px 8px -4px rgba(0, 0, 0, 0.2)',
                 'stage': '0 .3125rem 1.0625rem rgba(0,0,0,0.3)',
                 'teaser-focus': '0 0 0 0.25rem',
+                'teaser-focus-big': '0 0 0 0.365rem',
             },
             dropShadow: {
                 md: '0 5px 3px rgb(0 0 0 / 0.07)',