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

package/CHANGELOG.md

@@ -14,6 +14,32 @@ 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
+
+- `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/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.3",
+  "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.3"
+    "@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.3"}]` // 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`,
-                    },
+                    }),
                 },
             },
         }, {
@@ -5899,15 +5918,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 +6085,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,14 +6101,18 @@ 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',
+                overlay: 'auto',
                 background: ref(colorBackdrop),
                 ...(isBackdropBlur && {
                     WebkitBackdropFilter: ref(blurFrosted),
@@ -6096,16 +6120,22 @@ 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
+                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) => {
@@ -6133,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',
@@ -6148,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 = () => {
@@ -6167,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)}`,
@@ -7284,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({
@@ -7335,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',
@@ -8157,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
@@ -8177,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',
@@ -9229,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%',
@@ -9237,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',
             }),