@porsche-design-system/components-react 4.2.0-rc.2 → 4.2.0-rc.3

package/CHANGELOG.md

@@ -14,6 +14,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.2.0-rc.3] - 2026-06-09
+
+### Fixed
+
+- `Flyout`, `Modal`, `Sheet`: content no longer disappears in Chromium when many elements with a frosted
+  `backdrop-filter` (e.g. `p-tag`) are rendered
+  ([#4490](https://github.com/porsche-design-system/porsche-design-system/pull/4490))
+
 ## [4.2.0-rc.2] - 2026-06-04
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "4.2.0-rc.2",
+  "version": "4.2.0-rc.3",
   "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.2.0-rc.2"
+    "@porsche-design-system/components-js": "4.2.0-rc.3"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 35.0.0 <36.0.0",

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

@@ -4132,7 +4132,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.2.0-rc.2"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.3"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -6139,7 +6139,7 @@ const dialogBorderRadius = ref(radius3Xl);
 const dialogPaddingTop = ref(spacingFluidMd$1);
 const dialogPaddingBottom = `calc(${dialogBorderRadius} + ${ref(spacingFluidMd$1)})`;
 const dialogPaddingInline = ref(spacingFluidLg);
-const dialogGridJssStyle = () => {
+const dialogGridJssStyle = (clipPath = 'none') => {
     return {
         position: 'relative',
         display: 'grid',
@@ -6148,7 +6148,8 @@ const dialogGridJssStyle = () => {
         paddingTop: dialogPaddingTop,
         paddingBottom: dialogPaddingBottom,
         alignContent: 'flex-start',
-        overflow: 'clip',
+        // `overflow: clip` can't be used due to a Chromium bug that drops descendant backdrop-filter tiles (e.g. frosted p-tag); `clip-path` clips slotted content to the rounded corners without the faulty paint-containment box while keeping the scroll behavior intact
+        clipPath,
     };
 };
 const getDialogColorJssStyle = () => {
@@ -7334,11 +7335,20 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
             },
         },
         flyout: {
-            ...dialogGridJssStyle(),
+            ...dialogGridJssStyle(isPositionStart
+                ? `inset(0 round 0 ${dialogBorderRadius} ${dialogBorderRadius} 0)` // position 'start': round inline-end (right in LTR) corners only
+                : `inset(0 round ${dialogBorderRadius} 0 0 ${dialogBorderRadius})` // position 'end': round inline-start (left in LTR) corners only
+            ),
             ...getDialogColorJssStyle(),
             width: ref(cssVariableWidth$2, 'auto'),
             minWidth: '320px',
             maxWidth: '100vw',
+            // `clip-path` uses physical corners, so mirror for RTL to keep parity with the logical border*Radius below
+            '&:dir(rtl)': {
+                clipPath: isPositionStart
+                    ? `inset(0 round ${dialogBorderRadius} 0 0 ${dialogBorderRadius})`
+                    : `inset(0 round 0 ${dialogBorderRadius} ${dialogBorderRadius} 0)`,
+            },
             ...(isPositionStart
                 ? {
                     borderStartEndRadius: dialogBorderRadius,
@@ -8147,7 +8157,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
         },
         scroller: getScrollerJssStyle('fullscreen'),
         modal: {
-            ...dialogGridJssStyle(),
+            ...dialogGridJssStyle(`inset(0 round ${dialogBorderRadius})`),
             ...getDialogColorJssStyle(),
             ...getDialogTransitionJssStyle(isOpen, '^'),
             ...buildResponsiveStyles(fullscreen, (fullscreenValue) => fullscreenValue
@@ -8158,6 +8168,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     placeSelf: 'stretch',
                     margin: 0,
                     borderRadius: 0,
+                    clipPath: 'none', // fullscreen has square corners, so disable corner clipping
                 }
                 : {
                     width: ref(cssVariableWidth$1, 'auto'),
@@ -9218,7 +9229,7 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
         },
         scroller: getScrollerJssStyle('fullscreen'),
         sheet: {
-            ...dialogGridJssStyle(),
+            ...dialogGridJssStyle(`inset(0 round ${dialogBorderRadius} ${dialogBorderRadius} 0 0)`), // round top corners only
             ...getDialogColorJssStyle(),
             ...getDialogTransitionJssStyle(isOpen, '^'),
             width: '100%',

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

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

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

@@ -4130,7 +4130,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.2.0-rc.2"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.3"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -6137,7 +6137,7 @@ const dialogBorderRadius = ref(radius3Xl);
 const dialogPaddingTop = ref(spacingFluidMd$1);
 const dialogPaddingBottom = `calc(${dialogBorderRadius} + ${ref(spacingFluidMd$1)})`;
 const dialogPaddingInline = ref(spacingFluidLg);
-const dialogGridJssStyle = () => {
+const dialogGridJssStyle = (clipPath = 'none') => {
     return {
         position: 'relative',
         display: 'grid',
@@ -6146,7 +6146,8 @@ const dialogGridJssStyle = () => {
         paddingTop: dialogPaddingTop,
         paddingBottom: dialogPaddingBottom,
         alignContent: 'flex-start',
-        overflow: 'clip',
+        // `overflow: clip` can't be used due to a Chromium bug that drops descendant backdrop-filter tiles (e.g. frosted p-tag); `clip-path` clips slotted content to the rounded corners without the faulty paint-containment box while keeping the scroll behavior intact
+        clipPath,
     };
 };
 const getDialogColorJssStyle = () => {
@@ -7332,11 +7333,20 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
             },
         },
         flyout: {
-            ...dialogGridJssStyle(),
+            ...dialogGridJssStyle(isPositionStart
+                ? `inset(0 round 0 ${dialogBorderRadius} ${dialogBorderRadius} 0)` // position 'start': round inline-end (right in LTR) corners only
+                : `inset(0 round ${dialogBorderRadius} 0 0 ${dialogBorderRadius})` // position 'end': round inline-start (left in LTR) corners only
+            ),
             ...getDialogColorJssStyle(),
             width: ref(cssVariableWidth$2, 'auto'),
             minWidth: '320px',
             maxWidth: '100vw',
+            // `clip-path` uses physical corners, so mirror for RTL to keep parity with the logical border*Radius below
+            '&:dir(rtl)': {
+                clipPath: isPositionStart
+                    ? `inset(0 round ${dialogBorderRadius} 0 0 ${dialogBorderRadius})`
+                    : `inset(0 round 0 ${dialogBorderRadius} ${dialogBorderRadius} 0)`,
+            },
             ...(isPositionStart
                 ? {
                     borderStartEndRadius: dialogBorderRadius,
@@ -8145,7 +8155,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
         },
         scroller: getScrollerJssStyle('fullscreen'),
         modal: {
-            ...dialogGridJssStyle(),
+            ...dialogGridJssStyle(`inset(0 round ${dialogBorderRadius})`),
             ...getDialogColorJssStyle(),
             ...getDialogTransitionJssStyle(isOpen, '^'),
             ...buildResponsiveStyles(fullscreen, (fullscreenValue) => fullscreenValue
@@ -8156,6 +8166,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     placeSelf: 'stretch',
                     margin: 0,
                     borderRadius: 0,
+                    clipPath: 'none', // fullscreen has square corners, so disable corner clipping
                 }
                 : {
                     width: ref(cssVariableWidth$1, 'auto'),
@@ -9216,7 +9227,7 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
         },
         scroller: getScrollerJssStyle('fullscreen'),
         sheet: {
-            ...dialogGridJssStyle(),
+            ...dialogGridJssStyle(`inset(0 round ${dialogBorderRadius} ${dialogBorderRadius} 0 0)`), // round top corners only
             ...getDialogColorJssStyle(),
             ...getDialogTransitionJssStyle(isOpen, '^'),
             width: '100%',

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

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