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

package/CHANGELOG.md

@@ -14,6 +14,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.2.0-rc.4] - 2026-06-10
+
+### Fixed
+
+- `Radio Group`: Prevent clicks on `label-after` slot from bubbling to the host element
+  ([#4477](https://github.com/porsche-design-system/porsche-design-system/pull/4477))
+- `Flyout`, `Modal`, `Sheet`: Prevent dialog elements from reserving layout space in closed state when placed within a
+  new stacking context ([#4494](https://github.com/porsche-design-system/porsche-design-system/pull/4494))
+
 ## [4.2.0-rc.3] - 2026-06-09
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "4.2.0-rc.3",
+  "version": "4.2.0-rc.4",
   "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.3"
+    "@porsche-design-system/components-js": "4.2.0-rc.4"
   },
   "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.3"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.4"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -5899,15 +5899,20 @@ const getFunctionalComponentRequiredStyles = () => {
 };
 
 const getFunctionalComponentLabelAfterStyles = () => {
+    const labelAfterStyles = {
+        display: 'inline-block',
+        verticalAlign: 'top',
+        '&::slotted(*)': {
+            ...addImportantToEachRule({
+                marginInlineStart: ref(spacingStaticXs),
+            }),
+        },
+    };
     return {
-        'slot[name="label-after"]': {
-            display: 'inline-block',
-            verticalAlign: 'top',
-            '&::slotted(*)': {
-                ...addImportantToEachRule({
-                    marginInlineStart: ref(spacingStaticXs),
-                }),
-            },
+        'slot[name="label-after"]': labelAfterStyles,
+        '.label-after': {
+            display: labelAfterStyles.display,
+            verticalAlign: labelAfterStyles.verticalAlign,
         },
     };
 };
@@ -6061,18 +6066,14 @@ const getFunctionalComponentDialogBaseStyles = (isVisible, backdrop = 'blur') =>
     };
 };
 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)
+    all: 'unset',
+    position: 'fixed',
+    inset: 0,
+    maxWidth: '100dvw',
+    maxHeight: '100dvh',
+    overflow: 'hidden',
+    display: 'block',
+    outline: 0, // 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)
     },
@@ -6081,12 +6082,15 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
     const isBackdropBlur = backdrop === 'blur';
     const duration = isVisible ? 'long' : 'moderate';
     const easing = isVisible ? 'in' : 'out';
+    const delay = ref(cssVariableTransitionDuration, isVisible ? '0s' : motionDurationMap[duration]);
     // as soon as all browsers are supporting `allow-discrete`, visibility transition shouldn't be necessary anymore
-    const transition = `visibility 0s linear ${ref(cssVariableTransitionDuration, isVisible ? '0s' : motionDurationMap[duration])}, ${getTransition('background-color', duration, easing)}, ${getTransition('-webkit-backdrop-filter', duration, easing)}, ${getTransition('backdrop-filter', duration, easing)}`;
+    const transition = `visibility 0s linear ${delay}, width 0s linear ${delay}, height 0s linear ${delay}, ${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
             ? {
+                width: '100dvw',
+                height: '100dvh',
                 visibility: 'inherit',
                 pointerEvents: 'auto',
                 background: ref(colorBackdrop),
@@ -6096,6 +6100,12 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
                 }),
             }
             : {
+                // When the dialog lives inside a new stacking context, it is no longer promoted to the #top-layer while closed.
+                // In that case it can reserve additional space and break the surrounding layout, so width and height are collapsed to zero.
+                // A future improvement could use `transition-behavior: allow-discrete` to toggle between `display: none` and `block`,
+                // but browser support is still insufficient and behaves inconsistently in Safari and Firefox.
+                width: '0px',
+                height: '0px',
                 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',

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.3"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.4"}]` // 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/label.cjs

@@ -10,7 +10,7 @@ const Label = ({ hasLabel, hasDescription, children,
 label, tag, description, htmlFor, isRequired, isLoading, isDisabled, stopClickPropagation, }) => {
     splitChildren.splitChildren(children);
     const TagType = tag || 'label';
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasLabel && (jsxRuntime.jsxs("div", { className: "label-wrapper", children: [jsxRuntime.jsx(TagType, { className: "label", id: utilsEntry.labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, htmlFor: htmlFor, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label || jsxRuntime.jsx("slot", { name: "label" }), isRequired /* && !isParentFieldsetRequired(host) */ && jsxRuntime.jsx(required.Required, {})] }) }), jsxRuntime.jsx("slot", { name: "label-after" })] })), hasDescription && (jsxRuntime.jsx("span", { className: "label", id: utilsEntry.descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsxRuntime.jsx("slot", { name: "description" }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasLabel && (jsxRuntime.jsxs("div", { className: "label-wrapper", children: [jsxRuntime.jsx(TagType, { className: "label", id: utilsEntry.labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, htmlFor: htmlFor, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label || jsxRuntime.jsx("slot", { name: "label" }), isRequired /* && !isParentFieldsetRequired(host) */ && jsxRuntime.jsx(required.Required, {})] }) }), stopClickPropagation ? (jsxRuntime.jsx("span", { className: "label-after", children: jsxRuntime.jsx("slot", { name: "label-after" }) })) : (jsxRuntime.jsx("slot", { name: "label-after" }))] })), hasDescription && (jsxRuntime.jsx("span", { className: "label", id: utilsEntry.descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsxRuntime.jsx("slot", { name: "description" }) }))] }));
 };
 
 exports.Label = Label;

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.3"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.4"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -5897,15 +5897,20 @@ const getFunctionalComponentRequiredStyles = () => {
 };
 
 const getFunctionalComponentLabelAfterStyles = () => {
+    const labelAfterStyles = {
+        display: 'inline-block',
+        verticalAlign: 'top',
+        '&::slotted(*)': {
+            ...addImportantToEachRule({
+                marginInlineStart: ref(spacingStaticXs),
+            }),
+        },
+    };
     return {
-        'slot[name="label-after"]': {
-            display: 'inline-block',
-            verticalAlign: 'top',
-            '&::slotted(*)': {
-                ...addImportantToEachRule({
-                    marginInlineStart: ref(spacingStaticXs),
-                }),
-            },
+        'slot[name="label-after"]': labelAfterStyles,
+        '.label-after': {
+            display: labelAfterStyles.display,
+            verticalAlign: labelAfterStyles.verticalAlign,
         },
     };
 };
@@ -6059,18 +6064,14 @@ const getFunctionalComponentDialogBaseStyles = (isVisible, backdrop = 'blur') =>
     };
 };
 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)
