hr-design-system-handlebars 1.1.3 → 1.1.5

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

@@ -91,7 +91,7 @@
     .grid-page {
         grid-template-columns:
             [full-start] minmax(0, 1fr)
-            [main-start] minmax(0, 63rem) [main-end]
+            [main-start] minmax(0, 63.75rem) [main-end]
             minmax(0, 1fr) [full-end];
     }
 
@@ -143,62 +143,75 @@
     }
 
     /*! *********************************************************/
-    /*! Prozentuale Breite bei Flexbox bei gleichzeitigem       */ 
+    /*! Prozentuale Breite bei Flexbox bei gleichzeitigem       */
     /*! nutzen von column-gap funktioniert nicht richtig.       */
     /*! Deshalb hier eine übergangslösung dafür.                */
     /*! Langfristig sollten die Teaser auf Grid umgebaut werden */
     /*! *********************************************************/
- 
+
     .basis-1\/3-gap-4 {
-        --gap: 1rem; 
-        width:calc((100% - (2 * var(--gap))) / 3 ); 
-        flex-basis:calc((100% - (2 * var(--gap))) / 3 )
+        --gap: 1rem;
+        width: calc((100% - (2 * var(--gap))) / 3);
+        flex-basis: calc((100% - (2 * var(--gap))) / 3);
     }
     .basis-2\/3-gap-4 {
-        --gap: 1rem; 
-        width:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap));
-        flex-basis:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap))
+        --gap: 1rem;
+        width: calc((((100% - (2 * var(--gap))) / 3) * 2) + var(--gap));
+        flex-basis: calc((((100% - (2 * var(--gap))) / 3) * 2) + var(--gap));
     }
     .basis-1\/2-gap-4 {
-        --gap: 1rem; 
-        width:calc((100% - var(--gap)) / 2 ) ;
-        flex-basis:calc((100% - var(--gap)) / 2 ) 
+        --gap: 1rem;
+        width: calc((100% - var(--gap)) / 2);
+        flex-basis: calc((100% - var(--gap)) / 2);
     }
     .basis-1\/4-gap-4 {
-        --gap: 1rem; 
-        width:calc((100% - (4 * var(--gap))) / 4 ) ;
-        flex-basis:calc((100% - (4 * var(--gap))) / 4 ) 
+        --gap: 1rem;
+        width: calc((100% - (4 * var(--gap))) / 4);
+        flex-basis: calc((100% - (4 * var(--gap))) / 4);
     }
 
     .basis-3\/4-gap-4 {
-        --gap: 1rem; 
-        width:calc((((100% - (4 * var(--gap))) / 4 ) * 3) + var(--gap));
-        flex-basis:calc((((100% - (4 * var(--gap))) / 4 ) * 3) + var(--gap))
+        --gap: 1rem;
+        width: calc((((100% - (4 * var(--gap))) / 4) * 3) + var(--gap));
+        flex-basis: calc((((100% - (4 * var(--gap))) / 4) * 3) + var(--gap));
     }
     .basis-1\/3-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((100% - (2 * var(--gap))) / 3 ) ;
-        flex-basis:calc((100% - (2 * var(--gap))) / 3 )
+        --gap: 1.5rem;
+        width: calc((100% - (2 * var(--gap))) / 3);
+        flex-basis: calc((100% - (2 * var(--gap))) / 3);
     }
     .basis-2\/3-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap));
-        flex-basis:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap))
+        --gap: 1.5rem;
+        width: calc((((100% - (2 * var(--gap))) / 3) * 2) + var(--gap));
+        flex-basis: calc((((100% - (2 * var(--gap))) / 3) * 2) + var(--gap));
     }
     .basis-1\/2-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((100% - var(--gap)) / 2 ); 
-        flex-basis:calc((100% - var(--gap)) / 2 ) 
+        --gap: 1.5rem;
+        width: calc((100% - var(--gap)) / 2);
+        flex-basis: calc((100% - var(--gap)) / 2);
     }
     .basis-1\/4-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((100% - (4 * var(--gap))) / 4 );
-        flex-basis:calc((100% - (4 * var(--gap))) / 4 ) 
+        --gap: 1.5rem;
+        width: calc((100% - (4 * var(--gap))) / 4);
+        flex-basis: calc((100% - (4 * var(--gap))) / 4);
     }
     .basis-3\/4-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((((100% - (4 * var(--gap))) / 4 ) * 3) + var(--gap));
-        flex-basis:calc((((100% - (4 * var(--gap))) / 4 ) * 3) + var(--gap))
+        --gap: 1.5rem;
+        width: calc((((100% - (4 * var(--gap))) / 4) * 3) + var(--gap));
+        flex-basis: calc((((100% - (4 * var(--gap))) / 4) * 3) + var(--gap));
     }
 
