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

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

@@ -4706,28 +4706,30 @@ const getComponentCss$14 = (icon, iconSource, variant, hideLabel, disabled, load
     }));
 };
 
-// TODO: styling needs to be cleaned up
+// 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 cssVarGridColumns = '--p-canvas-grid-columns';
-const cssVarGridMaxWidth = '--p-canvas-grid-max-width';
+// 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 mainGridColumnGap = gridGap.replace('36px', '24px').replace('vw', 'cqw');
-// const mainGridRowGap = gridGap.replace('vw', 'cqw');
-const mediaQueryTabletView = getMediaQueryMin('s');
-const mediaQueryDesktopView = getMediaQueryMin('m');
-const sidebarWidth = '320px';
-const sidebarStartWidth = `var(${cssVarSidebarStartWidth}, ${sidebarWidth})`;
-const sidebarEndWidth = `var(${cssVarSidebarEndWidth}, ${sidebarWidth})`;
-const sidebarTransition = getTransition('margin');
-const borderRadius = '16px';
-const headerPadding = spacingStaticSmall;
-const headerMinHeight = '56px';
 const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
-    const footerGradientDark = '0%';
-    const footerGradient = isThemeDark(theme) ? footerGradientDark : '100%';
     return getCss({
         '@global': {
             ':host': {
@@ -4735,325 +4737,306 @@ const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                 ...addImportantToEachRule({
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
-                    containerType: 'inline-size',
-                    marginInlineStart: isSidebarStartOpen ? sidebarStartWidth : 0,
-                    marginInlineEnd: isSidebarEndOpen ? sidebarEndWidth : 0,
-                    transition: sidebarTransition,
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
-            '::slotted': {
-                '&([slot*="header"])': {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: spacingStaticSmall,
+            slot: {
+                '&:not([name]),&[name="footer"]': {
+                    [`&::slotted(.${cssClassGrid})`]: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(12,minmax(0,1fr))',
+                        columnGap: spacingBase,
+                        marginInline: 'auto',
+                        containerType: 'inline-size',
+                    },
                 },
-            },
-            'slot[name="background"]': {
-                display: 'block',
-                gridArea: '1/1/-1/-1',
-                position: 'sticky',
-                top: 0,
-                zIndex: 0,
-                width: '100dvw',
-                height: '100dvh',
-                pointerEvents: 'none',
-                overflow: 'hidden',
-                transform: 'translate3d(0,0,0)', // needed for Safari to force GPU acceleration
-                '&::slotted(video), &::slotted(img)': {
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                    transition: getTransition('opacity', 'veryLong'),
+                '&[name="title"]::slotted': {
+                    '&(a)': {
+                        textDecoration: 'none',
+                        color: 'inherit',
+                        borderRadius: borderRadiusSmall,
+                    },
+                    ...getFocusJssStyle(theme, { slotted: 'a' }),
                 },
-            },
-            'slot[name="title"]::slotted(a)': {
-                textDecoration: 'none',
-                color: 'inherit',
-            },
-            'slot[name="sidebar-start"]': {
-                display: 'block',
-                marginTop: spacingFluidMedium,
-                [mediaQueryTabletView]: {
-                    marginTop: 0,
+                '&[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',
+                    },
                 },
             },
             h2: {
-                ...textXSmallStyle,
+                font: textXSmallStyle.font,
                 textOverflow: 'ellipsis',
                 overflow: 'hidden',
                 whiteSpace: 'nowrap',
                 margin: 0,
-                color: primaryColor,
+                padding: '4px', // preserve enough spacing for focus state
                 textTransform: 'uppercase',
                 letterSpacing: '2px',
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: primaryColorDark,
-                }),
             },
-            'header, main, footer, aside': {
-                padding: spacingBase,
-                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: {
-                paddingBlock: headerPadding,
-                gridArea: 'header',
-                position: 'sticky',
-                minHeight: headerMinHeight,
-                boxSizing: 'border-box',
-                top: 0,
-                zIndex: 100,
-                display: 'grid',
-                gridTemplateColumns: 'minmax(0, 1fr) auto minmax(0, 1fr)',
-                gap: spacingBase,
+            [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: '""',
+                    zIndex: 2,
+                    gridArea: '1/2/-1/3',
+                    boxShadow: `1px 0 0 0 var(${cssVarColorContrastLow})`,
+                    background: `var(${cssVarColorBackgroundBase})`,
+                    pointerEvents: 'none',
+                },
+            },
+        },
+        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',
+                },
+                '&--end': {
+                    justifyContent: 'flex-end',
+                },
             },
-            'header .blur-layers': {
+            '&__crest': {
+                [`@container(min-width:${breakpointS}px)`]: {
+                    display: 'none',
+                },
+            },
+            '&__wordmark': {
+                height: '10px',
+                [`@container(max-width:${breakpointS - 1}px)`]: {
+                    display: 'none',
+                },
+            },
+        },
+        blur: {
+            zIndex: -1,
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: 'none',
+            '& > div': {
                 position: 'absolute',
                 inset: 0,
-                zIndex: -1,
-                pointerEvents: 'none',
-                height: '100%',
-                width: '100%',
             },
-            'header .blur-layers:before': {
-                content: '""',
+            '& > 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%)', // Safari prefix
-                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%)',
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-            },
-            'header .blur-layers > div': {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
+                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%)',
             },
-            'header .blur-layers > div:nth-of-type(1)': {
+            '& > 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%)',
+                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%)',
             },
-            'header .blur-layers > div:nth-of-type(2)': {
+            '& > 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%)',
+                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%)',
             },
