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

package/CHANGELOG.md

@@ -14,6 +14,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.2.0-rc.5] - 2026-06-12
+
+### Added
+
+- `Flyout`: Prop `fullscreen` to stretch the flyout to the full viewport width with squared corners, useful for smaller
+  viewports ([#4498](https://github.com/porsche-design-system/porsche-design-system/pull/4498))
+
+### Fixed
+
+- `Flyout`, `Modal`, `Sheet` ([#4498](https://github.com/porsche-design-system/porsche-design-system/pull/4498)):
+  - Nested dialog elements no longer cause rendering issues in Chromium
+  - Keep the dialog element on the `#top-layer` during the fade-out animation in Safari and Firefox, so closing
+    (especially nested) dialogs no longer drop behind surrounding content
+- `Banner`: Keep the popover on the `#top-layer` during the fade-out animation in Safari and Firefox, so it no longer
+  drops behind surrounding content while closing
+  ([#4498](https://github.com/porsche-design-system/porsche-design-system/pull/4498))
+
 ## [4.2.0-rc.4] - 2026-06-10
 
 ### Fixed

package/cjs/lib/components/flyout.wrapper.cjs

@@ -6,16 +6,16 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, backdrop = 'blur', background = 'canvas', disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', className, ...rest }, ref) => {
+const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, backdrop = 'blur', background = 'canvas', disableBackdropClick = false, footerBehavior = 'sticky', fullscreen = false, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     hooks.useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = hooks.usePrefix('p-flyout');
-    const propsToSync = [aria, backdrop, background, disableBackdropClick, footerBehavior, open, position];
+    const propsToSync = [aria, backdrop, background, disableBackdropClick, footerBehavior, fullscreen, open, position];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'backdrop', 'background', 'disableBackdropClick', 'footerBehavior', 'open', 'position'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'backdrop', 'background', 'disableBackdropClick', 'footerBehavior', 'fullscreen', 'open', 'position'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/flyout.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition } from '../types';
+import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, BreakpointCustomizable, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition } from '../types';
 export type PFlyoutProps = BaseProps & {
     /**
      * Sets ARIA attributes.
@@ -25,6 +25,11 @@ export type PFlyoutProps = BaseProps & {
      * @default 'sticky'
      */
     footerBehavior?: FlyoutFooterBehavior;
+    /**
+     * If true the flyout stretches to the full viewport width with squared corners. Useful for smaller viewports where the flyout would otherwise fill the screen but still show rounded corners.
+     * @default false
+     */
+    fullscreen?: BreakpointCustomizable<boolean>;
     /**
      * Emitted when the component requests to be dismissed.
      */
@@ -73,6 +78,11 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<imp
      * @default 'sticky'
      */
     footerBehavior?: FlyoutFooterBehavior;
+    /**
+     * If true the flyout stretches to the full viewport width with squared corners. Useful for smaller viewports where the flyout would otherwise fill the screen but still show rounded corners.
+     * @default false
+     */
+    fullscreen?: BreakpointCustomizable<boolean>;
     /**
      * Emitted when the component requests to be dismissed.
      */

package/esm/lib/components/flyout.wrapper.mjs

@@ -4,16 +4,16 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFlyout = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', background = 'canvas', disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', className, ...rest }, ref) => {
+const PFlyout = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', background = 'canvas', disableBackdropClick = false, footerBehavior = 'sticky', fullscreen = false, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = usePrefix('p-flyout');
-    const propsToSync = [aria, backdrop, background, disableBackdropClick, footerBehavior, open, position];
+    const propsToSync = [aria, backdrop, background, disableBackdropClick, footerBehavior, fullscreen, open, position];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'backdrop', 'background', 'disableBackdropClick', 'footerBehavior', 'open', 'position'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'backdrop', 'background', 'disableBackdropClick', 'footerBehavior', 'fullscreen', 'open', 'position'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/package.json

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

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

@@ -4132,12 +4132,30 @@ 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.4"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.5"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
 };
 
+// Single source of truth for the two CSS feature queries behind the "keep on #top-layer during fade-out" capability,
+// shared by the JS detection (`supportsOverlayTransition`) and the CSS `@supports` wrapper
+// (`overlayTransitionSupportsQuery`) so the two can never drift.
+const overlayFeature = 'overlay: auto';
+const allowDiscreteFeature = 'transition-behavior: allow-discrete';
+/**
+ * Wraps JSS styles in `@supports (overlay: auto) and (transition-behavior: allow-discrete)`, kept in sync with
+ * `supportsOverlayTransition()`. Use it for styles that should only apply where the dialog/popover can stay on the
+ * `#top-layer` during its fade-out (Chromium); other browsers defer the native hide instead (see
+ * `createTopLayerController`).
+ *
+ * @param {JssStyle} style - The styles to apply only when the `overlay` transition is supported.
+ * @returns {JssStyle} The `@supports`-wrapped styles.
+ */
+const overlayTransitionSupportsQuery = (style) => {
+    return { [`@supports (${overlayFeature}) and (${allowDiscreteFeature})`]: style };
+};
+
 const headerSlot = 'header';
 const anchorSlot = 'anchor';
 
@@ -4685,6 +4703,7 @@ const getComponentCss$18 = (isOpen, position, state, hasDismissButton, hasHeadin
                     })),
                     left: '50vw',
                     width: `min(calc(100vw - 2 * ${ref(cssVarInsetX, gridExtendedOffsetBase)}),${ref(cssVarMaxWidth, '100ch')})`,
+                    overlay: 'none',
                     '&:popover-open': {
                         overlay: 'auto',
                     },
@@ -4699,10 +4718,10 @@ const getComponentCss$18 = (isOpen, position, state, hasDismissButton, hasHeadin
                         transform: 'translate3d(-50%,0,0)',
                     }),
                     transition,
