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

package/CHANGELOG.md

@@ -14,6 +14,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.2.0-rc.0] - 2026-05-12
+
+### Added
+
+- `AG Grid`:
+  - custom compact theme ([#4301](https://github.com/porsche-design-system/porsche-design-system/pull/4301))
+  - minor style adjustments ([#4301](https://github.com/porsche-design-system/porsche-design-system/pull/4301))
+
+## [4.1.0] - 2026-05-06
+
 ## [4.1.0-rc.0] - 2026-05-05
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "4.1.0-rc.0",
+  "version": "4.2.0-rc.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -21,7 +21,7 @@
     "url": "https://github.com/porsche-design-system/porsche-design-system"
   },
   "dependencies": {
-    "@porsche-design-system/components-js": "4.1.0-rc.0"
+    "@porsche-design-system/components-js": "4.2.0-rc.0"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 35.0.0 <36.0.0",

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

@@ -3775,7 +3775,7 @@ const OPTION_LIST_SAFE_ZONE = 6;
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const prefix = `[Porsche Design System v${"4.1.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -5879,6 +5879,211 @@ const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact)
         ...getFunctionalComponentLoadingMessageStyles(),
     });
 };
+const cssVarBackgroundColor = '--_p-dialog-a';
+const dialogHostJssStyle = (background) => {
+    return {
+        '--pds-internal-grid-outer-column': `calc(${spacingFluidLg} - ${gridGap})`,
+        '--pds-internal-grid-margin': `calc(${spacingFluidLg} * -1)`,
+        '--pds-internal-grid-width-min': 'auto',
+        '--pds-internal-grid-width-max': 'none',
+        [cssVarBackgroundColor]: background === 'surface' ? colorSurface : colorCanvas,
+    };
+};
+const getFunctionalComponentDialogBaseStyles = (isVisible, backdrop = 'blur') => {
+    return {
+        dialog: {
+            ...dialogBackdropResetJssStyle,
+            ...getDialogBackdropTransitionJssStyle(isVisible, 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, backdrop = 'blur') => {
+    const isBackdropBlur = backdrop === 'blur';
+    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: colorBackdrop,
+                ...(isBackdropBlur && {
+                    WebkitBackdropFilter: blurFrosted,
+                    backdropFilter: blurFrosted,
+                }),
+            }
+            : {
+                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) => {
+    // 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',
+        isolation: 'isolate', // creates new stacking context to show scrollbars on top of header/footer areas (on iOS/iPadOS)
+        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.light,
+    };
+};
+const dialogBorderRadius = `var(${legacyRadiusLarge}, ${radiusXl})`;
+const dialogPaddingTop = spacingFluidMd$1;
+const dialogPaddingBottom = `calc(${spacingFluidSm} + ${spacingFluidMd$1})`;
+const dialogPaddingInline = spacingFluidLg;
+const dialogGridJssStyle = () => {
+    return {
+        position: 'relative',
+        display: 'grid',
+        gridTemplate: `auto/${spacingFluidSm} minmax(0,1fr) ${spacingFluidSm}`,
+        gap: `${spacingFluidMd$1} calc(${spacingFluidLg} - ${spacingFluidSm})`,
+        paddingTop: dialogPaddingTop,
+        paddingBottom: dialogPaddingBottom,
+        alignContent: 'flex-start',
+    };
+};
+const getDialogColorJssStyle = () => {
+    return {
+        color: colorPrimary, // enables color inheritance for slots
+        background: `var(${cssVarBackgroundColor})`,
+    };
+};
+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 getDialogDismissButtonJssStyle = () => {
+    return {
+        gridArea: '1/3',
+        zIndex: 5, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+        position: 'sticky',
+        top: spacingFluidSm,
+        marginTop: `calc(-1 * ${dialogPaddingTop} + ${spacingFluidSm})`,
+        marginInlineEnd: spacingFluidSm,
+        placeSelf: 'flex-start flex-end',
+        boxShadow: `0px 0px 30px hsla(from var(${cssVarBackgroundColor}) h s l / 0.35)`,
+    };
+};
+const getSlotJssStyle = () => {
+    return {
+        display: 'block',
+        '&:first-of-type': {
+            gridRowStart: 1,
+        },
+    };
+};
+const getSlotHeaderJssStyle = () => {
+    const paddingTop = dialogPaddingTop;
+    const paddingBottom = spacingStaticMd;
+    return {
+        gridColumn: '1/-1',
+        zIndex: 1, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+        position: 'sticky',
+        top: 0, // 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.
+        marginBlock: `calc(-1 * ${paddingTop}) calc(-1 * ${paddingBottom})`,
+        padding: `${paddingTop} ${dialogPaddingInline} ${paddingBottom}`,
+        background: `linear-gradient(180deg,var(${cssVarBackgroundColor}) 0%,var(${cssVarBackgroundColor}) 80%,transparent 100%)`,
+    };
+};
+const getSlotMainJssStyle = () => {
+    return {
+        gridColumn: '2/3',
+        zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+    };
+};
+const getSlotFooterJssStyle = () => {
+    const paddingBlock = `calc(${dialogPaddingBottom} - ${dialogBorderRadius})`;
+    const offset = `calc(${paddingBlock} / 2)`;
+    return {
+        gridColumn: '1/-1',
+        zIndex: 2, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+        position: 'sticky',
+        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.
+        marginBlock: `calc(-1 * ${paddingBlock})`,
+        padding: `${paddingBlock} ${dialogPaddingInline}`,
+        background: `linear-gradient(0deg,var(${cssVarBackgroundColor}) 0%,var(${cssVarBackgroundColor}) 20%,transparent 80%)`,
+        '&[data-stuck]::after': {
+            content: '""',
+            zIndex: -1,
+            position: 'absolute',
+            inset: `calc(${paddingBlock} - ${offset}) calc(${dialogPaddingInline} - ${offset})`,
+            background: colorFrosted,
+            borderRadius: radius3Xl,
+            WebkitBackdropFilter: blurFrosted,
+            backdropFilter: blurFrosted,
+        },
+    };
+};
+const getSlotSubFooterJssStyle = () => {
+    return {
+        gridColumn: '1/-1',
+        zIndex: 3, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+        paddingInline: dialogPaddingInline,
+        backgroundColor: `var(${cssVarBackgroundColor})`,
+    };
+};
 
 /**
  * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
@@ -6898,210 +7103,6 @@ const getComponentCss$W = (size) => {
     });
 };
 
-const cssVarBackgroundColor = '--_p-dialog-a';
-const dialogHostJssStyle = (background) => {
-    return {
-        '--pds-internal-grid-outer-column': `calc(${spacingFluidLg} - ${gridGap})`,
-        '--pds-internal-grid-margin': `calc(${spacingFluidLg} * -1)`,
-        '--pds-internal-grid-width-min': 'auto',
-        '--pds-internal-grid-width-max': 'none',
-        [cssVarBackgroundColor]: background === 'surface' ? colorSurface : colorCanvas,
-    };
-};
-const getDialogJssStyle = (isVisible, backdrop = 'blur') => {
-    return {
-        ...dialogBackdropResetJssStyle,
-        ...getDialogBackdropTransitionJssStyle(isVisible, 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, backdrop = 'blur') => {
-    const isBackdropBlur = backdrop === 'blur';
-    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: colorBackdrop,
-                ...(isBackdropBlur && {
-                    WebkitBackdropFilter: blurFrosted,
-                    backdropFilter: blurFrosted,
-                }),
-            }
-            : {
-                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) => {
-    // 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',
-        isolation: 'isolate', // creates new stacking context to show scrollbars on top of header/footer areas (on iOS/iPadOS)
-        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.light,
-    };
-};
-const dialogBorderRadius = `var(${legacyRadiusLarge}, ${radiusXl})`;
-const dialogPaddingTop = spacingFluidMd$1;
-const dialogPaddingBottom = `calc(${spacingFluidSm} + ${spacingFluidMd$1})`;
-const dialogPaddingInline = spacingFluidLg;
-const dialogGridJssStyle = () => {
-    return {
-        position: 'relative',
-        display: 'grid',
-        gridTemplate: `auto/${spacingFluidSm} minmax(0,1fr) ${spacingFluidSm}`,
-        gap: `${spacingFluidMd$1} calc(${spacingFluidLg} - ${spacingFluidSm})`,
-        paddingTop: dialogPaddingTop,
-        paddingBottom: dialogPaddingBottom,
-        alignContent: 'flex-start',
-    };
-};
-const getDialogColorJssStyle = () => {
-    return {
-        color: colorPrimary, // enables color inheritance for slots
-        background: `var(${cssVarBackgroundColor})`,
-    };
-};
-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 getDialogDismissButtonJssStyle = () => {
-    return {
-        gridArea: '1/3',
-        zIndex: 5, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-        position: 'sticky',
-        top: spacingFluidSm,
-        marginTop: `calc(-1 * ${dialogPaddingTop} + ${spacingFluidSm})`,
-        marginInlineEnd: spacingFluidSm,
-        placeSelf: 'flex-start flex-end',
-        boxShadow: `0px 0px 30px hsla(from var(${cssVarBackgroundColor}) h s l / 0.35)`
-    };
-};
-const getSlotJssStyle = () => {
-    return {
-        display: 'block',
-        '&:first-of-type': {
-            gridRowStart: 1,
-        },
-    };
-};
-const getSlotHeaderJssStyle = () => {
-    const paddingTop = dialogPaddingTop;
-    const paddingBottom = spacingStaticMd;
-    return {
-        gridColumn: '1/-1',
-        zIndex: 1, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-        position: 'sticky',
-        top: 0, // 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.
-        marginBlock: `calc(-1 * ${paddingTop}) calc(-1 * ${paddingBottom})`,
-        padding: `${paddingTop} ${dialogPaddingInline} ${paddingBottom}`,
-        background: `linear-gradient(180deg,var(${cssVarBackgroundColor}) 0%,var(${cssVarBackgroundColor}) 80%,transparent 100%)`,
-    };
-};
-const getSlotMainJssStyle = () => {
-    return {
-        gridColumn: '2/3',
-        zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-    };
-};
-const getSlotFooterJssStyle = () => {
-    const paddingBlock = `calc(${dialogPaddingBottom} - ${dialogBorderRadius})`;
-    const offset = `calc(${paddingBlock} / 2)`;
-    return {
-        gridColumn: '1/-1',
-        zIndex: 2, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-        position: 'sticky',
-        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.
-        marginBlock: `calc(-1 * ${paddingBlock})`,
-        padding: `${paddingBlock} ${dialogPaddingInline}`,
-        background: `linear-gradient(0deg,var(${cssVarBackgroundColor}) 0%,var(${cssVarBackgroundColor}) 20%,transparent 80%)`,
-        '&[data-stuck]::after': {
-            content: '""',
-            zIndex: -1,
-            position: 'absolute',
-            inset: `calc(${paddingBlock} - ${offset}) calc(${dialogPaddingInline} - ${offset})`,
-            background: colorFrosted,
-            borderRadius: radius3Xl,
-            WebkitBackdropFilter: blurFrosted,
-            backdropFilter: blurFrosted,
-        },
-    };
-};
-const getSlotSubFooterJssStyle = () => {
-    return {
-        gridColumn: '1/-1',
-        zIndex: 3, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-        paddingInline: dialogPaddingInline,
-        backgroundColor: `var(${cssVarBackgroundColor})`,
-    };
-};
-
 /**
  * @css-variable {"name": "--p-flyout-width", "description": "Width of the flyout.", "defaultValue": "auto"}
  */
@@ -7156,7 +7157,7 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                     '&[name=sub-footer]': getSlotSubFooterJssStyle(),
                 }),
             },
-            dialog: getDialogJssStyle(isOpen, backdrop),
+            ...getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
         },
         scroller: {
             ...getScrollerJssStyle(isPositionStart ? 'start' : 'end'),
@@ -7978,7 +7979,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     '&[name=footer]': getSlotFooterJssStyle(),
                 }),
             },
-            dialog: getDialogJssStyle(isOpen, backdrop),
+            ...getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
         },
         scroller: getScrollerJssStyle('fullscreen'),
         modal: {
@@ -9047,7 +9048,7 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
                     zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
                 },
             },
-            dialog: getDialogJssStyle(isOpen, 'shading'),
+            ...getFunctionalComponentDialogBaseStyles(isOpen, 'shading'),
         },
         scroller: getScrollerJssStyle('fullscreen'),
         sheet: {
@@ -10258,6 +10259,12 @@ const getComponentCss = (size) => {
 exports.cssVarButtonPureMargin = cssVarButtonPureMargin;
 exports.cssVarButtonPurePadding = cssVarButtonPurePadding;
 exports.cssVarInternalInputBaseScaling = cssVarInternalInputBaseScaling;
+exports.dialogBorderRadius = dialogBorderRadius;
+exports.dialogGridJssStyle = dialogGridJssStyle;
+exports.dialogHostJssStyle = dialogHostJssStyle;
+exports.dialogPaddingBottom = dialogPaddingBottom;
+exports.dialogPaddingInline = dialogPaddingInline;
+exports.dialogPaddingTop = dialogPaddingTop;
 exports.getAccordionCss = getComponentCss$19;
 exports.getBannerCss = getComponentCss$18;
 exports.getButtonCss = getComponentCss$15;
@@ -10267,6 +10274,9 @@ exports.getCanvasCss = getComponentCss$14;
 exports.getCarouselCss = getComponentCss$13;
 exports.getCheckboxCss = getComponentCss$12;
 exports.getCrestCss = getComponentCss$11;
+exports.getDialogColorJssStyle = getDialogColorJssStyle;
+exports.getDialogDismissButtonJssStyle = getDialogDismissButtonJssStyle;
+exports.getDialogTransitionJssStyle = getDialogTransitionJssStyle;
 exports.getDisplayCss = getComponentCss$10;
 exports.getDividerCss = getComponentCss$$;
 exports.getDrilldownCss = getComponentCss$_;
@@ -10275,6 +10285,7 @@ exports.getDrilldownLinkCss = getComponentCss$Y;
 exports.getFieldsetCss = getComponentCss$X;
 exports.getFlagCss = getComponentCss$W;
 exports.getFlyoutCss = getComponentCss$V;
+exports.getFunctionalComponentDialogBaseStyles = getFunctionalComponentDialogBaseStyles;
 exports.getFunctionalComponentInputBaseStyles = getFunctionalComponentInputBaseStyles;
 exports.getFunctionalComponentLabelAfterStyles = getFunctionalComponentLabelAfterStyles;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
@@ -10312,11 +10323,17 @@ exports.getPopoverCss = getComponentCss$v;
 exports.getRadioGroupCss = getComponentCss$t;
 exports.getRadioGroupOptionCss = getComponentCss$u;
 exports.getScrollerCss = getComponentCss$s;
+exports.getScrollerJssStyle = getScrollerJssStyle;
 exports.getSegmentedControlCss = getComponentCss$q;
 exports.getSegmentedControlItemCss = getComponentCss$r;
 exports.getSelectCss = getComponentCss$o;
 exports.getSelectOptionCss = getComponentCss$p;
 exports.getSheetCss = getComponentCss$n;
+exports.getSlotFooterJssStyle = getSlotFooterJssStyle;
+exports.getSlotHeaderJssStyle = getSlotHeaderJssStyle;
+exports.getSlotJssStyle = getSlotJssStyle;
+exports.getSlotMainJssStyle = getSlotMainJssStyle;
+exports.getSlotSubFooterJssStyle = getSlotSubFooterJssStyle;
 exports.getSpinnerCss = getComponentCss$m;
 exports.getStepperHorizontalCss = getComponentCss$k;
 exports.getStepperHorizontalItemCss = getComponentCss$l;

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

@@ -3454,7 +3454,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"4.1.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/dialog-base.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+require('../../provider.cjs');
+var button_wrapper = require('../components/button.wrapper.cjs');
+
+const DialogBase = ({ children, 
+// host,
+inert, containerClass, ariaAttributes, dismissable = false, header, footer, subFooter, }) => {
+    return (jsxRuntime.jsx("dialog", { inert: inert, tabIndex: -1, ...(ariaAttributes ?? {}), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: containerClass, children: [dismissable && (jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss", variant: "secondary", compact: true, type: "button", hideLabel: true, icon: "close", children: `Dismiss ${containerClass}` })), header, children, footer, subFooter] }) }) }));
+};
+
+exports.DialogBase = DialogBase;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/flyout.cjs

@@ -1,13 +1,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
-var button_wrapper = require('../components/button.wrapper.cjs');
+var dialogBase = require('./dialog-base.cjs');
 
 /**
  * @slot {"name": "header", "description": "Renders a sticky header section above the content area." }
@@ -32,11 +31,11 @@ class DSRFlyout extends react.Component {
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
         const style = minifyCss.minifyCss(stylesEntry.getFlyoutCss(this.props.open, this.props.background, this.props.backdrop, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("dialog", { tabIndex: -1, ...utilsEntry.parseAndGetAriaAttributes({
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(dialogBase.DialogBase, { host: null, dismissable: true, containerClass: "flyout", header: hasHeader ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsxRuntime.jsx("slot", { name: "footer" }) : undefined, subFooter: hasSubFooter ? jsxRuntime.jsx("slot", { name: "sub-footer" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...{ 'aria-label': hasHeader ? namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children : 'Flyout' },
                                 ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                            }), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: "flyout", children: [jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss", variant: "secondary", compact: true, type: "button", hideLabel: true, icon: "close", children: "Dismiss flyout" }), hasHeader && jsxRuntime.jsx("slot", { name: "header" }), jsxRuntime.jsx("slot", {}), hasFooter && jsxRuntime.jsx("slot", { name: "footer" }), hasSubFooter && jsxRuntime.jsx("slot", { name: "sub-footer" })] }) }) })] }), this.props.children] }));
+                            }), children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/modal.cjs

@@ -1,13 +1,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
-var button_wrapper = require('../components/button.wrapper.cjs');
+var dialogBase = require('./dialog-base.cjs');
 
 /**
  * @slot {"name": "header", "description": "Renders a header section above the content area." }
@@ -30,11 +29,11 @@ class DSRModal extends react.Component {
         this.props.disableCloseButton ? false : this.props.dismissButton;
         // TODO: why do we validate only when opened?
         const style = minifyCss.minifyCss(stylesEntry.getModalCss(this.props.open, this.props.background, this.props.backdrop, this.props.fullscreen, this.props.dismissButton, hasHeader, hasFooter));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("dialog", { inert: !this.props.open, tabIndex: -1, ...utilsEntry.parseAndGetAriaAttributes({
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(dialogBase.DialogBase, { host: null, inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "modal", header: hasHeader ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsxRuntime.jsx("slot", { name: "footer" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...(hasHeader && { 'aria-label': this.props.ariaLabel }),
                                 ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                            }), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: "modal", children: [this.props.dismissButton && (jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss", variant: "secondary", compact: true, type: "button", hideLabel: true, icon: "close", children: "Dismiss modal" })), hasHeader && jsxRuntime.jsx("slot", { name: "header" }), jsxRuntime.jsx("slot", {}), hasFooter && jsxRuntime.jsx("slot", { name: "footer" })] }) }) })] }), this.props.children] }));
+                            }), children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/sheet.cjs

@@ -1,13 +1,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
-var button_wrapper = require('../components/button.wrapper.cjs');
+var dialogBase = require('./dialog-base.cjs');
 
 /**
  * @slot {"name": "header", "description": "Renders a header section above the content area." }
@@ -25,13 +24,13 @@ class DSRSheet extends react.Component {
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         if (this.props.open) ;
         const style = minifyCss.minifyCss(stylesEntry.getSheetCss(this.props.open, this.props.background, this.props.dismissButton));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("dialog", { inert: !this.props.open, tabIndex: -1, ...utilsEntry.parseAndGetAriaAttributes({
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(dialogBase.DialogBase, { host: null, inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "sheet", header: hasHeader ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...(hasHeader && {
                                     'aria-label': namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0 && namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children,
                                 }),
                                 ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                            }), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: "sheet", children: [this.props.dismissButton && (jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss", variant: "secondary", compact: true, type: "button", hideLabel: true, icon: "close", children: "Dismiss sheet" })), hasHeader && jsxRuntime.jsx("slot", { name: "header" }), jsxRuntime.jsx("slot", {})] }) }) })] }), this.props.children] }));
+                            }), children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }
 }
 

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

@@ -3773,7 +3773,7 @@ const OPTION_LIST_SAFE_ZONE = 6;
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const prefix = `[Porsche Design System v${"4.1.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -5877,6 +5877,211 @@ const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact)
         ...getFunctionalComponentLoadingMessageStyles(),
     });
 };
+const cssVarBackgroundColor = '--_p-dialog-a';
+const dialogHostJssStyle = (background) => {
+    return {
+        '--pds-internal-grid-outer-column': `calc(${spacingFluidLg} - ${gridGap})`,
+        '--pds-internal-grid-margin': `calc(${spacingFluidLg} * -1)`,
+        '--pds-internal-grid-width-min': 'auto',
+        '--pds-internal-grid-width-max': 'none',
+        [cssVarBackgroundColor]: background === 'surface' ? colorSurface : colorCanvas,
+    };
+};
+const getFunctionalComponentDialogBaseStyles = (isVisible, backdrop = 'blur') => {
+    return {
+        dialog: {
+            ...dialogBackdropResetJssStyle,
+            ...getDialogBackdropTransitionJssStyle(isVisible, 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, backdrop = 'blur') => {
+    const isBackdropBlur = backdrop === 'blur';
+    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: colorBackdrop,
+                ...(isBackdropBlur && {
+                    WebkitBackdropFilter: blurFrosted,
+                    backdropFilter: blurFrosted,
+                }),
+            }
+            : {
+                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) => {
+    // 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',
+        isolation: 'isolate', // creates new stacking context to show scrollbars on top of header/footer areas (on iOS/iPadOS)
+        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.light,
+    };
+};
+const dialogBorderRadius = `var(${legacyRadiusLarge}, ${radiusXl})`;
+const dialogPaddingTop = spacingFluidMd$1;
+const dialogPaddingBottom = `calc(${spacingFluidSm} + ${spacingFluidMd$1})`;
+const dialogPaddingInline = spacingFluidLg;
+const dialogGridJssStyle = () => {
+    return {
+        position: 'relative',
+        display: 'grid',
+        gridTemplate: `auto/${spacingFluidSm} minmax(0,1fr) ${spacingFluidSm}`,
+        gap: `${spacingFluidMd$1} calc(${spacingFluidLg} - ${spacingFluidSm})`,
+        paddingTop: dialogPaddingTop,
+        paddingBottom: dialogPaddingBottom,
+        alignContent: 'flex-start',
+    };
+};
+const getDialogColorJssStyle = () => {
+    return {
+        color: colorPrimary, // enables color inheritance for slots
+        background: `var(${cssVarBackgroundColor})`,
+    };
+};
+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 getDialogDismissButtonJssStyle = () => {
+    return {
+        gridArea: '1/3',
+        zIndex: 5, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+        position: 'sticky',
+        top: spacingFluidSm,
+        marginTop: `calc(-1 * ${dialogPaddingTop} + ${spacingFluidSm})`,
+        marginInlineEnd: spacingFluidSm,
+        placeSelf: 'flex-start flex-end',
+        boxShadow: `0px 0px 30px hsla(from var(${cssVarBackgroundColor}) h s l / 0.35)`,
+    };
+};
+const getSlotJssStyle = () => {
+    return {
+        display: 'block',
+        '&:first-of-type': {
+            gridRowStart: 1,
+        },
+    };
+};
+const getSlotHeaderJssStyle = () => {
+    const paddingTop = dialogPaddingTop;
+    const paddingBottom = spacingStaticMd;
+    return {
+        gridColumn: '1/-1',
+        zIndex: 1, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+        position: 'sticky',
+        top: 0, // 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.
+        marginBlock: `calc(-1 * ${paddingTop}) calc(-1 * ${paddingBottom})`,
+        padding: `${paddingTop} ${dialogPaddingInline} ${paddingBottom}`,
+        background: `linear-gradient(180deg,var(${cssVarBackgroundColor}) 0%,var(${cssVarBackgroundColor}) 80%,transparent 100%)`,
+    };
+};
+const getSlotMainJssStyle = () => {
+    return {
+        gridColumn: '2/3',
+        zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+    };
+};
+const getSlotFooterJssStyle = () => {
+    const paddingBlock = `calc(${dialogPaddingBottom} - ${dialogBorderRadius})`;
+    const offset = `calc(${paddingBlock} / 2)`;
+    return {
+        gridColumn: '1/-1',
+        zIndex: 2, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+        position: 'sticky',
+        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.
+        marginBlock: `calc(-1 * ${paddingBlock})`,
+        padding: `${paddingBlock} ${dialogPaddingInline}`,
+        background: `linear-gradient(0deg,var(${cssVarBackgroundColor}) 0%,var(${cssVarBackgroundColor}) 20%,transparent 80%)`,
+        '&[data-stuck]::after': {
+            content: '""',
+            zIndex: -1,
+            position: 'absolute',
+            inset: `calc(${paddingBlock} - ${offset}) calc(${dialogPaddingInline} - ${offset})`,
+            background: colorFrosted,
+            borderRadius: radius3Xl,
+            WebkitBackdropFilter: blurFrosted,
+            backdropFilter: blurFrosted,
+        },
+    };
+};
+const getSlotSubFooterJssStyle = () => {
+    return {
+        gridColumn: '1/-1',
+        zIndex: 3, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+        paddingInline: dialogPaddingInline,
+        backgroundColor: `var(${cssVarBackgroundColor})`,
+    };
+};
 
 /**
  * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
@@ -6896,210 +7101,6 @@ const getComponentCss$W = (size) => {
     });
 };
 
-const cssVarBackgroundColor = '--_p-dialog-a';
-const dialogHostJssStyle = (background) => {
-    return {
-        '--pds-internal-grid-outer-column': `calc(${spacingFluidLg} - ${gridGap})`,
-        '--pds-internal-grid-margin': `calc(${spacingFluidLg} * -1)`,
-        '--pds-internal-grid-width-min': 'auto',
-        '--pds-internal-grid-width-max': 'none',
-        [cssVarBackgroundColor]: background === 'surface' ? colorSurface : colorCanvas,
-    };
-};
-const getDialogJssStyle = (isVisible, backdrop = 'blur') => {
-    return {
-        ...dialogBackdropResetJssStyle,
-        ...getDialogBackdropTransitionJssStyle(isVisible, 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, backdrop = 'blur') => {
-    const isBackdropBlur = backdrop === 'blur';
-    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: colorBackdrop,
-                ...(isBackdropBlur && {
-                    WebkitBackdropFilter: blurFrosted,
-                    backdropFilter: blurFrosted,
-                }),
-            }
-            : {
-                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) => {
-    // 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',
-        isolation: 'isolate', // creates new stacking context to show scrollbars on top of header/footer areas (on iOS/iPadOS)
-        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.light,
-    };
-};
-const dialogBorderRadius = `var(${legacyRadiusLarge}, ${radiusXl})`;
-const dialogPaddingTop = spacingFluidMd$1;
-const dialogPaddingBottom = `calc(${spacingFluidSm} + ${spacingFluidMd$1})`;
-const dialogPaddingInline = spacingFluidLg;
-const dialogGridJssStyle = () => {
-    return {
-        position: 'relative',
-        display: 'grid',
-        gridTemplate: `auto/${spacingFluidSm} minmax(0,1fr) ${spacingFluidSm}`,
-        gap: `${spacingFluidMd$1} calc(${spacingFluidLg} - ${spacingFluidSm})`,
-        paddingTop: dialogPaddingTop,
-        paddingBottom: dialogPaddingBottom,
-        alignContent: 'flex-start',
-    };
-};
-const getDialogColorJssStyle = () => {
-    return {
-        color: colorPrimary, // enables color inheritance for slots
-        background: `var(${cssVarBackgroundColor})`,
-    };
-};
-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 getDialogDismissButtonJssStyle = () => {
-    return {
-        gridArea: '1/3',
-        zIndex: 5, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-        position: 'sticky',
-        top: spacingFluidSm,
-        marginTop: `calc(-1 * ${dialogPaddingTop} + ${spacingFluidSm})`,
-        marginInlineEnd: spacingFluidSm,
-        placeSelf: 'flex-start flex-end',
-        boxShadow: `0px 0px 30px hsla(from var(${cssVarBackgroundColor}) h s l / 0.35)`
-    };
-};
-const getSlotJssStyle = () => {
-    return {
-        display: 'block',
-        '&:first-of-type': {
-            gridRowStart: 1,
-        },
-    };
-};
-const getSlotHeaderJssStyle = () => {
-    const paddingTop = dialogPaddingTop;
-    const paddingBottom = spacingStaticMd;
-    return {
-        gridColumn: '1/-1',
-        zIndex: 1, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-        position: 'sticky',
-        top: 0, // 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.
-        marginBlock: `calc(-1 * ${paddingTop}) calc(-1 * ${paddingBottom})`,
-        padding: `${paddingTop} ${dialogPaddingInline} ${paddingBottom}`,
-        background: `linear-gradient(180deg,var(${cssVarBackgroundColor}) 0%,var(${cssVarBackgroundColor}) 80%,transparent 100%)`,
-    };
-};
-const getSlotMainJssStyle = () => {
-    return {
-        gridColumn: '2/3',
-        zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-    };
-};
-const getSlotFooterJssStyle = () => {
-    const paddingBlock = `calc(${dialogPaddingBottom} - ${dialogBorderRadius})`;
-    const offset = `calc(${paddingBlock} / 2)`;
-    return {
-        gridColumn: '1/-1',
-        zIndex: 2, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-        position: 'sticky',
-        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.
-        marginBlock: `calc(-1 * ${paddingBlock})`,
-        padding: `${paddingBlock} ${dialogPaddingInline}`,
-        background: `linear-gradient(0deg,var(${cssVarBackgroundColor}) 0%,var(${cssVarBackgroundColor}) 20%,transparent 80%)`,
-        '&[data-stuck]::after': {
-            content: '""',
-            zIndex: -1,
-            position: 'absolute',
-            inset: `calc(${paddingBlock} - ${offset}) calc(${dialogPaddingInline} - ${offset})`,
-            background: colorFrosted,
-            borderRadius: radius3Xl,
-            WebkitBackdropFilter: blurFrosted,
-            backdropFilter: blurFrosted,
-        },
-    };
-};
-const getSlotSubFooterJssStyle = () => {
-    return {
-        gridColumn: '1/-1',
-        zIndex: 3, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-        paddingInline: dialogPaddingInline,
-        backgroundColor: `var(${cssVarBackgroundColor})`,
-    };
-};
-
 /**
  * @css-variable {"name": "--p-flyout-width", "description": "Width of the flyout.", "defaultValue": "auto"}
  */
@@ -7154,7 +7155,7 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                     '&[name=sub-footer]': getSlotSubFooterJssStyle(),
                 }),
             },
-            dialog: getDialogJssStyle(isOpen, backdrop),
+            ...getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
         },
         scroller: {
             ...getScrollerJssStyle(isPositionStart ? 'start' : 'end'),
@@ -7976,7 +7977,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     '&[name=footer]': getSlotFooterJssStyle(),
                 }),
             },