-            'header .blur-layers > div:nth-of-type(3)': {
+            '& > 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%)',
+                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%)',
             },
-            'header .blur-layers > div:nth-of-type(4)': {
+            '& > 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%)',
+                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%)',
             },
-            'header .blur-layers > div:nth-of-type(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%)',
+                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%)',
             },
-            'header .blur-layers > div:nth-of-type(6)': {
+            '& > 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%)',
+                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%)',
             },
-            'header .blur-layers:after': {
-                content: '""',
+            '& > div:nth-of-type(8)': {
                 zIndex: 8,
-                WebkitBackdropFilter: 'blur(0.5px)',
-                backdropFilter: 'blur(0.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, footer': {
-                display: 'grid',
-                gridTemplateColumns: `repeat(var(${cssVarGridColumns}, 12), minmax(0, 1fr))`,
-                columnGap: mainGridColumnGap,
-                alignContent: 'flex-start',
-                maxWidth: `var(${cssVarGridMaxWidth}, none)`,
-                marginInline: 'auto',
-            },
-            main: {
-                zIndex: 10,
-                gridArea: 'main',
-                width: '100%',
-            },
-            footer: {
-                position: 'sticky',
-                bottom: 0,
-                width: '100%',
-                gridArea: 'footer',
-                zIndex: 200,
-                paddingBottom: spacingFluidSmall,
-                '&::before': {
-                    content: '""',
-                    zIndex: '-1',
-                    position: 'absolute',
-                    inset: '-140px -50dvw 0',
-                    pointerEvents: 'none',
-                    background: `linear-gradient(to bottom, hsla(0, 0%, ${footerGradient}, 0) 0%, hsla(0, 0%, ${footerGradient}, 0.013) 8.1%, hsla(0, 0%, ${footerGradient}, 0.049) 15.5%, hsla(0, 0%, ${footerGradient}, 0.104) 22.5%, hsla(0, 0%, ${footerGradient}, 0.175) 29%, hsla(0, 0%, ${footerGradient}, 0.259) 35.3%, hsla(0, 0%, ${footerGradient}, 0.352) 41.2%, hsla(0, 0%, ${footerGradient}, 0.45) 47.1%, hsla(0, 0%, ${footerGradient}, 0.55) 52.9%, hsla(0, 0%, ${footerGradient}, 0.648) 58.8%, hsla(0, 0%, ${footerGradient}, 0.741) 64.7%, hsla(0, 0%, ${footerGradient}, 0.825) 71%, hsla(0, 0%, ${footerGradient}, 0.896) 77.5%, hsla(0, 0%, ${footerGradient}, 0.951) 84.5%, hsla(0, 0%, ${footerGradient}, 0.987) 91.9%, hsl(0, 0%, ${footerGradient}) 100%)`,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        background: `linear-gradient(to bottom, hsla(0, 0%, ${footerGradientDark}, 0) 0%, hsla(0, 0%, ${footerGradientDark}, 0.013) 8.1%, hsla(0, 0%, ${footerGradientDark}, 0.049) 15.5%, hsla(0, 0%, ${footerGradientDark}, 0.104) 22.5%, hsla(0, 0%, ${footerGradientDark}, 0.175) 29%, hsla(0, 0%, ${footerGradientDark}, 0.259) 35.3%, hsla(0, 0%, ${footerGradientDark}, 0.352) 41.2%, hsla(0, 0%, ${footerGradientDark}, 0.45) 47.1%, hsla(0, 0%, ${footerGradientDark}, 0.55) 52.9%, hsla(0, 0%, ${footerGradientDark}, 0.648) 58.8%, hsla(0, 0%, ${footerGradientDark}, 0.741) 64.7%, hsla(0, 0%, ${footerGradientDark}, 0.825) 71%, hsla(0, 0%, ${footerGradientDark}, 0.896) 77.5%, hsla(0, 0%, ${footerGradientDark}, 0.951) 84.5%, hsla(0, 0%, ${footerGradientDark}, 0.987) 91.9%, hsl(0, 0%, ${footerGradientDark}) 100%)`,
-                    }),
-                },
-            },
-            aside: {
-                zIndex: 200,
-                transition: sidebarTransition,
-                position: 'sticky',
-                top: 0,
-                height: '100dvh',
+                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%)',
             },
         },