+    all: 'unset',
+    position: 'fixed',
+    inset: 0,
+    maxWidth: '100dvw',
+    maxHeight: '100dvh',
+    overflow: 'hidden',
+    display: 'block',
+    outline: 0, // 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)
     },
@@ -6079,12 +6080,15 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
     const isBackdropBlur = backdrop === 'blur';
     const duration = isVisible ? 'long' : 'moderate';
     const easing = isVisible ? 'in' : 'out';
+    const delay = ref(cssVariableTransitionDuration, isVisible ? '0s' : motionDurationMap[duration]);
     // as soon as all browsers are supporting `allow-discrete`, visibility transition shouldn't be necessary anymore
-    const transition = `visibility 0s linear ${ref(cssVariableTransitionDuration, isVisible ? '0s' : motionDurationMap[duration])}, ${getTransition('background-color', duration, easing)}, ${getTransition('-webkit-backdrop-filter', duration, easing)}, ${getTransition('backdrop-filter', duration, easing)}`;
+    const transition = `visibility 0s linear ${delay}, width 0s linear ${delay}, height 0s linear ${delay}, ${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
             ? {
+                width: '100dvw',
+                height: '100dvh',
                 visibility: 'inherit',
                 pointerEvents: 'auto',
                 background: ref(colorBackdrop),
@@ -6094,6 +6098,12 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
                 }),
             }
             : {
+                // When the dialog lives inside a new stacking context, it is no longer promoted to the #top-layer while closed.
+                // In that case it can reserve additional space and break the surrounding layout, so width and height are collapsed to zero.
+                // A future improvement could use `transition-behavior: allow-discrete` to toggle between `display: none` and `block`,
+                // but browser support is still insufficient and behaves inconsistently in Safari and Firefox.
+                width: '0px',
+                height: '0px',
                 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',

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.3"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.4"}]` // 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/label.mjs

@@ -8,7 +8,7 @@ const Label = ({ hasLabel, hasDescription, children,
 label, tag, description, htmlFor, isRequired, isLoading, isDisabled, stopClickPropagation, }) => {
     splitChildren(children);
     const TagType = tag || 'label';
-    return (jsxs(Fragment, { children: [hasLabel && (jsxs("div", { className: "label-wrapper", children: [jsx(TagType, { className: "label", id: labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, htmlFor: htmlFor, children: jsxs(Fragment, { children: [label || jsx("slot", { name: "label" }), isRequired /* && !isParentFieldsetRequired(host) */ && jsx(Required, {})] }) }), jsx("slot", { name: "label-after" })] })), hasDescription && (jsx("span", { className: "label", id: descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsx("slot", { name: "description" }) }))] }));
+    return (jsxs(Fragment, { children: [hasLabel && (jsxs("div", { className: "label-wrapper", children: [jsx(TagType, { className: "label", id: labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, htmlFor: htmlFor, children: jsxs(Fragment, { children: [label || jsx("slot", { name: "label" }), isRequired /* && !isParentFieldsetRequired(host) */ && jsx(Required, {})] }) }), stopClickPropagation ? (jsx("span", { className: "label-after", children: jsx("slot", { name: "label-after" }) })) : (jsx("slot", { name: "label-after" }))] })), hasDescription && (jsx("span", { className: "label", id: descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsx("slot", { name: "description" }) }))] }));
 };
 
 export { Label };

package/ssr/esm/lib/dsr-components/label.d.ts

@@ -14,8 +14,8 @@ type LabelProps = {
     isLoading?: boolean;
     isDisabled?: boolean;
     /**
-     * If true, clicking the label will not bubble to the host element,
-     * preventing duplicate handling on host click listeners.
+     * If true, clicks on the label use `htmlFor` only and do not bubble to the host.
+     * Clicks on the `label-after` slot are also stopped so they do not trigger host handlers (e.g. radio selection).
      */
     stopClickPropagation?: boolean;
 };