-            dialog: getDialogJssStyle(isOpen, backdrop),
+            ...getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
         },
         scroller: getScrollerJssStyle('fullscreen'),
         modal: {
@@ -9045,7 +9046,7 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
                     zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
                 },
             },
-            dialog: getDialogJssStyle(isOpen, 'shading'),
+            ...getFunctionalComponentDialogBaseStyles(isOpen, 'shading'),
         },
         scroller: getScrollerJssStyle('fullscreen'),
         sheet: {
@@ -10253,4 +10254,4 @@ const getComponentCss = (size) => {
     });
 };
 
-export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$19 as getAccordionCss, getComponentCss$18 as getBannerCss, getComponentCss$15 as getButtonCss, getComponentCss$17 as getButtonPureCss, getComponentCss$16 as getButtonTileCss, getComponentCss$14 as getCanvasCss, getComponentCss$13 as getCarouselCss, getComponentCss$12 as getCheckboxCss, getComponentCss$11 as getCrestCss, getComponentCss$10 as getDisplayCss, getComponentCss$$ as getDividerCss, getComponentCss$_ as getDrilldownCss, getComponentCss$Z as getDrilldownItemCss, getComponentCss$Y as getDrilldownLinkCss, getComponentCss$X as getFieldsetCss, getComponentCss$W as getFlagCss, getComponentCss$V as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelAfterStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentNotificationBaseStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$U as getHeadingCss, getComponentCss$T as getIconCss, getComponentCss$S as getInlineNotificationCss, getComponentCss$R as getInputDateCss, getComponentCss$Q as getInputEmailCss, getComponentCss$P as getInputMonthCss, getComponentCss$O as getInputNumberCss, getComponentCss$N as getInputPasswordCss, getComponentCss$M as getInputSearchCss, getComponentCss$L as getInputTelCss, getComponentCss$K as getInputTextCss, getComponentCss$J as getInputTimeCss, getComponentCss$I as getInputUrlCss, getComponentCss$H as getInputWeekCss, getComponentCss$D as getLinkCss, getComponentCss$G as getLinkPureCss, getComponentCss$E as getLinkTileCss, getComponentCss$F as getLinkTileProductCss, getComponentCss$C as getModalCss, getComponentCss$B as getModelSignatureCss, getComponentCss$y as getMultiSelectCss, getComponentCss$A as getMultiSelectOptionCss, getComponentCss$z as getOptgroupCss, getComponentCss$x as getPaginationCss, getComponentCss$w as getPinCodeCss, getComponentCss$v as getPopoverCss, getComponentCss$t as getRadioGroupCss, getComponentCss$u as getRadioGroupOptionCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectCss, getComponentCss$p as getSelectOptionCss, getComponentCss$n as getSheetCss, getComponentCss$m as getSpinnerCss, getComponentCss$k as getStepperHorizontalCss, getComponentCss$l as getStepperHorizontalItemCss, getComponentCss$j as getSwitchCss, getComponentCss$i as getTableBodyCss, getComponentCss$g as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$f as getTableHeadCellCss, getComponentCss$d as getTableHeadCss, getComponentCss$e as getTableHeadRowCss, getComponentCss$c as getTableRowCss, getComponentCss$b as getTabsBarCss, getComponentCss$9 as getTabsCss, getComponentCss$a as getTabsItemCss, getComponentCss$7 as getTagCss, getComponentCss$8 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, dialogBorderRadius, dialogGridJssStyle, dialogHostJssStyle, dialogPaddingBottom, dialogPaddingInline, dialogPaddingTop, getComponentCss$19 as getAccordionCss, getComponentCss$18 as getBannerCss, getComponentCss$15 as getButtonCss, getComponentCss$17 as getButtonPureCss, getComponentCss$16 as getButtonTileCss, getComponentCss$14 as getCanvasCss, getComponentCss$13 as getCarouselCss, getComponentCss$12 as getCheckboxCss, getComponentCss$11 as getCrestCss, getDialogColorJssStyle, getDialogDismissButtonJssStyle, getDialogTransitionJssStyle, getComponentCss$10 as getDisplayCss, getComponentCss$$ as getDividerCss, getComponentCss$_ as getDrilldownCss, getComponentCss$Z as getDrilldownItemCss, getComponentCss$Y as getDrilldownLinkCss, getComponentCss$X as getFieldsetCss, getComponentCss$W as getFlagCss, getComponentCss$V as getFlyoutCss, getFunctionalComponentDialogBaseStyles, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelAfterStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentNotificationBaseStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$U as getHeadingCss, getComponentCss$T as getIconCss, getComponentCss$S as getInlineNotificationCss, getComponentCss$R as getInputDateCss, getComponentCss$Q as getInputEmailCss, getComponentCss$P as getInputMonthCss, getComponentCss$O as getInputNumberCss, getComponentCss$N as getInputPasswordCss, getComponentCss$M as getInputSearchCss, getComponentCss$L as getInputTelCss, getComponentCss$K as getInputTextCss, getComponentCss$J as getInputTimeCss, getComponentCss$I as getInputUrlCss, getComponentCss$H as getInputWeekCss, getComponentCss$D as getLinkCss, getComponentCss$G as getLinkPureCss, getComponentCss$E as getLinkTileCss, getComponentCss$F as getLinkTileProductCss, getComponentCss$C as getModalCss, getComponentCss$B as getModelSignatureCss, getComponentCss$y as getMultiSelectCss, getComponentCss$A as getMultiSelectOptionCss, getComponentCss$z as getOptgroupCss, getComponentCss$x as getPaginationCss, getComponentCss$w as getPinCodeCss, getComponentCss$v as getPopoverCss, getComponentCss$t as getRadioGroupCss, getComponentCss$u as getRadioGroupOptionCss, getComponentCss$s as getScrollerCss, getScrollerJssStyle, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectCss, getComponentCss$p as getSelectOptionCss, getComponentCss$n as getSheetCss, getSlotFooterJssStyle, getSlotHeaderJssStyle, getSlotJssStyle, getSlotMainJssStyle, getSlotSubFooterJssStyle, getComponentCss$m as getSpinnerCss, getComponentCss$k as getStepperHorizontalCss, getComponentCss$l as getStepperHorizontalItemCss, getComponentCss$j as getSwitchCss, getComponentCss$i as getTableBodyCss, getComponentCss$g as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$f as getTableHeadCellCss, getComponentCss$d as getTableHeadCss, getComponentCss$e as getTableHeadRowCss, getComponentCss$c as getTableRowCss, getComponentCss$b as getTabsBarCss, getComponentCss$9 as getTabsCss, getComponentCss$a as getTabsItemCss, getComponentCss$7 as getTagCss, getComponentCss$8 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };

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