-        scroller: {
-            position: 'absolute',
-            inset: 0,
+        main: {
+            zIndex: 4,
+            gridArea: 'main',
             padding: spacingBase,
-            overflow: 'hidden auto',
-            display: 'grid',
-            gridTemplateRows: 'auto 1fr',
-            gap: spacingBase,
         },
-        'sidebar-header': {
-            display: 'flex',
-            gap: spacingStaticSmall,
-            alignItems: 'center',
-            justifyContent: 'var(--p-internal-justify)',
+        footer: {
+            zIndex: 5,
+            gridArea: 'footer',
+            padding: `${spacingBase} ${spacingBase} ${spacingFluidSmall}`,
             position: 'sticky',
-            top: `calc(${spacingBase} * -1)`,
-            padding: `${headerPadding} ${spacingBase}`,
-            marginBlockStart: `calc(${spacingBase} * -1)`,
-            marginInline: `calc(${spacingBase} * -1)`,
-            zIndex: 1,
-            minHeight: headerMinHeight,
-            boxSizing: 'border-box',
-            '&::before': {
-                content: '""',
-                zIndex: '-1',
-                position: 'absolute',
-                inset: '0 0 -8px',
-                background: 'var(--p-internal-gradient)',
-                pointerEvents: 'none',
-            },
-        },
-        'sidebar-start': {
-            '--p-internal-gradient': `linear-gradient(180deg, ${backgroundSurfaceColor} 0%, ${backgroundSurfaceColor} 65%, rgba(255,255,255,0) 100%)`,
-            '--p-internal-justify': 'flex-start',
-            backgroundColor: backgroundSurfaceColor,
-            gridArea: 'sidebar-start',
-            width: sidebarStartWidth,
-            marginInlineStart: isSidebarStartOpen
-                ? 0
-                : `calc((var(${cssVarSidebarStartWidth}, ${sidebarWidth}) + ${borderRadius}) * -1)`,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                '--p-internal-gradient': `linear-gradient(180deg, ${backgroundSurfaceColorDark} 0%, ${backgroundSurfaceColorDark} 65%, rgba(255,255,255,0) 100%)`,
-                backgroundColor: backgroundSurfaceColorDark,
-            }),
+            bottom: 0,
             '&::before': {
                 content: '""',
-                zIndex: '-1',
+                zIndex: -1,
                 position: 'absolute',
-                backgroundColor: 'transparent',
-                right: `-${borderRadius}`,
-                height: `calc(${borderRadius} * 2)`,
-                width: borderRadius,
+                inset: '-140px 0 0',
                 pointerEvents: 'none',
-                top: 0,
-                borderTopLeftRadius: borderRadius,
-                boxShadow: `0 -${borderRadius} 0 0 ${backgroundSurfaceColor}`,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    boxShadow: `0 -${borderRadius} 0 0 ${backgroundSurfaceColorDark}`,
-                }),
+                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%)`,
             },
         },
-        'sidebar-end': {
-            '--p-internal-gradient': `linear-gradient(180deg, ${backgroundColor} 0%, ${backgroundColor} 65%, rgba(255,255,255,0) 100%)`,
-            '--p-internal-justify': 'flex-end',
-            borderInlineStart: `1px solid ${contrastLowColor}`,
-            backgroundColor,
-            gridArea: 'sidebar-end',
-            width: sidebarEndWidth,
-            marginInlineEnd: isSidebarEndOpen ? 0 : `calc(var(${cssVarSidebarEndWidth}, ${sidebarWidth}) * -1)`,
-            overflow: 'hidden auto',
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                borderColor: contrastLowColorDark,
-                backgroundColor: backgroundColorDark,
-                '--p-internal-gradient': `linear-gradient(180deg, ${backgroundColorDark} 0%, ${backgroundColorDark} 65%, rgba(255,255,255,0) 100%)`,
-            }),
-        },
-        canvas: {
-            marginInlineStart: isSidebarStartOpen ? `calc(${sidebarStartWidth} * -1)` : 0,
-            marginInlineEnd: isSidebarEndOpen ? `calc(${sidebarEndWidth} * -1)` : 0,
-            transition: sidebarTransition,
-            display: 'grid',
-            gridTemplateRows: 'auto minmax(0, 1fr) auto',
-            gridTemplateAreas: '"header" "main" "footer"',
-            minWidth: '320px',
-            minHeight: '100dvh',
-            font: textSmallStyle.font,
-            color: primaryColor,
-            backgroundColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: primaryColorDark,
-                backgroundColor: backgroundColorDark,
-            }),
-            [mediaQueryTabletView]: {
-                gridTemplate: 'auto minmax(0, 1fr) / auto minmax(0, 1fr) auto',
-                gridTemplateAreas: '"sidebar-start header" "sidebar-start main" "sidebar-start footer"',
+        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})`,
+                },
             },
