@porsche-design-system/components-react 3.15.2 → 3.16.0-rc.1

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

@@ -3476,6 +3476,7 @@ const themeLight = {
     backgroundSurfaceColor: '#EEEFF2',
     backgroundSurfaceColorDarken: '#CBCED7',
     backgroundSurfaceColorLighten: '#FFFFFF',
+    backgroundShadingColor: 'rgba(1, 2, 5, 0.67)',
     contrastLowColor: '#D8D8DB',
     contrastMediumColor: '#6B6D70',
     contrastHighColor: '#535457',
@@ -3514,6 +3515,7 @@ const themeDark = {
     backgroundSurfaceColor: '#212225',
     backgroundSurfaceColorDarken: '#040405',
     backgroundSurfaceColorLighten: '#3E4045',
+    backgroundShadingColor: 'rgba(38, 38, 41, 0.67)',
     contrastLowColor: '#404044',
     contrastMediumColor: '#88898C',
     contrastHighColor: '#AFB0B3',
@@ -3666,8 +3668,7 @@ const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => {
             ...isShownJssStyle,
         };
 };
-// TODO: there should be a shared style util for modal, flyout and flyout-navigation instead of having this code in the
-//  main bundle. Or don't share it at all, in case same transition concept isn't ideal to be shared from an UI point of view.
+// TODO: migrate flyout-navigation to use shared backdrop of dialog-styles.ts
 /**
  * Generates JSS styles for a frosted glass background.
  * @param {boolean} isVisible - Determines if the frosted glass effect is visible.
@@ -3677,7 +3678,7 @@ const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => {
  * @param {'blur' | 'shading'} backdrop - The backdrop variant.
  * @returns {JssStyle} - The JSS styles for the frosted glass backdrop.
  */
-const getBackdropJssStyle = (isVisible, zIndex, theme, duration = 'long', backdrop = 'blur') => {
+const getBackdropJssStyle = (isVisible, zIndex, theme, duration = 'long') => {
     return {
         position: 'fixed',
         inset: 0,
@@ -3691,17 +3692,14 @@ const getBackdropJssStyle = (isVisible, zIndex, theme, duration = 'long', backdr
             ? {
                 visibility: 'inherit',
                 pointerEvents: 'auto',
-                ...(backdrop === 'blur' && frostedGlassStyle),
+                ...frostedGlassStyle,
                 opacity: 1,
             }
             : {
                 visibility: 'hidden', // element shall not be tabbable after fade out transition has finished
                 pointerEvents: 'none',
-                ...(backdrop === 'blur' && {
-                    // TODO: is `blur(0px)` necessary at all?
-                    WebkitBackdropFilter: 'blur(0px)',
-                    backdropFilter: 'blur(0px)',
-                }),
+                WebkitBackdropFilter: 'blur(0px)',
+                backdropFilter: 'blur(0px)',
                 opacity: 0,
             }),
         transition: `${getTransition('opacity', duration)}, ${getTransition('backdrop-filter', duration)}, ${getTransition('-webkit-backdrop-filter', duration)}, visibility 0s linear var(${cssVariableTransitionDuration}, ${isVisible ? '0s' : motionDurationMap[duration]})`,
@@ -4028,9 +4026,6 @@ const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-des
 
 const MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.min.493a9e3509d6e263fa2207150082def5.svg", "width": 79, "height": 26 }, "911": { "src": "911.min.b68f913216168583298ccf83f1a6b8d5.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.min.c321738789b37fda4bba3f7c587542aa.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.min.25562011631a831516f91ec31d144104.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.min.cc8919694c002873e1bb6a3c1dae5d41.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.min.a1844f4c8d23b75e371745e9b8eb49b9.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.min.6dae8095186567168f85c145845f090c.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.min.df444c6f4cc1f627ceaf1b02584d6bea.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.min.73f1e10731caffe93c07d96fa08546c1.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.min.6a4084a8704a6c47a099b2de56b22aef.svg", "width": 143, "height": 25 } };
 
-const scrollShadowColor = 'rgba(204, 204, 204, 0.35)';
-const scrollShadowColorDark = 'rgba(0, 0, 0, 0.6)';
-
 const OPTION_HEIGHT = 40; // optgroups are higher and ignored
 const MULTI_SELECT_OPTION_HEIGHT = 44;
 const getNoResultsOptionJssStyle = () => ({
@@ -4091,7 +4086,7 @@ const formatObjectOutput = (value) => {
 'value, ' +
     formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '');
 
-const getComponentCss$15 = (size, compact, open, theme, sticky) => {
+const getComponentCss$16 = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
@@ -4237,7 +4232,6 @@ const getComponentCss$15 = (size, compact, open, theme, sticky) => {
 };
 
 const TOAST_Z_INDEX = 999999;
-const MODAL_Z_INDEX = 99999;
 const FLYOUT_Z_INDEX = 99998;
 const POPOVER_Z_INDEX = 9999;
 const BANNER_Z_INDEX = 99;
@@ -4261,7 +4255,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$14 = (isOpen) => {
+const getComponentCss$15 = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4332,7 +4326,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$13 = (direction) => {
+const getComponentCss$14 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4484,7 +4478,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$12 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$13 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
@@ -4662,7 +4656,7 @@ background, align, compact, hasGradient, isDisabled) => {
     });
 };
 
-const getComponentCss$11 = (isDisabledOrLoading, ...args) => {
+const getComponentCss$12 = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss({
         ...buttonLinkTileStyles,
@@ -4673,14 +4667,14 @@ const getComponentCss$11 = (isDisabledOrLoading, ...args) => {
     });
 };
 
-const { primaryColor: darkThemePrimaryColor$1 } = getThemedColors('dark');
+const { primaryColor: darkThemePrimaryColor } = getThemedColors('dark');
 const { primaryColor: lightThemePrimaryColor } = getThemedColors('light');
 const getVariantColors = (variant, theme) => {
     const { primaryColor, contrastHighColor, contrastMediumColor, hoverColor } = getThemedColors(theme);
     const { canvasColor } = getHighContrastColors();
     const colors = {
         primary: {
-            textColor: theme === 'dark' ? lightThemePrimaryColor : darkThemePrimaryColor$1,
+            textColor: theme === 'dark' ? lightThemePrimaryColor : darkThemePrimaryColor,
             borderColor: primaryColor,
             borderColorHover: contrastHighColor,
             backgroundColor: primaryColor,
@@ -4786,7 +4780,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$10 = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$11 = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
@@ -4841,6 +4835,96 @@ const getComponentCss$10 = (icon, iconSource, variant, hideLabel, disabled, load
     }));
 };
 
+const cssVariableSidebarStartWidth = '--p-canvas-sidebar-start-width';
+const cssVariableSidebarEndWidth = '--p-canvas-sidebar-end-width';
+// TODO: maybe default grid gap would also work
+const gridProductiveGap = gridGap.replace('36px', '24px');
+const mediaQueryDesktopView = getMediaQueryMin('m');
+const sidebarWidths = {
+    medium: '320px',
+    large: '480px', // TODO: won't work at viewport 1000px when both sidebars are opened
+};
+const getComponentCss$10 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndOpen, sidebarEndWidth) => {
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ':is(header, main, footer, aside)': {
+                padding: gridProductiveGap,
+                boxSizing: 'border-box',
+                zIndex: 0,
+            },
+            header: {
+                gridArea: 'header',
+                position: 'sticky',
+                top: 0,
+                zIndex: 1,
+            },
+            main: {
+                gridArea: 'main',
+                '--pds-grid-span-full': 'span 6',
+                '--pds-grid-span-one-half': 'span 3',
+                '--pds-grid-span-one-third': 'span 2',
+                '--pds-grid-span-two-thirds': 'span 4',
+                display: 'grid',
+                gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
+                gap: gridProductiveGap,
+                alignContent: 'flex-start',
+                [mediaQueryDesktopView]: {
+                    '--pds-grid-span-full': 'span 12',
+                    '--pds-grid-span-one-half': 'span 6',
+                    '--pds-grid-span-one-third': 'span 4',
+                    '--pds-grid-span-two-thirds': 'span 8',
+                    gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
+                },
+            },
+            footer: {
+                gridArea: 'footer',
+            },
+            aside: {
+                // TODO: box-shadows or colored surface must be defined, design is missing
+                position: 'relative',
+                transition: getTransition('margin'),
+                '&:first-of-type': {
+                    gridArea: 'sidebar-start',
+                    width: `var(${cssVariableSidebarStartWidth}, ${sidebarWidths[sidebarStartWidth]})`,
+                    marginInlineStart: isSidebarStartOpen
+                        ? 0
+                        : `calc(var(${cssVariableSidebarStartWidth}, ${sidebarWidths[sidebarStartWidth]}) * -1)`,
+                },
+                '&:last-of-type': {
+                    gridArea: 'sidebar-end',
+                    width: `var(${cssVariableSidebarEndWidth}, ${sidebarWidths[sidebarEndWidth]})`,
+                    marginInlineEnd: isSidebarEndOpen
+                        ? 0
+                        : `calc(var(${cssVariableSidebarEndWidth}, ${sidebarWidths[sidebarEndWidth]}) * -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"',
+            },
+        },
+        close: {
+            // TODO: must be positioned properly, design is missing
+            position: 'absolute',
+            inset: `${spacingStaticXSmall} ${spacingStaticXSmall} auto auto`,
+        },
+    });
+};
+
 const cssVariablePrevNextFilter = '--p-carousel-prev-next-filter';
 const carouselTransitionDuration = motionDurationModerate;
 const paginationInfiniteStartCaseClass = 'pagination--infinite';
@@ -6024,150 +6108,260 @@ const getComponentCss$Q = (isSecondaryScrollerVisible, theme) => {
     });
 };
 
-const headerShadowClass = 'header--shadow';
-const footerShadowClass$1 = 'footer--shadow';
-const getComponentCss$P = (isOpen, position, hasFooter, hasSubFooter, theme) => {
+const headingTags = 'h1,h2,h3,h4,h5,h6';
+const dialogHostJssStyle = {
+    '--pds-internal-grid-outer-column': `calc(${spacingFluidLarge} - ${gridGap})`,
+    '--pds-internal-grid-margin': `calc(${spacingFluidLarge} * -1)`,
+    '--pds-internal-grid-width-min': 'auto',
+    '--pds-internal-grid-width-max': 'none',
+};
+const getDialogJssStyle = (isVisible, theme, backdrop = 'blur') => {
+    return {
+        ...dialogBackdropResetJssStyle,
+        ...getDialogBackdropTransitionJssStyle(isVisible, theme, backdrop),
+    };
+};
+const dialogBackdropResetJssStyle = {
+    position: 'fixed', // ua-style
+    inset: 0, // ua-style
+    margin: 0, // ua-style
+    padding: 0, // ua-style
+    border: 0, // ua-style
+    width: '100dvw', // ua-style
+    height: '100dvh', // ua-style
+    maxWidth: '100dvw', // ua-style
+    maxHeight: '100dvh', // ua-style
+    overflow: 'hidden', // ua-style
+    display: 'block', // ua-style
+    outline: 0, // ua-style (we always expect a focusable element to be within the dialog)
+    '&::backdrop': {
+        display: 'none', // ua-style (we can't use it atm because it's not animatable in all browsers)
+    },
+};
+const getDialogBackdropTransitionJssStyle = (isVisible, theme, backdrop = 'blur') => {
+    const isBackdropBlur = backdrop === 'blur';
+    const { backgroundShadingColor } = getThemedColors(theme);
+    const { backgroundShadingColor: backgroundShadingColorDark } = getThemedColors('dark');
+    const duration = isVisible ? 'long' : 'moderate';
+    const easing = isVisible ? 'in' : 'out';
+    // as soon as all browsers are supporting `allow-discrete`, visibility transition shouldn't be necessary anymore
+    const transition = `visibility 0s linear var(${cssVariableTransitionDuration}, ${isVisible ? '0s' : motionDurationMap[duration]}), ${getTransition('background-color', duration, easing)}, ${getTransition('-webkit-backdrop-filter', duration, easing)}, ${getTransition('backdrop-filter', duration, easing)}`;
+    return {
+        zIndex: 9999999, // fallback for fade out stacking until `overlay` + `allow-discrete` is supported in all browsers. It tries to mimic #top-layer positioning hierarchy.
+        ...(isVisible
+            ? {
+                visibility: 'inherit',
+                pointerEvents: 'auto',
+                background: backgroundShadingColor,
+                ...(isBackdropBlur && frostedGlassStyle),
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: backgroundShadingColorDark,
+                }),
+            }
+            : {
+                visibility: 'hidden', // element shall not be tabbable with keyboard after fade out transition has finished
+                pointerEvents: 'none', // element can't be interacted with mouse
+                background: 'transparent',
+            }),
+        transition,
+        // `allow-discrete` transition for ua-style `overlay` (supported browsers only) ensures dialog is rendered on
+        // #top-layer as long as fade-in or fade-out transition/animation is running
+        '@supports (transition-behavior: allow-discrete)': {
+            transition: `${transition}, ${getTransition('overlay', duration, easing)} allow-discrete`,
+        },
+    };
+};
+const getScrollerJssStyle = (position, theme) => {
+    // ensures scrollbar color is set correctly (e.g. when scrollbar is shown on backdrop, on flyout/modal surface or with Auto Dark Mode)
+    const backgroundLight = 'rgba(255,255,255,.01)';
+    const backgroundDark = 'rgba(0,0,0,.01)';
+    const background = {
+        light: backgroundLight,
+        dark: backgroundDark,
+        auto: backgroundLight,
+    };
+    return {
+        position: 'absolute',
+        display: 'grid',
+        ...(position === 'fullscreen'
+            ? {
+                inset: 0,
+            }
+            : {
+                insetBlock: 0,
+                [position === 'start' ? 'insetInlineStart' : 'insetInlineEnd']: 0,
+            }),
+        overflow: 'hidden auto',
+        overscrollBehaviorY: 'none',
+        // TODO: check if smooth scrolling on iOS is given?
+        background: background[theme],
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            background: background.dark,
+        }),
+    };
+};
+const dialogGridJssStyle = {
+    display: 'grid',
+    gridTemplate: `auto/${spacingFluidSmall} auto ${spacingFluidSmall}`,
+    paddingBlock: `calc(${spacingFluidSmall} + ${spacingFluidMedium})`,
+    rowGap: spacingFluidMedium,
+    columnGap: `calc(${spacingFluidLarge} - ${spacingFluidSmall})`,
+    alignContent: 'flex-start',
+};
+const getDialogColorJssStyle = (theme) => {
     const { primaryColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
-    const isPositionStart = position === 'start';
-    const contentPadding = `${spacingStaticMedium} ${spacingFluidLarge}`;
-    const isDark = isThemeDark(theme);
-    const shadowColor = isDark ? scrollShadowColorDark : scrollShadowColor;
-    const transparentColorDark = 'rgba(14, 14, 18, 0)';
-    const transparentColor = isDark ? transparentColorDark : 'rgba(255, 255, 255, 0)';
+    return {
+        color: primaryColor, // enables color inheritance for slots
+        background: backgroundColor,
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            color: primaryColorDark,
+            background: backgroundColorDark,
+        }),
+    };
+};
+const getDialogTransitionJssStyle = (isVisible, slideIn) => {
+    const duration = isVisible ? 'moderate' : 'short';
+    const easing = isVisible ? 'in' : 'out';
+    return {
+        // transition offset relies vertically on viewport (vh) because the dialog height can be infinite, while horizontally
+        // it relies on the dialog width (%) which has a max-width
+        ...(isVisible
+            ? {
+                opacity: 1,
+                transform: 'initial',
+            }
+            : {
+                opacity: 0,
+                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 getDismissButtonJssStyle = (theme, isOpen, applyAutoFocusHack = false) => {
+    const { backgroundSurfaceColor } = getThemedColors(theme);
+    const { backgroundSurfaceColor: backgroundSurfaceColorDark } = getThemedColors('dark');
+    return {
+        width: 'fit-content',
+        height: 'fit-content',
+        border: `2px solid ${backgroundSurfaceColor}`, // needed to enlarge button slightly without affecting the hover area (are equal now).
+        borderRadius: borderRadiusSmall,
+        background: backgroundSurfaceColor,
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            background: backgroundSurfaceColorDark,
+            borderColor: backgroundSurfaceColorDark,
+        }),
+        // 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'})`,
+        }),
+    };
+};
+const getDialogStickyAreaJssStyle = (area, theme) => {
+    const { backgroundColor } = getThemedColors(theme);
+    const { backgroundColor: backgroundColorDark } = getThemedColors('dark');
+    const scrollShadowColor = 'rgba(204, 204, 204, 0.35)';
+    const scrollShadowColorDark = 'rgba(0, 0, 0, 0.6)';
+    const isAreaHeader = area === 'header';
+    const boxShadowDimension = `0 ${isAreaHeader ? 5 : -5}px 10px`;
+    return {
+        position: 'sticky',
+        [isAreaHeader ? 'top' : 'bottom']: '-.1px', // necessary for `IntersectionObserver` to detect if sticky element is stuck or not. Float value is used, so that sticky area isn't moved out visually by e.g. 1px when container gets scrolled.
+        transform: 'translateZ(0)', // prevents slightly squeezed elements within sticky area for some browsers (e.g. Firefox) caused by float value of sticky top position
+        padding: `${spacingStaticMedium} ${spacingFluidLarge}`,
+        marginBlock: `${isAreaHeader ? `calc((${spacingFluidSmall} + ${spacingFluidMedium}) * -1)` : `-${spacingStaticMedium}`} -${spacingStaticMedium}`,
+        background: backgroundColor,
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            background: backgroundColorDark,
+        }),
+        clipPath: `inset(${isAreaHeader ? '0 0 -20px 0' : '-20px 0 0 0'})`, // crop leaking box-shadow on left and right side
+        transition: `${getTransition('box-shadow')}`,
+        '&[data-stuck]': {
+            boxShadow: `${isThemeDark(theme) ? scrollShadowColorDark : scrollShadowColor} ${boxShadowDimension}`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                boxShadow: `${scrollShadowColorDark} ${boxShadowDimension}`,
+            }),
+        },
+    };
+};
+
+const cssVariableWidth$2 = '--p-flyout-width';
+// TODO: we shouldn't expose --p-flyout-max-width
+const cssVariableMaxWidth = '--p-flyout-max-width';
+const getComponentCss$P = (isOpen, position, hasHeader, hasFooter, hasSubFooter, theme) => {
+    const isPositionStart = position === 'start' || position === 'left';
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    // needed for correct alignment of the Porsche Grid within the Flyout
-                    '--pds-internal-grid-outer-column': `calc(${spacingFluidLarge} - ${gridGap})`,
-                    '--pds-internal-grid-margin': `calc(${spacingFluidLarge} * -1)`,
-                    ...getBackdropJssStyle(isOpen, FLYOUT_Z_INDEX, theme),
+                    ...dialogHostJssStyle,
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
-            dialog: {
-                ...getFlyoutDialogResetJssStyle(),
-                insetInline: isPositionStart ? '0 0' : 'auto 0',
-                insetBlock: '0 0',
-                display: 'flex',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-                width: 'var(--p-flyout-width, fit-content)',
-                minWidth: '320px',
-                maxWidth: 'var(--p-flyout-max-width, 1180px)',
-                color: primaryColor, // enables color inheritance for slotted content
-                background: backgroundColor,
-                ...(isOpen
-                    ? {
-                        opacity: 1,
-                        transform: 'initial',
-                        transition: `${getTransition('opacity', 'long', 'in')}, ${getTransition('transform', 'long', 'in')}`,
-                    }
-                    : {
-                        opacity: 0,
-                        transform: `translate3d(${isPositionStart ? '-100%' : '100%'}, 0, 0)`,
-                        transition: `${getTransition('opacity', 'short', 'out', 'long')}, ${getTransition('transform', 'long', 'out')}`,
-                    }),
-                boxShadow: `${isPositionStart ? '3px' : '-3px'} 0px 30px rgba(0, 0, 0, 0.25)`,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: primaryColorDark,
-                    background: backgroundColorDark,
-                }),
-                '&:focus-visible': {
-                    outline: 'none', // ua-style reset
+            slot: {
+                display: 'block',
+                '&:first-of-type': {
+                    gridRowStart: 1,
                 },
-                '&::backdrop': {
-                    // to improve browser backwards compatibility we visually style the backdrop on the :host,
-                    // although it's not on the #top-layer like it would be for modern browsers supporting ::backdrop
-                    opacity: 0, // to support backdrop click for modern browsers supporting ::backdrop
+                '&:not([name])': {
+                    gridColumn: '2/3',
+                    zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
                 },
+                ...(hasHeader && {
+                    '&[name=header]': {
+                        ...getDialogStickyAreaJssStyle('header', theme),
+                        gridColumn: '1/-1',
+                        zIndex: 3, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+                    },
+                }),
+                ...(hasFooter && {
+                    '&[name=footer]': {
+                        ...getDialogStickyAreaJssStyle('footer', theme),
+                        gridColumn: '1/-1',
+                        zIndex: 2, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+                    },
+                }),
+                ...(hasSubFooter && {
+                    '&[name=sub-footer]': {
+                        gridColumn: '2/3',
+                        zIndex: 1, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+                    },
+                }),
             },
+            dialog: getDialogJssStyle(isOpen, theme),
         },
-        wrapper: {
-            display: 'flex', // ua-style reset
-            flexGrow: 1,
-            height: 0,
-            flexDirection: 'column',
-            ...(hasSubFooter && {
-                overflowY: 'auto',
-                overscrollBehaviorY: 'none',
-            }),
-        },
-        header: {
-            position: 'sticky',
-            top: 0,
-            zIndex: 2,
-            display: 'grid',
-            gridTemplateColumns: `minmax(0, 1fr) ${spacingFluidLarge}`,
-            alignItems: 'flex-start',
-            padding: `${spacingStaticMedium} 0`,
-            paddingInlineStart: spacingFluidLarge,
-            background: backgroundColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                background: backgroundColorDark,
-            }),
-        },
-        [headerShadowClass]: {
-            boxShadow: `${isDark ? scrollShadowColorDark : scrollShadowColor} 0px 5px 10px`,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                boxShadow: `${scrollShadowColorDark} 0px 5px 10px`,
-            }),
+        scroller: {
+            ...getScrollerJssStyle(isPositionStart ? 'start' : 'end', theme),
+            // 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 ? '>' : '<'),
+        },
+        flyout: {
+            ...dialogGridJssStyle,
+            ...getDialogColorJssStyle(theme),
+            width: `var(${cssVariableWidth$2},auto)`,
+            minWidth: '320px',
+            maxWidth: `var(${cssVariableMaxWidth},1180px)`,
         },
         dismiss: {
-            gridArea: '1 / 2',
-            justifySelf: 'center',
-        },
-        content: {
-            padding: contentPadding,
-            maxWidth: `calc(100vw - calc(${spacingFluidLarge} * 2))`,
-            position: 'relative',
-            zIndex: 0,
-            backgroundColor, // to ensure scrollbar coloring is optimal for light theme
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                backgroundColor: backgroundColorDark, // to ensure scrollbar coloring is optimal for dark theme
-            }),
-            // If sub-footer is used scroll shadows have to be done via JS
-            ...(!hasSubFooter && {
-                overflowY: 'auto',
-                WebkitOverflowScrolling: 'touch',
-                backgroundImage: `linear-gradient(to top, ${backgroundColor}, ${backgroundColor}), linear-gradient(to top, ${backgroundColor}, ${backgroundColor}), linear-gradient(to top, ${shadowColor}, ${transparentColor}), linear-gradient(to bottom, ${shadowColor}, ${transparentColor})`,
-                backgroundPosition: 'bottom center, top center, bottom center, top center',
-                backgroundRepeat: 'no-repeat',
-                backgroundSize: '100% 20px, 100% 20px, 100% 10px, 100% 10px',
-                backgroundAttachment: 'local, local, scroll, scroll',
-                overscrollBehaviorY: 'none',
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    backgroundImage: `linear-gradient(to top, ${backgroundColorDark}, ${backgroundColorDark}), linear-gradient(to top, ${backgroundColorDark}, ${backgroundColorDark}), linear-gradient(to top, ${scrollShadowColorDark}, ${transparentColorDark}), linear-gradient(to bottom, ${scrollShadowColorDark}, ${transparentColorDark})`,
-                    backgroundColor: backgroundColorDark, // to ensure scrollbar coloring is optimal for dark theme
-                }),
-            }),
+            ...getDismissButtonJssStyle(theme, isOpen, !isPositionStart),
+            gridArea: '1/3',
+            zIndex: 4, // ensures dismiss button is above everything
+            position: 'sticky',
+            insetBlockStart: spacingFluidSmall,
+            insetInlineEnd: spacingFluidSmall,
+            marginBlockStart: `calc(${spacingFluidMedium} * -1)`,
+            justifySelf: 'flex-end',
         },