@@ -3452,7 +3452,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"4.1.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/dialog-base.mjs

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import '../../provider.mjs';
+import { PButton } from '../components/button.wrapper.mjs';
+
+const DialogBase = ({ children, 
+// host,
+inert, containerClass, ariaAttributes, dismissable = false, header, footer, subFooter, }) => {
+    return (jsx("dialog", { inert: inert, tabIndex: -1, ...(ariaAttributes ?? {}), children: jsx("div", { className: "scroller", children: jsxs("div", { className: containerClass, children: [dismissable && (jsx(PButton, { className: "dismiss", variant: "secondary", compact: true, type: "button", hideLabel: true, icon: "close", children: `Dismiss ${containerClass}` })), header, children, footer, subFooter] }) }) }));
+};
+
+export { DialogBase };

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

@@ -1,11 +1,10 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getFlyoutCss as getComponentCss$V } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
-import { PButton } from '../components/button.wrapper.mjs';
+import { DialogBase } from './dialog-base.mjs';
 
 /**
  * @slot {"name": "header", "description": "Renders a sticky header section above the content area." }
@@ -30,11 +29,11 @@ class DSRFlyout extends Component {
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
         const style = minifyCss(getComponentCss$V(this.props.open, this.props.background, this.props.backdrop, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { tabIndex: -1, ...parseAndGetAriaAttributes({
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase, { host: null, dismissable: true, containerClass: "flyout", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsx("slot", { name: "footer" }) : undefined, subFooter: hasSubFooter ? jsx("slot", { name: "sub-footer" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...{ 'aria-label': hasHeader ? namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children : 'Flyout' },
                                 ...parseAndGetAriaAttributes(this.props.aria),
-                            }), children: jsx("div", { className: "scroller", children: jsxs("div", { className: "flyout", children: [jsx(PButton, { className: "dismiss", variant: "secondary", compact: true, type: "button", hideLabel: true, icon: "close", children: "Dismiss flyout" }), hasHeader && jsx("slot", { name: "header" }), jsx("slot", {}), hasFooter && jsx("slot", { name: "footer" }), hasSubFooter && jsx("slot", { name: "sub-footer" })] }) }) })] }), this.props.children] }));
+                            }), children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }
 

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

@@ -1,11 +1,10 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getModalCss as getComponentCss$C } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
-import { PButton } from '../components/button.wrapper.mjs';
+import { DialogBase } from './dialog-base.mjs';
 
 /**
  * @slot {"name": "header", "description": "Renders a header section above the content area." }
@@ -28,11 +27,11 @@ class DSRModal extends Component {
         this.props.disableCloseButton ? false : this.props.dismissButton;
         // TODO: why do we validate only when opened?
         const style = minifyCss(getComponentCss$C(this.props.open, this.props.background, this.props.backdrop, this.props.fullscreen, this.props.dismissButton, hasHeader, hasFooter));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { inert: !this.props.open, tabIndex: -1, ...parseAndGetAriaAttributes({
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase, { host: null, inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "modal", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsx("slot", { name: "footer" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...(hasHeader && { 'aria-label': this.props.ariaLabel }),
                                 ...parseAndGetAriaAttributes(this.props.aria),
-                            }), children: jsx("div", { className: "scroller", children: jsxs("div", { className: "modal", children: [this.props.dismissButton && (jsx(PButton, { className: "dismiss", variant: "secondary", compact: true, type: "button", hideLabel: true, icon: "close", children: "Dismiss modal" })), hasHeader && jsx("slot", { name: "header" }), jsx("slot", {}), hasFooter && jsx("slot", { name: "footer" })] }) }) })] }), this.props.children] }));
+                            }), children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }
 

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

@@ -1,11 +1,10 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getSheetCss as getComponentCss$n } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
-import { PButton } from '../components/button.wrapper.mjs';
+import { DialogBase } from './dialog-base.mjs';
 
 /**
  * @slot {"name": "header", "description": "Renders a header section above the content area." }
@@ -23,13 +22,13 @@ class DSRSheet extends Component {
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         if (this.props.open) ;
         const style = minifyCss(getComponentCss$n(this.props.open, this.props.background, this.props.dismissButton));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { inert: !this.props.open, tabIndex: -1, ...parseAndGetAriaAttributes({
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase, { host: null, inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "sheet", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...(hasHeader && {
                                     'aria-label': namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0 && namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children,
                                 }),
                                 ...parseAndGetAriaAttributes(this.props.aria),
-                            }), children: jsx("div", { className: "scroller", children: jsxs("div", { className: "sheet", children: [this.props.dismissButton && (jsx(PButton, { className: "dismiss", variant: "secondary", compact: true, type: "button", hideLabel: true, icon: "close", children: "Dismiss sheet" })), hasHeader && jsx("slot", { name: "header" }), jsx("slot", {})] }) }) })] }), this.props.children] }));
+                            }), children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/lib/dsr-components/dialog-base.d.ts

@@ -0,0 +1,22 @@
+import type { AriaAttributes } from '../types';
+import type { FC } from 'react';
+import type { JSX } from 'react';
+type DialogBaseProps = {
+    children?: JSX.Element;
+    host: HTMLElement;
+    inert?: boolean;
+    dialogRef?: (el: HTMLDialogElement) => void;
+    scrollerRef?: (el: HTMLDivElement) => void;
+    containerClass: 'flyout' | 'modal' | 'sheet';
+    onCancel?: (e: Event) => void;
+    onClick?: (e: MouseEvent) => void;
+    onTransitionEnd?: (e: TransitionEvent) => void;
+    onDismiss?: () => void;
+    ariaAttributes?: AriaAttributes;
+    dismissable?: boolean;
+    header?: JSX.Element;
+    footer?: JSX.Element;
+    subFooter?: JSX.Element;
+};
+export declare const DialogBase: FC<DialogBaseProps>;
+export {};