-                    // during transition the element will be removed from top-layer immediately, resulting in other elements laying over (as of Mai 2024 only Chrome is fixed by this)
-                    '@supports (transition-behavior: allow-discrete)': {
+                    // keep the popover on the #top-layer while the fade-out runs (Chromium only; see `overlayTransitionSupportsQuery`)
+                    ...overlayTransitionSupportsQuery({
                         transition: `${transition},${getTransition('overlay', duration, easing)} allow-discrete`,
-                    },
+                    }),
                 },
             },
         }, {
@@ -6093,6 +6112,7 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
                 height: '100dvh',
                 visibility: 'inherit',
                 pointerEvents: 'auto',
+                overlay: 'auto',
                 background: ref(colorBackdrop),
                 ...(isBackdropBlur && {
                     WebkitBackdropFilter: ref(blurFrosted),
@@ -6108,14 +6128,14 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
                 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
+                overlay: 'none',
                 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)': {
+        // keep the dialog on the #top-layer while the fade-out runs (Chromium only; see `overlayTransitionSupportsQuery`)
+        ...overlayTransitionSupportsQuery({
             transition: `${transition}, ${getTransition('overlay', duration, easing)} allow-discrete`,
-        },
+        }),
     };
 };
 const getScrollerJssStyle = (position) => {
@@ -6143,13 +6163,17 @@ const getScrollerJssStyle = (position) => {
         overscrollBehaviorY: 'none',
         // TODO: check if smooth scrolling on iOS is given?
         background: background.light,
+        // ensure a translate3d style is always applied on .scroller and .modal/.flyout/.sheet to create a new stacking
+        // context and prevent a Chromium paint bug: when a dialog element is nested inside another (e.g. `p-modal` within
+        // `p-flyout`)
+        transform: 'translate3d(0,0,0)',
     };
 };
 const dialogBorderRadius = ref(radius3Xl);
 const dialogPaddingTop = ref(spacingFluidMd$1);
 const dialogPaddingBottom = `calc(${dialogBorderRadius} + ${ref(spacingFluidMd$1)})`;
 const dialogPaddingInline = ref(spacingFluidLg);