-        ...(hasFooter && {
-            footer: {
-                position: 'sticky',
-                bottom: 0,
-                zIndex: 1,
-                padding: contentPadding,
-                background: backgroundColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: backgroundColorDark,
-                }),
-            },
-            [footerShadowClass$1]: {
-                boxShadow: `${isDark ? scrollShadowColorDark : scrollShadowColor} 0px -5px 10px`,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    boxShadow: `${scrollShadowColorDark} 0px -5px 10px`,
-                }),
-            },
-        }),
-        ...(hasSubFooter && {
-            'sub-footer': {
-                padding: contentPadding,
-            },
-        }),
     });
 };
 
@@ -6880,203 +7074,126 @@ const getComponentCss$D = (size) => {
     });
 };
 
-const cssVariableSpacingTop = '--p-modal-spacing-top';
-const cssVariableSpacingBottom = '--p-modal-spacing-bottom';
-const mediaQueryXl = getMediaQueryMin('xl');
-const { primaryColor: darkThemePrimaryColor, contrastHighColor: darkThemeContrastHighColor } = getThemedColors('dark');
-const stretchToFullModalWidthClassName = 'stretch-to-full-modal-width';
-const marginTopBottomFallback = 'clamp(16px, 7vh, 192px)';
-const marginTopBottomXlandXxlFallback = 'min(192px, 10vh)';
-const footerShadowClass = 'footer--shadow';
-const getFullscreenJssStyles = (fullscreen) => {
-    return fullscreen
-        ? {
-            minWidth: '100%',
-            maxWidth: 'none',
-            minHeight: '100%',
-            margin: 0,
-            borderRadius: 0,
-        }
-        : {
-            minWidth: '276px', // on viewport 320px: calc(${gridColumnWidthBase} * 6 + ${gridGap} * 5)
-            maxWidth: '1535.5px', // on viewport 1920px: `calc(${gridColumnWidthXXL} * 14 + ${gridGap} * 13)`
-            minHeight: 'auto',
-            margin: `var(${cssVariableSpacingTop},${marginTopBottomFallback}) ${gridExtendedOffsetBase} var(${cssVariableSpacingBottom},${marginTopBottomFallback})`,
-            borderRadius: borderRadiusMedium,
-        };
-};
-const isFullscreenForXl = (fullscreen) => {
-    const fullscreenParsed = parseJSON(fullscreen);
-    if (typeof fullscreenParsed === 'boolean') {
-        return fullscreenParsed;
-    }
-    else {
-        const entries = Object.entries(fullscreenParsed);
-        const [lastTrueBreakpoint] = entries.filter(([, val]) => val).pop() || [];
-        const [lastFalseBreakpoint] = entries.filter(([, val]) => !val).pop() || [];
-        return breakpoints.indexOf(lastTrueBreakpoint) > breakpoints.indexOf(lastFalseBreakpoint);
-    }
-};
-const getSlottedJssStyle = (marginValue, hasHeader, hasDismissButton) => {
-    const marginPx = `${-marginValue}px`;
-    return {
-        [`&(.${stretchToFullModalWidthClassName})`]: {
-            width: `calc(100% + ${marginValue * 2}px)`,
-            margin: `0 ${marginPx}`,
-        },
-        ...(!hasHeader && {
-            [`&(.${stretchToFullModalWidthClassName}:first-child)`]: {
-                marginTop: hasDismissButton ? `${-marginValue / 16}rem` : marginPx,
-            },
-        }),
-        [`&(.${stretchToFullModalWidthClassName}:last-child)`]: {
-            marginBottom: marginPx,
-        },
-    };
-};
-const getComponentCss$C = (isOpen, backdrop, isFullscreen, hasDismissButton, hasHeader, hasFooter, theme) => {
-    const { primaryColor, backgroundColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
-    const isFullscreenForXlAndXxl = isFullscreenForXl(isFullscreen);
-    const duration = isOpen ? 'moderate' : 'short';
-    const easing = isOpen ? 'in' : 'out';
-    const contentPadding = '32px';
+const cssVariableWidth$1 = '--p-modal-width';
+const cssVariableSpacingTop = '--p-modal-spacing-top'; // TODO: maybe --p-modal-spacing-block-start would be more precise?
+const cssVariableSpacingBottom = '--p-modal-spacing-bottom'; // TODO: maybe --p-modal-spacing-block-end would be more precise?
+const safeZoneVertical = `calc(${spacingFluidSmall} + ${spacingFluidMedium})`;
+const safeZoneHorizontal = `${spacingFluidLarge}`;
+const cssClassNameStretchToFullModalWidth = 'stretch-to-full-modal-width';
+const getComponentCss$C = (isOpen, backdrop, fullscreen, hasDismissButton, hasHeader, hasFooter, theme) => {
     return getCss({
         '@global': {
             ':host': {
-                overflowY: 'auto', // overrideable
+                display: 'block',
                 ...addImportantToEachRule({
+                    ...dialogHostJssStyle,
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
-                    ...getBackdropJssStyle(isOpen, MODAL_Z_INDEX, theme, duration, backdrop),
                 }),
             },
-            '::slotted': addImportantToEachRule(mergeDeep(getSlottedJssStyle(32, hasHeader, hasDismissButton), buildResponsiveStyles(isFullscreen, (fullscreenValue) => ({
-                [`&(.${stretchToFullModalWidthClassName}`]: {
-                    '&:first-child)': {
-                        borderRadius: fullscreenValue ? 0 : '8px 8px 0 0',
+            // TODO: why not available to Flyout too?
+            // TODO: discussable if so many styles are a good thing, since we could also expose one or two CSS variables with which a stretch to full width is possible too
+            '::slotted': addImportantToEachRule(mergeDeep({
+                [`&(.${cssClassNameStretchToFullModalWidth})`]: {
+                    display: 'block',
+                    margin: `0 calc(${safeZoneHorizontal} * -1)`,
+                    width: `calc(100% + calc(${safeZoneHorizontal} * 2))`,
+                },
+                ...(!hasHeader && {
+                    [`&(.${cssClassNameStretchToFullModalWidth}:first-child)`]: {
+                        marginBlockStart: `calc(${safeZoneVertical} * -1)`,
                     },
-                    '&:last-child)': {
-                        borderRadius: fullscreenValue ? 0 : '0 0 8px 8px',
+                }),
+                ...(!hasFooter && {
+                    [`&(.${cssClassNameStretchToFullModalWidth}:last-child)`]: {
+                        marginBlockEnd: `calc(${safeZoneVertical} * -1)`,
                     },
+                }),
+            }, buildResponsiveStyles(fullscreen, (fullscreenValue) => ({
+                [`&(.${cssClassNameStretchToFullModalWidth}:first-child)`]: {
+                    borderTopLeftRadius: fullscreenValue ? 0 : borderRadiusMedium,
+                    borderTopRightRadius: fullscreenValue ? 0 : borderRadiusMedium,
+                },
+                [`&(.${cssClassNameStretchToFullModalWidth}:last-child)`]: {
+                    borderBottomLeftRadius: fullscreenValue ? 0 : borderRadiusMedium,
+                    borderBottomRightRadius: fullscreenValue ? 0 : borderRadiusMedium,
                 },
             })))),
-            h2: {
-                ...headingLargeStyle,
-                margin: 0,
-                color: primaryColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: primaryColorDark,
+            slot: {
+                display: 'block',
+                '&:first-of-type': {
+                    gridRowStart: 1,
+                },
+                '&:not([name])': {
+                    gridColumn: '2/3',
+                    zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+                },
+                ...(hasHeader && {
+                    '&[name=header]': {
+                        gridColumn: '2/3',
+                        zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+                    },
                 }),
-            },
-        },
-        'scroll-container': {
-            display: 'flex',
-            inset: 0, // TODO: is this still needed?
-            height: '100%',
-            overflowY: 'inherit',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexWrap: 'wrap',
-        },
-        root: mergeDeep({
-            color: primaryColor, // enables color inheritance for slotted content
-            position: 'relative',
-            boxSizing: 'border-box',
-            transform: isOpen ? 'translateY(0%)' : 'translateY(25%)',
-            opacity: isOpen ? 1 : 0,
-            transition: `${getTransition('opacity', duration, easing)}, ${getTransition('transform', duration, easing)}`,
-            paddingTop: hasDismissButton ? '2rem' : contentPadding, // rem value needed to prevent overlapping of close button and contents in scaling mode
-            ...(!hasFooter && { paddingBottom: contentPadding }),
-            background: backgroundColor,
-            outline: isHighContrastMode ? '1px solid transparent' : 0,
-            // TODO: getFocusJssStyle() can't be re-used atm, but as soon as component is refactored to `<dialog />` then no
-            //  focus should be necessary at all because focus is auto forwarded to dismiss button.
-            // ::after to be above sticky footer without z-index games
-            '&:focus::after': {
-                content: '""',
-                position: 'fixed',
-                border: `${borderWidthBase} solid`,
-                pointerEvents: 'none', // fix text selection in focus state
-                ...buildResponsiveStyles(isFullscreen, (fullscreenValue) => ({
-                    borderRadius: fullscreenValue ? 0 : '12px',
-                    borderColor: fullscreenValue ? primaryColor : darkThemePrimaryColor,
-                    inset: fullscreenValue ? 0 : '-4px',
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: darkThemePrimaryColor,
-                    }),
-                })),
-            },
-            '&:not(:focus-visible)::before': {
-                border: 0,
-            },
-            [mediaQueryXl]: {
-                margin: isFullscreenForXlAndXxl
-                    ? 0
-                    : `var(${cssVariableSpacingTop},${marginTopBottomXlandXxlFallback}) ${gridExtendedOffsetBase} var(${cssVariableSpacingBottom},${marginTopBottomXlandXxlFallback})`,
-            },
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: primaryColorDark,
-                background: backgroundColorDark,
-            }),
-        }, buildResponsiveStyles(isFullscreen, getFullscreenJssStyles) // potentially needs to be merged with mediaQueryXl
-        ),
-        ...(hasHeader && {
-            header: {
-                padding: `0 ${contentPadding} 8px`,
-            },
-        }),
-        content: {
-            ...(hasFooter && {
-                position: 'relative', // to make sure content isn't above sticky footer, but might affect consumer's absolute positioning
-                zIndex: 0,
-            }),
-            padding: `0 ${contentPadding}`,
-        },
-        ...(hasFooter && {
-            footer: {
-                position: 'sticky',
-                background: backgroundColor,
-                padding: contentPadding,
-                bottom: 0,
-                borderBottomLeftRadius: borderRadiusMedium,
-                borderBottomRightRadius: borderRadiusMedium,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: backgroundColorDark,
+                ...(hasFooter && {
+                    '&[name=footer]': {
+                        ...getDialogStickyAreaJssStyle('footer', theme),
+                        gridColumn: '1/-1',
+                        zIndex: 1, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+                    },
                 }),
             },
-            [footerShadowClass]: {
-                boxShadow: `${isThemeDark(theme) ? scrollShadowColorDark : scrollShadowColor} 0 -5px 10px`,
-                clipPath: 'inset(-20px 0 0 0)', // crop leaking box-shadow on left and right side
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    boxShadow: `${scrollShadowColorDark} 0 -5px 10px`,
+            ...(hasHeader && {
+                // TODO: we should either deprecate heading slot + pre-styled headings or implement it in flyout too
+                [`slot[name=heading],${headingTags}`]: {
+                    gridRowStart: 1,
+                    gridColumn: '2/3',
+                    zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+                    ...headingLargeStyle,
+                    margin: 0, // relevant for shadowed h1,h2,h3,…
+                },
+                [`:is(${headingTags}) ~ slot:first-of-type`]: {
+                    gridRowStart: 'auto',
+                },
+                [`::slotted([slot="heading"]:is(${headingTags}))`]: {
+                    margin: 0, // ua-style (relevant for e.g. <h3 slot="heading"/>)
+                },
+            }),
+            dialog: getDialogJssStyle(isOpen, theme, backdrop),
+        },
+        scroller: getScrollerJssStyle('fullscreen', theme),
+        modal: {
+            ...dialogGridJssStyle,
+            ...getDialogColorJssStyle(theme),
+            ...getDialogTransitionJssStyle(isOpen, '^'),
+            // TODO: maybe we should deprecate the fullscreen property and force the modal to be fullscreen on mobile only
+            ...buildResponsiveStyles(fullscreen, (fullscreenValue) => fullscreenValue
+                ? {
+                    width: 'auto',
+                    minWidth: 'auto',
+                    maxWidth: 'none',
+                    placeSelf: 'stretch',
+                    margin: 0,
+                    borderRadius: 0,
+                }
+                : {
+                    width: `var(${cssVariableWidth$1},auto)`,
+                    minWidth: '276px', // to be in sync with "Porsche Grid" on viewport = 320px: calc(${gridColumnWidthBase} * 6 + ${gridGap} * 5)
+                    maxWidth: '1535.5px', // to be in sync with "Porsche Grid" on viewport >= 1920px: `calc(${gridColumnWidthXXL} * 14 + ${gridGap} * 13)`
+                    placeSelf: 'center',
+                    margin: `var(${cssVariableSpacingTop},clamp(16px, 10vh, 192px)) ${gridExtendedOffsetBase} var(${cssVariableSpacingBottom},clamp(16px, 10vh, 192px))`, // horizontal margin is needed to ensure modal is placed on "Porsche Grid" when slotted content is wider than the viewport width
+                    borderRadius: borderRadiusMedium,
                 }),
-            },
-        }),
+        },
         ...(hasDismissButton && {
-            controls: {
-                position: 'absolute',
-                top: '8px',
-                right: '8px',
-                left: '8px',
-                display: 'flex',
-                justifyContent: 'flex-end',
-                zIndex: 1, // To assure controls are on top when using stretchToFullModalWidthClassName and transformed slotted content
-            },
             dismiss: {
-                border: `2px solid ${backgroundColor}`, // needed to enlarge button slightly without affecting the hover area (are equal now).
-                borderRadius: '4px',
-                background: backgroundColor,
-                ...hoverMediaQuery({
-                    '&:hover': {
-                        background: darkThemeContrastHighColor,
-                        borderColor: darkThemeContrastHighColor,
-                    },
-                }),
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: backgroundColorDark,
-                    borderColor: backgroundColorDark,
-                }),
+                ...getDismissButtonJssStyle(theme, isOpen),
+                gridArea: '1/3',
+                zIndex: 2, // ensures dismiss button is above sticky footer, header and content
+                position: 'sticky',
+                insetBlockStart: spacingFluidSmall,
+                marginBlockStart: `calc(${spacingFluidMedium} * -1)`,
+                marginInlineEnd: spacingFluidSmall,
+                justifySelf: 'flex-end',
             },
         }),
     });
@@ -10285,12 +10402,13 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-exports.getAccordionCss = getComponentCss$15;
-exports.getBannerCss = getComponentCss$14;
-exports.getButtonCss = getComponentCss$10;
-exports.getButtonGroupCss = getComponentCss$13;
-exports.getButtonPureCss = getComponentCss$12;
-exports.getButtonTileCss = getComponentCss$11;
+exports.getAccordionCss = getComponentCss$16;
+exports.getBannerCss = getComponentCss$15;
+exports.getButtonCss = getComponentCss$11;
+exports.getButtonGroupCss = getComponentCss$14;
+exports.getButtonPureCss = getComponentCss$13;
+exports.getButtonTileCss = getComponentCss$12;
+exports.getCanvasCss = getComponentCss$10;
 exports.getCarouselCss = getComponentCss$$;
 exports.getCheckboxWrapperCss = getComponentCss$_;
 exports.getContentWrapperCss = getComponentCss$Z;