@porsche-design-system/components-react 3.19.0 → 3.20.0-rc.1

package/ssr/esm/components/dist/styles/esm/styles-entry.mjs

@@ -4706,14 +4706,30 @@ const getComponentCss$14 = (icon, iconSource, variant, hideLabel, disabled, load
     }));
 };
 
+// public css classes
+const cssClassGrid = '-p-canvas-grid';
+// public css variables
 const cssVarSidebarStartWidth = '--p-canvas-sidebar-start-width';
 const cssVarSidebarEndWidth = '--p-canvas-sidebar-end-width';
-const gridProductiveGap = gridGap.replace('36px', '24px');
-const mediaQueryDesktopView = getMediaQueryMin('m');
-const sidebarWidth = '320px';
-const headerHeight = 'calc(1.5rem + 28px)';
+// default values for public css variables
+const sidebarStartWidth = `var(${cssVarSidebarStartWidth},320px)`;
+const sidebarEndWidth = `var(${cssVarSidebarEndWidth},320px)`;
+// private css variables
+const cssVarColorPrimary = '--_a';
+const cssVarColorBackgroundBase = '--_b';
+const cssVarColorBackgroundSurface = '--_c';
+const cssVarColorContrastLow = '--_d';
+const cssVarColorFooterGradient = '--_e';
+const cssVarTemplateSidebarStartWidth = '--_f';
+const cssVarTemplateSidebarEndWidth = '--_g';
+// media queries
+const mediaQueryS$1 = getMediaQueryMin('s');
+const mediaQueryM = getMediaQueryMin('m');
+// others
+const spacingBase = gridGap.replace('36px', '24px');
 const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