-            [mediaQueryDesktopView]: {
-                gridTemplate: 'auto minmax(0, 1fr) auto / auto minmax(0, 1fr) auto',
-                gridTemplateAreas: '"sidebar-start header sidebar-end" "sidebar-start main sidebar-end" "sidebar-start footer sidebar-end"',
+            '&--end': {
+                zIndex: 1,
+                gridArea: 'sidebar-end',
+                justifySelf: 'flex-end',
+                width: sidebarEndWidth,
+                backgroundColor: `var(${cssVarColorBackgroundBase})`,
             },
-        },
-        crest: {
-            [`@container(min-width:${breakpointS}px)`]: {
-                display: 'none',
+            '&__scroller': {
+                position: 'absolute',
+                inset: 0,
+                overflow: 'hidden auto',
+                overscrollBehaviorY: 'contain',
+                background: 'inherit', // ensures correct scrollbar coloring in light / dark mode
             },
-        },
-        wordmark: {
-            height: '10px',
-            [`@container(max-width:${breakpointS - 1}px)`]: {
-                display: 'none',
+            '&__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',
+                },
             },
-        },
-        header: {
-            display: 'flex',
-            gap: spacingStaticSmall,
-            alignItems: 'center',
-            '&:last-of-type': {
-                justifyContent: 'end',
+            '&__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': {
-            // TODO: why does the flyout component has a fixed min-width defined, should be a CSS variable too?
             '--p-flyout-width': '100dvw',
             '--p-flyout-max-width': sidebarStartWidth,
         },
         'flyout-end': {
-            // TODO: why does the flyout component has a fixed min-width defined, should be a CSS variable too?
             '--p-flyout-width': '100dvw',
             '--p-flyout-max-width': sidebarEndWidth,
         },
@@ -6695,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) => {
@@ -6800,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,
@@ -6809,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',
@@ -7840,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',