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

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

@@ -25,12 +25,18 @@ class DSRFlyout extends react.Component {
     hasHeader;
     hasFooter;
     hasSubFooter;
+    topLayer = utilsEntry.createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => utilsEntry.showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         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));
+        const style = minifyCss.minifyCss(stylesEntry.getFlyoutCss(this.props.open, this.props.background, this.props.backdrop, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior, this.props.fullscreen));
         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' },

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

@@ -22,6 +22,12 @@ class DSRModal extends react.Component {
     footer;
     hasHeader;
     hasFooter;
+    topLayer = utilsEntry.createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => utilsEntry.showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;

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

@@ -19,6 +19,12 @@ class DSRSheet extends react.Component {
     dialog;
     scroller;
     hasHeader;
+    topLayer = utilsEntry.createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => utilsEntry.showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;

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

@@ -4130,12 +4130,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';
 
@@ -4683,6 +4701,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',
                     },
@@ -4697,10 +4716,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`,
-                    },
+                    }),
                 },
             },
         }, {
@@ -6091,6 +6110,7 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
                 height: '100dvh',
                 visibility: 'inherit',
                 pointerEvents: 'auto',
+                overlay: 'auto',
                 background: ref(colorBackdrop),
                 ...(isBackdropBlur && {
                     WebkitBackdropFilter: ref(blurFrosted),
@@ -6106,14 +6126,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) => {
@@ -6141,13 +6161,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',
@@ -6156,8 +6180,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 = () => {
@@ -6175,13 +6203,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)}`,
@@ -7292,7 +7320,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({
@@ -7343,35 +7371,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',
@@ -8165,7 +8207,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
@@ -8185,6 +8227,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',
@@ -9237,7 +9280,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%',
@@ -9245,6 +9288,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/esm/components/dist/utils/esm/utils-entry.mjs

@@ -1,3 +1,24 @@
+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++) {
@@ -3189,26 +3210,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');
@@ -3455,6 +3480,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';
@@ -3463,7 +3500,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);
@@ -3484,6 +3521,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';
 
@@ -4106,4 +4220,4 @@ const getTextTagType = (host, tag) => {
     return tag;
 };
 
-export { AI_TAG_TRANSLATIONS, DISPLAY_TAGS, HEADING_TAGS, ItemType, TEXT_TAGS, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, consoleError$1 as consoleError, createPaginationItems, createRange, crestSize, descriptionId, displaySizeToTagMap, getAiTagTranslation, getBannerAriaAttributes, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getComboboxAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getInlineNotificationAriaAttributes, getListboxAriaAttributes, getSanitizedActiveTabIndex, getSegmentedControlItemAriaAttributes, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isSortable, isStateCompleteOrWarning, isUrl, labelId, mergeInputNativeAria, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, setAriaIDREF, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };
+export { AI_TAG_TRANSLATIONS, DISPLAY_TAGS, HEADING_TAGS, ItemType, TEXT_TAGS, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, consoleError$1 as consoleError, createPaginationItems, createRange, createTopLayerController, crestSize, descriptionId, displaySizeToTagMap, getAiTagTranslation, getBannerAriaAttributes, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getComboboxAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getInlineNotificationAriaAttributes, getListboxAriaAttributes, getMaxTransitionDurationMs, getSanitizedActiveTabIndex, getSegmentedControlItemAriaAttributes, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isSortable, isStateCompleteOrWarning, isUrl, labelId, mergeInputNativeAria, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, setAriaIDREF, showDialog, supportsConstructableStylesheets, supportsNativePopover, supportsOverlayTransition, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };

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

@@ -5,23 +5,23 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.mjs';
 import { DSRFlyout } from '../dsr-components/flyout.mjs';
 
-const PFlyout = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', background = 'canvas', disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', className, children, ...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, children, ...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,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRFlyout, { aria, backdrop, background, disableBackdropClick, footerBehavior, open, position, children })),
+                children: (jsx(DSRFlyout, { aria, backdrop, background, disableBackdropClick, footerBehavior, fullscreen, open, position, children })),
             }
             : {
                 children,

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getBannerCss as getComponentCss$18 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getBannerAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { createTopLayerController, getBannerAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { NotificationBase } from './notification-base.mjs';
 import { PButton } from '../components/button.wrapper.mjs';
 
@@ -21,6 +21,12 @@ class DSRBanner extends Component {
     refDismiss;
     hasHeadingSlot;
     hasDescriptionSlot;
+    topLayer = 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(this.props.children);
         const hasHeadingSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0;

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

@@ -3,7 +3,7 @@ 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 { createTopLayerController, parseAndGetAriaAttributes, showDialog } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { DialogBase } from './dialog-base.mjs';
 
 /**
@@ -23,12 +23,18 @@ class DSRFlyout extends Component {
     hasHeader;
     hasFooter;
     hasSubFooter;
+    topLayer = createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         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));
+        const style = minifyCss(getComponentCss$V(this.props.open, this.props.background, this.props.backdrop, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior, this.props.fullscreen));
         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' },

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

@@ -3,7 +3,7 @@ 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 { createTopLayerController, parseAndGetAriaAttributes, showDialog } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { DialogBase } from './dialog-base.mjs';
 
 /**
@@ -20,6 +20,12 @@ class DSRModal extends Component {
     footer;
     hasHeader;
     hasFooter;
+    topLayer = createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;

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

@@ -3,7 +3,7 @@ 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 { createTopLayerController, parseAndGetAriaAttributes, showDialog } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { DialogBase } from './dialog-base.mjs';
 
 /**
@@ -17,6 +17,12 @@ class DSRSheet extends Component {
     dialog;
     scroller;
     hasHeader;
+    topLayer = createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;