+    /*! ****************************/
+    /*! Event-Calendar             */
+    /*! ****************************/
+    .is-loading {
+        @apply relative;
+
+        @apply before:content-[''] before:absolute before:block before:inset-0 before:bg-white/70 before:z-10;
+        @apply after:absolute after:block after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:z-20;
+    }
+
+    .is-loading::after {
+        content: attr(data-prop-loading);
+    }
 }

package/src/stories/views/components/button/button_round_classes.hbs

@@ -2,44 +2,44 @@
     {{~#case 'standard'~}}
         {{~#if _isMobile1to1~}}
             {{~inline-switch
-                _teaserSize '["25","33"]' '[" my-2 mx-2"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2 md:my-5 md:mx-5 "]'
+                _teaserSize '["25","33"]' '[" my-2 mx-2"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2 md:my-4 md:mx-4 "]'
             ~}}
         {{~else~}}
             {{~inline-switch
-                _teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]'
+                _teaserSize '["25","33"]' '[" my-2 mx-2"," my-4 mx-4 md:my-3 md:mx-3"," my-4 mx-4"]'
             ~}}
         {{~/if~}}
     {{~/case~}}
     {{~#case 'alternative'~}}
         {{~#if _isMobile1to1~}}
             {{~inline-switch
-                _teaserSize '["hero","100","50"]' '[" my-2 mx-2 md:my-5 md:mx-5"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
+                _teaserSize '["hero","100","50"]' '[" my-2 mx-2 md:my-4 md:mx-4"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
             ~}}
         {{~else~}}
             {{~inline-switch
-                _teaserSize '["hero","100","50"]' '[" my-5 mx-5"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
+                _teaserSize '["hero","100","50"]' '[" my-4 mx-4"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
             ~}}
         {{~/if~}}
     {{~/case~}}
     {{~#case 'tabbox-standard'~}}
         {{~#if _isMobile1to1~}}
             {{~inline-switch
-                _teaserSize '["25","33"]' '[" my-2 mx-2"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2 md:my-5 md:mx-5 "]'
+                _teaserSize '["25","33"]' '[" my-2 mx-2"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2 md:my-4 md:mx-4 "]'
             ~}}
         {{~else~}}
             {{~inline-switch
-                _teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]'
+                _teaserSize '["25","33"]' '[" my-2 mx-2"," my-4 mx-4 md:my-3 md:mx-3"," my-4 mx-4"]'
             ~}}
         {{~/if~}}
     {{~/case~}}
     {{~#case 'tabbox-alternative'~}}
         {{~#if _isMobile1to1~}}
             {{~inline-switch
-                _teaserSize '["hero","100","50"]' '[" my-2 mx-2 md:my-5 md:mx-5"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
+                _teaserSize '["hero","100","50"]' '[" my-2 mx-2 md:my-4 md:mx-4"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
             ~}}
         {{~else~}}
             {{~inline-switch
-                _teaserSize '["hero","100","50"]' '[" my-5 mx-5"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
+                _teaserSize '["hero","100","50"]' '[" my-4 mx-4"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
             ~}}
         {{~/if~}}
     {{~/case~}}

package/src/stories/views/components/event/calendar/event_calendar_components.stories.mdx

@@ -14,7 +14,7 @@ import eventCalendarFooterData from './fixtures/event_calendar_footer.json'
     }}
     decorators={[
         (Story) => {
-            return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main"><div class="col-span-12">
+            return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main"><div class="col-span-12">
                 ${Story()} 
                 </div></div></div>`
         },

package/src/stories/views/components/event/calendar/event_calendar_event_teaser.hbs

@@ -1,4 +1,4 @@
-<article id="{{this.startDate.htmlDate}}" class="flex col-span-12 md:flex-row gap-y-3 gap-x-4 md:px-0 js-fr-target{{#unless @first}} border-t border-event-calendar-secondary{{/unless}}{{#unless _showTeaser}} hidden{{/unless}}" x-data="{ avStart: false }">
+<article id="{{this.startDate.htmlDate}}" class="col-span-12 md:flex-row gap-y-3 gap-x-4 md:px-0 js-fr-target{{#unless @first}} border-t border-event-calendar-secondary{{/unless}}{{#unless _showTeaser}} hidden{{/unless}}" x-data="{ avStart: false }">
     <div class="border-none h-full">
         <div class="relative">
             <div class="flex flex-col items-stretch sm:flex-row">
@@ -13,7 +13,7 @@
                     <div class="flex flex-col items-start basis-10/12 w-10/12">
                         <div class="absolute top-0 left-0 w-full sm:static">
                             <div class="ar-4-3 sm:ar-auto">
-                                <header class="absolute bottom-0 left-0 p-4 sm:pt-3 sm:pb-2 bg-white opacity-80 sm:static sm:bg-transparent">
+                                <header class="absolute bottom-0 left-0 p-4 w-full sm:pt-3 sm:pb-2 bg-white opacity-80 sm:static sm:bg-transparent">
                                     {{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }} 
                                         {{#> components/teaser/components/teaser_header}}
                                             {{#with this.label}}

package/src/stories/views/components/event/filtererDs.feature.js

@@ -6,19 +6,23 @@ require('zepto-modules/callbacks')
 require('zepto-modules/deferred')
 
 const Filterer = (context) => {
-    const { options } = context
-    const { element: rootElement } = context
-    const contentTargetClass = '.js-fr-content'
-    const errorTargetClass = 'js-fr-error-target'
-    const errorClass = 'js-fr-error'
-    const reloadTriggerClass = 'js-fr-reload-trigger'
-    const targetClass = 'js-fr-target'
-    const triggerClass = 'js-fr-trigger'
-    const triggerDomNodes = hr$(`.${triggerClass}`, rootElement)
+    const { options } = context,
+        { element: rootElement } = context,
+        pushToBrowserHistory = options.pushToBrowserHistory || false,
+        loadingCssTrigger = options.loadingCssTrigger || 'is-loading',
+        hiddenElementCssTrigger = options.hiddenElementCssTrigger || 'hidden',
+        navItemSelectedCssTrigger = options.navItemSelectedCssTrigger || 'selected',
+        contentTargetClass = '.js-fr-content',
+        errorTargetClass = 'js-fr-error-target',
+        errorClass = 'js-fr-error',
+        reloadTriggerClass = 'js-fr-reload-trigger',
+        targetClass = 'js-fr-target',
+        triggerClass = 'js-fr-trigger',
+        triggerDomNodes = hr$(`.${triggerClass}`, rootElement),
+        errorTargetDomNodes = hr$(`.${errorTargetClass}`, rootElement),
+        errorDomNodes = hr$(`.${errorClass}`),
+        contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
     let targetDomNodes = hr$(`.${targetClass}`, rootElement)
-    const errorTargetDomNodes = hr$(`.${errorTargetClass}`, rootElement)
-    const errorDomNodes = hr$(`.${errorClass}`)
-    const contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
 
     const init = function () {
         for (let i = 0; i < triggerDomNodes.length; i++) {
@@ -40,13 +44,13 @@ const Filterer = (context) => {
             }
         }
 
-        if (
-            !rootElement.classList.contains('-excerpt') &&
-            !!(window.history && window.history.pushState)
-        ) {
+        if (pushToBrowserHistory && !!(window.history && window.history.pushState)) {
             listen('popstate', handlePopstate, window)
             //initial state ersetzen so dass es ein rückkehrpunkt gibt
-            const selectedTrigger = hr$('.' + triggerClass + '.-selected', rootElement)
+            const selectedTrigger = hr$(
+                `.${triggerClass}.${navItemSelectedCssTrigger}`,
+                rootElement
+            )
             history.replaceState(
                 {
                     sel: triggerClass,
@@ -66,7 +70,7 @@ const Filterer = (context) => {
         clearSelected()
 
         if (!forceReset) {
-            e.currentTarget.classList.add('-selected')
+            e.currentTarget.classList.add(navItemSelectedCssTrigger)
         }
 
         //hacky weil e beim start auch kein Event sein kann
@@ -76,10 +80,10 @@ const Filterer = (context) => {
     }
 
     const clearSelected = function () {
-        let triggerDomNodes = hr$(`.${triggerClass}.-selected`, rootElement)
+        let triggerDomNodes = hr$(`.${triggerClass}.${navItemSelectedCssTrigger}`, rootElement)
 
         triggerDomNodes.forEach(function (triggerDomNode) {
-            triggerDomNode.classList.remove('-selected')
+            triggerDomNode.classList.remove(navItemSelectedCssTrigger)
         })
     }
 
@@ -108,10 +112,10 @@ const Filterer = (context) => {
                     loadContent(currentTarget)
                 } else {
                     stratHideOthersById(targetDomNodes, data.crit, reset)
-                    if (push && !rootElement.classList.contains('-excerpt')) {
+                    if (push && pushToBrowserHistory) {
                         history.pushState(
                             {
-                                sel: '.' + currentTarget + '.-selected',
+                                sel: `.${currentTarget}.${navItemSelectedCssTrigger}`,
                                 crit: data.crit,
                             },
                             null,
@@ -127,10 +131,10 @@ const Filterer = (context) => {
                     loadContent(currentTarget)
                 } else {
                     stratHideOthersStartsWithId(targetDomNodes, data.crit, reset)
-                    if (push && !rootElement.classList.contains('-excerpt')) {
+                    if (push && pushToBrowserHistory) {
                         history.pushState(
                             {
-                                sel: '.' + currentTarget + '.-selected',
+                                sel: `.${currentTarget}.${navItemSelectedCssTrigger}`,
                                 crit: data.crit,
                             },
                             null,
@@ -146,7 +150,7 @@ const Filterer = (context) => {
             }
         }
 
-       /* if (countXTClick) {
+        /* if (countXTClick) {
             pi(
                 xtpage +
                     '&pchap=' +
@@ -163,11 +167,11 @@ const Filterer = (context) => {
     }
     const removeErrors = function () {
         if (errorTargetDomNodes.length > 0) {
-            errorTargetDomNodes[0].classList.add('hidden')
+            errorTargetDomNodes[0].classList.add(hiddenElementCssTrigger)
         }
 
         if (errorDomNodes.length > 0) {
-            errorDomNodes[0].classList.add('hidden')
+            errorDomNodes[0].classList.add(hiddenElementCssTrigger)
         }
     }
     const loadContent = function (currentTarget) {
@@ -184,7 +188,7 @@ const Filterer = (context) => {
             cache: true,
             beforeSend: function () {
                 console.log('before load')
-                $(contentTargetClass, rootElement).addClass('-isLoading')
+                $(contentTargetClass, rootElement).addClass(loadingCssTrigger)
             },
         })
             .done(function (data, status, xhr) {
@@ -198,7 +202,7 @@ const Filterer = (context) => {
                         $(contentTargetClass, rootElement).append(data)
 
                         targetDomNodes = hr$('.' + targetClass, rootElement)
-                        $(contentTargetClass, rootElement).removeClass('-isLoading')
+                        $(contentTargetClass, rootElement).removeClass(loadingCssTrigger)
                         $(currentTarget, rootElement)
                             .closest('.' + reloadTriggerClass)
                             .removeClass(reloadTriggerClass)
@@ -210,7 +214,7 @@ const Filterer = (context) => {
             })
             .fail(function (data, status, xhr) {
                 console.log('load error')
-                $(contentTargetClass, rootElement).addClass('-isLoading')
+                $(contentTargetClass, rootElement).addClass(loadingCssTrigger)
             })
     }
     const createInlineUrl = function (element) {
@@ -229,7 +233,7 @@ const Filterer = (context) => {
             )[0]
             doFilter(target, false, false)
             clearSelected()
-            target.classList.add('-selected')
+            target.classList.add(navItemSelectedCssTrigger)
         }
     }
     const initial = function () {
@@ -242,16 +246,16 @@ const Filterer = (context) => {
 
         if (reset) {
             for (i = 0; i < targetDomNodes.length; i++) {
-                targetDomNodes[i].classList.remove('hidden')
+                targetDomNodes[i].classList.remove(hiddenElementCssTrigger)
             }
             return
         }
 
         for (i = 0; i < targetDomNodes.length; i++) {
             if (targetDomNodes[i].getAttribute('id') !== crit) {
-                targetDomNodes[i].classList.add('hidden')
+                targetDomNodes[i].classList.add(hiddenElementCssTrigger)
             } else {
-                targetDomNodes[i].classList.remove('hidden')
+                targetDomNodes[i].classList.remove(hiddenElementCssTrigger)
 
                 found = true
             }
@@ -267,16 +271,16 @@ const Filterer = (context) => {
 
         if (reset) {
             for (i = 0; i < targetDomNodes.length; i++) {
-                targetDomNodes[i].classList.remove('hidden')
+                targetDomNodes[i].classList.remove(hiddenElementCssTrigger)
             }
             return
         }
 
         for (i = 0; i < targetDomNodes.length; i++) {
             if (targetDomNodes[i].getAttribute('id').indexOf(crit) !== 0) {
-                targetDomNodes[i].classList.add('hidden')
+                targetDomNodes[i].classList.add(hiddenElementCssTrigger)
             } else {
-                targetDomNodes[i].classList.remove('hidden')
+                targetDomNodes[i].classList.remove(hiddenElementCssTrigger)
 
                 found = true
             }
@@ -289,7 +293,7 @@ const Filterer = (context) => {
     const displayErrorTarget = function () {
         if (targetDomNodes.length >= 1) {
             if (errorTargetDomNodes.length > 0) {
-                errorTargetDomNodes[0].classList.remove('hidden')
+                errorTargetDomNodes[0].classList.remove(hiddenElementCssTrigger)
             }
         }
     }

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

@@ -1,5 +1,5 @@
 <span
-    class='w-3/5 max-w-min truncate z-10 pointer-events-none absolute bottom-0 left-0{{#if _isMobile1to1}} hidden md:inline-block {{else}} inline-block{{/if}}{{~inline-switch _teaserSize '["33"]' '[" mx-5 my-5 md:mx-4 md:my-4"," mx-5 my-5"]'}} rounded px-1.5 pt-px tracking-wide text-black text-base leading-5.5 font-heading bg-geoTag'
+    class='w-3/5 max-w-min truncate z-10 pointer-events-none absolute bottom-0 left-0{{#if _isMobile1to1}} hidden md:inline-block{{else}} inline-block{{/if}} mx-4 my-4 rounded px-1.5 pt-px tracking-wide text-black text-base leading-5.5 font-heading bg-geoTag'
     aria-hidden="true"
 >
     {{~_text~}}

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

@@ -1,6 +1,6 @@
 </div>
 <div class="grid col-full grid-page mt-6{{inline-switch _backgroundColor '["1","2"]' '[" bg-grey-concrete"," bg-orange-bridesmaid"]'}}">
-    <section class="grid grid-cols-12 py-6 sm:px-8 col-full sm:col-main gap-x-6 gap-y-9">
+    <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 }}
         </div>

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

@@ -1,5 +1,5 @@
 </div>
-<section class="grid grid-cols-12 px-8 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-hr rounded-br-hr col-full sm:col-main gap-x-6 gap-y-6">
+<section class="grid grid-cols-12 px-9.5 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-hr rounded-br-hr col-full sm:col-main gap-x-6 gap-y-6">
     {{> @partial-block }}
 </section>
 <div class="{{> components/grid/grid_group_wrapper_classes }}">

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

@@ -1 +1 @@
-grid grid-cols-12 bg-white pt-6 sm:px-8 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14
+grid grid-cols-12 bg-white pt-6 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14

package/src/stories/views/components/teaser/cluster/teaser_cluster.stories.mdx

@@ -19,21 +19,20 @@ import clusterTeaserImage33 from '../fixtures/cluster_teaser_33_image.json'
 import PodcastChannelClusterTeaser from '../fixtures/cluster_teaser_Podcast_Channel.json'
 import clusterTeaserOrdered33LongTitle from '../fixtures/cluster_teaser_33_long_title.json'
 
-<Meta   title="Komponenten/Teaser/Cluster"
-        parameters={{
-            layout: '',
-        }}
-        argTypes={{
-        }}
-            decorators={[
+<Meta
+    title="Komponenten/Teaser/Cluster"
+    parameters={{
+        layout: '',
+    }}
+    argTypes={{}}
+    decorators={[
         (Story) => {
-            return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">  
+            return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
                 ${Story()} 
                 </div></div>`
         },
     ]}
-        
-        />
+/>
 
 export const Template = (args, { globals: { customConditionalToolbar } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
@@ -43,7 +42,6 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     return cluster({ brand, ...args })
 }
 
-
 <Preview withToolbar>
     <Story name="Kurzmeldungen 100" args={clusterTeaser100}>
         {Template.bind({})}
@@ -96,4 +94,4 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     <Story name="Meistgeklickt-Box mit langem Titel" args={clusterTeaserOrdered33LongTitle}>
         {Template.bind({})}
     </Story>
-</Preview>
+</Preview>

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

@@ -42,7 +42,7 @@ import contentNavDropdown_subgroups from '../fixtures/teaser_content_nav_dropdow
                 expanded: false,
                 disable: false,
             },
-        },        
+        },
         teaserSize: {
             control: {
                 type: 'select',
@@ -58,7 +58,7 @@ import contentNavDropdown_subgroups from '../fixtures/teaser_content_nav_dropdow
     }}
     decorators={[
         (Story) => {
-            return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">  
+            return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
                 ${Story()} 
                 </div></div>`
         },
@@ -77,8 +77,7 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
 
 ## Beschreibung
 
-
-<Preview withToolbar>    
+<Preview withToolbar>
     <b>Liste</b>
     <Story name="Liste" args={contentNavList}>
         {Template.bind({})}
@@ -115,4 +114,4 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     <Story name="Dropdown mit Subgruppen" args={contentNavDropdown_subgroups}>
         {Template.bind({})}
     </Story>
-</Preview>
+</Preview>