-    const { primaryColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
+    const { primaryColor, backgroundColor, backgroundSurfaceColor, contrastLowColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': {
@@ -4724,180 +4740,305 @@ const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
-            '::slotted': {
-                '&([slot*="header"])': {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: spacingStaticSmall,
-                },
-                '&([slot*="sidebar"])': {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: spacingStaticSmall,
-                },
-                // pre-defined utility classes
-                '&(.p-module)': {
-                    gridColumn: '1/-1',
-                },
-                '&(.p-module--subgrid)': {
-                    display: 'grid',
-                    gridTemplateColumns: 'subgrid',
-                    rowGap: gridProductiveGap,
-                },
-                '&(.p-module--more-space-above-small)': {
-                    marginTop: spacingStaticSmall,
-                },
-                '&(.p-module--more-space-above-medium)': {
-                    marginTop: spacingStaticMedium,
-                },
-                '&(.p-module--more-space-above-large)': {
-                    marginTop: spacingStaticLarge,
-                },
-                '&(.p-module--less-space-above-small)': {
-                    marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticSmall}))`,
-                },
-                '&(.p-module--less-space-above-medium)': {
-                    marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticMedium}))`,
-                },
-                '&(.p-module--less-space-above-large)': {
-                    marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticLarge}))`,
-                },
-                '&(.p-flex)': {
-                    display: 'flex',
-                },
-                '&(.p-align-items--center)': {
-                    alignItems: 'center',
-                },
-                '&(.p-gap--small)': {
-                    gap: spacingStaticSmall,
+            slot: {
+                '&:not([name]),&[name="footer"]': {
+                    [`&::slotted(.${cssClassGrid})`]: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(12,minmax(0,1fr))',
+                        columnGap: spacingBase,
+                        marginInline: 'auto',
+                        containerType: 'inline-size',
+                    },
                 },
-                '&(.p-gap--medium)': {
-                    gap: spacingStaticMedium,
+                '&[name="title"]::slotted': {
+                    '&(a)': {
+                        textDecoration: 'none',
+                        color: 'inherit',
+                        borderRadius: borderRadiusSmall,
+                    },
+                    ...getFocusJssStyle(theme, { slotted: 'a' }),
                 },
-                '&(.p-gap--large)': {
-                    gap: spacingStaticLarge,
+                '&[name="background"]': {
+                    zIndex: 3,
+                    display: 'block',
+                    gridArea: '1/1/-1/-1',
+                    position: 'sticky',
+                    top: 0,
+                    height: '100dvh',
+                    pointerEvents: 'none',
+                    overflow: 'hidden',
+                    transform: 'translate3d(0,0,0)', // needed for Safari to force GPU acceleration
+                    [mediaQueryS$1]: {
+                        gridColumn: '2/3',
+                    },
+                    '&::slotted(video),&::slotted(img)': {
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                        transition: getTransition('opacity', 'veryLong'),
+                        pointerEvents: 'none',
+                    },
                 },
             },
-            'slot[name="title"]::slotted(a)': {
-                textDecoration: 'none',
-                color: 'inherit',
-            },
             h2: {
-                ...textSmallStyle,
-                color: primaryColor,
+                font: textXSmallStyle.font,
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                margin: 0,
+                padding: '4px', // preserve enough spacing for focus state
                 textTransform: 'uppercase',
                 letterSpacing: '2px',
             },
-            'header, main, footer, aside': {
-                padding: gridProductiveGap,
-                boxSizing: 'border-box',
-                zIndex: 0,
+        },
+        root: {
+            [cssVarColorPrimary]: primaryColor,
+            [cssVarColorBackgroundBase]: backgroundColor,
+            [cssVarColorBackgroundSurface]: backgroundSurfaceColor,
+            [cssVarColorContrastLow]: contrastLowColor,
+            [cssVarColorFooterGradient]: `0,0%,${isThemeDark(theme) ? '0%' : '100%'}`,
+            [cssVarTemplateSidebarStartWidth]: isSidebarStartOpen ? sidebarStartWidth : '0px',
+            [cssVarTemplateSidebarEndWidth]: isSidebarEndOpen ? sidebarEndWidth : '0px',
+            display: 'grid',
+            gridTemplateRows: 'auto minmax(0,1fr) auto',
+            gridTemplateAreas: '"header" "main" "footer"',
+            minWidth: '320px',
+            minHeight: '100dvh',
+            font: textSmallStyle.font,
+            color: `var(${cssVarColorPrimary})`,
+            background: `var(${cssVarColorBackgroundBase})`,
+            transition: getTransition('grid-template-columns'),
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                [cssVarColorPrimary]: primaryColorDark,
+                [cssVarColorBackgroundBase]: backgroundColorDark,
+                [cssVarColorBackgroundSurface]: backgroundSurfaceColorDark,
+                [cssVarColorContrastLow]: contrastLowColorDark,
+                [cssVarColorFooterGradient]: '0,0%,0%',
+            }),
+            [mediaQueryS$1]: {
+                gridTemplateColumns: `var(${cssVarTemplateSidebarStartWidth}) minmax(0,1fr)`,
+                gridTemplateAreas: '"sidebar-start header" "sidebar-start main" "sidebar-start footer"',
             },
-            header: {
-                gridArea: 'header',
-                position: 'sticky',
-                top: 0,
-                zIndex: 9999999,
-                height: headerHeight,
-                display: 'grid',
-                gridTemplateColumns: 'minmax(0, 1fr) auto minmax(0, 1fr)',
-                gap: gridProductiveGap,
-                backgroundColor: backgroundSurfaceColor,
-                alignItems: 'center',
-                paddingBlock: 0,
-                '&::before, &::after': {
+            [mediaQueryM]: {
+                gridTemplateColumns: `var(${cssVarTemplateSidebarStartWidth}) minmax(0,1fr) var(${cssVarTemplateSidebarEndWidth})`,
+                gridTemplateAreas: '"sidebar-start header sidebar-end" "sidebar-start main sidebar-end" "sidebar-start footer sidebar-end"',
+            },
+            '&::after': {
+                [mediaQueryM]: {
                     content: '""',
-                    position: 'absolute',
-                    backgroundColor: 'transparent',
-                    bottom: `calc(${borderRadiusLarge} * -2)`,
-                    height: `calc(${borderRadiusLarge} * 2)`,
-                    width: borderRadiusLarge,
-                    boxShadow: `0 -${borderRadiusLarge} 0 0 ${backgroundSurfaceColor}`,
+                    zIndex: 2,
+                    gridArea: '1/2/-1/3',
+                    boxShadow: `1px 0 0 0 var(${cssVarColorContrastLow})`,
+                    background: `var(${cssVarColorBackgroundBase})`,
                     pointerEvents: 'none',
                 },
-                '&::before': {
-                    left: 0,
-                    borderTopLeftRadius: borderRadiusLarge,
+            },
+        },
+        header: {
+            zIndex: 6,
+            gridArea: 'header',
+            containerType: 'inline-size',
+            position: 'sticky',
+            top: 0,
+            minHeight: '56px',
+            boxSizing: 'border-box',
+            display: 'grid',
+            gridTemplateColumns: 'minmax(0,1fr) auto minmax(0,1fr)',
+            gap: spacingBase,
+            alignItems: 'center',
+            paddingBlock: spacingStaticSmall,
+            paddingInline: spacingBase,
+            '&__area': {
+                display: 'flex',
+                gap: spacingStaticSmall,
+                alignItems: 'center',
+                '&--start': {
+                    justifyContent: 'flex-start',
                 },
-                '&::after': {
-                    right: 0,
-                    borderTopRightRadius: borderRadiusLarge,
+                '&--end': {
+                    justifyContent: 'flex-end',
                 },
             },
-            main: {
-                gridArea: 'main',
-                '--p-canvas-grid-span-full': 'span 6',
-                '--p-canvas-grid-span-one-half': 'span 3',
-                '--p-canvas-grid-span-one-third': 'span 2',
-                '--p-canvas-grid-span-two-thirds': 'span 4',
-                display: 'grid',
-                gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
-                gap: gridProductiveGap,
-                alignContent: 'flex-start',
-                backgroundColor,
-                [mediaQueryDesktopView]: {
-                    '--p-canvas-grid-span-full': 'span 12',
-                    '--p-canvas-grid-span-one-half': 'span 6',
-                    '--p-canvas-grid-span-one-third': 'span 4',
-                    '--p-canvas-grid-span-two-thirds': 'span 8',
-                    gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
+            '&__crest': {
+                [`@container(min-width:${breakpointS}px)`]: {
+                    display: 'none',
                 },
             },
-            footer: {
-                gridArea: 'footer',
-                backgroundColor,
-            },
-            aside: {
-                transition: getTransition('margin'),
-                position: 'sticky',
-                top: headerHeight,
-                height: `calc(100dvh - ${headerHeight})`,
-                overflow: 'hidden auto',
+            '&__wordmark': {
+                height: '10px',
+                [`@container(max-width:${breakpointS - 1}px)`]: {
+                    display: 'none',
+                },
             },
         },
-        'sidebar-start': {
-            borderInlineEnd: `1px solid ${backgroundSurfaceColor}`,
-            backgroundColor,
-            gridArea: 'sidebar-start',
-            width: `var(${cssVarSidebarStartWidth}, ${sidebarWidth})`,
-            marginInlineStart: isSidebarStartOpen ? 0 : `calc(var(${cssVarSidebarStartWidth}, ${sidebarWidth}) * -1)`,
-        },
-        'sidebar-end': {
-            borderInlineStart: `1px solid ${backgroundSurfaceColor}`,
-            backgroundColor,
-            gridArea: 'sidebar-end',
-            width: `var(${cssVarSidebarEndWidth}, ${sidebarWidth})`,
-            marginInlineEnd: isSidebarEndOpen ? 0 : `calc(var(${cssVarSidebarEndWidth}, ${sidebarWidth}) * -1)`,
-        },
-        canvas: {
-            display: 'grid',
-            gridTemplateRows: 'auto minmax(0, 1fr) auto',
-            gridTemplateAreas: '"header" "main" "footer"',
-            minWidth: '320px',
-            minHeight: '100dvh',
-            [mediaQueryDesktopView]: {
-                gridTemplate: 'auto minmax(0, 1fr) auto / auto minmax(0, 1fr) auto',
-                gridTemplateAreas: '"header header header" "sidebar-start main sidebar-end" "sidebar-start footer sidebar-end"',
+        blur: {
+            zIndex: -1,
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: 'none',
+            '& > div': {
+                position: 'absolute',
+                inset: 0,
             },
-        },
-        crest: {
-            [getMediaQueryMin('s')]: {
-                display: 'none',
+            '& > div:nth-of-type(1)': {
+                zIndex: 1,
+                WebkitBackdropFilter: 'blur(64px)',
+                backdropFilter: 'blur(64px)',
+                WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,100%) 0%,rgba(0,0,0,1) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 37.5%)',
+                maskImage: 'linear-gradient(to bottom,rgba(0,0,0,100%) 0%,rgba(0,0,0,1) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 37.5%)',
+            },
+            '& > div:nth-of-type(2)': {
+                zIndex: 2,
+                WebkitBackdropFilter: 'blur(32px)',
+                backdropFilter: 'blur(32px)',
+                WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,0) 50%)',
+                maskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,0) 50%)',
+            },
+            '& > div:nth-of-type(3)': {
+                zIndex: 3,
+                WebkitBackdropFilter: 'blur(16px)',
+                backdropFilter: 'blur(16px)',
+                WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 62.5%)',
+                maskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 62.5%)',
             },
+            '& > div:nth-of-type(4)': {
+                zIndex: 4,
+                WebkitBackdropFilter: 'blur(8px)',
+                backdropFilter: 'blur(8px)',
+                WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,0) 75%)',
+                maskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,0) 75%)',
+            },
+            '& > div:nth-of-type(5)': {
+                zIndex: 5,
+                WebkitBackdropFilter: 'blur(4px)',
+                backdropFilter: 'blur(4px)',
+                WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 87.5%)',
+                maskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 87.5%)',
+            },
+            '& > div:nth-of-type(6)': {
+                zIndex: 6,
+                WebkitBackdropFilter: 'blur(2px)',
+                backdropFilter: 'blur(2px)',
+                WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,0) 100%)',
+                maskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,0) 100%)',
+            },
+            '& > div:nth-of-type(7)': {
+                zIndex: 7,
+                WebkitBackdropFilter: 'blur(1px)',
+                backdropFilter: 'blur(1px)',
+                WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,1) 100%)',
+                maskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,1) 100%)',
+            },
+            '& > div:nth-of-type(8)': {
+                zIndex: 8,
+                WebkitBackdropFilter: 'blur(.5px)',
+                backdropFilter: 'blur(.5px)',
+                WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 87.5%,rgba(0,0,0,1) 100%)',
+                maskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 87.5%,rgba(0,0,0,1) 100%)',
+            },
+        },
+        main: {
+            zIndex: 4,
+            gridArea: 'main',
+            padding: spacingBase,
         },
-        wordmark: {
-            height: '10px',
-            [getMediaQueryMax('s')]: {
-                display: 'none',
+        footer: {
+            zIndex: 5,
+            gridArea: 'footer',
+            padding: `${spacingBase} ${spacingBase} ${spacingFluidSmall}`,
+            position: 'sticky',
+            bottom: 0,
+            '&::before': {
+                content: '""',
+                zIndex: -1,
+                position: 'absolute',
+                inset: '-140px 0 0',
+                pointerEvents: 'none',
+                background: `linear-gradient(to bottom,hsla(var(${cssVarColorFooterGradient}),0) 0%,hsla(var(${cssVarColorFooterGradient}),0.013) 8.1%,hsla(var(${cssVarColorFooterGradient}),0.049) 15.5%,hsla(var(${cssVarColorFooterGradient}),0.104) 22.5%,hsla(var(${cssVarColorFooterGradient}),0.175) 29%,hsla(var(${cssVarColorFooterGradient}),0.259) 35.3%,hsla(var(${cssVarColorFooterGradient}),0.352) 41.2%,hsla(var(${cssVarColorFooterGradient}),0.45) 47.1%,hsla(var(${cssVarColorFooterGradient}),0.55) 52.9%,hsla(var(${cssVarColorFooterGradient}),0.648) 58.8%,hsla(var(${cssVarColorFooterGradient}),0.741) 64.7%,hsla(var(${cssVarColorFooterGradient}),0.825) 71%,hsla(var(${cssVarColorFooterGradient}),0.896) 77.5%,hsla(var(${cssVarColorFooterGradient}),0.951) 84.5%,hsla(var(${cssVarColorFooterGradient}),0.987) 91.9%,hsl(var(${cssVarColorFooterGradient})) 100%)`,
             },
         },
-        header: {
-            display: 'flex',
-            gap: spacingStaticSmall,
-            alignItems: 'center',
-            '&:last-of-type': {
-                justifyContent: 'end',
+        sidebar: {
+            position: 'sticky',
+            top: 0,
+            height: '100dvh',
+            '&--start': {
+                zIndex: 7,
+                gridArea: 'sidebar-start',
+                justifySelf: 'flex-end',
+                width: sidebarStartWidth,
+                backgroundColor: `var(${cssVarColorBackgroundSurface})`,
+                '&::before': {
+                    content: '""',
+                    zIndex: -1,
+                    position: 'absolute',
+                    backgroundColor: 'transparent',
+                    right: '-16px',
+                    height: '32px',
+                    width: '16px',
+                    pointerEvents: 'none',
+                    top: 0,
+                    borderTopLeftRadius: '16px',
+                    boxShadow: `0 -16px 0 0 var(${cssVarColorBackgroundSurface})`,
+                },
+            },
+            '&--end': {
+                zIndex: 1,
+                gridArea: 'sidebar-end',
+                justifySelf: 'flex-end',
+                width: sidebarEndWidth,
+                backgroundColor: `var(${cssVarColorBackgroundBase})`,
             },
+            '&__scroller': {
+                position: 'absolute',
+                inset: 0,
+                overflow: 'hidden auto',
+                overscrollBehaviorY: 'contain',
+                background: 'inherit', // ensures correct scrollbar coloring in light / dark mode
+            },
+            '&__header': {
+                zIndex: 1,
+                display: 'flex',
+                gap: spacingStaticSmall,
+                alignItems: 'center',
+                position: 'sticky',
+                top: 0,
+                padding: `${spacingStaticSmall} ${spacingBase}`,
+                minHeight: '56px',
+                boxSizing: 'border-box',
+                '&--start': {
+                    justifyContent: 'flex-start',
+                    '&::before': {
+                        background: `linear-gradient(180deg,var(${cssVarColorBackgroundSurface}) 0%,var(${cssVarColorBackgroundSurface}) 65%,transparent 100%)`,
+                    },
+                },
+                '&--end': {
+                    justifyContent: 'flex-end',
+                    '&::before': {
+                        background: `linear-gradient(180deg,var(${cssVarColorBackgroundBase}) 0%,var(${cssVarColorBackgroundBase}) 65%,transparent 100%)`,
+                    },
+                },
+                '&::before': {
+                    content: '""',
+                    zIndex: -1,
+                    position: 'absolute',
+                    inset: '0 0 -8px',
+                    pointerEvents: 'none',
+                },
+            },
+            '&__content': {
+                position: 'relative', // needed for z-index to work
+                zIndex: 0, // ensures slotted dom nodes can't be on top of sidebar header
+                display: 'block',
+                padding: spacingBase,
+            },
+        },
+        'flyout-start': {
+            '--p-flyout-width': '100dvw',
+            '--p-flyout-max-width': sidebarStartWidth,
+        },
+        'flyout-end': {
+            '--p-flyout-width': '100dvw',
+            '--p-flyout-max-width': sidebarEndWidth,
         },
     });
 };
@@ -6537,28 +6678,25 @@ const getDialogTransitionJssStyle = (isVisible, slideIn) => {
             ? {
                 opacity: 1,
                 transform: 'initial',
+                // we need to ensure that the elements inside, which get auto focused by `.showModal()`, to always be in the
+                // viewport (or off the view on the start-hand side) before the dialog transition starts otherwise the transition
+                // won't work in all cases, e.g. `dir="rtl"` and `<p-flyout position="end" />`. Because auto focus would force the
+                // focused elements to be rendered in the viewport immediately and ignore the transition.
+                ...(slideIn === '<' && {
+                    marginInlineEnd: 0,
+                }),
             }
             : {
                 opacity: 0,
+                ...(slideIn === '<' && {
+                    marginInlineEnd: '200vw',
+                }),
                 transform: slideIn === '^' ? 'translateY(25vh)' : `translateX(${slideIn === '>' ? '-' : ''}100%)`,
                 '&:dir(rtl)': {
                     transform: slideIn === '^' ? 'translateY(25vh)' : `translateX(${slideIn === '>' ? '' : '-'}100%)`,
                 },
             }),
-        transition: `${getTransition('opacity', duration, easing)}, ${getTransition('transform', duration, easing)}`,
-    };
-};
-const getDialogDismissButtonJssStyle = (isOpen, applyAutoFocusHack = false) => {
-    return {
-        ...dismissButtonJssStyle,
-        // we need to ensure that the dismiss button, which gets auto focused by `.showModal()`, to always be in the
-        // viewport (or off the view on the start-hand side) before the dialog transition starts otherwise the transition
-        // won't work in all cases, e.g. `dir="rtl"` and `<p-flyout position="end" />`. Because auto focus would force the
-        // dismiss button to be rendered in the viewport immediately and ignore the transition.
-        ...(applyAutoFocusHack && {
-            marginInlineEnd: isOpen ? 0 : '200vw',
-            transition: `margin-inline-end 0s linear var(${cssVariableTransitionDuration}, ${isOpen ? '1ms' : '0s'})`,
-        }),
+        transition: `${getTransition('opacity', duration, easing)}, ${getTransition('transform', duration, easing)}, margin-inline-end 0s linear var(${cssVariableTransitionDuration}, ${isVisible ? '1ms' : motionDurationMap[duration]})`,
     };
 };
 const getDialogStickyAreaJssStyle = (area, theme) => {
@@ -6642,6 +6780,10 @@ const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
             // compared to Modal, the transition is handled on the scroller to have correct stucked behaviour (visibility of drop shadow)
             // for sticky header area while transitioned
             ...getDialogTransitionJssStyle(isOpen, isPositionStart ? '>' : '<'),
+            // Though this might be an accessibility issue, we don't want an outline to be rendered until we have a proper design solution
+            '&:focus-visible': {
+                outline: 'none',
+            },
         },
         flyout: {
             ...dialogGridJssStyle,
@@ -6651,7 +6793,7 @@ const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
             maxWidth: `var(${cssVariableMaxWidth},1180px)`,
         },
         dismiss: {
-            ...getDialogDismissButtonJssStyle(isOpen, !isPositionStart),
+            ...dismissButtonJssStyle,
             gridArea: '1/3',
             zIndex: 4, // ensures dismiss button is above everything
             position: 'sticky',
@@ -7682,7 +7824,7 @@ const getComponentCss$E = (isOpen, backdrop, fullscreen, hasDismissButton, hasHe
         },
         ...(hasDismissButton && {
             dismiss: {
-                ...getDialogDismissButtonJssStyle(isOpen),
+                ...dismissButtonJssStyle,
                 gridArea: '1/3',
                 zIndex: 2, // ensures dismiss button is above sticky footer, header and content
                 position: 'sticky',

package/ssr/esm/components/dist/utils/esm/utils-entry.mjs

@@ -3423,7 +3423,7 @@ const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-des
 var CRESTS_MANIFEST = { "porscheCrest": { "1x": { "png": "porsche-crest.d76137c@1x.png", "webp": "porsche-crest.0d0cc89@1x.webp" }, "2x": { "png": "porsche-crest.8a292fb@2x.png", "webp": "porsche-crest.2245c45@2x.webp" }, "3x": { "png": "porsche-crest.18d6f02@3x.png", "webp": "porsche-crest.19b4292@3x.webp" } } };
 
 // index.ts
-var ICONS_MANIFEST = { "360": "360.0600731.svg", "accessibility": "accessibility.087d747.svg", "active-cabin-ventilation": "active-cabin-ventilation.b081399.svg", "add": "add.fac861a.svg", "adjust": "adjust.ca46bd4.svg", "arrow-double-down": "arrow-double-down.61ae4d7.svg", "arrow-double-left": "arrow-double-left.1b576eb.svg", "arrow-double-right": "arrow-double-right.dcfabff.svg", "arrow-double-up": "arrow-double-up.fb73db5.svg", "arrow-down": "arrow-down.49c6983.svg", "arrow-first": "arrow-first.beb7d9f.svg", "arrow-head-down": "arrow-head-down.1e3cbb8.svg", "arrow-head-left": "arrow-head-left.cf1395d.svg", "arrow-head-right": "arrow-head-right.304b330.svg", "arrow-head-up": "arrow-head-up.6d3fd23.svg", "arrow-last": "arrow-last.cc24903.svg", "arrow-left": "arrow-left.e03c25b.svg", "arrow-right": "arrow-right.872716b.svg", "arrow-up": "arrow-up.9d294d1.svg", "augmented-reality": "augmented-reality.8b6ce95.svg", "battery-empty": "battery-empty.38b4b15.svg", "battery-empty-co2": "battery-empty-co2.c4cabef.svg", "battery-empty-fuel": "battery-empty-fuel.e833e13.svg", "battery-full": "battery-full.03de75d.svg", "bell": "bell.1eab3a2.svg", "bookmark": "bookmark.9d6982f.svg", "bookmark-filled": "bookmark-filled.327ac78.svg", "broadcast": "broadcast.0ad5a15.svg", "calculator": "calculator.a323a2d.svg", "calendar": "calendar.70a6a12.svg", "camera": "camera.e5e95b9.svg", "car": "car.35229c9.svg", "car-battery": "car-battery.895510f.svg", "card": "card.f284448.svg", "charging-active": "charging-active.c3aa214.svg", "charging-state": "charging-state.f56d8df.svg", "charging-station": "charging-station.5ff1ed4.svg", "chart": "chart.c8c32d2.svg", "chat": "chat.7945544.svg", "check": "check.8ba06be.svg", "city": "city.5ae672c.svg", "climate": "climate.a9d5818.svg", "climate-control": "climate-control.ce31939.svg", "clock": "clock.c88a1ef.svg", "close": "close.eec3c5d.svg", "closed-caption": "closed-caption.ceaf6cb.svg", "co2-class": "co2-class.fc49211.svg", "co2-emission": "co2-emission.c42e7f8.svg", "compare": "compare.6578829.svg", "configurate": "configurate.5311c8d.svg", "copy": "copy.0fcd086.svg", "country-road": "country-road.d2bbc5a.svg", "cubic-capacity": "cubic-capacity.7b0b8c8.svg", "delete": "delete.5a8c8ca.svg", "disable": "disable.5918c32.svg", "document": "document.df36b6c.svg", "download": "download.c06f455.svg", "duration": "duration.94e5252.svg", "edit": "edit.330f321.svg", "email": "email.f2530de.svg", "error-filled": "error-filled.a4d06ed.svg", "exclamation": "exclamation.46cd17b.svg", "external": "external.fb677b9.svg", "filter": "filter.610f808.svg", "fingerprint": "fingerprint.6a85170.svg", "flash": "flash.88a2ada.svg", "fuel-station": "fuel-station.f7bdf51.svg", "garage": "garage.5014e8d.svg", "gift": "gift.7beb1eb.svg", "globe": "globe.56cc8fc.svg", "grid": "grid.06bc31a.svg", "heart": "heart.9a5962e.svg", "heart-filled": "heart-filled.dd7decf.svg", "highway": "highway.b7c0a70.svg", "home": "home.7b1d1da.svg", "horn": "horn.bf47b1a.svg", "image": "image.b2614f0.svg", "increase": "increase.700012f.svg", "information": "information.da41162.svg", "information-filled": "information-filled.8f08911.svg", "key": "key.ee5d89b.svg", "leaf": "leaf.92ca6a6.svg", "leather": "leather.1d2769a.svg", "light": "light.f0eb8e4.svg", "list": "list.411dd00.svg", "locate": "locate.6554f9e.svg", "lock": "lock.243281a.svg", "lock-open": "lock-open.95803d2.svg", "logo-apple-podcast": "logo-apple-podcast.09be038.svg", "logo-baidu": "logo-baidu.9e89c7d.svg", "logo-delicious": "logo-delicious.e83f574.svg", "logo-digg": "logo-digg.f096670.svg", "logo-facebook": "logo-facebook.74abe88.svg", "logo-foursquare": "logo-foursquare.d638fd8.svg", "logo-gmail": "logo-gmail.5f96ee2.svg", "logo-google": "logo-google.1dee423.svg", "logo-hatena": "logo-hatena.da509f0.svg", "logo-instagram": "logo-instagram.b916daa.svg", "logo-kaixin": "logo-kaixin.b1211a2.svg", "logo-kakaotalk": "logo-kakaotalk.38f5396.svg", "logo-linkedin": "logo-linkedin.b72559f.svg", "logo-naver": "logo-naver.75588fe.svg", "logo-pinterest": "logo-pinterest.e8f6963.svg", "logo-qq": "logo-qq.6d9b6d9.svg", "logo-qq-share": "logo-qq-share.ee864d9.svg", "logo-reddit": "logo-reddit.da13e44.svg", "logo-skyrock": "logo-skyrock.eb2f28d.svg", "logo-sohu": "logo-sohu.a30c66b.svg", "logo-spotify": "logo-spotify.2ec4b2d.svg", "logo-tecent": "logo-tecent.d119e85.svg", "logo-telegram": "logo-telegram.d151481.svg", "logo-tiktok": "logo-tiktok.2f3a465.svg", "logo-tumblr": "logo-tumblr.c689f44.svg", "logo-twitter": "logo-twitter.5f2490a.svg", "logo-viber": "logo-viber.198bd43.svg", "logo-vk": "logo-vk.37b94e0.svg", "logo-wechat": "logo-wechat.83b2b98.svg", "logo-weibo": "logo-weibo.c8dacee.svg", "logo-whatsapp": "logo-whatsapp.add9a6d.svg", "logo-x": "logo-x.5f2490a.svg", "logo-xing": "logo-xing.3a8df0f.svg", "logo-yahoo": "logo-yahoo.8cbd0ba.svg", "logo-youku": "logo-youku.fe988d0.svg", "logo-youtube": "logo-youtube.da3798f.svg", "logout": "logout.7ec7451.svg", "map": "map.c16f618.svg", "menu-dots-horizontal": "menu-dots-horizontal.788f7fa.svg", "menu-dots-vertical": "menu-dots-vertical.4970a65.svg", "menu-lines": "menu-lines.e332216.svg", "minus": "minus.f6d964c.svg", "mobile": "mobile.7f35446.svg", "moon": "moon.5b73246.svg", "oil-can": "oil-can.cb58fc7.svg", "parking-brake": "parking-brake.45704bd.svg", "parking-light": "parking-light.c49a231.svg", "pause": "pause.e41b935.svg", "phone": "phone.f4f774b.svg", "pin": "pin.3417cec.svg", "pin-filled": "pin-filled.7b8e9ba.svg", "play": "play.24226d4.svg", "plug": "plug.c159935.svg", "plus": "plus.319993e.svg", "preheating": "preheating.e2a796f.svg", "printer": "printer.f59b0ee.svg", "purchase": "purchase.9cd6d65.svg", "push-pin": "push-pin.89e4ead.svg", "push-pin-off": "push-pin-off.ba99213.svg", "qr": "qr.87a49a3.svg", "question": "question.3402a63.svg", "racing-flag": "racing-flag.b7ddcc8.svg", "refresh": "refresh.41fd868.svg", "replay": "replay.55a99f2.svg", "reset": "reset.e53d52f.svg", "roof-closed": "roof-closed.018d021.svg", "roof-open": "roof-open.51c8ee6.svg", "route": "route.f4fbbb4.svg", "rss": "rss.0e77baf.svg", "save": "save.6171ff5.svg", "screen": "screen.420be15.svg", "search": "search.3f0f1ce.svg", "send": "send.b32099c.svg", "share": "share.a0b30da.svg", "shopping-bag": "shopping-bag.3f91a9b.svg", "shopping-bag-filled": "shopping-bag-filled.abf6c98.svg", "shopping-cart": "shopping-cart.370e224.svg", "shopping-cart-filled": "shopping-cart-filled.e0c3a65.svg", "sidelights": "sidelights.65c9dd9.svg", "snowflake": "snowflake.83907b3.svg", "sort": "sort.92b50bd.svg", "stack": "stack.804af93.svg", "star": "star.4c5bb15.svg", "star-filled": "star-filled.84ef2f6.svg", "steering-wheel": "steering-wheel.4dea19e.svg", "stopwatch": "stopwatch.0e048a4.svg", "subtract": "subtract.57eed1d.svg", "success": "success.b16d4c1.svg", "success-filled": "success-filled.1832d98.svg", "sun": "sun.4301cbd.svg", "switch": "switch.66f74c4.svg", "tablet": "tablet.07341ac.svg", "tachometer": "tachometer.3a2fc3c.svg", "tire": "tire.e5c9372.svg", "truck": "truck.2c26c04.svg", "upload": "upload.d1f5a2a.svg", "user": "user.c18dabe.svg", "user-filled": "user-filled.2ea646d.svg", "user-group": "user-group.79cdf86.svg", "user-manual": "user-manual.470e243.svg", "video": "video.7590689.svg", "view": "view.5b4d7f6.svg", "view-off": "view-off.a4ede54.svg", "volume-off": "volume-off.bcd49e7.svg", "volume-up": "volume-up.2084f60.svg", "warning": "warning.59927e6.svg", "warning-filled": "warning-filled.1f6fe21.svg", "weight": "weight.b57a60d.svg", "wifi": "wifi.e2a8d9c.svg", "work": "work.9dd71a4.svg", "wrench": "wrench.09a2a67.svg", "wrenches": "wrenches.d2ed45d.svg", "zoom-in": "zoom-in.ff299b8.svg", "zoom-out": "zoom-out.ebb6246.svg" };
+var ICONS_MANIFEST = { "360": "360.0600731.svg", "accessibility": "accessibility.087d747.svg", "active-cabin-ventilation": "active-cabin-ventilation.b081399.svg", "add": "add.fac861a.svg", "adjust": "adjust.ca46bd4.svg", "arrow-double-down": "arrow-double-down.61ae4d7.svg", "arrow-double-left": "arrow-double-left.1b576eb.svg", "arrow-double-right": "arrow-double-right.dcfabff.svg", "arrow-double-up": "arrow-double-up.fb73db5.svg", "arrow-down": "arrow-down.49c6983.svg", "arrow-first": "arrow-first.beb7d9f.svg", "arrow-head-down": "arrow-head-down.1e3cbb8.svg", "arrow-head-left": "arrow-head-left.cf1395d.svg", "arrow-head-right": "arrow-head-right.304b330.svg", "arrow-head-up": "arrow-head-up.6d3fd23.svg", "arrow-last": "arrow-last.cc24903.svg", "arrow-left": "arrow-left.e03c25b.svg", "arrow-right": "arrow-right.872716b.svg", "arrow-up": "arrow-up.9d294d1.svg", "attachment": "attachment.8f3dd0a.svg", "augmented-reality": "augmented-reality.8b6ce95.svg", "battery-empty": "battery-empty.38b4b15.svg", "battery-empty-co2": "battery-empty-co2.c4cabef.svg", "battery-empty-fuel": "battery-empty-fuel.e833e13.svg", "battery-full": "battery-full.03de75d.svg", "bell": "bell.1eab3a2.svg", "bookmark": "bookmark.9d6982f.svg", "bookmark-filled": "bookmark-filled.327ac78.svg", "broadcast": "broadcast.0ad5a15.svg", "calculator": "calculator.a323a2d.svg", "calendar": "calendar.70a6a12.svg", "camera": "camera.e5e95b9.svg", "car": "car.35229c9.svg", "car-battery": "car-battery.895510f.svg", "card": "card.f284448.svg", "charging-active": "charging-active.c3aa214.svg", "charging-state": "charging-state.f56d8df.svg", "charging-station": "charging-station.5ff1ed4.svg", "chart": "chart.c8c32d2.svg", "chat": "chat.7945544.svg", "check": "check.8ba06be.svg", "city": "city.5ae672c.svg", "climate": "climate.a9d5818.svg", "climate-control": "climate-control.ce31939.svg", "clock": "clock.c88a1ef.svg", "close": "close.eec3c5d.svg", "closed-caption": "closed-caption.ceaf6cb.svg", "co2-class": "co2-class.fc49211.svg", "co2-emission": "co2-emission.c42e7f8.svg", "compare": "compare.6578829.svg", "configurate": "configurate.5311c8d.svg", "copy": "copy.0fcd086.svg", "country-road": "country-road.d2bbc5a.svg", "cubic-capacity": "cubic-capacity.7b0b8c8.svg", "delete": "delete.5a8c8ca.svg", "disable": "disable.5918c32.svg", "dislike": "dislike.51614b0.svg", "dislike-filled": "dislike-filled.e1a8c4d.svg", "document": "document.df36b6c.svg", "download": "download.c06f455.svg", "duration": "duration.94e5252.svg", "edit": "edit.330f321.svg", "email": "email.f2530de.svg", "error-filled": "error-filled.a4d06ed.svg", "exclamation": "exclamation.46cd17b.svg", "external": "external.fb677b9.svg", "filter": "filter.610f808.svg", "fingerprint": "fingerprint.6a85170.svg", "flash": "flash.88a2ada.svg", "fuel-station": "fuel-station.f7bdf51.svg", "garage": "garage.5014e8d.svg", "gift": "gift.7beb1eb.svg", "globe": "globe.56cc8fc.svg", "grid": "grid.06bc31a.svg", "heart": "heart.9a5962e.svg", "heart-filled": "heart-filled.dd7decf.svg", "highway": "highway.b7c0a70.svg", "home": "home.7b1d1da.svg", "horn": "horn.bf47b1a.svg", "image": "image.b2614f0.svg", "increase": "increase.700012f.svg", "information": "information.da41162.svg", "information-filled": "information-filled.8f08911.svg", "key": "key.ee5d89b.svg", "leaf": "leaf.92ca6a6.svg", "leather": "leather.1d2769a.svg", "light": "light.f0eb8e4.svg", "like": "like.a7468cd.svg", "like-filled": "like-filled.a0126c1.svg", "list": "list.411dd00.svg", "locate": "locate.6554f9e.svg", "lock": "lock.243281a.svg", "lock-open": "lock-open.95803d2.svg", "logo-apple-podcast": "logo-apple-podcast.09be038.svg", "logo-baidu": "logo-baidu.9e89c7d.svg", "logo-delicious": "logo-delicious.e83f574.svg", "logo-digg": "logo-digg.f096670.svg", "logo-facebook": "logo-facebook.74abe88.svg", "logo-foursquare": "logo-foursquare.d638fd8.svg", "logo-gmail": "logo-gmail.5f96ee2.svg", "logo-google": "logo-google.1dee423.svg", "logo-hatena": "logo-hatena.da509f0.svg", "logo-instagram": "logo-instagram.b916daa.svg", "logo-kaixin": "logo-kaixin.b1211a2.svg", "logo-kakaotalk": "logo-kakaotalk.38f5396.svg", "logo-linkedin": "logo-linkedin.b72559f.svg", "logo-naver": "logo-naver.75588fe.svg", "logo-pinterest": "logo-pinterest.e8f6963.svg", "logo-qq": "logo-qq.6d9b6d9.svg", "logo-qq-share": "logo-qq-share.ee864d9.svg", "logo-reddit": "logo-reddit.da13e44.svg", "logo-skyrock": "logo-skyrock.eb2f28d.svg", "logo-sohu": "logo-sohu.a30c66b.svg", "logo-spotify": "logo-spotify.2ec4b2d.svg", "logo-tecent": "logo-tecent.d119e85.svg", "logo-telegram": "logo-telegram.d151481.svg", "logo-tiktok": "logo-tiktok.2f3a465.svg", "logo-tumblr": "logo-tumblr.c689f44.svg", "logo-twitter": "logo-twitter.5f2490a.svg", "logo-viber": "logo-viber.198bd43.svg", "logo-vk": "logo-vk.37b94e0.svg", "logo-wechat": "logo-wechat.83b2b98.svg", "logo-weibo": "logo-weibo.c8dacee.svg", "logo-whatsapp": "logo-whatsapp.add9a6d.svg", "logo-x": "logo-x.5f2490a.svg", "logo-xing": "logo-xing.3a8df0f.svg", "logo-yahoo": "logo-yahoo.8cbd0ba.svg", "logo-youku": "logo-youku.fe988d0.svg", "logo-youtube": "logo-youtube.da3798f.svg", "logout": "logout.7ec7451.svg", "map": "map.c16f618.svg", "menu-dots-horizontal": "menu-dots-horizontal.788f7fa.svg", "menu-dots-vertical": "menu-dots-vertical.4970a65.svg", "menu-lines": "menu-lines.e332216.svg", "minus": "minus.f6d964c.svg", "mobile": "mobile.7f35446.svg", "moon": "moon.5b73246.svg", "new-chat": "new-chat.95ffd2e.svg", "oil-can": "oil-can.cb58fc7.svg", "parking-brake": "parking-brake.45704bd.svg", "parking-light": "parking-light.c49a231.svg", "pause": "pause.e41b935.svg", "phone": "phone.f4f774b.svg", "pin": "pin.3417cec.svg", "pin-filled": "pin-filled.7b8e9ba.svg", "play": "play.24226d4.svg", "plug": "plug.c159935.svg", "plus": "plus.319993e.svg", "preheating": "preheating.e2a796f.svg", "printer": "printer.f59b0ee.svg", "purchase": "purchase.9cd6d65.svg", "push-pin": "push-pin.89e4ead.svg", "push-pin-off": "push-pin-off.ba99213.svg", "qr": "qr.87a49a3.svg", "question": "question.3402a63.svg", "racing-flag": "racing-flag.b7ddcc8.svg", "refresh": "refresh.41fd868.svg", "replay": "replay.55a99f2.svg", "reset": "reset.e53d52f.svg", "roof-closed": "roof-closed.018d021.svg", "roof-open": "roof-open.51c8ee6.svg", "route": "route.f4fbbb4.svg", "rss": "rss.0e77baf.svg", "save": "save.6171ff5.svg", "screen": "screen.420be15.svg", "search": "search.3f0f1ce.svg", "send": "send.b32099c.svg", "share": "share.a0b30da.svg", "shopping-bag": "shopping-bag.3f91a9b.svg", "shopping-bag-filled": "shopping-bag-filled.abf6c98.svg", "shopping-cart": "shopping-cart.370e224.svg", "shopping-cart-filled": "shopping-cart-filled.e0c3a65.svg", "sidebar": "sidebar.8e43896.svg", "sidelights": "sidelights.65c9dd9.svg", "snowflake": "snowflake.83907b3.svg", "sort": "sort.92b50bd.svg", "stack": "stack.804af93.svg", "star": "star.4c5bb15.svg", "star-filled": "star-filled.84ef2f6.svg", "steering-wheel": "steering-wheel.4dea19e.svg", "stopwatch": "stopwatch.0e048a4.svg", "subtract": "subtract.57eed1d.svg", "success": "success.b16d4c1.svg", "success-filled": "success-filled.1832d98.svg", "sun": "sun.4301cbd.svg", "switch": "switch.66f74c4.svg", "tablet": "tablet.07341ac.svg", "tachometer": "tachometer.3a2fc3c.svg", "tire": "tire.e5c9372.svg", "truck": "truck.2c26c04.svg", "upload": "upload.d1f5a2a.svg", "user": "user.c18dabe.svg", "user-filled": "user-filled.2ea646d.svg", "user-group": "user-group.79cdf86.svg", "user-manual": "user-manual.470e243.svg", "video": "video.7590689.svg", "view": "view.5b4d7f6.svg", "view-off": "view-off.a4ede54.svg", "volume-off": "volume-off.bcd49e7.svg", "volume-up": "volume-up.2084f60.svg", "warning": "warning.59927e6.svg", "warning-filled": "warning-filled.1f6fe21.svg", "weight": "weight.b57a60d.svg", "wifi": "wifi.e2a8d9c.svg", "work": "work.9dd71a4.svg", "wrench": "wrench.09a2a67.svg", "wrenches": "wrenches.d2ed45d.svg", "zoom-in": "zoom-in.ff299b8.svg", "zoom-out": "zoom-out.ebb6246.svg" };
 
 // index.ts
 var MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png": "porsche-marque-trademark.medium.da07531@1x.png", "webp": "porsche-marque-trademark.medium.5c6af9a@1x.webp" }, "2x": { "png": "porsche-marque-trademark.medium.aa801f4@2x.png", "webp": "porsche-marque-trademark.medium.fff6e9b@2x.webp" }, "3x": { "png": "porsche-marque-trademark.medium.824818d@3x.png", "webp": "porsche-marque-trademark.medium.f67092f@3x.webp" } }, "small": { "1x": { "png": "porsche-marque-trademark.small.020244b@1x.png", "webp": "porsche-marque-trademark.small.7836397@1x.webp" }, "2x": { "png": "porsche-marque-trademark.small.92184fa@2x.png", "webp": "porsche-marque-trademark.small.760a57e@2x.webp" }, "3x": { "png": "porsche-marque-trademark.small.fd545ce@3x.png", "webp": "porsche-marque-trademark.small.1726036@3x.webp" } } }, "porscheMarque": { "medium": { "1x": { "png": "porsche-marque.medium.a986274@1x.png", "webp": "porsche-marque.medium.fa908e4@1x.webp" }, "2x": { "png": "porsche-marque.medium.089d6dd@2x.png", "webp": "porsche-marque.medium.7f0893d@2x.webp" }, "3x": { "png": "porsche-marque.medium.2cb8743@3x.png", "webp": "porsche-marque.medium.3534cf0@3x.webp" } }, "small": { "1x": { "png": "porsche-marque.small.ac20427@1x.png", "webp": "porsche-marque.small.005debe@1x.webp" }, "2x": { "png": "porsche-marque.small.22f1e9d@2x.png", "webp": "porsche-marque.small.df43173@2x.webp" }, "3x": { "png": "porsche-marque.small.4920924@3x.png", "webp": "porsche-marque.small.cfd6149@3x.webp" } } }, "porscheMarque75": { "medium": { "1x": { "png": "porsche-marque75.medium.0a02e22@1x.png", "webp": "porsche-marque75.medium.99b2d65@1x.webp" }, "2x": { "png": "porsche-marque75.medium.1d41ecf@2x.png", "webp": "porsche-marque75.medium.e32580c@2x.webp" }, "3x": { "png": "porsche-marque75.medium.373bcb5@3x.png", "webp": "porsche-marque75.medium.4a003d1@3x.webp" } }, "small": { "1x": { "png": "porsche-marque75.small.f5b37fe@1x.png", "webp": "porsche-marque75.small.146b06c@1x.webp" }, "2x": { "png": "porsche-marque75.small.20d8690@2x.png", "webp": "porsche-marque75.small.025770f@2x.webp" }, "3x": { "png": "porsche-marque75.small.e89b13e@3x.png", "webp": "porsche-marque75.small.a725d2e@3x.webp" } } } };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/accordion.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 import { DSRAccordion } from '../dsr-components/accordion.mjs';
 
-const PAccordion = forwardRef(({ compact, heading, headingTag = 'h2', onAccordionChange, onUpdate, open, size = 'small', sticky, tag, theme, className, children, ...rest }, ref) => {
+const PAccordion = /*#__PURE__*/ forwardRef(({ compact, heading, headingTag = 'h2', onAccordionChange, onUpdate, open, size = 'small', sticky, tag, theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'accordionChange', onAccordionChange);
     useEventCallback(elementRef, 'update', onUpdate);