-const dialogGridJssStyle = (clipPath = 'none') => {
+const dialogGridJssStyle = () => {
     return {
         position: 'relative',
         display: 'grid',
@@ -6158,8 +6182,12 @@ const dialogGridJssStyle = (clipPath = 'none') => {
         paddingTop: dialogPaddingTop,
         paddingBottom: dialogPaddingBottom,
         alignContent: 'flex-start',
+        // Consumers set their own `clip-path` next to their corner `border-radius` (e.g. `inset(0 round …)`).
         // `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,
+        // Chromium paint bug: when a dialog element is nested inside another (e.g. `p-modal` within `p-flyout`),
+        // the inner dialog's grid content fails to render. Forcing a new compositing layer via `translate3d`
+        // triggers a repaint and fixes it. Re-check periodically; remove once the upstream Chromium bug is resolved.
+        transform: 'translate3d(0,0,0)',
     };
 };
 const getDialogColorJssStyle = () => {
@@ -6177,13 +6205,13 @@ const getDialogTransitionJssStyle = (isVisible, slideIn) => {
         ...(isVisible
             ? {
                 opacity: 1,
-                transform: 'initial',
+                transform: 'translate3d(0,0,0)',
             }
             : {
                 opacity: 0,
-                transform: slideIn === '^' ? 'translateY(25vh)' : `translateX(${slideIn === '>' ? '-' : ''}100%)`,
+                transform: slideIn === '^' ? 'translate3d(0,25vh,0)' : `translate3d(${slideIn === '>' ? '-' : ''}100%,0,0)`,
                 '&:dir(rtl)': {
-                    transform: slideIn === '^' ? 'translateY(25vh)' : `translateX(${slideIn === '>' ? '' : '-'}100%)`,
+                    transform: slideIn === '^' ? 'translate3d(0,25vh,0)' : `translate3d(${slideIn === '>' ? '' : '-'}100%,0,0)`,
                 },
             }),
         transition: `${getTransition('opacity', duration, easing)}, ${getTransition('transform', duration, easing)}`,
@@ -7294,7 +7322,7 @@ const cssVarRefPaddingBottom$2 = '--ref-p-flyout-pb';
  * @css-variable {"name": "--ref-p-flyout-px", "description": "Exposes the internally used padding-inline of the Flyout as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the full horizontal size of the Flyout."}
  */
 const cssVarRefPaddingInline$2 = '--ref-p-flyout-px';
-const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, hasFooter, hasSubFooter, footerBehavior) => {
+const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, fullscreen) => {
     const isPositionStart = position === 'start';
     const isFooterFixed = footerBehavior === 'fixed';
     return getCss({
@@ -7345,35 +7373,49 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
             },
         },
         flyout: {
-            ...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
-            ),
+            ...dialogGridJssStyle(),
             ...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
+            ...buildResponsiveStyles(fullscreen, (fullscreenValue) => fullscreenValue
                 ? {
-                    borderStartEndRadius: dialogBorderRadius,
-                    borderEndEndRadius: dialogBorderRadius,
-                    ...forcedColorsMediaQuery({
-                        borderInlineEnd: '2px solid CanvasText',
-                    }),
+                    // fullscreen spans the whole viewport width, so corners are squared and corner clipping is disabled
+                    width: '100dvw',
+                    minWidth: 'auto',
+                    maxWidth: 'none',
+                    borderRadius: 0,
+                    clipPath: 'none',
+                    // the flyout touches both inline edges, so the inner-side HCM border is no longer needed
+                    '&:dir(rtl)': {
+                        clipPath: 'none',
+                    },
                 }
                 : {
-                    borderStartStartRadius: dialogBorderRadius,
-                    borderEndStartRadius: dialogBorderRadius,
-                    // TODO: Fix needs to be implemented for Fullscreen (which is not available as prop for Flyout yet)
-                    ...forcedColorsMediaQuery({
-                        borderInlineStart: '2px solid CanvasText',
-                    }),
+                    width: ref(cssVariableWidth$2, 'auto'),
+                    minWidth: '320px',
+                    maxWidth: '100vw',
+                    clipPath: 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
+                    // `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,
+                            borderEndEndRadius: dialogBorderRadius,
+                            ...forcedColorsMediaQuery({
+                                borderInlineEnd: '2px solid CanvasText',
+                            }),
+                        }
+                        : {
+                            borderStartStartRadius: dialogBorderRadius,
+                            borderEndStartRadius: dialogBorderRadius,
+                            ...forcedColorsMediaQuery({
+                                borderInlineStart: '2px solid CanvasText',
+                            }),
+                        }),
                 }),
             ...(isFooterFixed && {
                 gridTemplateRows: hasHeader ? 'auto 1fr auto' : '1fr',
@@ -8167,7 +8209,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
         },
         scroller: getScrollerJssStyle('fullscreen'),
         modal: {
-            ...dialogGridJssStyle(`inset(0 round ${dialogBorderRadius})`),
+            ...dialogGridJssStyle(),
             ...getDialogColorJssStyle(),
             ...getDialogTransitionJssStyle(isOpen, '^'),
             ...buildResponsiveStyles(fullscreen, (fullscreenValue) => fullscreenValue
@@ -8187,6 +8229,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     placeSelf: 'center',
                     margin: `${ref(cssVariableSpacingTop, 'clamp(16px, 10vh, 192px)')} ${gridExtendedOffsetBase} ${ref(cssVariableSpacingBottom, 'clamp(16px, 10vh, 192px)')}`, // horizontal margin is needed to ensure modal is placed on "Porsche Grid" when slotted content is wider than the viewport width
                     borderRadius: dialogBorderRadius,
+                    clipPath: `inset(0 round ${dialogBorderRadius})`, // non-fullscreen has rounded corners, so clip slotted content to them
                     ...forcedColorsMediaQuery({
                         outline: '2px solid CanvasText',
                         outlineOffset: '-2px',
@@ -9239,7 +9282,7 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
         },
         scroller: getScrollerJssStyle('fullscreen'),
         sheet: {
-            ...dialogGridJssStyle(`inset(0 round ${dialogBorderRadius} ${dialogBorderRadius} 0 0)`), // round top corners only
+            ...dialogGridJssStyle(),
             ...getDialogColorJssStyle(),
             ...getDialogTransitionJssStyle(isOpen, '^'),
             width: '100%',
@@ -9247,6 +9290,7 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
             marginBlockStart: ref(spacingFluidLg), // ensures minimal space at the top to visualize paper sheet like border top radius in case sheet becomes scrollable
             borderTopLeftRadius: dialogBorderRadius,
             borderTopRightRadius: dialogBorderRadius,
+            clipPath: `inset(0 round ${dialogBorderRadius} ${dialogBorderRadius} 0 0)`, // round top corners only
             ...forcedColorsMediaQuery({
                 borderTop: '2px solid CanvasText',
             }),

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

@@ -1,5 +1,26 @@
 'use strict';
 
+function getHTMLElement(element, selector) {
+    return element?.querySelector(selector);
+}
+
+const transformSelectorToDirectChildSelector = (selector) => selector
+    .split(',')
+    .map((part) => `:scope>${part}`)
+    .join();
+
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+function getDirectChildHTMLElement(element, selector) {
+    // querySelector(All) doesn't work with :scope pseudo class and comma separator in jsdom, yet
+    // https://github.com/jsdom/jsdom/issues/3141
+    // therefore we got a workaround so it works nicely when consumed from jsdom-polyfill package
+    return (transformSelectorToDirectChildSelector(selector)
+        .split(',')
+        .map((sel) => getHTMLElement(element, sel))
+        .filter((x) => x)[0] || null // comma separated selector might return null, so we have to filter
+    );
+}
+
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -3191,26 +3212,30 @@ const getTagNameWithoutPrefix = (host) => {
     return (tagNameWithoutPrefix || tagName); // return tagName as fallback for default tags
 };
 
-function getHTMLElement(element, selector) {
-    return element?.querySelector(selector);
-}
-
-const transformSelectorToDirectChildSelector = (selector) => selector
-    .split(',')
-    .map((part) => `:scope>${part}`)
-    .join();
-
-/* eslint-disable prefer-arrow/prefer-arrow-functions */
-function getDirectChildHTMLElement(element, selector) {
-    // querySelector(All) doesn't work with :scope pseudo class and comma separator in jsdom, yet
-    // https://github.com/jsdom/jsdom/issues/3141
-    // therefore we got a workaround so it works nicely when consumed from jsdom-polyfill package
-    return (transformSelectorToDirectChildSelector(selector)
-        .split(',')
-        .map((sel) => getHTMLElement(element, sel))
-        .filter((x) => x)[0] || null // comma separated selector might return null, so we have to filter
-    );
-}
+const parseCssTimeToMs = (value) => {
+    const trimmed = value.trim();
+    const num = Number.parseFloat(trimmed);
+    if (Number.isNaN(num)) {
+        return 0;
+    }
+    return trimmed.endsWith('ms') ? num : num * 1000; // seconds otherwise
+};
+/**
+ * Returns the longest `transition-duration` + `transition-delay` (in ms) across an element's computed transitions.
+ * Useful as a safety-net timeout when a `transitionend` event might not fire (e.g. with reduced motion or a 0 duration).
+ *
+ * @param {HTMLElement} element - The element to read the computed transition values from.
+ * @returns {number} The maximum combined duration and delay in milliseconds.
+ */
+const getMaxTransitionDurationMs = (element) => {
+    const { transitionDuration, transitionDelay } = getComputedStyle(element);
+    const durations = transitionDuration.split(',');
+    const delays = transitionDelay.split(',');
+    return durations.reduce((max, duration, index) => {
+        const total = parseCssTimeToMs(duration) + parseCssTimeToMs(delays[index] ?? '0s');
+        return total > max ? total : max;
+    }, 0);
+};
 
 const hasSpecificDirectChildTag = (host, tag) => {
     const el = getDirectChildHTMLElement(host, ':only-child');
@@ -3457,6 +3482,18 @@ hasWindow$1 &&
         }
     });
 
+const showDialog = (dialog, scrollArea) => {
+    // Must only be called when the dialog isn't already open and after the render cycle has finished (e.g. in
+    // `componentDidRender()`), so visibility states are ready and the dismiss button can be focused correctly.
+    // The "only when not already open" precondition is guaranteed by the caller (`createTopLayerController`'s `requestShow`
+    // guards with `!isShown()`), since `showModal()` throws if the dialog is already open.
+    scrollArea.scrollTo(0, 0); // reset scroll position each time dialog gets opened again
+    dialog.inert = true; // This will prevent the autofocus of focusable elements inside the dialog (e.g. close button) element which is conflicting with our transition
+    dialog.showModal(); // shows modal on `#top-layer`
+    dialog.inert = false; // Re-enable focus on dialog element
+    dialog.focus(); // set focus programmatically to dialog element to prevent transition bug in Safari
+};
+
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
 const hasDocument = typeof document !== 'undefined';
@@ -3465,7 +3502,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.4"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.5"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);
@@ -3486,6 +3523,83 @@ const supportsNativePopover = () => {
 const hasNativePopoverSupport = supportsNativePopover();
 // getter for easy mocking
 const getHasNativePopoverSupport = () => hasNativePopoverSupport;
+
+// Single source of truth for the two CSS feature queries behind the "keep on #top-layer during fade-out" capability,
+// shared by the JS detection (`supportsOverlayTransition`) and the CSS `@supports` wrapper
+// (`overlayTransitionSupportsQuery`) so the two can never drift.
+const overlayFeature = 'overlay: auto';
+const allowDiscreteFeature = 'transition-behavior: allow-discrete';
+/**
+ * Detects whether the browser can keep an element (e.g. a `dialog` or a `popover`) on the `#top-layer` during a
+ * fade-out animation via the `overlay` property combined with `transition-behavior: allow-discrete`.
+ *
+ * BOTH capabilities are required: `transition-behavior: allow-discrete` is now widely supported (e.g. Firefox), but the
+ * `overlay` property itself is Chromium-only. Firefox supports `allow-discrete` yet NOT `overlay`, so it would drop out
+ * of the `#top-layer` immediately when leaving it and fall back to a high `z-index` — which breaks as soon as an
+ * ancestor creates a new stacking context (e.g. `transform`/`isolation`, like a nested `p-modal` within `p-flyout`).
+ *
+ * For browsers lacking the `overlay` transition the element must be kept natively shown during the fade-out and only be
+ * removed from the `#top-layer` once the transition has finished (see `createTopLayerController`).
+ *
+ * @returns {boolean} `true` if both `overlay` and `transition-behavior: allow-discrete` are supported.
+ */
+const supportsOverlayTransition = () => typeof CSS !== 'undefined' && CSS.supports(overlayFeature) && CSS.supports(allowDiscreteFeature);
+
+// Extra time added on top of the computed transition duration before hiding. The timer starts in `requestHide()`,
+// one frame before the transition actually begins, so this buffer biases the hide slightly *after* the visual
+// transition ends — preventing the element from leaving the #top-layer too early and flickering.
+const HIDE_BUFFER_MS = 50;
+/**
+ * Creates a controller that manages an element's presence on the `#top-layer`, keeping it there during its fade-out
+ * animation in browsers that don't support the `overlay` transition (Safari/Firefox). On hide it defers the native
+ * removal (`dialog.close()` / `element.hidePopover()`) until the fade-out has finished, scheduled via a timeout derived
+ * from the element's computed transition duration. In Chromium the native removal happens immediately because the
+ * `overlay` + `allow-discrete` transition keeps the element on the `#top-layer` while it fades out.
+ *
+ * Both `requestShow` and `requestHide` are idempotent (guarded by `isShown`), so they can safely be called on every
+ * render. State is scoped to the controller instance, so no shared registry is required.
+ *
+ * @param {TopLayerOptions} options - Element-specific hooks (show state, show/hide actions, element getter).
+ * @returns {TopLayerController} The controller used to request show, request hide, and cancel.
+ */
+const createTopLayerController = (options) => {
+    const { getElement, isShown, show, hide } = options;
+    let hideTimer;
+    const cancel = () => {
+        if (hideTimer) {
+            clearTimeout(hideTimer);
+            hideTimer = undefined;
+        }
+    };
+    const requestShow = () => {
+        cancel(); // cancel any pending deferred hide first, so re-opening during fade-out wins (element may still be shown)
+        if (isShown()) {
+            return; // `showModal()` / `showPopover()` throw if the element is already shown
+        }
+        show();
+    };
+    const requestHide = () => {
+        if (!isShown()) {
+            return; // already hidden (or a deferred hide already completed)
+        }
+        if (supportsOverlayTransition()) {
+            hide(); // Chromium: `overlay` + `allow-discrete` keeps it on the #top-layer during the fade-out
+        }
+        else {
+            // Safari/Firefox: keep it on the real #top-layer during the fade-out and hide once the transition has finished.
+            cancel(); // drop any in-flight deferred hide before re-scheduling
+            const element = getElement();
+            const timeoutMs = (element ? getMaxTransitionDurationMs(element) : 0) + HIDE_BUFFER_MS;
+            hideTimer = setTimeout(() => {
+                cancel();
+                if (isShown()) {
+                    hide();
+                }
+            }, timeoutMs);
+        }
+    };
+    return { requestShow, requestHide, cancel };
+};
 const headerSlot = 'header';
 const anchorSlot = 'anchor';
 
@@ -4121,6 +4235,7 @@ exports.buildIconUrl = buildIconUrl;
 exports.consoleError = consoleError$1;
 exports.createPaginationItems = createPaginationItems;
 exports.createRange = createRange;
+exports.createTopLayerController = createTopLayerController;
 exports.crestSize = crestSize;
 exports.descriptionId = descriptionId;
 exports.displaySizeToTagMap = displaySizeToTagMap;
@@ -4140,6 +4255,7 @@ exports.getHasNativePopoverSupport = getHasNativePopoverSupport;
 exports.getHeadingTagType = getHeadingTagType;
 exports.getInlineNotificationAriaAttributes = getInlineNotificationAriaAttributes;
 exports.getListboxAriaAttributes = getListboxAriaAttributes;
+exports.getMaxTransitionDurationMs = getMaxTransitionDurationMs;
 exports.getSanitizedActiveTabIndex = getSanitizedActiveTabIndex;
 exports.getSegmentedControlItemAriaAttributes = getSegmentedControlItemAriaAttributes;
 exports.getStepperHorizontalIconName = getStepperHorizontalIconName;
@@ -4170,8 +4286,10 @@ exports.observedNodesMap = observedNodesMap;
 exports.parseAndGetAriaAttributes = parseAndGetAriaAttributes;
 exports.parseJSONAttribute = parseJSONAttribute;
 exports.setAriaIDREF = setAriaIDREF;
+exports.showDialog = showDialog;
 exports.supportsConstructableStylesheets = supportsConstructableStylesheets;
 exports.supportsNativePopover = supportsNativePopover;
+exports.supportsOverlayTransition = supportsOverlayTransition;
 exports.tempDiv = tempDiv;
 exports.tempIcon = tempIcon;
 exports.tempLabel = tempLabel;

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

@@ -7,23 +7,23 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var flyout = require('../dsr-components/flyout.cjs');
 
-const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, backdrop = 'blur', background = 'canvas', disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', className, children, ...rest }, ref) => {
+const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, backdrop = 'blur', background = 'canvas', disableBackdropClick = false, footerBehavior = 'sticky', fullscreen = false, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     hooks.useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = hooks.usePrefix('p-flyout');
-    const propsToSync = [aria, backdrop, background, disableBackdropClick, footerBehavior, open, position];
+    const propsToSync = [aria, backdrop, background, disableBackdropClick, footerBehavior, fullscreen, open, position];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'backdrop', 'background', 'disableBackdropClick', 'footerBehavior', 'open', 'position'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'backdrop', 'background', 'disableBackdropClick', 'footerBehavior', 'fullscreen', 'open', 'position'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(flyout.DSRFlyout, { aria, backdrop, background, disableBackdropClick, footerBehavior, open, position, children })),
+                children: (jsxRuntime.jsx(flyout.DSRFlyout, { aria, backdrop, background, disableBackdropClick, footerBehavior, fullscreen, open, position, children })),
             }
             : {
                 children,

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

@@ -23,6 +23,12 @@ class DSRBanner extends react.Component {
     refDismiss;
     hasHeadingSlot;
     hasDescriptionSlot;
+    topLayer = utilsEntry.createTopLayerController({
+        getElement: () => this.props.refPopover,
+        isShown: () => !!this.props.refPopover?.matches(':popover-open'),
+        show: () => this.props.refPopover?.showPopover(),
+        hide: () => this.props.refPopover?.hidePopover(),
+    });
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasHeadingSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0;